
:root{
  --green:#0E6B57; --green-d:#0A5344; --amber:#E8A33D;
  --bg:#F4F6F6; --card:#fff; --ink:#15201d; --muted:#5a6b66; --line:#e2e8e6;
  --code-bg:#0f1c19; --code-ink:#e8f0ed; --radius:14px; --wrap:1080px;
  /* Card/plan titles. On white (light) green-d reads ~9:1; on the DARK card it went nearly
     invisible → overridden to a light brand green below. These are OUR arguments; they must weigh. */
  --card-title:#0A5344;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.55;font-size:17px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.9rem;line-height:1.15;margin:.2em 0 .4em;letter-spacing:-.02em}
h2{font-size:1.45rem;margin:1.6em 0 .5em;letter-spacing:-.01em}
h3{font-size:1.08rem;margin:1.2em 0 .3em}
p{margin:.5em 0}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:10}
.glyph{width:1.35em;height:1.35em;vertical-align:-.28em;color:var(--green)}
.glyph.sm{width:1.05em;height:1.05em;vertical-align:-.18em}
/* header */
header.site{position:sticky;top:0;z-index:9;background:rgba(244,246,246,.92);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
header.site,footer.site .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
header.site{padding:10px 20px;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:.5em;font-weight:700;color:var(--green-d);font-size:1.1rem}
.brand:hover{text-decoration:none}
header nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
header nav a{color:var(--ink);font-size:.95rem}
.btn{display:inline-block;background:var(--green);color:#fff;padding:.5em 1em;border-radius:999px;
  font-weight:600;font-size:.95rem}
.btn:hover{background:var(--green-d);text-decoration:none}
.btn.big{padding:.75em 1.5em;font-size:1.05rem}
.btn.ghost{background:transparent;color:var(--green);border:1.5px solid var(--green)}
.btn.ghost:hover{background:var(--green);color:#fff}
/* hero */
.hero{padding:48px 0 8px}
.eyebrow{display:inline-flex;align-items:center;gap:.4em;background:#e8f2ef;color:var(--green-d);
  font-weight:600;font-size:.85rem;padding:.35em .8em;border-radius:999px}
.hero h1{font-size:2.2rem}
.lede{font-size:1.15rem;color:var(--muted);max-width:60ch}
.hero-code{margin:1.4em 0}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:1em}
/* code */
pre.code{background:var(--code-bg);color:var(--code-ink);padding:16px;border-radius:var(--radius);
  overflow-x:auto;font-size:.86rem;line-height:1.5;margin:1em 0}
pre.code code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#e7edeb;
  padding:.1em .35em;border-radius:5px;font-size:.9em}
pre.code code{background:none;padding:0}
.hide{display:none}
/* sections */
.feature{padding:20px 0 28px}
.feature.alt{background:#eef3f2;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.note{color:var(--muted)}
.grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:1em}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.card h3{margin-top:0;color:var(--card-title);font-weight:800}
/* pricing */
.pricing{padding:20px 0 36px}
.pricing .sub{color:var(--muted)}
.plans{display:grid;grid-template-columns:1fr;gap:16px;margin-top:1.2em}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-align:center}
.plan h3{margin:0;color:var(--card-title);font-size:1.2rem;font-weight:800}
.plan .price span{font-size:2rem;font-weight:800;color:var(--ink)}
.plan ul{list-style:none;padding:0;margin:1em 0;text-align:left}
.plan li{padding:.3em 0;border-bottom:1px dashed var(--line)}
.loading{color:var(--muted);padding:1em 0}
.fineprint{color:var(--muted);font-size:.9rem;margin-top:1em}
.disclaimer{background:#fdf3e2;border-left:4px solid var(--amber);padding:12px 14px;border-radius:8px;color:#5c4a24}
/* tables */
.tbl{width:100%;border-collapse:collapse;margin:1em 0;font-size:.92rem;display:block;overflow-x:auto}
.tbl th,.tbl td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.tbl th{background:#eef3f2}
.cmp{overflow-x:auto}
/* docs */
.doc-hero{padding:36px 0 6px}
.crumb{color:var(--muted);font-size:.9rem}
.badge{display:inline-block;background:#e8f2ef;color:var(--green-d);font-size:.72rem;font-weight:600;
  padding:.15em .5em;border-radius:6px}
.endpoint{margin-top:.4em}
.method{font-weight:700;font-size:.8rem;padding:.2em .55em;border-radius:6px;color:#fff;background:var(--green)}
.method.get{background:#2E7D32}.method.post{background:var(--green)}
.doclist{list-style:none;padding:0}
.doclist li{padding:.5em 0;border-bottom:1px solid var(--line)}
.doc-body .snippet{margin:1.2em 0}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:-8px}
.tab{background:#dfe8e5;color:var(--green-d);border:0;padding:.4em .9em;border-radius:8px 8px 0 0;
  font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.tab.on{background:var(--code-bg);color:var(--code-ink)}
.snippet pre.code{margin-top:0;border-top-left-radius:0}
details{margin:.4em 0;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:.3em .6em}
summary{cursor:pointer;font-weight:600}
.notes{margin-top:1.2em}
.notes .note{background:#eef3f2;border-left:3px solid var(--green);padding:8px 12px;border-radius:6px;margin:.5em 0}
/* cta band + footer */
.cta-band{background:var(--green-d);color:#fff;padding:40px 0;margin-top:24px;text-align:center}
.cta-band h2{color:#fff;margin-top:0}
.cta-band p{color:#cfe4de;max-width:50ch;margin:.4em auto 1.2em}
footer.site{border-top:1px solid var(--line);padding:24px 0;margin-top:0;background:#eef3f2}
footer.site .wrap{justify-content:space-between}
footer .rz{color:var(--muted);font-size:.92rem;margin:0}
footer nav{display:flex;gap:16px;flex-wrap:wrap}
footer nav a{color:var(--ink);font-size:.9rem}
/* wider screens */
@media(min-width:720px){
  h1{font-size:2.3rem}.hero h1{font-size:2.9rem}
  .grid{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:980px){ .grid{grid-template-columns:1fr 1fr 1fr} }
@media(prefers-color-scheme:dark){
  :root{--bg:#0f1613;--card:#152019;--ink:#e7efec;--muted:#9db3ac;--line:#26332e;--card-title:#7fd1bb}
  header.site{background:rgba(15,22,19,.92)}
  .eyebrow,.badge{background:#17352c;color:#a7d8c8}
  .feature.alt,.tbl th,footer.site{background:#131d18}
  code{background:#22302b;color:#d6e3de}
  .card,.plan,details{background:var(--card)}
  .notes .note{background:#131d18}
  .disclaimer{background:#2a2213;color:#e9d3a5}
}
