/* ============================================================
   landing.css — the nine category landing pages
   ============================================================
   This is a FILE, not a <style> block, and that is deliberate. The CSP in
   _headers allows styles by SHA-256 hash plus 'self'; the hashes are
   generated from public/index.html only. An inline <style> on a landing
   page would therefore match no hash and be dropped, leaving an unstyled
   page that still returns 200. Served from this origin it is covered by
   'self' and cannot go stale.

   Font and logo URLs are absolute for the same class of reason: these
   pages live at /best-ai-for-coding/, so a relative fonts/… would resolve
   inside that directory and 404.
   ============================================================ */

@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;
  src:url('/fonts/archivo-latin-wght-normal.woff2') format('woff2-variations')}
@font-face{font-family:'Public Sans';font-style:normal;font-display:swap;font-weight:100 900;
  src:url('/fonts/public-sans-latin-wght-normal.woff2') format('woff2-variations')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:100 800;
  src:url('/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations')}

:root{
  --ink:#0E1420; --ink-2:#12333A; --paper:#F1F3F2; --card:#FFFFFF;
  --rule:#DCE1E0; --rule-soft:#EAEEED; --muted:#5C6870; --muted-2:#8B959B;
  --teal:#177E7E; --teal-dk:#0F5C5C; --ochre:#B07D2B; --rust:#A63A50;
  --display:'Archivo',system-ui,sans-serif;
  --body:'Public Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --r:7px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--teal-dk)}
img{max-width:100%}
.wrap{max-width:920px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:9;background:#fff;padding:8px 12px;border-radius:var(--r)}

/* ---------- masthead ---------- */
.top{background:var(--ink);color:#EAEFEE;padding:14px 0}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mark{font-family:var(--display);font-weight:800;letter-spacing:.13em;font-size:15px;
  text-transform:uppercase;color:#fff;text-decoration:none}
.top nav{display:flex;gap:18px;font-size:13.5px}
.top nav a{color:#BCCCCB;text-decoration:none}
.top nav a:hover{color:#fff}

/* ---------- hero ---------- */
.hero{background:
    radial-gradient(900px 380px at 82% -10%,rgba(23,126,126,.42),transparent 65%),
    linear-gradient(168deg,var(--ink) 0%,#101E28 55%,var(--ink-2) 100%);
  color:#EAEFEE;padding:44px 0 38px}
.crumb{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:#7FD6D0;margin:0 0 14px}
.crumb a{color:#7FD6D0;text-decoration:none}
.crumb a:hover{text-decoration:underline}
h1{font-family:var(--display);font-weight:800;letter-spacing:-.028em;line-height:1.05;
  font-size:clamp(28px,5vw,44px);margin:0 0 14px}
.hero .lede{color:#BCCCCB;margin:0;font-size:16px;max-width:62ch}
.hero .lede b{color:#fff;font-weight:600}
.counts{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;padding:0;list-style:none}
.counts li{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#DCE7E6;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:100px;padding:5px 12px}
.cta{display:inline-block;margin-top:22px;background:var(--teal);color:#fff;font-weight:600;
  font-size:14px;text-decoration:none;padding:11px 18px;border-radius:var(--r)}
.cta:hover{background:#1a9191}

/* ---------- sections ---------- */
main{padding:34px 0 10px}
h2{font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-.02em;
  margin:38px 0 6px;scroll-margin-top:16px}
h2:first-child{margin-top:0}
h3{font-family:var(--display);font-weight:700;font-size:17px;margin:26px 0 4px}
.seclede{color:var(--muted);margin:0 0 18px;max-width:70ch}

/* ---------- tool cards ---------- */
.tools{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.tool{background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:16px 17px}
.tool-h{display:flex;align-items:flex-start;gap:11px;flex-wrap:wrap}
.tool-logo{width:34px;height:34px;border-radius:7px;object-fit:contain;background:#fff;
  border:1px solid var(--rule-soft);padding:4px;flex:none}
.tool-id{flex:1;min-width:170px}
.tool-n{font-family:var(--display);font-weight:700;font-size:17px;text-decoration:none;color:var(--ink)}
.tool-n:hover{color:var(--teal-dk)}
.tool-co{display:block;font-size:12.5px;color:var(--muted-2)}
.tags{display:flex;gap:5px;flex-wrap:wrap;align-items:flex-start}
.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 8px;border-radius:100px;white-space:nowrap}
.t-free{background:#E4F0EC;color:var(--teal-dk);border:1px solid #C4DED6}
.t-paid{background:#F4EDE1;color:var(--ochre);border:1px solid #E3D0AC}
.t-fit{background:var(--ink);color:#fff}
.t-fit2{background:#DCE1E0;color:var(--muted)}
.row{margin:11px 0 0;display:grid;grid-template-columns:104px 1fr;gap:10px;font-size:14px}
.row dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);padding-top:4px}
.row dd{margin:0}
.row .plans{margin:0;padding-left:17px}
.row .plans li{margin-bottom:2px}
.ok{color:var(--teal-dk);font-weight:700}
.no{color:var(--rust);font-weight:700}
.golink{display:inline-block;margin-top:13px;font-size:13.5px;font-weight:600;
  text-decoration:none;color:var(--teal-dk);border:1px solid var(--rule);
  border-radius:var(--r);padding:7px 13px}
.golink:hover{border-color:var(--teal);background:#fff}

/* ---------- summary table ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:10px;background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:520px}
caption{text-align:left;padding:13px 15px 0;color:var(--muted);font-size:13px}
th,td{text-align:left;padding:10px 15px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
th{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);font-weight:400}
tbody tr:last-child td{border-bottom:0}
td a{font-weight:600;text-decoration:none}
td a:hover{text-decoration:underline}

/* ---------- faq ---------- */
.faq{margin:0}
.faq dt{font-family:var(--display);font-weight:700;font-size:15.5px;margin-top:20px}
.faq dd{margin:5px 0 0;color:var(--muted)}

/* ---------- other categories ---------- */
.cats{list-style:none;margin:0;padding:0;display:grid;gap:9px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cats a{display:block;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:12px 14px;text-decoration:none;color:var(--ink);font-weight:600;font-size:14px}
.cats a:hover{border-color:var(--teal);color:var(--teal-dk)}
.cats span{display:block;font-weight:400;font-size:12.5px;color:var(--muted-2);margin-top:2px}

/* ---------- footer ---------- */
footer{margin-top:46px;background:var(--ink);color:#A9BAB9;padding:30px 0;font-size:13px}
footer a{color:#BCCCCB}
footer p{margin:0 0 9px;max-width:70ch}
footer .fl{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.updated{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);margin:26px 0 0}

@media(max-width:600px){
  .row{grid-template-columns:1fr;gap:2px}
  .row dt{padding-top:9px}
  main{padding-top:26px}
}