/* Marketing + legal pages. Shares the palette with the app. */
:root { --bg:#f4f5f7; --bg-2:#fff; --bg-3:#eceef2; --fg:#16181d; --fg-2:#5b6170; --fg-3:#8d93a1; --line:#e3e6ec; --line-2:#d3d7df; --acc:#2b6b5a; --acc-2:#e6f1ed; --acc-fg:#fff; --r:14px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#111318; --bg-2:#181b22; --bg-3:#20242d; --fg:#e8eaef; --fg-2:#a4aab7; --fg-3:#737a89; --line:#262a34; --line-2:#333846; --acc:#6fc0a6; --acc-2:#1c2f2a; --acc-fg:#0d1512; } }
:root[data-theme="dark"] { --bg:#111318; --bg-2:#181b22; --bg-3:#20242d; --fg:#e8eaef; --fg-2:#a4aab7; --fg-3:#737a89; --line:#262a34; --line-2:#333846; --acc:#6fc0a6; --acc-2:#1c2f2a; --acc-fg:#0d1512; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 var(--font); -webkit-font-smoothing:antialiased; }
a { color:var(--acc); text-decoration:none; } a:hover { text-decoration:underline; }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }
header.top { position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
header.top .wrap { display:flex; align-items:center; gap:18px; height:64px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; color:var(--fg); }
.brand .mark { width:32px; height:32px; border-radius:9px; background:var(--acc); color:var(--acc-fg); display:grid; place-items:center; }
nav.links { display:flex; gap:18px; margin-left:auto; align-items:center; }
nav.links a { color:var(--fg-2); font-weight:500; } nav.links a:hover { color:var(--fg); text-decoration:none; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:10px; border:1px solid var(--line-2); background:var(--bg-2); color:var(--fg); font-weight:600; cursor:pointer; }
.btn:hover { background:var(--bg-3); text-decoration:none; }
.btn.primary { background:var(--acc); border-color:var(--acc); color:var(--acc-fg); }
.btn.primary:hover { filter:brightness(1.05); }
.btn.lg { padding:14px 24px; font-size:17px; }
.hero { padding:96px 0 64px; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.hero h1 { font-size:clamp(36px, 5vw, 58px); line-height:1.05; letter-spacing:-.02em; margin:0 0 18px; }
.hero p.lead { font-size:19px; color:var(--fg-2); margin:0 0 28px; max-width:34em; }
.hero .cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero .note { font-size:13.5px; color:var(--fg-3); margin-top:14px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--acc); background:var(--acc-2); padding:6px 12px; border-radius:999px; margin-bottom:18px; }
.panel { background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:0 20px 60px -30px rgba(0,0,0,.35); }
.mock { font-family:var(--mono); font-size:13px; }
.mock .row { display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:8px; }
.mock .row + .row { margin-top:4px; }
.mock .row.k { background:var(--bg-3); }
.mock .lock { color:var(--acc); }
.mock .dim { color:var(--fg-3); }
section { padding:64px 0; }
section h2 { font-size:clamp(26px, 3vw, 34px); letter-spacing:-.015em; margin:0 0 10px; }
section p.sub { color:var(--fg-2); margin:0 0 34px; max-width:44em; font-size:17px; }
.grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.card { background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:22px; }
.card .ico { width:38px; height:38px; border-radius:10px; background:var(--acc-2); color:var(--acc); display:grid; place-items:center; margin-bottom:14px; }
.card h3 { margin:0 0 8px; font-size:17px; }
.card p { margin:0; color:var(--fg-2); font-size:15px; }
.steps { counter-reset: s; display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.step { position:relative; padding:22px 22px 22px 64px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); }
.step::before { counter-increment:s; content:counter(s); position:absolute; left:20px; top:20px; width:30px; height:30px; border-radius:50%; background:var(--acc); color:var(--acc-fg); display:grid; place-items:center; font-weight:700; }
.step h3 { margin:0 0 6px; font-size:16px; } .step p { margin:0; color:var(--fg-2); font-size:15px; }
.plans { display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.plan { background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:24px; display:flex; flex-direction:column; }
.plan.hl { border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-2); }
.plan .name { font-weight:700; font-size:15px; color:var(--fg-2); }
.plan .price { font-size:36px; font-weight:800; letter-spacing:-.02em; margin:6px 0 2px; }
.plan .price small { font-size:14px; font-weight:500; color:var(--fg-2); }
.plan ul { list-style:none; padding:0; margin:16px 0 22px; color:var(--fg-2); font-size:15px; }
.plan li { padding:5px 0 5px 24px; position:relative; }
.plan li::before { content:"✓"; position:absolute; left:0; color:var(--acc); font-weight:700; }
.plan li.no::before { content:"–"; color:var(--fg-3); }
.plan .btn { margin-top:auto; justify-content:center; }
.compare { width:100%; border-collapse:collapse; font-size:15px; }
.compare th, .compare td { text-align:left; padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.compare th { color:var(--fg-2); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.05em; }
.compare td.y { color:var(--acc); font-weight:600; } .compare td.n { color:var(--fg-3); }
.faq details { background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin-bottom:10px; }
.faq summary { cursor:pointer; font-weight:600; } .faq p { color:var(--fg-2); margin:10px 0 0; }
.band { background:var(--acc); color:var(--acc-fg); border-radius:var(--r); padding:44px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.band h2 { color:inherit; margin:0 0 6px; } .band p { margin:0; opacity:.9; }
.band .btn { background:var(--acc-fg); color:var(--acc); border-color:transparent; }
footer { border-top:1px solid var(--line); padding:40px 0; color:var(--fg-2); font-size:14px; }
footer .cols { display:grid; gap:24px; grid-template-columns:2fr 1fr 1fr; }
footer h4 { margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-3); }
footer ul { list-style:none; padding:0; margin:0; } footer li { margin:6px 0; } footer a { color:var(--fg-2); } footer a:hover { color:var(--fg); }
footer .op { margin-top:28px; padding-top:18px; border-top:1px solid var(--line); font-size:13px; color:var(--fg-3); }
.legal { max-width:800px; margin:0 auto; padding:48px 20px 80px; }
.legal h1 { font-size:34px; letter-spacing:-.02em; margin:0 0 6px; }
.legal .meta { color:var(--fg-3); font-size:14px; margin-bottom:34px; }
.legal h2 { font-size:21px; margin:36px 0 10px; } .legal h3 { font-size:16px; margin:22px 0 6px; }
.legal p, .legal li { color:var(--fg-2); } .legal p { margin:0 0 12px; }
.legal table { width:100%; border-collapse:collapse; font-size:15px; margin:12px 0 18px; }
.legal th, .legal td { text-align:left; padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.legal .box { background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin:16px 0; }
.legal nav.sub { display:flex; flex-wrap:wrap; gap:8px 16px; margin-bottom:28px; font-size:14px; }
.legal nav.sub a.on { font-weight:700; color:var(--fg); }
.legal code { font-family:var(--mono); font-size:14px; background:var(--bg-3); padding:1px 5px; border-radius:5px; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:8px 18px; }
.kv dt { color:var(--fg-3); } .kv dd { margin:0; }
@media (max-width: 860px) { .hero { grid-template-columns:1fr; padding-top:56px; } footer .cols { grid-template-columns:1fr; } nav.links a.hide-m { display:none; } }