/* ──────────────────────────────────────────────────────────────────────────
   "Is traffic school worth it?" (/go-to-traffic-school/).
   Loaded only on the post that carries [llm_worth_it]; see functions.php.
   Its own design: the decision as two receipts for the reader's county.
   Fonts are the theme's self-hosted Work Sans and Roboto (fonts/site-fonts.css)
   plus the system monospace for receipt lines. No external requests.
   The site sets p{margin:20px!important} through the Customizer, so every
   paragraph here carries its own margin with !important.
   ────────────────────────────────────────────────────────────────────────── */

.wi {
  --wi-ink:#1E2329; --wi-ink-2:#454E57; --wi-ink-3:#6B747D; --wi-ink-4:#8C949B;
  --wi-line:#E2E6EA; --wi-rule:#EEF1F3; --wi-band:#EEF2F5; --wi-paper:#FFFFFF;
  --wi-coral:#FE8B7B; --wi-coral-d:#C9574A; --wi-teal:#12C0C5; --wi-teal-d:#0A8C90; --wi-teal-l:#DDF6F6;
  --wi-blue-d:#3A8FC8;
  --wi-display:'Work Sans','Helvetica Neue',Arial,sans-serif;
  --wi-body:'Roboto','Helvetica Neue',Arial,sans-serif;
  --wi-mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-family:var(--wi-body); color:var(--wi-ink-2); background:var(--wi-paper);
  -webkit-font-smoothing:antialiased; text-align:left;
}
.wi *,.wi *::before,.wi *::after { box-sizing:border-box; }
.wi p { margin:0 !important; }
.wi a { color:var(--wi-teal-d); }
.wi a:hover { color:var(--wi-ink); }
.wi :focus-visible { outline:2px solid var(--wi-blue-d); outline-offset:2px; }
.wi-sr { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.wi-wrap { max-width:1060px; margin:0 auto; padding:0 24px; }

/* ── top: question, answer, county sentence, receipts ────────────────────── */
.wi-top { background:var(--wi-band); padding:32px 0 56px; }
.wi .wi-q { font:600 13px/1.3 var(--wi-display); letter-spacing:.12em; text-transform:uppercase; color:var(--wi-teal-d); margin:0 0 14px !important; }
.wi .wi-h1 { font:800 clamp(38px,6vw,68px)/1 var(--wi-display); color:var(--wi-ink); letter-spacing:-.025em; margin:0 0 20px; text-transform:none; }
.wi .wi-lead { font:400 clamp(19px,2.2vw,24px)/1.45 var(--wi-body); color:var(--wi-ink-2); max-width:760px; margin:0 0 12px !important; }
.wi-lead strong { color:var(--wi-ink); font-weight:700; }
.wi .wi-note { font:400 15px/1.55 var(--wi-body); color:var(--wi-ink-3); max-width:700px; margin:0 0 30px !important; }

.wi-pick { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; margin:0 0 26px; font:600 clamp(20px,2.4vw,26px)/1.3 var(--wi-display); color:var(--wi-ink); }
.wi-pick__t { font:inherit; color:inherit; margin:0; }
.wi-pick__box { position:relative; display:inline-block; max-width:100%; }
.wi-pick__box::after { content:""; position:absolute; right:4px; top:50%; width:9px; height:9px; margin-top:-7px; border-right:2.5px solid var(--wi-teal-d); border-bottom:2.5px solid var(--wi-teal-d); transform:rotate(45deg); pointer-events:none; }
.wi select.wi-pick__s { appearance:none; -webkit-appearance:none; margin:0; height:auto; min-width:0; max-width:100%; background:transparent; border:0; border-bottom:3px solid var(--wi-teal); border-radius:0; padding:0 26px 2px 2px; font:inherit; color:var(--wi-teal-d); cursor:pointer; box-shadow:none; }
.wi select.wi-pick__s:focus { outline:none; border-bottom-color:var(--wi-ink); }
.wi-nojs .wi-pick__box,.wi-nojs .wi-pick__t { display:none; }
.wi-pick__dot { margin-left:-8px; }

.wi-receipts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; align-items:start; }
.wi-rc { position:relative; background:var(--wi-paper); padding:26px 26px 30px; filter:drop-shadow(0 8px 18px rgba(30,35,41,.09)); }
/* torn-paper bottom edge */
.wi-rc::after { content:""; position:absolute; left:0; right:0; bottom:-10px; height:10px;
  background:linear-gradient(-45deg,transparent 7px,var(--wi-paper) 0) 0 0/14px 10px repeat-x,
             linear-gradient(45deg,transparent 7px,var(--wi-paper) 0) 0 0/14px 10px repeat-x; }
.wi-rc__h { border-bottom:2px dashed var(--wi-line); padding-bottom:16px; margin-bottom:10px; }
.wi-rc__k { display:block; font:500 12px/1.4 var(--wi-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--wi-ink-4); margin-bottom:6px; }
.wi .wi-rc__t { font:700 22px/1.2 var(--wi-display); margin:0; text-transform:none; letter-spacing:-.01em; }
.wi-rc--pay .wi-rc__t { color:var(--wi-coral-d); }
.wi-rc--school .wi-rc__t { color:var(--wi-teal-d); }
.wi-rc__lines { margin:0; padding:0; }
.wi-rc__l { display:flex; align-items:baseline; gap:8px; padding:7px 0; font:400 14.5px/1.4 var(--wi-mono); color:var(--wi-ink-2); }
.wi-rc__l dt { flex:0 1 auto; margin:0; font:inherit; color:inherit; }
.wi-rc__l::after { content:""; order:1; flex:1 1 20px; border-bottom:1.5px dotted var(--wi-line); transform:translateY(-4px); min-width:20px; }
.wi-rc__l dd { order:2; flex:0 0 auto; margin:0; font:inherit; color:var(--wi-ink); font-weight:600; text-align:right; }
.wi-rc__l.is-muted dt,.wi-rc__l.is-muted dd { color:var(--wi-ink-4); font-weight:400; }
.wi-rc__total { display:flex; justify-content:space-between; align-items:baseline; gap:12px; border-top:2px solid var(--wi-ink); margin-top:12px; padding-top:14px; }
.wi-rc__total span { font:600 13px/1.3 var(--wi-mono); text-transform:uppercase; letter-spacing:.04em; color:var(--wi-ink-2); }
.wi-rc__total strong { font:800 clamp(30px,3.6vw,40px)/1 var(--wi-display); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.wi-rc--pay .wi-rc__total strong { color:var(--wi-coral-d); }
.wi-rc--school .wi-rc__total strong { color:var(--wi-teal-d); }
.wi .wi-rc__src { font:400 12px/1.5 var(--wi-body); color:var(--wi-ink-4); margin:12px 0 0 !important; }

.wi-stamp { position:absolute; top:18px; right:18px; transform:rotate(-7deg); border:3px solid var(--wi-teal-d); border-radius:8px; padding:6px 12px 7px; color:var(--wi-teal-d); text-align:center; background:rgba(255,255,255,.85); }
.wi-stamp span { display:block; font:700 10.5px/1.2 var(--wi-mono); letter-spacing:.12em; text-transform:uppercase; }
.wi-stamp strong { display:block; font:800 22px/1.1 var(--wi-display); font-variant-numeric:tabular-nums; }

.wi a.wi-cta { display:block; margin-top:20px; background:var(--wi-coral); color:#fff; text-align:center; text-decoration:none; font:600 16px/1 var(--wi-display); padding:16px 20px; border-radius:999px; box-shadow:0 6px 18px rgba(254,139,123,.35); }
.wi a.wi-cta:hover { background:#F57A68; color:#fff; }
.wi .wi-cta__fine { font:400 13px/1.5 var(--wi-body); color:var(--wi-ink-3); text-align:center; margin:8px 0 0 !important; }

/* ── sections ────────────────────────────────────────────────────────────── */
.wi-sect { padding:56px 0 0; }
/* the site header is fixed (90px), so anchors and scroll-to targets clear it */
.wi-sect,.wi-pick { scroll-margin-top:110px; }
.wi .wi-h2 { font:700 clamp(26px,3vw,34px)/1.15 var(--wi-display); color:var(--wi-ink); margin:0 0 10px; letter-spacing:-.015em; text-transform:none; }
.wi .wi-p { font:400 17px/1.6 var(--wi-body); color:var(--wi-ink-3); max-width:720px; margin:0 0 22px !important; }
.wi .wi-p--small { font-size:14.5px; margin:18px 0 0 !important; }

/* payback strip: 36 months */
.wi-strip { max-width:900px; }
.wi-strip__bar { position:relative; height:34px; background:var(--wi-teal-l); border-radius:6px; overflow:hidden; }
.wi-strip__paid { position:absolute; left:0; top:0; bottom:0; min-width:6px; background:var(--wi-ink); }
.wi-strip__bar b { position:absolute; top:0; bottom:0; width:1px; background:rgba(10,140,144,.18); }
.wi-strip__bar b.is-year { background:rgba(10,140,144,.55); width:2px; }
.wi-strip__axis { position:relative; height:14px; margin-top:8px; font:400 12px/1 var(--wi-mono); color:var(--wi-ink-4); }
.wi-strip__axis span { position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; }
.wi-strip__axis span:nth-child(1) { left:0; transform:none; }
.wi-strip__axis span:nth-child(2) { left:33.333%; }
.wi-strip__axis span:nth-child(3) { left:66.667%; }
.wi-strip__axis span:nth-child(4) { right:0; left:auto; transform:none; }
.wi-strip__key { display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px; margin-top:14px; font:400 13.5px/1.4 var(--wi-body); color:var(--wi-ink-3); }
.wi-strip__sw { display:inline-block; width:14px; height:14px; border-radius:3px; }
.wi-strip__sw--paid { background:var(--wi-ink); }
.wi-strip__ki { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.wi-strip__sw--keep { background:var(--wi-teal-l); border:1px solid rgba(10,140,144,.35); }

/* benefits + video */
.wi-ben { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:32px 48px; align-items:start; margin-top:18px; }
.wi-ben__list { list-style:none; margin:0; padding:0; border-top:1px solid var(--wi-line); }
.wi-ben__i { margin:0; padding:14px 0 14px 30px; border-bottom:1px solid var(--wi-line); position:relative; }
.wi-ben__i::before { content:""; position:absolute; left:4px; top:20px; width:12px; height:7px; border-left:2.5px solid var(--wi-teal-d); border-bottom:2.5px solid var(--wi-teal-d); transform:rotate(-45deg); }
.wi-ben__t { display:block; font:600 16.5px/1.35 var(--wi-display); color:var(--wi-ink); margin-bottom:4px; }
.wi-ben__d { display:block; font:400 15px/1.55 var(--wi-body); color:var(--wi-ink-3); }
.wi-video { margin:0; position:sticky; top:110px; }
.wi a.wi-video__play { display:block; position:relative; border-radius:12px; overflow:hidden; background:var(--wi-ink); aspect-ratio:16/9; max-width:100%; text-decoration:none; container-type:inline-size; }
/* the poster: the page's own numbers, in the receipts' type */
.wi-poster { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:6cqi 6cqi 5.5cqi;
  background:radial-gradient(120% 90% at 100% 0%,rgba(18,192,197,.16),transparent 60%),var(--wi-ink); color:#fff; }
.wi-poster__k { font:600 11px/1 var(--wi-mono); font-size:clamp(10px,2.9cqi,14px); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.wi-poster__nums { display:flex; align-items:flex-start; gap:4cqi; }
.wi-poster__n { display:flex; flex-direction:column; font:800 40px/1 var(--wi-display); font-size:clamp(26px,11.5cqi,64px); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.wi-poster__n span { font:500 12px/1.2 var(--wi-mono); font-size:clamp(10px,2.8cqi,15px); letter-spacing:.02em; margin-top:1.6cqi; color:rgba(255,255,255,.7); }
.wi-poster__n--a { color:var(--wi-teal); }
.wi-poster__n--b { color:var(--wi-coral); }
.wi-poster__vs { font:400 18px/1 var(--wi-mono); font-size:clamp(12px,4cqi,22px); color:rgba(255,255,255,.45); padding-top:3.4cqi; }
.wi-poster__t { font:600 16px/1.2 var(--wi-display); font-size:clamp(13px,4.4cqi,24px); color:#fff; max-width:70%; }
.wi-video__btn { position:absolute; right:5.5cqi; bottom:5cqi; width:clamp(48px,15cqi,72px); aspect-ratio:68/48; border-radius:12px; background:var(--wi-coral); box-shadow:0 6px 18px rgba(0,0,0,.3); transition:transform .15s ease; }
.wi-video__btn::after { content:""; position:absolute; left:42%; top:50%; transform:translateY(-50%); border-style:solid; border-width:.55em 0 .55em .9em; border-color:transparent transparent transparent #fff; font-size:clamp(14px,4cqi,20px); }
.wi a.wi-video__play:hover .wi-video__btn { transform:scale(1.06); }
.wi-video iframe { display:block; width:100%; aspect-ratio:16/9; border:0; border-radius:12px; }
.wi-video__cap { font:400 13px/1.5 var(--wi-body); color:var(--wi-ink-4); margin-top:10px; }

/* how it works: a real sequence, so numbered */
.wi-steps { list-style:none; margin:18px 0 0; padding:0; counter-reset:wi-step; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; }
.wi-steps li { counter-increment:wi-step; margin:0; padding-top:14px; border-top:3px solid var(--wi-ink); }
.wi-steps li::before { content:counter(wi-step); display:block; font:800 14px/1 var(--wi-mono); color:var(--wi-teal-d); margin-bottom:8px; }
.wi-steps__t { display:block; font:600 16px/1.3 var(--wi-display); color:var(--wi-ink); margin-bottom:6px; }
.wi-steps__d { display:block; font:400 14.5px/1.55 var(--wi-body); color:var(--wi-ink-3); }

/* when it is not worth it */
.wi-no { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.wi-no__i { position:relative; margin:0; padding:18px 20px 18px 52px; border:1px solid var(--wi-line); border-radius:10px; background:var(--wi-paper); }
.wi-no__i::before { content:"\00D7"; position:absolute; left:18px; top:16px; width:22px; height:22px; border-radius:50%; background:#FBE6E3; color:var(--wi-coral-d); font:700 17px/22px var(--wi-display); text-align:center; }
.wi-no__t { display:block; font:600 16px/1.35 var(--wi-display); color:var(--wi-ink); margin-bottom:5px; }
.wi-no__d { display:block; font:400 15px/1.55 var(--wi-body); color:var(--wi-ink-3); }

/* every county */
.wi-ledger { border-top:1px solid var(--wi-line); }
.wi-ledger__sum { list-style:none; cursor:pointer; padding:16px 0; font:600 15px/1.3 var(--wi-display); color:var(--wi-teal-d); }
.wi-ledger__sum::-webkit-details-marker { display:none; }
.wi-ledger__sum::before { content:"+"; display:inline-block; width:18px; font-weight:700; }
.wi-ledger[open] .wi-ledger__sum::before { content:"\2212"; }
.wi-ledger__scroll { overflow-x:auto; }
.wi-ledger__t { width:100%; min-width:560px; border-collapse:collapse; font:400 14px/1.3 var(--wi-mono); color:var(--wi-ink-2); }
.wi-ledger__t th,.wi-ledger__t td { padding:9px 10px; border-bottom:1px solid var(--wi-rule); text-align:right; white-space:nowrap; }
.wi-ledger__t th:first-child { text-align:left; font:600 14.5px/1.3 var(--wi-body); color:var(--wi-ink); }
.wi-ledger__t thead th { font:600 11px/1.3 var(--wi-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--wi-ink-4); border-bottom:2px solid var(--wi-ink); }
.wi-ledger__t thead th:first-child { font:600 11px/1.3 var(--wi-mono); color:var(--wi-ink-4); }
.wi-ledger__t tbody tr { cursor:pointer; }
.wi-ledger__t tbody tr:hover,.wi-ledger__t tbody tr.is-sel { background:var(--wi-teal-l); }
.wi-ledger__keep { color:var(--wi-teal-d); font-weight:700; }
.wi-ledger__flag { color:var(--wi-ink-4); margin-left:2px; }
.wi .wi-ledger__foot { font:400 12.5px/1.6 var(--wi-body); color:var(--wi-ink-4); margin:14px 0 6px !important; max-width:880px; }
.wi-nojs .wi-ledger__t tbody tr { cursor:default; }

/* questions */
.wi-faq { border-top:1px solid var(--wi-line); max-width:860px; }
.wi-faq__i { border-bottom:1px solid var(--wi-line); }
.wi-faq__q { list-style:none; cursor:pointer; position:relative; padding:18px 40px 18px 0; font:600 18px/1.4 var(--wi-display); color:var(--wi-ink); }
.wi-faq__q::-webkit-details-marker { display:none; }
.wi-faq__q::after { content:""; position:absolute; right:8px; top:26px; width:9px; height:9px; border-right:2px solid var(--wi-teal-d); border-bottom:2px solid var(--wi-teal-d); transform:rotate(45deg); transition:transform .15s ease; }
.wi-faq__i[open] .wi-faq__q::after { transform:rotate(-135deg); top:30px; }
.wi-faq__a { font:400 16.5px/1.65 var(--wi-body); color:var(--wi-ink-3); padding:0 0 20px; max-width:720px; }

/* end: a ticket stub */
.wi-sect--end { padding-bottom:56px; }
.wi-stub { display:grid; grid-template-columns:minmax(0,1fr) 240px; align-items:center; gap:24px 64px; background:var(--wi-band); border-radius:14px; padding:30px 34px; position:relative; }
.wi-stub::before { content:""; position:absolute; top:18px; bottom:18px; right:306px; border-left:2px dashed #C9D2DA; }
.wi .wi-stub__price { font:800 clamp(38px,5vw,54px)/1 var(--wi-display); color:var(--wi-ink); letter-spacing:-.02em; margin:0 0 6px !important; }
.wi .wi-stub__sub { font:400 16px/1.5 var(--wi-body); color:var(--wi-ink-2); margin:0 0 14px !important; }
.wi-stub__list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 18px; font:400 13px/1.5 var(--wi-mono); color:var(--wi-ink-3); }
.wi-stub__list li { margin:0; }
.wi-stub__list li::before { content:"\2713  "; color:var(--wi-teal-d); }
.wi-stub__side .wi-cta { margin-top:0; }
.wi-more { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 22px; margin-top:26px; font:400 14.5px/1.5 var(--wi-body); }
.wi-more__h { font:600 11px/1.5 var(--wi-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--wi-ink-4); }

/* ── in-post layout ─────────────────────────────────────────────────────────
   loop-single.php renders a data page outside .article__entry and without the
   article header. Let the page use the full column and the top band bleed. */
.article--data .article__body { padding:0; }
.article--data .article__databody { max-width:none; }
.article--data .article__header,.article--data .lwptoc { display:none; }
/* the theme pads every article 100px at the bottom (padbottom-100 !important) and
   the body adds 25px; this page ends on its own section spacing instead */
.article--data:has(.wi) { padding-bottom:0 !important; }
.article--data:has(.wi) .article__body { margin-bottom:0; }
/* every band bleeds, so the top band and the sections below share one left edge */
.article--data .wi-top,.article--data .wi-sect { margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:980px) {
  .wi-steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 24px; }
}
@media (max-width:820px) {
  .wi-receipts { grid-template-columns:1fr; gap:34px; }
  .wi-ben { grid-template-columns:1fr; }
  .wi-video { position:static; }
  .wi-no { grid-template-columns:1fr; }
  .wi-stub { grid-template-columns:1fr; padding:26px 22px; }
  .wi-stub::before { display:none; }
}
@media (max-width:600px) {
  .wi-wrap { padding:0 18px; }
  .wi-top { padding:24px 0 44px; }
  .wi-sect--end { padding-bottom:40px; }
  .wi-rc { padding:22px 18px 26px; }
  .wi-rc__l { font-size:13.5px; }
  .wi-stamp { position:static; transform:rotate(-4deg); display:inline-block; margin:0 0 8px; }
  .wi-faq__q { font-size:16.5px; }
  .wi-steps { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { .wi *,.wi *::before,.wi *::after { transition:none !important; } }