/* FiatDock design system v13 — light theme, self-hosted Inter, design tokens.
   v13: tighter vertical rhythm (hero 52px, section 38px), smaller hero h1, denser
   app surfaces — kills the "empty/unfinished" feel (SITE_QA_NOTES, NEXT_SESSION v24).
   Teal #0e7490 primary, emerald #047857 success, slate neutrals; AA on white.
   One file drives every page via classes + --vars. Depth = hairline borders +
   soft shadows (no dark gradients). Type scale 1.2; 4px spacing scale. */
@font-face{font-family:"Inter var";font-weight:100 900;font-style:normal;font-display:swap;src:url("/inter-var.woff2") format("woff2")}
:root{
  --bg:#ffffff;--bg2:#f3f8f9;--card:#ffffff;--card2:#ffffff;
  --line:#dde8eb;--line2:#bcd2d8;
  --text:#0c1d27;--dim:#42606c;
  --acc:#0e7490;--acc-2:#0b5e74;--acc2:#047857;--warn:#b45309;
  --acc-50:#ecfeff;--acc-100:#e0f5f9;--acc-700:#0b5e74;--acc2-50:#ecfdf5;
  /* type scale (1.2 ratio) */
  --step--1:.833rem;--step-0:1rem;--step-1:1.2rem;--step-2:1.44rem;--step-3:1.728rem;--step-4:2.07rem;--step-5:2.49rem;
  /* spacing scale (4px base) */
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4rem;
  --radius:16px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow:0 1px 2px rgba(15,23,42,.04),0 2px 8px rgba(15,23,42,.06);
  --shadow-lg:0 10px 30px rgba(15,23,42,.10);
  --shadow-xl:0 24px 54px rgba(15,23,42,.16);
  --ring:0 0 0 3px rgba(14,116,144,.3);
  --glow:rgba(14,116,144,.06)
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:"Inter var",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.6;font-size:16px;letter-spacing:-.006em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
a:focus-visible,.btn:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
::selection{background:rgba(14,116,144,.16)}
.skip{position:absolute;left:-9999px;top:0;background:var(--acc);color:#fff;padding:8px 14px;border-radius:0 0 8px 0;font-weight:700;z-index:99}
.skip:focus{left:0}
.container{max-width:1060px;margin:0 auto;padding:0 22px}
header{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);z-index:10}
nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.logo{font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--text)}.logo span{color:var(--acc)}
nav .links{display:flex;flex-wrap:wrap;gap:2px 4px}
nav .links a{color:var(--dim);font-size:14px;padding:6px 10px;border-radius:8px;transition:color .15s,background .15s}
nav .links a:hover{color:var(--text);background:rgba(14,116,144,.07);text-decoration:none}
nav .links a[aria-current="page"]{color:var(--acc);background:rgba(14,116,144,.10);font-weight:600}
.logo a{color:inherit}.logo a:hover{text-decoration:none}
.hero{padding:52px 0 38px;text-align:center;position:relative}
.hero::before{content:"";position:absolute;inset:-30px 0 auto;height:320px;background:radial-gradient(620px 240px at 50% 0,var(--glow),transparent 70%);pointer-events:none}
.hero>*{position:relative}
.hero h1{font-size:clamp(2rem,4.5vw,2.85rem);line-height:1.1;margin-bottom:var(--space-4);letter-spacing:-.032em;font-weight:800;color:var(--text)}
.hero h1 em{font-style:normal;background:linear-gradient(92deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--dim);max-width:680px;margin:0 auto 24px;font-size:clamp(15.5px,1.8vw,17.5px)}
/* left-aligned heroes (app + GEO pages) keep their copy left, not centered-max */
.hero[style*="text-align:left"] p{margin-left:0;margin-right:0}
.btn{display:inline-block;padding:13px 26px;border-radius:12px;font-weight:650;font-size:15px;border:1px solid transparent;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease,background .14s ease}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-acc{background:var(--acc);color:#fff;box-shadow:var(--shadow)}
.btn-acc:hover{background:var(--acc-2);box-shadow:var(--shadow-lg)}
.btn-ghost{border:1px solid var(--line2);color:var(--text);margin-left:10px;background:#fff}
.btn-ghost:hover{border-color:var(--acc);color:var(--acc);background:rgba(14,116,144,.04)}
.badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.badge{border:1px solid var(--line);border-radius:99px;padding:7px 15px;font-size:13px;color:var(--dim);background:#fff;transition:border-color .15s,color .15s,box-shadow .15s}
.badge:hover{border-color:var(--line2);color:var(--text);box-shadow:var(--shadow)}
section{padding:38px 0}
h2{font-size:clamp(var(--step-2),3.2vw,var(--step-3));margin-bottom:var(--space-5);letter-spacing:-.022em;color:var(--text)}
/* gradient underline is now OPT-IN (a rare accent), not under every heading (A-4) */
.section-title{position:relative;padding-bottom:12px}
.section-title::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:3px;border-radius:3px;background:linear-gradient(92deg,var(--acc),var(--acc2))}
h3{font-size:var(--step-1);margin-bottom:9px;letter-spacing:-.01em;color:var(--text)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.card:hover{border-color:var(--line2);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card p{color:var(--dim);font-size:14.5px}
.num{display:inline-flex;width:32px;height:32px;border-radius:99px;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;font-weight:800;align-items:center;justify-content:center;margin-bottom:12px;box-shadow:0 3px 10px rgba(14,116,144,.25)}
.ico{display:inline-flex;width:44px;height:44px;border-radius:12px;background:rgba(14,116,144,.09);color:var(--acc);align-items:center;justify-content:center;margin-bottom:14px}
.ico svg{width:23px;height:23px;display:block}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--acc);background:rgba(14,116,144,.07);border:1px solid var(--line2);border-radius:99px;padding:6px 14px;margin-bottom:22px}
pre{background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:12px;padding:16px 18px;overflow-x:auto;font-size:13px;line-height:1.65;direction:ltr;text-align:left;margin:18px 0 0}
code{font-family:ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;color:var(--acc)}
pre{color:#334155}pre code{color:#334155}
pre .c{color:#64748b}pre .k{color:#0e7490}pre .s{color:#047857}
.strip{padding:20px 0 8px}
.strip .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.strip .dev{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);transition:border-color .18s}
.strip .dev:hover{border-color:var(--line2)}
.strip .lbl{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--acc2)}
.strip pre{margin-top:9px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px;background:#fff}
th,td{border-bottom:1px solid var(--line);padding:13px 16px;text-align:left}
th{background:var(--bg2);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
tr:last-child td{border-bottom:none}
tbody tr:hover td,table tr:hover td{background:rgba(14,116,144,.035)}
td .ok{color:var(--acc2);font-weight:700}
footer{border-top:1px solid var(--line);padding:38px 0;color:var(--dim);font-size:13.5px;background:var(--bg2)}
footer .cols{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.note{border:1px solid #fcd34d;border-radius:12px;padding:15px 19px;color:#92400e;font-size:14px;background:#fffbeb}
.doc h2{margin-top:42px}.doc p,.doc li{color:var(--dim)}.doc ul,.doc ol{padding-left:24px;margin:10px 0}
.doc code{background:rgba(14,116,144,.08);padding:1px 6px;border-radius:6px;font-size:.92em}
.doc pre code{background:none;padding:0}
.endpoint{border:1px solid var(--line);border-radius:13px;padding:17px 20px;margin-bottom:14px;background:var(--card);box-shadow:var(--shadow);transition:border-color .15s}
.endpoint:hover{border-color:var(--line2)}
.method{font-weight:800;color:var(--acc2);font-family:ui-monospace,monospace}
.paid{color:var(--warn);font-size:12px;border:1px solid var(--warn);padding:1px 9px;border-radius:99px;margin-left:8px}
.free{color:var(--acc2);font-size:12px;border:1px solid var(--acc2);padding:1px 9px;border-radius:99px;margin-left:8px}
/* mobile nav: a clean single-row horizontal scroll instead of a 3-row wrap — no JS,
   so marketing/catalog pages stay CSP-clean (no markup change across 19 pages). */
@media (max-width:720px){
  nav{gap:10px}
  nav .links{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
  nav .links::-webkit-scrollbar{display:none}
  nav .links a{white-space:nowrap;flex:0 0 auto}
}
@media (max-width:480px){
  .hero{padding:36px 0 26px}
  .btn{display:block;margin:0 0 10px}
  .btn-ghost{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *,::before,::after{transition:none!important}
  html{scroll-behavior:auto}
}

/* ───────── Marketplace components (v9) — extends the base above ─────────
   .hero .card .grid .btn .badge/.badges .num .note table footer reused as-is.
   Search box, listing cards, Verified badge, chips, price, filter bar, pricing
   tiers, cash-out band, and the no-JS copy block. */
.search{display:flex;gap:8px;max-width:600px;margin:0 auto 22px}
.search input{flex:1;background:#fff;border:1px solid var(--line2);border-radius:12px;padding:14px 18px;color:var(--text);font-size:15px;font-family:inherit;box-shadow:var(--shadow)}
.search input::placeholder{color:#64748b}
.search input:focus{border-color:var(--acc);outline:none;box-shadow:0 0 0 3px rgba(14,116,144,.15)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.sec-head h2{margin-bottom:0}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
a.card{color:inherit;display:block}
a.card:hover{text-decoration:none}
.listing .lhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.listing .lhead h3{margin:0;color:var(--text)}
.listing .lfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px}
.listing .seller{font-size:12.5px;color:var(--dim);margin-top:10px}
.verified{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:var(--acc2);border:1px solid var(--acc2);border-radius:99px;padding:2px 9px;white-space:nowrap;background:rgba(4,120,87,.05)}
.verified.lg{font-size:13px;padding:4px 12px}
.price{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--acc2);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.chip{display:inline-block;border:1px solid var(--line2);border-radius:99px;padding:5px 13px;font-size:13px;color:var(--dim);background:#fff;transition:border-color .15s,color .15s,box-shadow .15s}
.chip:hover{border-color:var(--acc);color:var(--acc);text-decoration:none;box-shadow:var(--shadow)}
.chip[aria-current="true"]{border-color:var(--acc);color:var(--acc);background:rgba(14,116,144,.10)}
.chips{display:flex;gap:9px;flex-wrap:wrap}
.filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 22px;padding:14px 16px;background:var(--bg2);border:1px solid var(--line);border-radius:13px}
.filters label{font-size:13px;color:var(--dim);display:inline-flex;align-items:center;gap:6px}
.filters select{background:#fff;border:1px solid var(--line2);border-radius:9px;padding:7px 10px;color:var(--text);font-size:13.5px;font-family:inherit}
.tier{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.tier.feat{border-color:var(--acc);box-shadow:0 10px 30px rgba(14,116,144,.12)}
.tier .ribbon{position:absolute;top:-11px;right:18px;background:linear-gradient(92deg,var(--acc),var(--acc2));color:#fff;font-size:11.5px;font-weight:800;padding:3px 11px;border-radius:99px}
.tier .amt{font-size:var(--step-4);font-weight:800;letter-spacing:-.02em;margin:6px 0 2px;color:var(--text);font-variant-numeric:tabular-nums}
.tier .amt small{font-size:14px;color:var(--dim);font-weight:600}
.tier ul{list-style:none;margin:16px 0 20px;display:grid;gap:9px}
.tier li{color:var(--dim);font-size:14.5px;padding-left:24px;position:relative}
.tier li::before{content:"✓";position:absolute;left:0;color:var(--acc2);font-weight:800}
.band{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.muted{color:var(--dim)}
.copy{user-select:all;-webkit-user-select:all;cursor:copy}
.copy-hint{font-size:12px;color:var(--dim);margin-top:6px}
@media (max-width:720px){.cols2{grid-template-columns:1fr}}
@media (max-width:480px){.search{flex-direction:column}}

/* ───────── v12 additions: section rhythm, listing avatar, code wrap ───────── */
/* alternating section background — breaks the endless white-card monotony (A-4) */
.section-alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* horizontal feature row (icon · title · text) to vary the layout away from card grids */
.feature-row{display:grid;grid-template-columns:auto 1fr;gap:16px 18px;align-items:start;padding:18px 0;border-bottom:1px solid var(--line)}
.feature-row:last-child{border-bottom:0}
.feature-row h3{margin:0 0 3px}.feature-row p{color:var(--dim);font-size:14.5px;margin:0}
/* listing-card avatar tile — seller initial / category glyph (A-3) */
.listing .avatar{width:40px;height:40px;border-radius:10px;background:var(--acc-100);color:var(--acc);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;flex-shrink:0}
.listing .ltop{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.listing .star{color:var(--warn);font-variant-numeric:tabular-nums}
/* sticky "use this service" aside on the detail page (A-3) */
.aside-sticky{position:sticky;top:84px}
/* code blocks: opt-in wrap for long one-liners (curl) so mobile has no h-scroll (A-8) */
pre.wrap{white-space:pre-wrap;word-break:break-word;overflow-x:visible}

/* ───────── App surfaces (account + seller dashboard) — moved from views.js
   SELLER_STYLE so they share tokens + the ?v cache key (A-6). CSP allows these
   via the stylesheet; the pages still load only their one self-hosted script. */
.field{margin:0 0 14px}.field>label{display:block}
.field>label>span{display:block;font-size:13px;color:var(--dim);margin-bottom:5px}
.field input,.field textarea,.field select{width:100%;box-sizing:border-box;background:var(--card);border:1px solid var(--line2);border-radius:10px;padding:11px 13px;color:var(--text);font-size:15px;font-family:inherit}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--acc);box-shadow:var(--ring)}
.row{display:flex;gap:14px;flex-wrap:wrap}.row .field{flex:1;min-width:170px}
.ferr{color:#dc2626;font-size:12.5px;margin:5px 0 0}
.msg{font-size:13.5px;margin:12px 0 0;padding:10px 12px;border-radius:9px}
.msg.ok{background:var(--acc2-50);border:1px solid #a7f3d0;color:var(--acc2)}
.msg.err{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}
.lrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.lrow:last-child{border-bottom:0}.lrow .actions{display:flex;gap:8px;flex-shrink:0}
.btn.sm{padding:7px 13px;font-size:12.5px;border-radius:9px}
.card.auth{padding:32px 30px}
.auth-h{font-size:var(--step-2);font-weight:800;letter-spacing:-.02em;text-align:center;margin-bottom:4px}
.auth-sub{color:var(--dim);text-align:center;font-size:14px;margin:0 0 22px}
.tabs{display:flex;gap:4px;background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:4px;margin-bottom:20px}
.tab{flex:1;border:0;background:transparent;color:var(--dim);font:inherit;font-size:14px;font-weight:600;padding:9px;border-radius:8px;cursor:pointer;transition:background .15s,color .15s}
.tab[aria-selected="true"]{background:#fff;color:var(--acc);box-shadow:var(--shadow)}
.linkbtn{border:0;background:none;color:var(--acc);font:inherit;font-size:13.5px;cursor:pointer;padding:0}
.linkbtn:hover{text-decoration:underline}
.auth-fine{color:var(--dim);font-size:12px;text-align:center;margin:12px 0 0}