/* ============================================================
   xcelrack.com — shared styles.

   Extracted from index.html once the site grew past one page. One
   cached request beats four copies drifting apart, and every page
   after the first pays nothing for it.

   No web fonts: a system stack renders immediately and costs no round
   trip. No framework — this whole file is smaller than a icon set.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
:root{
  --navy:#0b1220; --ink:#0f172a; --body:#475569; --muted:#64748b;
  --line:#e2e8f0; --line-soft:#eef2f7; --bg:#fff; --bg-2:#f8fafc; --bg-3:#f1f5f9;
  --blue:#2563eb; --blue-dk:#1d4ed8; --blue-soft:#eff6ff;
  --ok:#059669; --err:#dc2626; --warn:#b45309;
  --r:12px; --wrap:1140px; --wrap-text:760px;
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--ink);line-height:1.2;margin:0;letter-spacing:-.02em}
p{margin:0}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-text{max-width:var(--wrap-text);margin:0 auto;padding:0 24px}

/* ── Header ─────────────────────────────────────────────────── */
header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line-soft);
}
.nav{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:9px;font-weight:750;color:var(--ink);font-size:17px;letter-spacing:-.02em}
.brand svg{width:24px;height:24px;flex:0 0 auto}
.nav-spacer{flex:1 1 auto}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-size:14.5px;font-weight:550;color:var(--body)}
.nav-links a:hover{color:var(--ink)}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--ink)}

/* ── Buttons ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-size:14.5px;font-weight:600;padding:9px 17px;border-radius:9px;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,transform .06s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dk)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:#cbd5e1;background:var(--bg-2)}
.btn-lg{font-size:15.5px;padding:12px 22px;border-radius:10px}

/* ── Sections ───────────────────────────────────────────────── */
section{padding:80px 0}
.sec-head{max-width:660px;margin:0 auto 48px;text-align:center}
.sec-head h2{font-size:clamp(26px,3.4vw,36px);font-weight:750}
.sec-head p{margin-top:14px;font-size:16.5px}

/* ── Page header (secondary pages) ──────────────────────────── */
.page-head{
  padding:56px 0 34px;border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,var(--blue-soft),transparent);
}
.page-head h1{font-size:clamp(28px,4vw,40px);font-weight:770}
.page-head p{margin-top:12px;font-size:16.5px;max-width:62ch}
.page-head .meta{margin-top:14px;font-size:13px;color:var(--muted)}

/* ── Long-form text ─────────────────────────────────────────── */
.doc{padding:44px 0 72px}
.doc h2{font-size:20px;font-weight:720;margin:34px 0 10px}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:16px;font-weight:680;margin:22px 0 7px}
.doc p{margin:0 0 13px;font-size:15.5px;line-height:1.72}
.doc ul{margin:0 0 15px;padding-left:22px}
.doc li{margin-bottom:7px;font-size:15.5px;line-height:1.7}
.doc strong{color:var(--ink)}
.doc a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.doc table{width:100%;border-collapse:collapse;margin:6px 0 20px;font-size:14.5px}
.doc th{text-align:left;font-size:11px;font-weight:750;color:var(--muted);text-transform:uppercase;
        letter-spacing:.04em;padding:8px 12px;border-bottom:1px solid var(--line)}
.doc td{padding:9px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.doc tr:last-child td{border-bottom:0}
.callout{
  background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:8px;padding:14px 16px;margin:0 0 20px;
}
.callout p{margin:0;font-size:14.5px}

/* ── Cards ──────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.card h3{font-size:16px;font-weight:690;margin-bottom:7px}
.card p{font-size:14.5px;color:var(--muted);line-height:1.65}
.ico{width:34px;height:34px;border-radius:9px;background:var(--blue-soft);color:var(--blue);
     display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.ico svg{width:18px;height:18px}

/* ── Forms ──────────────────────────────────────────────────── */
label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:15px}
.req{color:var(--err);font-weight:400}
input,textarea,select{
  font:inherit;font-size:14.5px;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;color:var(--ink);background:#fff;width:100%;resize:vertical;
}
input:focus,textarea:focus{outline:2px solid var(--blue);outline-offset:-1px;border-color:var(--blue)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--err)}
.err{font-size:12.5px;color:var(--err);font-weight:500;margin:-11px 0 12px}
.form-note{font-size:12.5px;color:var(--muted)}
.alert{padding:12px 14px;border-radius:9px;font-size:14px;display:none;margin-bottom:14px}
.alert.show{display:block}
.alert-ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.alert-err{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
/* Honeypot: reachable to a bot reading the DOM, invisible to a person.
   Never display:none — some bots skip those. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── FAQ ────────────────────────────────────────────────────── */
details{border:1px solid var(--line);border-radius:10px;padding:0;margin-bottom:10px;background:#fff}
details[open]{border-color:#cbd5e1}
summary{
  cursor:pointer;padding:14px 18px;font-size:15px;font-weight:620;color:var(--ink);
  list-style:none;display:flex;align-items:center;gap:10px;
}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';margin-left:auto;font-size:19px;color:var(--muted);font-weight:400;line-height:1}
details[open] summary::after{content:'\2212'}
summary:hover{background:var(--bg-2)}
details .body{padding:0 18px 16px;font-size:14.8px;line-height:1.7}
details .body p{margin:0 0 10px}
details .body p:last-child{margin:0}

/* ── Footer ─────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line-soft);padding:40px 0;background:var(--bg-2)}
.foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.foot-spacer{flex:1 1 auto}
.foot a:hover{color:var(--ink)}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:720px){
  .nav-links{
    display:none;position:absolute;top:64px;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    gap:0;padding:8px 24px 16px;
  }
  .nav-links.open{display:flex}
  .nav-links a,.nav-links .btn{padding:11px 0;font-size:15px;justify-content:flex-start}
  .nav-links .btn{margin-top:6px;justify-content:center;padding:11px 17px}
  .nav-toggle{display:block}
  section{padding:56px 0}
  .page-head{padding:40px 0 26px}
}