/* ============================================================
   Prompt Queen AI — Tool Reviews
   PQAI design system (Instrument Serif / DM Sans / IBM Plex Mono ·
   ink-maroon, ivory, cerise, gold, rose)
   ============================================================ */

:root {
  --maroon-950:#260A0F; --maroon-900:#38111B; --maroon-800:#4A1824; --maroon-700:#5F2130;
  --ivory-50:#FDFBF7; --ivory-100:#FAF6EE; --ivory-200:#F4EDE1;
  --cerise-300:#EE96B2; --cerise-500:#D42A5F; --cerise-600:#AD1A4C; --cerise-700:#8C123D;
  --rose-300:#D5C6C2; --rose-500:#9C8380; --rose-600:#7D6663;
  --gold-300:#E0CD9F; --gold-500:#C2A05C; --gold-700:#79602B;
  --green:#35714F;

  --bg-page:var(--ivory-100);
  --surface-card:var(--ivory-50);
  --surface-sunken:var(--ivory-200);
  --surface-ink:var(--maroon-900);
  --text-heading:var(--maroon-900);
  --text-body:#43302F;
  --text-muted:var(--rose-600);
  --text-on-ink:var(--ivory-100);
  --text-on-ink-muted:#D4B9BC;
  --text-accent:var(--cerise-600);
  --border-subtle:#E6DCCB;
  --border-strong:var(--rose-300);
  --border-ink:#5A2833;

  --font-serif:'Instrument Serif','Iowan Old Style',Georgia,serif;
  --font-sans:'DM Sans',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;
  --wrap:1200px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg-page); color:var(--text-body);
  font-family:var(--font-sans); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }

.overline {
  font-family:var(--font-mono); font-size:.75rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-accent); display:inline-block;
}
.overline.gold { color:var(--gold-700); }

/* ---------- nav (matches chrome.jsx SiteNav) ---------- */
.site-nav { position:sticky; top:0; z-index:50; background:var(--bg-page); border-bottom:1px solid var(--border-subtle); }
.nav-inner { max-width:var(--wrap); margin:0 auto; padding:0 32px; height:72px; display:flex; align-items:center; gap:32px; }
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-logo .crown { width:30px; height:auto; display:block; }
.nav-word { font-family:var(--font-serif); font-size:1.35rem; color:var(--maroon-900); line-height:1; }
.nav-logo.light .nav-word { color:var(--ivory-100); }
.nav-links { display:flex; gap:26px; margin-left:auto; align-items:center; flex-wrap:wrap; }
.nav-links a { font-family:var(--font-sans); font-size:.9375rem; font-weight:500; color:var(--text-body); padding-bottom:2px; border-bottom:2px solid transparent; transition:color .2s,border-color .2s; }
.nav-links a:hover { color:var(--cerise-600); }
.nav-links a.is-active { font-weight:600; color:var(--cerise-600); border-bottom-color:var(--cerise-500); }
.nav-cta { font-family:var(--font-sans); font-size:.875rem; font-weight:600; white-space:nowrap; background:var(--cerise-600); color:var(--ivory-50); padding:.55rem 1rem; border-radius:8px; transition:background .2s; }
.nav-cta:hover { background:var(--cerise-700); }

/* ---------- footer (matches chrome.jsx SiteFooter) ---------- */
.site-footer { background:var(--surface-ink); color:var(--text-on-ink); margin-top:5rem; }
.footer-inner { max-width:var(--wrap); margin:0 auto; padding:64px 32px 40px; }
.footer-cols { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; }
.footer-brand p { margin:1rem 0 0; font-size:14px; line-height:1.65; color:var(--text-on-ink-muted); max-width:320px; }
.footer-col { display:flex; flex-direction:column; gap:10px; font-size:14px; }
.footer-h { font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-300); margin-bottom:4px; }
.footer-col a { color:var(--text-on-ink-muted); transition:color .2s; }
.footer-col a:hover { color:var(--ivory-100); }
.footer-base { border-top:1px solid var(--border-ink); margin-top:48px; padding-top:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--font-mono); font-size:11px; color:var(--text-on-ink-muted); }

/* ============================================================
   REVIEWS HUB
   ============================================================ */
.hub-head { max-width:var(--wrap); margin:0 auto; padding:4rem 32px 1rem; }
.hub-head h1 { font-family:var(--font-serif); font-weight:400; font-size:clamp(2.6rem,5vw,3.8rem); line-height:1.05; letter-spacing:-.015em; color:var(--text-heading); margin:.8rem 0 0; }
.hub-lede { max-width:44rem; font-size:1.1875rem; color:var(--text-body); margin:1.1rem 0 .6rem; }
.hub-byline { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.hub { max-width:var(--wrap); margin:0 auto; padding:2rem 32px 3rem; }
.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.rcard { display:flex; flex-direction:column; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:16px; padding:1.7rem; transition:transform .2s ease, box-shadow .2s ease, border-color .2s; }
.rcard:hover { transform:translateY(-4px); box-shadow:0 18px 36px -24px rgba(38,10,15,.4); border-color:var(--rose-300); }
.rcard-top { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
.rcard-tool { font-family:var(--font-serif); font-size:1.6rem; color:var(--text-heading); }
.rcard-score { font-family:var(--font-serif); font-size:1.9rem; color:var(--gold-700); line-height:1; }
.rcard-score small { font-family:var(--font-mono); font-size:.6rem; color:var(--text-muted); letter-spacing:.05em; }
.rcard-verdict { font-family:var(--font-serif); font-style:italic; font-size:1.18rem; line-height:1.4; color:var(--text-body); margin:.9rem 0 1.1rem; }
.rcard-meta { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.rpill { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; padding:.3rem .6rem; border-radius:100px; }
.rpill.best { background:var(--surface-sunken); color:var(--gold-700); border:1px solid var(--border-subtle); }
.rpill.price { background:none; color:var(--text-muted); border:1px solid var(--border-subtle); }
.rcard-read { margin-top:auto; font-family:var(--font-sans); font-weight:600; font-size:.9375rem; color:var(--cerise-600); border-top:1px solid var(--border-subtle); padding-top:.9rem; }

/* summary compare */
.summary { max-width:var(--wrap); margin:0 auto; padding:1rem 32px 4rem; }
.summary h2 { font-family:var(--font-serif); font-weight:400; font-size:1.9rem; color:var(--text-heading); margin:0 0 1.2rem; }

/* ============================================================
   REVIEW DETAIL PAGE
   ============================================================ */
.review { max-width:44rem; margin:0 auto; padding:3rem 32px 2rem; }
.review .eyebrow { font-family:var(--font-mono); font-size:.75rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--cerise-600); display:block; margin-bottom:.9rem; }
.review .meta { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin:0 0 1.2rem; }
.review h1 { font-family:var(--font-serif); font-weight:400; font-size:clamp(2.4rem,5vw,3.4rem); line-height:1.08; letter-spacing:-.015em; color:var(--text-heading); margin:0; }

/* verdict card */
.verdict { background:radial-gradient(130% 130% at 85% 0%, var(--maroon-700) 0%, var(--maroon-900) 60%); color:var(--text-on-ink); border-radius:18px; padding:34px 36px; margin:34px 0 40px; }
.verdict .vlabel { font-family:var(--font-mono); font-size:.7rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--cerise-300); margin:0 0 14px; }
.vscore { display:flex; align-items:baseline; gap:8px; margin:0 0 14px; }
.vscore .num { font-family:var(--font-serif); font-size:60px; line-height:.9; color:var(--gold-300); }
.vscore .den { font-family:var(--font-mono); font-size:14px; color:var(--text-on-ink-muted); letter-spacing:.05em; }
.vline { font-family:var(--font-serif); font-size:1.45rem; line-height:1.3; color:var(--ivory-100); margin:0 0 24px; }
.vfoot { display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding-top:22px; border-top:1px solid rgba(224,205,159,.28); }
.vfoot .best { font-family:var(--font-mono); font-size:.62rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--maroon-900); background:var(--gold-300); border-radius:999px; padding:.45rem .8rem; }
.vfoot .price { font-family:var(--font-mono); font-size:13px; color:var(--text-on-ink-muted); letter-spacing:.03em; }
.cta-pending { margin-left:auto; display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-sans); font-weight:600; font-size:14px; color:var(--ivory-100); background:rgba(212,42,95,.32); border:1px dashed var(--cerise-300); padding:12px 18px; border-radius:10px; white-space:nowrap; cursor:not-allowed; }
.cta-pending .soon { font-family:var(--font-mono); font-weight:400; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-300); }
@media(max-width:560px){ .cta-pending { margin-left:0; width:100%; justify-content:center; } }
.vfoot .cta { margin-left:auto; display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-sans); font-weight:600; font-size:14px; color:var(--ivory-50); background:var(--cerise-600); border:1px solid var(--cerise-600); padding:12px 18px; border-radius:10px; white-space:nowrap; text-decoration:none; transition:background .2s; }
.vfoot .cta:hover { background:var(--cerise-700); }
.vfoot .code-note { flex-basis:100%; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; color:var(--text-on-ink-muted); }
@media(max-width:560px){ .vfoot .cta { margin-left:0; width:100%; justify-content:center; } }

/* body prose */
.rbody { font-size:1.1875rem; line-height:1.72; color:var(--text-body); }
.rbody p { margin:0 0 1.3rem; }
.rbody p.lead { color:var(--text-heading); }
.review h2 { font-family:var(--font-serif); font-weight:400; font-size:1.9rem; color:var(--text-heading); margin:2.6rem 0 1rem; letter-spacing:-.01em; }

/* scorecard */
.scorecard { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin:.5rem 0 .5rem; }
.col h3 { font-family:var(--font-mono); font-size:.7rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--text-muted); margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid var(--border-strong); }
.col ul { list-style:none; margin:0; padding:0; }
.col li { display:flex; gap:10px; font-size:1.02rem; line-height:1.5; margin:0 0 13px; color:var(--text-body); }
.mark { font-weight:700; flex:0 0 auto; }
.works .mark { color:var(--green); }
.nope .mark { color:var(--cerise-600); }
@media(max-width:560px){ .scorecard { grid-template-columns:1fr; gap:20px; } }

/* compare table */
.rtable-wrap { overflow-x:auto; border:1px solid var(--border-subtle); border-radius:12px; margin:.5rem 0; }
.rtable { border-collapse:collapse; width:100%; }
.rtable th { font-family:var(--font-mono); font-size:.7rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ivory-100); background:var(--maroon-900); text-align:left; padding:.8rem 1rem; }
.rtable td { font-size:.98rem; color:var(--text-body); padding:.85rem 1rem; border-top:1px solid var(--border-subtle); vertical-align:top; }
.rtable tr:nth-child(even) td { background:var(--ivory-200); }
.rtable td.tool { font-weight:600; color:var(--text-heading); }
.rtable .s { font-family:var(--font-serif); font-size:1.4rem; color:var(--text-heading); }
.rtag { display:inline-block; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cerise-600); border:1px solid var(--rose-300); border-radius:999px; padding:.1rem .45rem; margin-left:8px; vertical-align:middle; }
@media(max-width:560px){ .rtable th:nth-child(3),.rtable td:nth-child(3){ display:none; } }

/* disclosure + back */
.disclosure { max-width:44rem; margin:0 auto; padding:0 32px; }
.disclosure-inner { margin-top:1rem; padding-top:22px; border-top:1px solid var(--border-strong); }
.disclosure h4 { font-family:var(--font-mono); font-size:.7rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--text-muted); margin:0 0 10px; }
.disclosure p { font-size:.9rem; color:var(--text-muted); margin:0; }
.back-link { display:inline-block; margin-top:1.8rem; font-family:var(--font-sans); font-weight:600; font-size:.9375rem; color:var(--cerise-600); }
.back-link:hover { color:var(--cerise-700); }

/* responsive */
@media (max-width:900px) {
  .review-grid { grid-template-columns:1fr; }
  .footer-cols { grid-template-columns:1fr 1fr; gap:32px; }
  .nav-cta { display:none; }
}
@media (max-width:560px) {
  .nav-links { gap:16px; } .nav-links a { font-size:.85rem; }
  .hub-head, .hub, .summary { padding-left:22px; padding-right:22px; }
  .review, .disclosure { padding-left:22px; padding-right:22px; }
  .footer-cols { grid-template-columns:1fr; }
  .verdict { padding:26px 22px; }
}