/* Anything the scripts hide stays hidden, even when a style gives it display:flex/block (buttons). */
[hidden]{display:none !important}

/* Ticket app layout on top of brand.css. Same brand as the injury site, but its world is the road:
   an asphalt hero with a painted headline and a painted lane line, the checker as a posted aluminum sign. */

/* asphalt: dark grey with fine light and dark specks (same inline-SVG noise technique as the plywood) */
.asphalt{background-color:#2B2C2E;color:#fff;
  background-image:
    linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,0) 40%,rgba(0,0,0,.18)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='1' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.86 0 0 0 0 0.86 0 0 0 0 0.84 0 0 0 3.2 -2.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='1' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 -1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.32 -0.11'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size:auto,240px 240px,260px 260px,900px 900px}
.asphalt .post{color:var(--ink);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(0,0,0,.06),0 3px 0 rgba(0,0,0,.5),0 26px 34px -18px rgba(0,0,0,.9)}
.hero.asphalt{padding-bottom:120px}
@media (max-width:920px){.hero.asphalt{padding-bottom:104px}}

/* worn road paint: an alpha-noise mask leaves small gaps in the paint */
.worn{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.4 2.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.4 2.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  -webkit-mask-size:180px 180px;mask-size:180px 180px}

/* double yellow lane line along the bottom of the hero */
.lane{position:absolute;left:0;right:0;bottom:40px;height:19px;
  background:linear-gradient(180deg,var(--vis) 0 6px,transparent 6px 13px,var(--vis) 13px 19px);opacity:.93}
@media (max-width:600px){.lane{bottom:34px;height:16px;background:linear-gradient(180deg,var(--vis) 0 5px,transparent 5px 11px,var(--vis) 11px 16px)}}

/* in all caps the Spanish opening question mark is raised to sit with the capitals, as on painted signs */
.paint .inv{display:inline-block;transform:translateY(-.24em)}
/* headline painted on the road, then the existing line in the human voice */
.hero h1{font-size:inherit}
.hero h1 .paint{display:block;font-family:var(--f-stencil);font-weight:900;text-transform:uppercase;color:#F4F2EA;line-height:.9;letter-spacing:.01em;
  font-size:clamp(3.3rem,8.2vw,7.4rem);text-shadow:0 0 1px rgba(244,242,234,.45)}
.hero h1 .say{display:block;font-family:var(--f-voice);font-style:italic;font-weight:500;color:var(--vis);font-size:clamp(1.55rem,2.6vw,2.15rem);line-height:1.2;margin-top:20px}
.hero .lede{font-size:1.08rem;max-width:34em;font-weight:500;color:rgba(255,255,255,.84);margin:18px 0 0}
.hero .assure{max-width:34em;margin:22px 0 0;padding-left:14px;border-left:4px solid var(--vis);font-size:.95rem;color:rgba(255,255,255,.74)}
.hero .assure a{color:#fff}
.badge .in > div{min-width:0}

/* language links shrink to EN / ES on phones so the advertising label always shows in full */
.top .wrap > span{padding-right:8px}
.lang a{white-space:nowrap}
@media (max-width:600px){.lang a{font-size:0;padding:2px 8px}.lang a::after{content:attr(data-short);font-size:.8rem}}

/* checker sign */
.tile.wide{display:block;text-align:left;padding:13px 16px;font-size:.95rem;line-height:1.35}
.sub-of{font-size:.9rem;color:var(--muted);margin:-6px 0 12px;font-weight:600}
.tk-result[hidden]{display:none}
.tk-nums{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.tk-nums small{display:block;font-size:.85rem;color:var(--muted);line-height:1.3}
.tk-nums b{font-family:var(--f-stencil);font-weight:900;font-size:clamp(1.9rem,7.6vw,2.6rem);line-height:1;text-transform:uppercase;white-space:nowrap}
.tk-nums b.warn{color:#8A6200}.tk-nums b.bad{color:#A3261B}
.tk-list{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.tk-list li{padding:10px 12px;border-left:4px solid var(--rule);background:#fff;font-size:.95rem;line-height:1.45}
.tk-list li.ok{border-left-color:#2E7D4F}.tk-list li.warn{border-left-color:var(--vis)}.tk-list li.bad{border-left-color:#A3261B}
.tk-result .btn{width:100%;margin:4px 0 0}
.tk-result .btn + .btn{margin-top:10px}
.tk-result .fine{font-size:.82rem;margin:12px 0 14px}

/* inside sections: concrete and white */
.sec.white{background:#fff}
.dash{list-style:none;margin:14px 0 0;padding:0}
.dash li{position:relative;padding-left:26px;margin-bottom:9px}
.dash li::before{content:"";position:absolute;left:0;top:.68em;width:14px;height:4px;background:var(--stencil)}
.where{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.where > div{background:#fff;padding:30px 30px 26px;border-top:6px solid var(--stencil);border-radius:2px;box-shadow:0 2px 0 rgba(0,0,0,.08)}
.where > div + div{border-top-color:var(--vis)}
.where .src{font-size:.88rem;color:var(--muted);margin:16px 0 0}
/* NYC: the moment the reader learns a guilty plea can't be changed */
.where .plead{margin-top:20px;width:100%}
@media (max-width:600px){.where .plead{font-size:clamp(.88rem,4.5vw,1.05rem);padding:0 .7em;gap:.45em}}
@media (max-width:860px){.where{grid-template-columns:1fr}.where > div{padding:24px 20px 20px}}

table.pts{width:100%;border-collapse:collapse;background:#fff;box-shadow:0 2px 0 rgba(0,0,0,.08)}
table.pts th,table.pts td{text-align:left;padding:17px 22px;border-bottom:1px solid var(--rule);vertical-align:top}
table.pts thead th{background:var(--stencil);color:#fff;font-family:var(--f-head);font-weight:700;font-size:1.1rem}
table.pts tbody td:first-child{font-family:var(--f-head);font-weight:800;font-size:1.3rem;line-height:1.1;white-space:nowrap}
table.pts tbody tr:last-child td{border-bottom:0}
table.pts tbody tr:last-child td:first-child{background:#FFF1C2}
table.pts a{color:var(--ink)}
@media (max-width:600px){table.pts th,table.pts td{padding:14px 12px}table.pts tbody td:first-child{font-size:1.1rem}}
.note{font-size:.88rem;color:var(--muted);margin-top:14px}
.note a{color:var(--ink)}

.help{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start}
.help .intro{font-size:1.15rem;color:var(--muted);margin:18px 0 0;max-width:30em}
.help .feats{grid-template-columns:1fr;margin:0}
@media (max-width:860px){.help{grid-template-columns:1fr;gap:32px}.help .ctas .btn{flex:1 1 100%}}

/* plywood band: the link to the injury site, so the two sites visibly connect */
.cross{padding-block:80px}
.cross .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px}
.cross h2{font-family:var(--f-stencil);font-weight:900;text-transform:uppercase;font-size:clamp(2.4rem,5vw,4.4rem);line-height:.88;max-width:13em}
.cross p{font-size:1.12rem;font-weight:500;margin:16px 0 0;max-width:32em;color:#2A2118}
.cross .btn{flex:none}
@media (max-width:860px){.cross{padding-block:56px}.cross .wrap{flex-direction:column;align-items:flex-start;gap:24px}}

footer .legal + .legal{border-top:0;margin-top:8px;padding-top:0;opacity:.75}
.nowrap{white-space:nowrap}

/* ---------- My points: the app band on the home page ---------- */
.appband{position:relative;padding-block:96px 150px}
.appgrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:72px;align-items:center}
.appband h2{color:#fff}
.appband .intro{font-size:1.15rem;color:rgba(255,255,255,.8);margin:16px 0 0;max-width:34em}
.appband .feats{margin:30px 0}
.appband .feats h3{color:#fff}
.appband .feats p{color:rgba(255,255,255,.7)}
.appband .fine{color:rgba(255,255,255,.62)}
.appband .ctas{margin-top:0}
.install-help{flex-basis:100%;margin:4px 0 0;font-weight:600}
.appband .install-help{color:var(--vis)}
.btn-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}
.btn-light:hover{background:rgba(255,255,255,.08)}
@media (max-width:900px){.appband{padding-block:64px 120px}.appgrid{grid-template-columns:1fr;gap:48px}}
@media (max-width:700px){.appband .feats{grid-template-columns:1fr;gap:20px}}

/* a phone showing the app (example entries, labeled as such) */
.device{width:300px;max-width:100%;margin:0 auto;border:11px solid #0B0B0B;border-radius:40px;background:var(--concrete);color:var(--ink);overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 60px -28px rgba(0,0,0,.95);transform:rotate(1.5deg)}
.device .bar{background:var(--stencil);color:var(--vis);padding:26px 18px 14px;display:flex;justify-content:space-between;align-items:baseline}
.device .bar b{font-family:var(--f-stencil);font-weight:900;font-size:1.7rem;line-height:1;text-transform:uppercase}
.device .bar span{font-size:.8rem;color:rgba(255,255,255,.7)}
.device .in{padding:14px;display:grid;gap:9px}
.device .card{background:#fff;border-radius:6px;padding:10px 12px;font-size:.82rem;line-height:1.35;color:var(--muted)}
.device .card small{display:block;font-size:.76rem}
.device .card b{display:flex;justify-content:space-between;gap:10px;font-size:.86rem;color:var(--ink);margin-bottom:2px}
.device .card b span:last-child{font-family:var(--f-stencil);font-weight:900;font-size:1.05rem}
.device .card.open{background:repeating-linear-gradient(135deg,#FFF6D6 0 8px,#fff 8px 16px)}
.device .total{display:block;font-family:var(--f-stencil);font-weight:900;font-size:2.4rem;line-height:1;color:var(--ink)}
.device .ex{font-size:.76rem;font-weight:600;color:var(--muted);padding-left:2px}
.device .act{display:grid;gap:7px;margin-top:2px}
.device .act span{display:block;text-align:center;padding:10px;border-radius:4px;font-family:var(--f-head);font-weight:800;font-size:1rem;color:var(--stencil)}
.device .act .y{background:var(--vis)}.device .act .g{background:var(--wa)}
@media (max-width:900px){.device{transform:none}}

/* point meter: 11 cells; yellow up to 5, orange from 6 (state fee), red at 11 (suspension), striped = open tickets */
.meter{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:3px;margin-top:8px}
.meter i{height:10px;background:var(--rule)}
.meter i.f{background:var(--vis)}.meter i.o{background:#F38B1F}.meter i.r{background:#A3261B}
.meter i.p{background:repeating-linear-gradient(135deg,var(--vis) 0 3px,#fff 3px 6px);box-shadow:inset 0 0 0 1px #E2B21C}

/* ---------- My points page ---------- */
.pts-hero{padding-block:48px 116px}
.pts-hero .lede{max-width:40em}
.ios-note{max-width:40em;margin:18px 0 0;padding-left:14px;border-left:4px solid var(--vis);font-size:.95rem;color:rgba(255,255,255,.82)}
.pts-main{padding-top:64px}
.pts-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.pts-grid > *{grid-area:auto;min-width:0}   /* brand.css places .form in the hero grid's named area; not here */
.board{transform:rotate(-.5deg)}.addform{transform:rotate(.5deg)}
.board .body{padding:22px 24px 26px}
.board .total{display:flex;align-items:baseline;gap:12px}
.board .total b{font-family:var(--f-stencil);font-weight:900;font-size:clamp(4.4rem,11vw,6.4rem);line-height:.85}
.board .total span{font-family:var(--f-head);font-weight:800;font-size:1.5rem}
.board .meter{margin-top:16px}.board .meter i{height:18px}
.scale{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:3px;font-family:var(--f-head);font-weight:800;font-size:.9rem;margin:4px 0 16px}
.scale span{text-align:center}
.board .tk-list{margin-bottom:12px}
.board .fine a,.crimnote a{color:var(--ink);font-weight:600}
.addform .body{padding:20px 24px 26px}
.addform select,.addform input[type=date]{width:100%;font:inherit;font-size:1.05rem;padding:12px 14px;border:2px solid var(--rule);border-radius:3px;background:#fff;color:var(--ink);min-height:50px}
.addform select:focus,.addform input:focus{border-color:var(--stencil);outline:none}
.crimnote{font-size:.88rem;color:var(--muted);margin:-4px 0 14px}
.addform .opts{grid-template-columns:repeat(2,minmax(0,1fr))}
.err{color:#A3261B;font-weight:600;font-size:.92rem;min-height:1.2em;margin:10px 0 0}
.err.ok{color:#2E7D4F}
@media (max-width:920px){.pts-grid{grid-template-columns:1fr}.board,.addform{transform:none}}
@media (max-width:420px){.addform .opts{grid-template-columns:1fr}}

/* the ticket list: one stub per ticket, points on the left like a perforated ticket */
.stubs{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px}
.stub{display:grid;grid-template-columns:96px minmax(0,1fr) auto;background:#fff;border-radius:3px;box-shadow:0 2px 0 rgba(0,0,0,.1),0 0 0 1px var(--rule);overflow:hidden}
.stub .pts{position:relative;background:var(--stencil);color:var(--vis);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 6px}
.stub .pts::after{content:"";position:absolute;right:-4px;top:0;bottom:0;width:8px;background:radial-gradient(circle at 4px 6px,#fff 2.5px,transparent 3px) 0 0/8px 12px repeat-y}
.stub .pts b{font-family:var(--f-stencil);font-weight:900;font-size:2.5rem;line-height:.9}
.stub .pts span{font-size:.78rem;color:rgba(255,255,255,.72)}
.stub.open .pts{background:repeating-linear-gradient(135deg,#FFF1C2 0 9px,#FFF8E0 9px 18px);color:var(--ink)}
.stub.open .pts span{color:var(--muted)}
.stub.old .pts{background:var(--concrete);color:var(--muted)}.stub.old .pts span{color:var(--muted)}
.stub .info{padding:14px 18px}
.stub h3{font-size:1.2rem}
.stub .info p{margin:4px 0 0;font-size:.94rem;color:var(--muted)}
.stub .court{color:var(--ink)!important;font-weight:600}
.stub .court.soon{color:#A3261B!important}
.stub .tools{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:10px;padding:14px 18px}
@media (max-width:600px){.stub{grid-template-columns:78px minmax(0,1fr)}.stub .pts b{font-size:2.1rem}
  .stub .tools{grid-column:2;flex-direction:row;justify-content:flex-start;gap:18px;padding:0 18px 14px}}
.empty{font-size:1.05rem;color:var(--muted);margin:0 0 24px}
.empty a{color:var(--ink);font-weight:600}
.clear{margin:22px 0 0}
#list .ctas .btn{flex:0 1 auto}
@media (max-width:600px){#list .ctas .btn{flex:1 1 100%}}

/* keep it on your phone */
.keepgrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:48px;align-items:center}
.keep .intro{font-size:1.12rem;color:var(--muted);margin:14px 0 0;max-width:34em}
.keep .install-help{color:var(--ink)}
@media (max-width:860px){.keepgrid{grid-template-columns:1fr;gap:20px}.keep .btn{width:100%}}

/* checker result: keep this ticket in My points */
.tk-result .keep-it{margin-top:10px}

/* phones: the header menu is hidden under 1040px, so a slim row of the three main links sits under the header */
.subnav{display:none;background:var(--stencil);border-top:1px solid rgba(255,255,255,.08)}
@media (max-width:1040px){.subnav{display:block}}
.subnav .wrap{display:flex;justify-content:space-between;gap:10px}
.subnav a{padding:10px 2px 11px;font-family:var(--f-head);font-weight:700;font-size:clamp(.92rem,4.3vw,1.05rem);color:rgba(255,255,255,.82);
  text-decoration:none;white-space:nowrap;border-bottom:3px solid transparent}
.subnav a[aria-current]{color:var(--vis);border-bottom-color:var(--vis)}
@media (min-width:601px){.subnav .wrap{justify-content:flex-start;gap:32px}}

/* motion: quick and quiet, CSS only. Each checker step slides in (same as the injury site), tapped choices press in,
   the progress bars fade, a new ticket slides into the list. Point totals and the meter never animate, so they never
   show a wrong number. brand.css turns all of it off for people whose phone asks for reduced motion. */
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* between checker questions: the same move as the injury site's case review */
@keyframes stepin{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.form [data-step].enter{animation:stepin .22s ease-out}
.bars i{transition:background-color .3s ease}
.tile,.opt{transition:border-color .12s,background-color .12s,transform .12s}
.tile:active,.opt:active{transform:scale(.97)}
.stub.new{animation:stepIn .35s cubic-bezier(.2,.7,.2,1) both}

/* The checker sign changes height between steps. The browser's scroll anchoring would then shift the page to keep the
   sign below it still, making the checker jump down the screen. These pages load nothing late, so it is turned off. */
html{overflow-anchor:none}


/* speeding page: points by mph */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.speed td:nth-child(2){font-family:var(--f-stencil);font-weight:900;font-size:1.5rem;white-space:nowrap}
table.speed td:last-child{white-space:nowrap}
table.speed td:last-child a{font-weight:700;color:var(--ink)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:600px){table.speed thead{display:none}table.speed,table.speed tbody,table.speed tr,table.speed td{display:block;width:100%}
  table.speed tr{padding:14px 12px;border-bottom:1px solid var(--rule)}table.speed td{border:0;padding:2px 0}
  table.speed td:first-child{font-size:1.15rem}table.speed td:nth-child(2)::after{content:" pts";font-family:var(--f-body);font-weight:600;font-size:.9rem}
  html[lang=es] table.speed td:nth-child(2)::after{content:" puntos"}table.speed td:last-child{padding-top:6px}}
table.speed tbody tr:last-child td:first-child{background:none}   /* the yellow 11-points row is the home table's, not this one */

/* keyboard focus: the brand's black outline disappears on dark areas, so it turns safety yellow there
   (header, phone link row, asphalt, black sign bands, Call bar, footer); inside the light aluminum signs it stays black */
.top :focus-visible,.head :focus-visible,.subnav :focus-visible,.asphalt :focus-visible,.band :focus-visible,.dock :focus-visible,footer :focus-visible{outline-color:var(--vis)}
.asphalt .post .body :focus-visible{outline-color:var(--stencil)}

/* language switch: a bigger tap target (Spanish speakers are a main audience) without making the links wider, so the
   advertising label beside them keeps its one line: an invisible area around each link takes the tap */
.lang a{position:relative}
.lang a::before{content:"";position:absolute;left:-3px;right:-3px;top:-9px;bottom:-9px}

/* questions people ask */
.faq{margin-top:40px;max-width:52rem}
.faq h3{margin-bottom:12px}
.faq details{background:#fff;border-radius:3px;box-shadow:0 2px 0 rgba(0,0,0,.08);margin-bottom:10px}
.faq summary{cursor:pointer;list-style:none;padding:16px 48px 16px 18px;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-family:var(--f-head);font-weight:800;font-size:1.5rem}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0;padding:0 18px 16px;color:var(--muted)}
.faq details a{color:var(--ink)}

/* three contact buttons: the main one (Bexvon) on its own row, WhatsApp and Call side by side under it */
.ctas.three{max-width:620px}.ctas.three .btn{flex:1 1 0}
.ctas.three .btn:first-child{flex-basis:100%}