/* ============================================================
   ZAXIUS THEME — "Deep Dive" design system
   Source of truth: ZAXIUS Website Deep Dive report document
   (the theme Oscar approved 2026-11-09).
   Fonts: Archivo (headings) / IBM Plex Sans (body) / IBM Plex Mono (numbers, labels)
   This file loads LAST on every page and re-skins the shared
   template components to the document's design language.
   ============================================================ */

:root{
  --bg:#ffffff; --bg2:#f4f4f2; --bg3:#ececea;
  --ink:#0e0e10; --ink2:#3d3d42; --muted:#6b6b72;
  --line:#e2e2de; --red:#e30613; --red-dark:#b8050f; --red-soft:#fff1f1;
  --black:#0e0e10; --black2:#17171a;
  --gold:#8a6d1b; --gold-bg:#fdf6dd;
  --green:#0f6b3a; --green-bg:#e9f6ee;
  --amber:#8a5a00; --amber-bg:#fff4d6;
  --card:#ffffff;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.06);
  --radius:14px;
  /* legacy template tokens, remapped to the document palette */
  --ink-2:#141416; --ink-3:#1d1d20; --line-dark:#2a2a2e;
  --paper:#ffffff; --paper-2:#f4f4f2; --line-light:#e2e2de;
  --grey:#6b6b72; --grey-2:#a3a3ad; --white:#ffffff;
}

/* ---------- Base ---------- */
body{
  font-family:"IBM Plex Sans",system-ui,sans-serif !important;
  background:var(--bg); color:var(--ink);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:"Archivo",sans-serif !important;
  line-height:1.05; letter-spacing:-.02em; color:var(--ink);
}
h1{font-weight:900}
h2{font-weight:900}
h3,h4{font-weight:800}
p{color:var(--ink2)}
::selection{background:var(--red);color:#fff}
.mono,.stat-num,.price,.num{font-family:"IBM Plex Mono",monospace}

/* ---------- Links ---------- */
a{color:var(--red)}
article a,.prose a,.post-body a{text-decoration:none}
article a:hover,.prose a:hover,.post-body a:hover{text-decoration:underline}

/* ---------- Header / Nav (document topnav: black bar, 3px red rule) ---------- */
header.site{
  background:var(--black);
  border-bottom:3px solid var(--red);
}
.main-nav .nav-link{border-radius:8px;font-weight:600}
.main-nav .nav-link:hover{background:#232327;color:#fff}
.dropdown{
  border:1px solid var(--line-dark);border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
}
.drop-item{border-radius:8px}

/* ---------- Hero kickers / eyebrows (document pill with red dot) ---------- */
.eyebrow,.kicker,.hero-kicker,.tag-line{
  letter-spacing:.08em;text-transform:uppercase;font-weight:700;
}
.hero h1 em,.hero-title em,h1 em,h2 em{font-style:normal;color:var(--red)}

/* ---------- Buttons (document .btn system) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:14.5px;
  padding:13px 20px;border-radius:10px !important;
  border:1px solid transparent;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
  text-decoration:none !important;
}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark);transform:translateY(-1px)}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-dark:hover{background:#232327}
.btn-outline{
  background:transparent;color:var(--ink);border-color:#c9c9c4;
}
.btn-outline:hover{background:var(--bg2);color:var(--ink);text-decoration:none}
.btn-white{background:#fff;color:var(--ink);border-color:#fff}
.btn-white:hover{background:var(--bg2)}
.btn-sm{padding:9px 14px;font-size:13.5px}
.btn-lg{padding:15px 24px;font-size:15.5px}
/* ghost outline on dark sections (footer/hero scopes already white-bordered) */
.on-dark .btn-outline,.dark .btn-outline,.hero .btn-outline,footer.site .btn-outline{
  color:#fff;border-color:#444449;background:transparent;
}
.on-dark .btn-outline:hover,.dark .btn-outline:hover,.hero .btn-outline:hover{
  background:#222226;color:#fff;
}

/* ---------- Cards & boxes (document card system: 14px radius, hairline, soft shadow) ---------- */
.card,.blog-card,.rel-card,.value-card,.stage-card,.calc-card,.c-card,
.fleet-card,.svc-card,.office-card,.tool-card,.post-card,.feature-card,
.service-card,.price-card,.plan-card,.testimonial-card,.faq-item,.box,
.srcbox,.bp-item,.rank-row,.gap-row{
  border-radius:var(--radius);
}
.card,.blog-card,.rel-card,.value-card,.calc-card,.c-card,.fleet-card,
.svc-card,.office-card,.tool-card,.post-card,.feature-card,.service-card,
.testimonial-card,.srcbox,.bp-item{
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.blog-card:hover,.rel-card:hover,.tool-card:hover,.svc-card:hover,.post-card:hover{
  border-color:#c9c9c4;
  box-shadow:0 2px 4px rgba(0,0,0,.07),0 18px 40px rgba(0,0,0,.09);
}
.lesson,.proof,.highlight-box,.note-box{
  background:var(--bg2);border-radius:10px;
}
.callout,.honesty-box{
  background:var(--bg2);border-left:4px solid var(--red);
  border-radius:0 10px 10px 0;
}

/* ---------- Badges, tags, pills ---------- */
.badge,.pill,.chip,.label-badge{
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 9px;border-radius:999px;white-space:nowrap;
}
.tag,.card-tag,.post-tag,.blog-tag{
  font-size:11px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--red);
}
.b-high,.badge-green,.pill-green{background:var(--green-bg);color:var(--green)}
.b-med,.badge-amber,.pill-amber{background:var(--amber-bg);color:var(--amber)}
.b-gold,.badge-gold{background:var(--gold-bg);color:var(--gold)}
.b-red,.badge-red,.sev-high{background:var(--red);color:#fff}

/* ---------- Filter / tab buttons (document pills + red tabs) ---------- */
.fbtn,.filter-btn{
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  font-weight:600;font-size:13.5px;padding:8px 14px;border-radius:999px;cursor:pointer;
}
.fbtn[aria-pressed="true"],.filter-btn.active,.filter-btn[aria-pressed="true"]{
  background:var(--ink);color:var(--bg);border-color:var(--ink);
}
.tbtn,.tab-btn{
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  font-weight:700;font-size:14.5px;padding:11px 16px;border-radius:10px;cursor:pointer;
}
.tbtn[aria-selected="true"],.tab-btn.active,.tab-btn[aria-selected="true"]{
  background:var(--red);border-color:var(--red);color:#fff;
}

/* ---------- Tables (document style) ---------- */
table{
  border-collapse:separate;border-spacing:0;width:100%;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--card);box-shadow:var(--shadow);
  font-size:14.5px;
}
thead th{
  background:var(--black);color:#fff;font-family:"Archivo",sans-serif;
  font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  text-align:left;padding:12px 14px;border:none;
}
tbody td{padding:11px 14px;border-top:1px solid var(--line);color:var(--ink2)}
tbody tr:nth-child(even) td{background:var(--bg2)}
tbody td:first-child{color:var(--ink);font-weight:600}

/* ---------- Forms ---------- */
input[type="text"],input[type="email"],input[type="tel"],input[type="number"],
input[type="url"],input[type="search"],input[type="date"],select,textarea{
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-soft);
}
label{font-weight:600;color:var(--ink)}

/* ---------- Dark audit-style boxes ---------- */
.auditbox,.dark-box,.cta-box-dark{
  background:var(--black);color:#fff;border-radius:16px;
}
.auditbox li,.dark-box li{
  background:#1b1b1f;border:1px solid #2e2e33;border-radius:10px;color:#e8e8e4;
}

/* ---------- Footer (document footer: black, Archivo brand) ---------- */
footer.site{
  background:var(--black);color:#bdbdb7;
  border-top:3px solid var(--red);
}
footer.site b,footer.site strong{color:#fff}
footer.site a:hover{color:#fff}

/* ---------- Section rhythm ---------- */
section{scroll-margin-top:90px}
.sec-head .no,.section-no{
  font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;
  color:var(--red);letter-spacing:.06em;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}

/* ---------- Author box (article bylines, added 2026-11-09) ---------- */
.author-box-section{padding:4px 0 44px}
.author-box{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:22px 24px;
}
.author-box-kicker{
  font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--red);margin:0 0 6px;
}
.author-box-name{
  font-family:"Archivo",sans-serif;font-size:20px;font-weight:800;
  letter-spacing:-.01em;color:var(--ink);margin:0 0 8px;line-height:1.2;
}
.author-box-name span{font-family:"IBM Plex Sans",sans-serif;font-size:14px;font-weight:600;color:var(--muted)}
.author-box-bio{font-size:14.5px;color:var(--ink2);margin:0 0 10px;max-width:720px}
.author-box-links{font-size:14px;font-weight:600;margin:0}
.article-meta a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.article-meta a:hover{color:var(--red)}