/* crawlwren.com: brand v2 "Highlighter" (see brand/style-guide.md). Fonts: Geist / Geist Mono, SIL OFL 1.1 */
@font-face{font-family:"Geist";src:url("/assets/fonts/Geist.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/assets/fonts/GeistMono.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --ink:#0A0A0A;--ink-2:#161616;--line:#2E2E2E;--white:#fff;--mist:#F4F4F4;--rule:#E3E3E3;
  --gray:#A1A1A1;--gray-deep:#5E5E5E;--yellow:#FFD60A;--cobalt:#2E5BFF;--cobalt-hover:#1F48E5;--cobalt-light:#7B93FF;
  --green:#00C16A;--green-deep:#007A3D;
  --sans:"Geist",system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,monospace;
  --radius:10px;--radius-s:6px;--lh-head:1.22;--hl-top:.145em;--hl-h:1.1em;--w:1040px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--cobalt);text-underline-offset:.18em}
a:hover{color:var(--cobalt-hover)}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}

/* header / footer */
.site-head{border-bottom:1px solid var(--rule)}
.site-head .wrap{display:flex;align-items:center;gap:24px;height:64px}
.site-head .logo img{height:26px;display:block}
.site-head nav{margin-left:auto;display:flex;gap:20px;font-size:15px;font-weight:500}
.site-head nav a{color:var(--ink);text-decoration:none}
.site-head nav a:hover{color:var(--cobalt)}
.site-foot{border-top:1px solid var(--rule);margin-top:96px;padding:32px 0 48px;font:400 14px/1.7 var(--mono);color:var(--gray-deep)}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:8px 24px}
.site-foot a{color:var(--gray-deep)}
.site-foot .right{margin-left:auto}

/* headlines: highlight band + clear space (v2.2). No eyebrows: H1 is the first text in main. */
h1,h2,h3{font-family:var(--sans);letter-spacing:-.045em;line-height:var(--lh-head);margin:0}
h1{font-size:clamp(38px,6vw,60px);font-weight:700}
h2{font-size:clamp(26px,3.4vw,34px);font-weight:700;margin-top:72px}
h3{font-size:20px;font-weight:600;letter-spacing:-.02em}
.hl,h1 em,h2 em{font-style:normal;color:var(--ink);padding:0 .12em;margin:0 -.04em;white-space:nowrap;
  background:linear-gradient(var(--yellow),var(--yellow)) 0 var(--hl-top)/100% var(--hl-h) no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero{padding:72px 0 8px}
.lede{font-size:21px;line-height:1.5;color:var(--gray-deep);max-width:720px;margin:20px 0 0}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
p,ul,ol,table{max-width:760px}
main p,main li{color:var(--ink)}
.muted{color:var(--gray-deep)}
.small{font-size:15px}

/* buttons: primary = cobalt + white (5.18:1). Yellow is never a button. */
.btn{display:inline-flex;align-items:center;gap:.5em;height:40px;padding:0 16px;border-radius:var(--radius-s);
  font:600 15px/1 var(--sans);letter-spacing:-.01em;text-decoration:none;border:1px solid transparent;white-space:nowrap}
.btn-lg{height:48px;padding:0 20px;font-size:17px}
.btn-primary{background:var(--cobalt);color:#fff}
.btn-primary:hover{background:var(--cobalt-hover);color:#fff}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-secondary:hover{background:var(--mist);color:var(--ink)}
.btn .arr{font-family:var(--mono);font-weight:400}

/* tool list: flat rows with rules (no tiles, no shadows) */
.tools{list-style:none;padding:0;margin:24px 0 0;max-width:none;border-top:1px solid var(--rule)}
.tools li{display:grid;grid-template-columns:1fr auto;gap:8px 32px;align-items:center;padding:24px 0;border-bottom:1px solid var(--rule)}
.tools h3 a{color:var(--ink);text-decoration:none}
.tools h3 a:hover{color:var(--cobalt)}
.tools p{margin:6px 0 0;color:var(--gray-deep)}
.tools .price{font:500 15px var(--mono);color:var(--ink);margin-top:8px}
.tools .go{display:flex;gap:10px}
@media (max-width:700px){.tools li{grid-template-columns:1fr}.site-head nav{gap:14px;font-size:14px}.site-head nav .opt{display:none}}

/* tables */
table{border-collapse:collapse;width:100%;font-size:15px;margin:20px 0}
th,td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-weight:600}
td code,th code{white-space:nowrap}
code{font-family:var(--mono);font-size:.9em;background:var(--mist);padding:.1em .35em;border-radius:4px}
.ua{font:500 16px/1.5 var(--mono);background:var(--mist);border:1px solid var(--rule);border-radius:var(--radius-s);padding:14px 16px;overflow-x:auto;white-space:nowrap;max-width:760px}

/* the one card type: terminal / JSON on Ink-2 */
.card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);color:#EDEDED;padding:20px 22px;
  font:400 14.5px/1.6 var(--mono);white-space:pre;overflow-x:auto;max-width:760px;margin:20px 0}
.card .k{color:var(--cobalt-light)}.card .s{color:#EDEDED}.card .n{color:var(--yellow)}.card .b{color:var(--green)}.card .p{color:var(--gray)}
.card .c{color:var(--gray)}.card .g{color:var(--green)}

/* drafts */
.draft{border:1px solid var(--ink);border-radius:var(--radius-s);padding:12px 16px;font:500 15px/1.5 var(--mono);max-width:760px;margin:24px 0 0}
dl.faq dt{font-weight:600;margin-top:20px}
dl.faq dd{margin:4px 0 0;max-width:760px;color:var(--ink)}