/* Marketing/docs styles. Shares the app's palette so the site and the tool read
   as one product rather than two projects. */
:root{
  --page:#f9f9f7; --surface:#fcfcfb; --ink:#0b0b0b; --ink2:#3f3e3b;
  --muted:#6b6963; --line:#e1e0d9; --border:rgba(11,11,11,.10);
  --accent:#b3261e; --accent-soft:rgba(179,38,30,.07);
  --ok:#0a7a33; --okbg:#e7f4ec; --okline:#cbe6d4;
  --max:1080px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{background:var(--page); -webkit-text-size-adjust:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink); line-height:1.6; font-size:16px;
  display:flex; flex-direction:column; min-height:100vh;
}
a{color:inherit}
:focus-visible{outline:2px solid #2a78d6; outline-offset:2px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; background:#fff; padding:8px 12px; border-radius:8px; z-index:20}

/* ---------- nav ---------- */
.nav{border-bottom:1px solid var(--line); background:rgba(252,252,251,.9);
  backdrop-filter:saturate(180%) blur(8px); position:sticky; top:0; z-index:10}
.bar{max-width:var(--max); margin:0 auto; padding:12px 22px; display:flex;
  align-items:center; gap:22px; flex-wrap:wrap}
.brand{display:inline-flex; align-items:center; gap:9px; font-weight:700;
  text-decoration:none; font-size:15.5px; letter-spacing:-.01em}
.brand .dot{width:11px; height:11px; border-radius:50%; background:var(--accent)}
.nav nav{display:flex; gap:18px; margin-right:auto; flex-wrap:wrap}
.nav nav a{color:var(--ink2); text-decoration:none; font-size:14px}
.nav nav a:hover{color:var(--ink)}
.nav nav a[aria-current]{color:var(--ink); font-weight:600}
.cta{background:var(--ink); color:#fff; text-decoration:none; font-size:13.5px;
  font-weight:600; padding:8px 15px; border-radius:8px; white-space:nowrap}
.cta:hover{background:#2a2926}

/* ---------- layout ---------- */
main{flex:1; width:100%; max-width:var(--max); margin:0 auto; padding:0 22px 64px}
main.wide{max-width:1180px}
section{padding:52px 0; border-bottom:1px solid var(--line)}
section:last-child{border-bottom:0}
h1{font-size:38px; line-height:1.14; letter-spacing:-.022em; font-weight:750}
h2{font-size:23px; line-height:1.25; letter-spacing:-.014em; margin-bottom:14px; font-weight:700}
h3{font-size:16px; margin-bottom:7px; font-weight:650}
p{max-width:68ch; color:var(--ink2)}
p + p{margin-top:12px}
.lead{font-size:18.5px; color:var(--ink2); margin-top:16px; max-width:62ch}
ul,ol{color:var(--ink2); padding-left:20px; max-width:68ch}
li + li{margin-top:7px}
strong{color:var(--ink)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.885em;
  background:#f1f0ea; border:1px solid var(--line); border-radius:5px; padding:1px 5px}
pre{background:#14140f; color:#e8e6dd; border-radius:10px; padding:15px 17px;
  overflow-x:auto; font-size:12.5px; line-height:1.65; margin:16px 0; max-width:100%}
pre code{background:none; border:0; padding:0; color:inherit; font-size:inherit}

/* ---------- hero ---------- */
.hero{padding:66px 0 46px}
.eyebrow{display:inline-block; font-size:12px; font-weight:650; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent); background:var(--accent-soft);
  border-radius:99px; padding:5px 12px; margin-bottom:18px}
.actions{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-size:14.5px; font-weight:600; padding:11px 19px; border-radius:9px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink)}
.btn:hover{border-color:rgba(11,11,11,.28)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{background:#9d211a}
.note-inline{font-size:13px; color:var(--muted); margin-top:12px}

/* ---------- cards ---------- */
.grid{display:grid; gap:16px; margin-top:26px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:19px 20px}
.card h3{display:flex; align-items:center; gap:9px}
.card p{font-size:14.5px}
.num{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; background:var(--ink); color:#fff; font-size:12px; font-weight:700; flex:none}

/* ---------- proof panel ---------- */
.proof{background:var(--okbg); border:1px solid var(--okline); border-radius:12px;
  padding:20px 22px; margin-top:26px}
.proof h2{color:#0a5c28; font-size:18px; margin-bottom:8px}
.proof p{color:#14532b; font-size:14.5px; max-width:70ch}
.proof ul{color:#14532b; font-size:14.5px; margin-top:10px}

.callout{border-left:3px solid var(--accent); background:var(--accent-soft);
  padding:13px 17px; border-radius:0 9px 9px 0; margin:18px 0}
.callout p{color:var(--ink2); font-size:14.5px}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto; margin:18px 0}
table{border-collapse:collapse; width:100%; font-size:14px; min-width:520px}
th,td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--line);
  vertical-align:top; color:var(--ink2)}
th{color:var(--ink); font-weight:650; white-space:nowrap}
td code{white-space:nowrap}

/* ---------- pricing ---------- */
.plans{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:26px}
.plan{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:22px}
.plan.featured{border-color:var(--ink); box-shadow:0 1px 0 var(--ink)}
.plan .price{font-size:31px; font-weight:750; letter-spacing:-.02em; margin:8px 0 2px}
.plan .per{font-size:13px; color:var(--muted)}
.plan ul{list-style:none; padding:0; margin:16px 0 0; font-size:14px}
.plan li{padding-left:22px; position:relative}
.plan li::before{content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:700}

/* ---------- docs ---------- */
.doclayout{display:grid; grid-template-columns:212px 1fr; gap:36px; align-items:start}
.toc{position:sticky; top:74px; font-size:14px; border-right:1px solid var(--line); padding-right:16px}
.toc h3{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.toc ul{list-style:none; padding:0; margin:8px 0 18px}
.toc a{color:var(--ink2); text-decoration:none; display:block; padding:3px 0}
.toc a:hover, .toc a[aria-current]{color:var(--ink); font-weight:600}
.prose h2{margin-top:36px; padding-top:6px}
.prose h3{margin-top:22px}
.prose > p:first-of-type{font-size:17px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line); background:var(--surface); margin-top:auto}
.cols{max-width:var(--max); margin:0 auto; padding:36px 22px 12px;
  display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.foot h3{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.foot ul{list-style:none; padding:0; margin-top:10px; font-size:14px}
.foot li{margin-top:6px}
.foot a{color:var(--ink2); text-decoration:none}
.foot a:hover{color:var(--ink)}
.fine{max-width:var(--max); margin:0 auto; padding:16px 22px 30px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:13px; color:var(--muted)}
.fine a{color:var(--ink2)}

@media (max-width:760px){
  h1{font-size:30px}
  .doclayout{grid-template-columns:1fr}
  .toc{position:static; border-right:0; border-bottom:1px solid var(--line);
    padding:0 0 14px; margin-bottom:8px}
  .nav nav{order:3; width:100%; margin-right:0}
}
@media print{ .nav,.foot,.cta,.actions{display:none} body{background:#fff} }