/* ============================================================================
   VettedSaaS — Design System stylesheet (LOCKED)
   Extracted verbatim from the approved reference bundles in /site/.
   Do NOT add, remove, or alter any value here. See 00_DESIGN-SYSTEM.md.
   The ONLY CSS custom properties in the design are colors. Every other value
   (type size, spacing, easing, duration) lives inline on the element, exactly
   as authored in the reference. Keep it that way.
   ========================================================================== */

/* --- Color tokens (the complete token set) --------------------------------- */
:root{
  --accent:#1B3AD1;          /* EDITORIAL COBALT — score, active state, single key CTA only */
  --score:var(--accent);     /* the verdict score color (set to var(--ink) to mute) */
  --ink:#0E0E10;             /* near-black: primary text + dark sections base */
  --body:#26262A;            /* body copy */
  --muted:#76767C;           /* secondary text, labels */
  --faint:#A2A2A8;           /* tertiary / hairline-adjacent text */
  --line:#E5E3DD;            /* hairline rules, borders */
  --line-soft:#EEECE6;       /* lighter internal dividers */
  --wash:#F7F6F2;            /* warm off-white section background */
  --paper:#fff;
}
/* Dark sections use #0C0C0E literally (methodology, pull-quote). Not a token. */

/* --- Base reset (verbatim from reference <style>) -------------------------- */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:#fff; }
::selection{ background:var(--accent); color:#fff; }
a{ color:inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:1px;
}
::placeholder{ color:var(--faint); }

/* --- Responsive (union of all four reference templates, verbatim) ---------- */
@media (max-width: 960px){
  .vs-wrap{ padding-left:22px !important; padding-right:22px !important; }
  #vs-mast-nav{ display:none !important; }
  #vs-hero-grid{ grid-template-columns:1fr !important; gap:40px !important; }
  #vs-vow{ max-width:100% !important; }
  /* homepage */
  #vs-h2h-head, #vs-h2h-row{ grid-template-columns:104px 1fr 1fr !important; gap:12px !important; }
  .vs-feat-grid{ grid-template-columns:1fr 1fr !important; }
  .vs-cat-grid{ grid-template-columns:1fr !important; }
  .vs-ind-grid{ grid-template-columns:1fr 1fr !important; }
  /* category hub */
  #vs-main-grid{ grid-template-columns:1fr !important; gap:40px !important; }
  #vs-rail{ position:static !important; }
  #vs-meth-grid{ grid-template-columns:1fr !important; gap:28px !important; }
  .vs-rank-row{ grid-template-columns:54px 1fr !important; gap:18px !important; }
  .vs-score-cell{ grid-column:2 !important; flex-direction:row !important; align-items:baseline !important; gap:14px !important; margin-top:6px; }
  /* verdict */
  #vs-proscons, #vs-fit, #vs-score-grid{ grid-template-columns:1fr !important; gap:36px !important; }
  #vs-pricing{ grid-template-columns:1fr 1fr !important; }
  #vs-dial{ display:none !important; }
  .vs-alt-grid{ grid-template-columns:1fr !important; }
  /* comparison */
  #vs-versus{ gap:18px !important; }
  #vs-choose, #vs-prices{ grid-template-columns:1fr !important; gap:32px !important; }
  .vs-crit-row, .vs-matrix-row{ grid-template-columns:120px 1fr 1fr !important; gap:14px !important; }
  /* shared */
  .vs-foot-grid{ grid-template-columns:1fr 1fr !important; }
}
@media (max-width: 600px){
  #vs-versus{ flex-direction:column !important; }
  #vs-versus > div{ text-align:center !important; }
  #vs-versus > div > div[style*="baseline"]{ justify-content:center !important; }
  .vs-vname{ font-size:14vw !important; }
  .vs-vmid{ flex-direction:row !important; width:auto !important; }
}
@media (max-width: 560px){
  .vs-feat-grid{ grid-template-columns:1fr !important; }
  .vs-ind-grid{ grid-template-columns:1fr !important; }
  .vs-foot-grid{ grid-template-columns:1fr !important; }
  #vs-pricing{ grid-template-columns:1fr !important; }
  .vs-rank-num{ font-size:38px !important; }
  .vs-megamark{ font-size:24vw !important; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}