/* ══════════════════════════════════════════════════════════════════════
   AskJx.ai platform theme — light, technical, "terminal/spreadsheet."
   Sharp corners, hairline borders, monospace headlines/UI chrome, one
   accent color used sparingly. Applies to the storefront + admin chrome
   only — the five tools themselves keep their own established UI, and the
   product-detail pages' "screenshot" mockups intentionally replicate that
   real UI rather than this theme.
   ══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#0c1116;
  --paper:#f7f8fa;
  --paper-alt:#fbfaf8;
  --panel:#eef1f4;
  --border:#e2e6ea;
  --border-soft:#f0f2f5;
  --muted:#576069;
  --muted-2:#868e98;
  --muted-3:#a4abb4;
  --accent:#0b64e0;
  --accent-soft:#eff5fd;
  --accent-border:#c7dbf7;
  --good:#177a4c;
  --warn:#8a6320;
  --warn-bg:#faf5ea;
  --warn-border:#ecdcc0;
  --bad:#b0372a;
  --white:#ffffff;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace;
  --sans:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.7;min-height:100vh;-webkit-font-smoothing:antialiased;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
code{font-family:var(--mono);font-size:0.92em;}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
::selection{background:var(--accent);color:#fff;}

@media (prefers-reduced-motion: no-preference){
  .fade-up{opacity:0;transform:translateY(16px);animation:askjxFadeUp .6s ease forwards;}
  .fade-up.d1{animation-delay:.05s;}
  .fade-up.d2{animation-delay:.12s;}
  .fade-up.d3{animation-delay:.19s;}
  @keyframes askjxFadeUp{to{opacity:1;transform:translateY(0);}}
}
@media (prefers-reduced-motion: reduce){
  .fade-up{opacity:1;transform:none;animation:none;}
}

.wrap{max-width:1152px;margin:0 auto;padding:0 24px;}

/* ── Header / nav ─────────────────────────────────────────────────────── */
header.site{
  display:flex;align-items:center;gap:20px;padding:0 24px;height:56px;
  background:var(--ink);border-bottom:1px solid var(--ink);
}
header.site .brand{font-family:var(--mono);font-weight:600;font-size:14px;letter-spacing:-.02em;color:var(--paper);}
header.site .brand span{color:var(--accent);}
header.site nav{margin-left:auto;display:flex;gap:20px;align-items:center;}
header.site nav a{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:#aab4c0;text-decoration:none;}
header.site nav a:hover{color:var(--paper);text-decoration:none;}
header.site .pill{
  font-family:var(--mono);font-size:11px;color:#aab4c0;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);padding:4px 10px;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{padding:64px 24px 56px;text-align:center;background:var(--panel);border-bottom:1px solid var(--ink);}
.hero h1{font-family:var(--mono);font-weight:600;font-size:40px;letter-spacing:-.03em;line-height:1.15;margin-bottom:16px;}
.hero p{font-family:var(--sans);color:var(--muted);font-size:15px;max-width:560px;margin:0 auto;line-height:1.7;}

/* ── Tool grid / cards ────────────────────────────────────────────────── */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);max-width:1152px;margin:0 auto;padding:0;}
.tool-card{background:var(--white);padding:28px 26px;display:flex;flex-direction:column;gap:12px;}
.tool-card h3{font-family:var(--mono);font-weight:600;font-size:16px;letter-spacing:-.02em;}
.tool-card .desc{color:var(--muted);font-size:13.5px;line-height:1.6;flex:1;}
.tool-card .tiers{display:flex;flex-direction:column;border-top:1px solid var(--border-soft);margin-top:4px;}
.tier-row{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--border-soft);font-size:13px;}
.tier-row:last-child{border-bottom:none;}
.tier-row .price{font-family:var(--mono);font-weight:600;color:var(--ink);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--ink);color:var(--paper);font-family:var(--mono);font-weight:500;
  font-size:13px;letter-spacing:-.01em;height:40px;padding:0 20px;border:1px solid var(--ink);
  border-radius:0;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:opacity .12s;
}
.btn:hover{opacity:.88;text-decoration:none;}
.btn.secondary{background:transparent;color:var(--ink);border:1px solid var(--ink);}
.btn.secondary:hover{background:rgba(12,17,22,.05);opacity:1;}
.btn.small{height:32px;padding:0 14px;font-size:12px;}
.btn[disabled]{opacity:.4;cursor:not-allowed;}

/* ── Auth cards (login / checkout) ───────────────────────────────────── */
.auth-wrap{max-width:460px;margin:64px auto;padding:0 24px;}
.oauth-btn{
  display:flex;align-items:center;gap:10px;width:100%;height:44px;padding:0 16px;
  background:var(--white);border:1px solid var(--border);color:var(--ink);
  font-family:var(--sans);font-size:13.5px;font-weight:500;cursor:pointer;margin-bottom:8px;
}
.oauth-btn:hover{border-color:var(--ink);background:var(--panel);}
.oauth-badge{
  width:20px;height:20px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;font-weight:700;color:#fff;
}
.oauth-badge.google{background:#4285F4;}
.oauth-badge.meta{background:#0866FF;}
.card{background:var(--white);border:1px solid var(--border);padding:32px 28px;}
.card h2{font-family:var(--mono);font-weight:600;font-size:19px;letter-spacing:-.02em;margin-bottom:8px;}
.card p.sub{color:var(--muted);font-size:13px;margin-bottom:22px;line-height:1.6;}
.field{margin-bottom:16px;}
.field label{display:block;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--muted-2);margin-bottom:6px;text-transform:lowercase;letter-spacing:.02em;}
.field input{width:100%;padding:10px 12px;background:var(--paper);border:1px solid var(--border);border-radius:0;color:var(--ink);font-family:var(--sans);font-size:14px;outline:none;}
.field input:focus{border-color:var(--accent);}
.hr-or{display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--muted-3);font-family:var(--mono);font-size:10.5px;text-transform:lowercase;letter-spacing:.04em;}
.hr-or::before,.hr-or::after{content:"";flex:1;height:1px;background:var(--border);}
.hint{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.55;}
.hint.error{color:var(--bad);}
.hint.ok{color:var(--good);}

/* ── Dashboard ────────────────────────────────────────────────────────── */
.dash-head{display:flex;justify-content:space-between;align-items:flex-end;padding:48px 24px 24px;max-width:1152px;margin:0 auto;flex-wrap:wrap;gap:12px;}
.dash-head h1{font-family:var(--mono);font-weight:600;font-size:26px;letter-spacing:-.02em;}
.dash-head .muted{color:var(--muted);font-size:13px;}
.entitlement-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);max-width:1152px;margin:0 auto 60px;}
.ent-card{background:var(--white);padding:22px;display:flex;flex-direction:column;gap:10px;}
.ent-card .status{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;width:fit-content;
}
.ent-card .status::before{content:"";width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.status.active{color:var(--good);} .status.active::before{background:var(--good);}
.status.expired{color:var(--warn);} .status.expired::before{background:var(--warn);}
.status.revoked{color:var(--bad);} .status.revoked::before{background:var(--bad);}
.ent-card h3{font-family:var(--mono);font-size:14.5px;font-weight:600;letter-spacing:-.02em;}
.ent-card .meta{color:var(--muted);font-size:12.5px;font-family:var(--mono);}
.empty-state{text-align:center;padding:60px 24px;color:var(--muted);max-width:1152px;margin:0 auto;font-size:14px;}
.empty-state code{background:var(--panel);padding:2px 6px;}

footer.site{
  text-align:center;color:#aab4c0;font-family:var(--mono);font-size:11px;letter-spacing:.02em;
  padding:26px 24px;background:var(--ink);border-top:1px solid var(--ink);
}

@media(max-width:560px){
  .hero h1{font-size:28px;}
  header.site nav{gap:12px;}
}