/* ──────────────────────────────────────────────────────────────────────────
   "What is the cheapest online traffic school in California?" (/cheap-traffic-school/).
   Loaded only on the post that carries [llm_cheapest]; see functions.php.
   Its own design: three price tags (lowest, middle, ours), then a price
   ladder of every school. Course prices only; no court fee. Fonts are the theme's self-hosted Work Sans and
   Roboto (fonts/site-fonts.css). No external requests.
   The site sets p{margin:20px!important} through the Customizer, so every
   paragraph here carries its own margin with !important, and any classed <a>
   names the element in its selector (`.cp a` would otherwise win).
   ────────────────────────────────────────────────────────────────────────── */

.cp {
  --cp-ink:#1E2329; --cp-ink-2:#454E57; --cp-ink-3:#6B747D; --cp-ink-4:#8C949B;
  --cp-line:#E2E6EA; --cp-band:#FFF6F1; --cp-paper:#FFFFFF; --cp-soft:#F6F8F9;
  --cp-coral:#FE8B7B; --cp-coral-d:#C9574A; --cp-teal:#12C0C5; --cp-teal-d:#0A8C90; --cp-teal-l:#DDF6F6;
  --cp-bar:#AEB7BF; --cp-blue-d:#3A8FC8;
  --cp-display:'Work Sans','Helvetica Neue',Arial,sans-serif;
  --cp-body:'Roboto','Helvetica Neue',Arial,sans-serif;
  font-family:var(--cp-body); color:var(--cp-ink-2); background:var(--cp-paper);
  -webkit-font-smoothing:antialiased; text-align:left;
}
.cp *,.cp *::before,.cp *::after { box-sizing:border-box; }
.cp p { margin:0 !important; }
.cp a { color:var(--cp-teal-d); }
.cp a:hover { color:var(--cp-ink); }
.cp :focus-visible { outline:2px solid var(--cp-blue-d); outline-offset:2px; }
.cp-wrap { max-width:1060px; margin:0 auto; padding:0 24px; }

/* ── top ─────────────────────────────────────────────────────────────────── */
.cp-top { background:var(--cp-band); padding:32px 0 48px; }
.cp .cp-eyebrow { font:600 13px/1.3 var(--cp-display); letter-spacing:.1em; text-transform:uppercase; color:var(--cp-coral-d); margin:0 0 14px !important; }
.cp .cp-h1 { font:800 clamp(34px,5.2vw,58px)/1.04 var(--cp-display); color:var(--cp-ink); letter-spacing:-.025em; margin:0 0 20px; text-transform:none; max-width:900px; }
.cp .cp-lead { font:400 clamp(18px,2.1vw,22px)/1.5 var(--cp-body); color:var(--cp-ink-2); max-width:780px; margin:0 0 12px !important; }
.cp-lead strong { color:var(--cp-ink); font-weight:700; }
.cp .cp-lead--2 { font-size:clamp(16px,1.7vw,18px); color:var(--cp-ink-3); }
.cp .cp-note { font:400 14.5px/1.55 var(--cp-body); color:var(--cp-ink-3); max-width:740px; margin:0 0 30px !important; }


/* price tags: a punched hole and a string, the totals in big type */
.cp-tags { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr); gap:22px; align-items:center; }
.cp-tag { position:relative; margin:0; background:var(--cp-paper); border:1.5px solid var(--cp-line); border-radius:6px 18px 18px 6px; padding:22px 22px 22px 34px; box-shadow:0 6px 16px rgba(30,35,41,.06); }
.cp-tag::before { content:""; position:absolute; left:12px; top:26px; width:10px; height:10px; border-radius:50%; background:var(--cp-band); border:1.5px solid var(--cp-line); }
.cp-tag__k { display:block; font:700 18px/1.2 var(--cp-display); color:var(--cp-ink); }
.cp-tag__sub { display:block; font:400 13px/1.4 var(--cp-body); color:var(--cp-ink-4); margin:4px 0 14px; min-height:18px; }
.cp-tag__total { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding-top:12px; border-top:1px dashed var(--cp-line); }
.cp-tag__total span { white-space:nowrap; font:600 12.5px/1.3 var(--cp-display); text-transform:uppercase; letter-spacing:.06em; color:var(--cp-ink-3); }
.cp-tag__total strong { font:800 clamp(30px,3.6vw,44px)/1 var(--cp-display); max-width:100%; color:var(--cp-ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.cp-tag--us { border:2px solid var(--cp-teal); box-shadow:0 14px 32px rgba(10,140,144,.18); padding-top:26px; padding-bottom:26px; }
.cp-tag--us .cp-tag__total strong { font-size:clamp(36px,4.4vw,54px); }
.cp-tag--us::before { border-color:var(--cp-teal); }
.cp-tag--us .cp-tag__k,.cp-tag--us .cp-tag__total strong { color:var(--cp-teal-d); }
.cp-tag__why { list-style:none; margin:14px 0 0; padding:0; }
.cp-tag__why li { position:relative; margin:0; padding:3px 0 3px 22px; font:500 14px/1.4 var(--cp-body); color:var(--cp-ink-2); }
.cp-tag__why li::before { content:""; position:absolute; left:3px; top:8px; width:10px; height:6px; border-left:2.5px solid var(--cp-teal-d); border-bottom:2.5px solid var(--cp-teal-d); transform:rotate(-45deg); }
.cp a.cp-cta { display:block; margin-top:16px; background:var(--cp-coral); color:#fff; text-align:center; text-decoration:none; font:600 15.5px/1.25 var(--cp-display); padding:14px 16px; border-radius:999px; box-shadow:0 6px 18px rgba(254,139,123,.35); }
.cp a.cp-cta:hover { background:#F57A68; color:#fff; }

/* ── sections ────────────────────────────────────────────────────────────── */
.cp-sect { padding:56px 0 0; scroll-margin-top:110px; }
.cp .cp-h2 { font:700 clamp(25px,3vw,33px)/1.15 var(--cp-display); color:var(--cp-ink); margin:0 0 10px; letter-spacing:-.015em; text-transform:none; }
.cp .cp-h3 { font:700 18px/1.3 var(--cp-display); color:var(--cp-ink); margin:28px 0 10px; text-transform:none; }
.cp .cp-p { font:400 16.5px/1.6 var(--cp-body); color:var(--cp-ink-3); max-width:740px; margin:0 0 22px !important; }

/* price ladder */
.cp-ladder { list-style:none; margin:0; padding:0; border-top:1px solid var(--cp-line); }
.cp-row { display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr) 150px; gap:6px 18px; align-items:center; margin:0; padding:9px 0; border-bottom:1px solid var(--cp-line); }
.cp-row__n { display:block; font:600 14.5px/1.3 var(--cp-display); color:var(--cp-ink); }
.cp-row__rank { display:inline-block; min-width:26px; color:var(--cp-ink-4); font-weight:500; font-variant-numeric:tabular-nums; }
.cp-row__tags { display:block; padding-left:26px; font:400 12.5px/1.4 var(--cp-body); color:var(--cp-ink-4); }
.cp-row__bar { position:relative; display:flex; height:16px; border-radius:3px;
  background:linear-gradient(to right,transparent calc(var(--cp-med) - 1px),var(--cp-ink-4) calc(var(--cp-med) - 1px),var(--cp-ink-4) calc(var(--cp-med) + 1px),transparent calc(var(--cp-med) + 1px)),var(--cp-soft); }
.cp-row__list { display:block; height:100%; background:var(--cp-bar); border-radius:3px 0 0 3px; }
.cp-row__add { display:block; height:100%; background:repeating-linear-gradient(45deg,var(--cp-coral) 0 4px,#FFD2CA 4px 8px); border-radius:0 3px 3px 0; }
.cp-row__v { text-align:right; font:400 12px/1.35 var(--cp-body); color:var(--cp-ink-4); }
.cp-row__v strong { display:block; font:700 17px/1.2 var(--cp-display); color:var(--cp-ink); font-variant-numeric:tabular-nums; }
.cp-row__add-t { display:block; }
.cp-row.is-us { background:var(--cp-teal-l); margin:0 -12px; padding:12px; border-radius:8px; border-bottom-color:transparent; }
.cp-row.is-us .cp-row__list { background:var(--cp-teal-d); }
.cp-row.is-us .cp-row__n a,.cp-row.is-us .cp-row__v strong { color:var(--cp-teal-d); }
.cp-unpriced { list-style:none; margin:0; padding:0; border-top:1px solid var(--cp-line); }
.cp-unpriced li { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px; margin:0; padding:9px 0; border-bottom:1px solid var(--cp-line); font:400 14px/1.4 var(--cp-body); }
.cp-unpriced__n { font-weight:600; color:var(--cp-ink); font-family:var(--cp-display); }
.cp-unpriced__v { color:var(--cp-ink-3); }

/* hidden fees */
.cp-fees { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.cp-fee { margin:0; padding:20px; background:var(--cp-soft); border-radius:12px; border-top:4px solid var(--cp-coral); }
.cp-fee__n { display:block; font:800 28px/1.05 var(--cp-display); color:var(--cp-coral-d); letter-spacing:-.02em; }
.cp-fee__t { display:block; font:600 16px/1.3 var(--cp-display); color:var(--cp-ink); margin:4px 0 8px; }
.cp-fee__d { display:block; font:400 14px/1.5 var(--cp-body); color:var(--cp-ink-3); }
.cp-fee--us { background:var(--cp-teal-l); border-top-color:var(--cp-teal-d); }
.cp-fee--us .cp-fee__n { color:var(--cp-teal-d); }

/* four checks */
.cp-checks { border-top:2px solid var(--cp-ink); }
.cp-checks__h,.cp-checks__r { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 110px; gap:12px 20px; align-items:center; padding:14px 0; border-bottom:1px solid var(--cp-line); }
.cp-checks__h { padding:10px 0; font:600 12.5px/1.3 var(--cp-display); text-transform:uppercase; letter-spacing:.06em; color:var(--cp-ink-3); }
.cp-checks__k strong { display:block; font:600 16.5px/1.3 var(--cp-display); color:var(--cp-ink); }
.cp-checks__k span { display:block; font:400 14px/1.45 var(--cp-body); color:var(--cp-ink-3); }
.cp-dots { display:flex; gap:5px; margin-bottom:6px; }
.cp-dots i { width:14px; height:14px; border-radius:50%; background:var(--cp-line); }
.cp-dots i.is-yes { background:var(--cp-ink-2); }
.cp-dots i.is-no { background:transparent; border:2px solid var(--cp-coral); }
.cp-checks__t { font:400 13.5px/1.4 var(--cp-body); color:var(--cp-ink-3); }
.cp-checks__us { font:600 15px/1.3 var(--cp-display); color:var(--cp-ink-3); }
.cp-yes { display:inline-block; color:var(--cp-teal-d); background:var(--cp-teal-l); padding:5px 12px; border-radius:999px; }
.cp-deadline { margin-top:26px; padding:22px 24px; border-radius:12px; background:var(--cp-ink); color:#fff; }
.cp .cp-deadline__t { font:700 20px/1.3 var(--cp-display); color:#fff; margin:0 0 6px !important; }
.cp .cp-deadline__d { font:400 15.5px/1.6 var(--cp-body); color:rgba(255,255,255,.82); margin:0 !important; max-width:780px; }
.cp-deadline__d strong { color:#fff; }
.cp .cp-deadline a { color:#7FE3E6; }

/* FAQ */
.cp-faq { border-top:1px solid var(--cp-line); max-width:860px; }
.cp-faq__i { border-bottom:1px solid var(--cp-line); }
.cp-faq__q { cursor:pointer; list-style:none; padding:16px 36px 16px 0; position:relative; font:600 17px/1.4 var(--cp-display); color:var(--cp-ink); }
.cp-faq__q::-webkit-details-marker { display:none; }
.cp-faq__q::after { content:""; position:absolute; right:6px; top:22px; width:9px; height:9px; border-right:2.5px solid var(--cp-ink-3); border-bottom:2.5px solid var(--cp-ink-3); transform:rotate(45deg); transition:transform .15s; }
.cp-faq__i[open] .cp-faq__q::after { transform:rotate(-135deg); top:26px; }
.cp-faq__a { padding:0 0 18px; font:400 16px/1.65 var(--cp-body); color:var(--cp-ink-2); max-width:780px; }

/* end */
.cp-sect--end { padding-bottom:56px; }
.cp-end { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px 40px; align-items:center; padding:28px 30px; border:2px solid var(--cp-teal); border-radius:18px; background:var(--cp-paper); }
.cp .cp-end__price { font:800 46px/1 var(--cp-display); color:var(--cp-teal-d); letter-spacing:-.02em; margin:0 0 14px !important; }
.cp-end__price span { font:500 15px/1 var(--cp-body); color:var(--cp-ink-3); letter-spacing:0; margin-left:6px; }
.cp-end__list { list-style:none; margin:0; padding:0; columns:2; column-gap:28px; }
.cp-end__list li { position:relative; margin:0; padding:4px 0 4px 22px; font:400 14.5px/1.45 var(--cp-body); color:var(--cp-ink-2); break-inside:avoid; }
.cp-end__list li::before { content:""; position:absolute; left:3px; top:9px; width:10px; height:6px; border-left:2.5px solid var(--cp-teal-d); border-bottom:2.5px solid var(--cp-teal-d); transform:rotate(-45deg); }
.cp-end__side a.cp-cta { margin-top:0; }
.cp-more { display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:28px; align-items:center; }
.cp-more__h { width:100%; font:600 12.5px/1.3 var(--cp-display); text-transform:uppercase; letter-spacing:.06em; color:var(--cp-ink-3); }
.cp .cp-more a { display:inline-block; padding:8px 14px; border:1px solid var(--cp-line); border-radius:999px; font:500 14px/1.3 var(--cp-body); color:var(--cp-ink-2); text-decoration:none; }
.cp .cp-more a:hover { border-color:var(--cp-teal); color:var(--cp-teal-d); }
.cp .cp-src { font:400 13px/1.5 var(--cp-body); color:var(--cp-ink-4); margin:20px 0 0 !important; }

/* the theme's data-page wrapper: no extra bottom padding under the page */
.article--data:has(.cp) { padding-bottom:0 !important; }

/* ── narrow screens ──────────────────────────────────────────────────────── */
@media (max-width:900px) {
  .cp-tags { grid-template-columns:minmax(0,1fr); }
  .cp-tag__sub { min-height:0; }
  .cp-fees { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cp-end { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px) {
  .cp-wrap { padding:0 16px; }
  .cp-top { padding:24px 0 36px; }
  .cp-row { grid-template-columns:minmax(0,1fr) 116px; }
  .cp-row__bar { grid-column:1 / -1; grid-row:2; }
  .cp-row.is-us { margin:0 -8px; padding:12px 8px; }
  .cp-fees { grid-template-columns:minmax(0,1fr); }
  .cp-checks__h { display:none; }
  .cp-checks__r { grid-template-columns:minmax(0,1fr) auto; }
  .cp-checks__k { grid-column:1 / -1; }
  .cp-end { padding:22px 18px; }
  .cp-end__list { columns:1; }
}