/* Call accounting explainer page
   Scoped tokens so this page can't fight the master Site.css. */
:root{
  --ca-bg:#0b1020;
  --ca-ink:#0f172a;
  --ca-mute:#475569;
  --ca-line:#e5e7eb;
  --ca-brand:#2563eb;
  --ca-brand-2:#7c3aed;
  --ca-teal:#0d9488;
  --ca-ok:#16a34a;
  --ca-warn:#d97706;
  --ca-violet:#7c3aed;
  --ca-card:#ffffff;
  --ca-soft:#f8fafc;
}

/* ---------- Hero ---------- */
.ca-hero{
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(124,58,237,.30), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(13,148,136,.25), transparent 60%),
    linear-gradient(180deg, #0b1020 0%, #0f172a 100%);
  color:#e2e8f0;
  padding:72px 0 56px;
}
.ca-eyebrow{
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:#a5b4fc; margin:0 0 14px;
}
.ca-hero h1{
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height:1.1; margin:0 0 16px; color:#fff;
  letter-spacing:-.01em;
}
.ca-lede{
  max-width: 760px; font-size:1.1rem; line-height:1.6; color:#cbd5e1; margin:0 0 26px;
}
.ca-hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.ca-hero-chips{
  list-style:none; padding:0; margin:0;
  display:flex; gap:18px; flex-wrap:wrap; color:#cbd5e1; font-size:.92rem;
}
.ca-hero-chips em{ color:#fff; font-style:normal;  }
.ca-hero-chips .dot{
  display:inline-block; width:8px; height:8px; border-radius:999px; margin-right:8px;
  vertical-align:middle;
}
.ca-hero-chips .dot.warn{ background:var(--ca-warn); }
.ca-hero-chips .dot.ok{ background:var(--ca-ok); } /* for some reason it doesn't position in middle*/
.ca-hero-chips .dot.teal{ background:var(--ca-teal); }
.ca-hero-chips .dot.violet{ background:var(--ca-violet); }

/* ---------- Buttons ---------- */
.ca-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px; border-radius:10px; font-weight:600; font-size:.95rem;
  text-decoration:none; transition:transform .15s ease, background .15s ease, color .15s ease;
}
.ca-btn-primary{ background:var(--ca-brand); color:#fff; }
.ca-btn-primary:hover{ background:#1d4ed8; transform:translateY(-1px); }
.ca-btn-ghost{
  background:rgba(255,255,255,.06); color:#fff;
  border:1px solid rgba(255,255,255,.18);
}
.ca-btn-ghost:hover{ background:rgba(255,255,255,.12); }

/* ---------- Shell layout ---------- */
.ca-shell{ background:var(--ca-soft); padding:48px 0 72px; color:var(--ca-ink); }
.ca-grid{
  display:grid; grid-template-columns: 260px minmax(0,1fr); gap:40px;
  align-items:flex-start;
}
@media (max-width: 1024px){
  .ca-grid{ grid-template-columns: 1fr; gap:24px; }
}

/* ---------- TOC ---------- */
.ca-toc{
  position:sticky; top:96px;
  background:#fff; border:1px solid var(--ca-line); border-radius:14px;
  padding:18px 18px 16px;
}
.ca-toc-title{
  margin:0 0 10px; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ca-mute);
}
.ca-toc ol{ list-style:none; counter-reset:t; padding:0; margin:0 0 14px; }
.ca-toc li{ counter-increment:t; }
.ca-toc li a{
  display:block; padding:7px 0; font-size:.92rem; color:#0f172a;
  text-decoration:none; border-bottom:1px dashed transparent;
}
.ca-toc li a::before{
  content: counter(t, decimal-leading-zero) "  ";
  color:var(--ca-mute); font-variant-numeric: tabular-nums;
}
.ca-toc li a:hover{ color:var(--ca-brand); border-bottom-color:var(--ca-brand); }
.ca-toc-cta{
  display:block; text-align:center; padding:10px 12px; border-radius:10px;
  background:linear-gradient(135deg, var(--ca-brand), var(--ca-brand-2));
  color:#fff; font-weight:600; font-size:.9rem; text-decoration:none;
}
.ca-toc-cta:hover{ filter:brightness(1.05); }
@media (max-width: 1024px){
  .ca-toc{ position:static; }
}

/* ---------- Article ---------- */
.ca-article{ min-width:0; }
.ca-block{
  background:#fff; border:1px solid var(--ca-line); border-radius:16px;
  padding:28px 30px; margin:0 0 20px;
  scroll-margin-top:96px;
}
.ca-block h2{
  font-size:1.55rem; margin:0 0 14px; letter-spacing:-.01em;
}
.ca-block h3{ margin:0 0 6px; font-size:1.05rem; }
.ca-block p{ margin:0 0 12px; line-height:1.65; color:#1f2937; }
.ca-block a{ color:var(--ca-brand); text-decoration:underline; text-underline-offset:3px; }

/* ---------- Callouts ---------- */
.ca-callout{
  background:#eff6ff; border-left:4px solid var(--ca-brand);
  padding:12px 14px; border-radius:8px;
}
.ca-callout.warn{ background:#fff7ed; border-left-color:var(--ca-warn); }
.ca-callout.ok  { background:#f0fdf4; border-left-color:var(--ca-ok); }

/* ---------- Code block ---------- */
.ca-code{
  background:#0b1020; color:#e2e8f0;
  border-radius:12px; padding:16px 18px;
  font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow:auto; margin:6px 0 14px;
  border:1px solid rgba(255,255,255,.06);
}

/* ---------- Two-column mini ---------- */
.ca-twocol{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ca-mini{
  background:var(--ca-soft); border:1px solid var(--ca-line);
  border-radius:12px; padding:16px 16px 12px;
}
@media (max-width:640px){ .ca-twocol{ grid-template-columns:1fr; } }

/* ---------- Numbered steps ---------- */
.ca-steps{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.ca-steps li{
  display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:flex-start;
  background:var(--ca-soft); border:1px solid var(--ca-line); border-radius:12px; padding:14px 16px;
}
.ca-steps .num{
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg, var(--ca-brand), var(--ca-brand-2));
  color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center;
}

/* ---------- Why grid ---------- */
.ca-why{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-top:8px;
}
.ca-why > div{
  background:var(--ca-soft); border:1px solid var(--ca-line); border-radius:10px;
  padding:12px 14px; font-size:.95rem; color:#1f2937;
}
@media (max-width:640px){ .ca-why{ grid-template-columns:1fr; } }

/* ---------- Fraud block ---------- */
.ca-fraud{
  background:linear-gradient(180deg,#fff 0%, #fff7ed 100%);
  border-color:#fed7aa;
}
.ca-fraud h2{ color:#9a3412; }

/* ---------- Problems ---------- */
.ca-problems{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ca-problem{
  background:var(--ca-soft); border:1px solid var(--ca-line);
  border-radius:12px; padding:16px 18px;
}
.ca-problem h3{ color:#0f172a; margin-bottom:8px; }
.ca-problem em{ color:var(--ca-mute); font-style:normal; font-weight:600; margin-right:4px; }
@media (max-width: 860px){ .ca-problems{ grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.ca-faq{
  border:1px solid var(--ca-line); border-radius:12px;
  padding:14px 16px; margin-bottom:10px; background:var(--ca-soft);
}
.ca-faq summary{
  cursor:pointer; font-weight:600; color:#0f172a; list-style:none;
}
.ca-faq summary::-webkit-details-marker{ display:none; }
.ca-faq summary::after{
  content:"+"; float:right; color:var(--ca-mute); font-weight:700;
}
.ca-faq[open] summary::after{ content:"−"; }
.ca-faq p{ margin:10px 0 0; color:#334155; line-height:1.6; }

/* ---------- Final CTA ---------- */
.ca-final{
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  background:linear-gradient(135deg, #0f172a, #1e293b);
  color:#fff; border-radius:16px; padding:26px 28px; margin-top:8px;
}
.ca-final h2{ margin:0 0 6px; color:#fff; }
.ca-final p{ margin:0; color:#cbd5e1; }
.ca-final-cta{ display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:760px){
  .ca-final{ flex-direction:column; align-items:flex-start; }
}