/* Spotless, craft v2 "Curbside", type revised in craft v3. The street at night, read the way a driver reads it: asphalt,
   curb paint and the sign on the pole. Taken from the app itself (bg #0a0e17, panel #111826, free teal #2ee6c8, paid
   coral #ff8ba0) plus the one thing every driver already trusts: a white regulation sign with a framed border.
   Type: Overpass for the signs and headlines. It is the open-source descendant of Highway Gothic, the FHWA alphabet on
   US road signs, so the plates read in the face drivers already read at 40 mph. Atkinson Hyperlegible Next (reading,
   built by the Braille Institute for low vision, right for a phone glanced at in a dark car) and Atkinson Hyperlegible
   Mono (dollar figures, tabular). All SIL OFL 1.1, see /spotless/fonts/. Shared by /spotless/ and
   /spotless/free-parking/*. Layers on /shared/fl.css (nav + footer mechanics only). See /docs/CRAFT-V3.md. */
@font-face { font-family: "Overpass"; src: url("/spotless/fonts/overpass.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/spotless/fonts/atkinson-next.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; src: url("/spotless/fonts/atkinson-mono.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Overpass Fallback"; src: local("Arial"); size-adjust: 104.7%; ascent-override: 84.3%; descent-override: 36.6%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Next Fallback"; src: local("Arial"); size-adjust: 98.9%; ascent-override: 99.4%; descent-override: 31.9%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Mono Fallback"; src: local("Consolas"); size-adjust: 114.9%; ascent-override: 85.6%; descent-override: 27.5%; line-gap-override: 0%; }

body.sp {
  --asphalt: #0a0e17; --asphalt-2: #111826; --asphalt-3: #19223a; --kerb: #2a3446;
  --text: #e8eef5; --muted: #a3b0be; --faint: #7f8c9b; --line: rgba(232, 238, 245, .13);
  --teal: #2ee6c8; --teal-ink: #0a7f72; --coral: #ff8ba0;
  --sign: #f5f5f0; --sign-ink: #15181d; --sign-red: #b3121f; --sign-green: #0a6e57;
  --display: "Overpass", "Overpass Fallback", "Arial", sans-serif;
  --text-face: "Atkinson Hyperlegible Next", "Atkinson Next Fallback", "Segoe UI", sans-serif;
  --mono: "Atkinson Hyperlegible Mono", "Atkinson Mono Fallback", ui-monospace, monospace;
  --accent: var(--teal); --accent-2: var(--teal-ink); --lamp: var(--teal);
  background: var(--asphalt); color: var(--text); font: 400 18px/1.55 var(--text-face);
  font-variant-numeric: lining-nums;
}
body.sp::after { display: none; }
.sp ::selection { background: var(--teal); color: var(--asphalt); }
.sp :focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.sp h1, .sp h2, .sp h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.012em; line-height: 1; text-wrap: balance; }
.sp h1 { font-size: clamp(42px, 6.2vw, 94px); margin: 0 0 22px; }
.sp h2 { font-size: clamp(34px, 4.4vw, 64px); margin: 0 0 20px; }
.sp h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.08; margin: 0 0 10px; font-weight: 700; }
.sp h1 em, .sp h2 em { font-style: normal; color: var(--teal); }
.sp p { max-width: 62ch; }
.sp .lede { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.5; color: var(--muted); max-width: 44ch; }
.sp a { text-underline-offset: 4px; }
.sp a:hover { color: var(--teal); }
.sp .skip:hover { color: var(--sign-ink); }
.sp .wrap { max-width: 1240px; }

/* chrome: the shared nav + footer, inked for asphalt */
.sp .wordmark { font: 800 23px/1 var(--display); letter-spacing: -.01em; }
.sp .nav.scrolled { background: rgba(10, 14, 23, .94); backdrop-filter: none; border-bottom: 1px solid var(--line); }
.sp .nav ul a { font: 700 15px/1 var(--text-face); letter-spacing: 0; text-transform: none; color: var(--muted); }
.sp .nav ul a:hover, .sp .nav ul a[aria-current="page"] { color: var(--text); }
.sp .nav ul a[aria-current="page"]::after { -webkit-mask: none; mask: none; height: 3px; bottom: 0; background: var(--teal); border-radius: 2px; }
.sp .nav .menu-btn { font: 700 14px/1 var(--text-face); letter-spacing: 0; text-transform: none; border-color: var(--kerb); }
@media (max-width: 900px) {
  .sp .nav ul { background: var(--asphalt-2); border-top: 1px solid var(--line); }
  .sp .nav ul a { color: var(--text); font: 800 30px/1.15 var(--display); border-bottom-color: var(--line); }
  .sp .nav ul a:hover { color: var(--teal); }
}
.sp .foot { background: var(--sign); color: var(--sign-ink); }
.sp .foot .wordmark { color: var(--sign-ink) !important; }
.sp .foot .products a { font: 800 23px/1.1 var(--display); }
.sp .foot .products span, .sp .foot p { color: #4a515c !important; }
.sp .foot .small { font: 400 13px/1.6 var(--text-face); color: #4a515c; letter-spacing: 0; }
.sp .foot a:hover { color: var(--sign-green); }

/* buttons: square-ish like a sign plate. Round = nothing on this page. */
.sp .btn {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; border-radius: 6px; border: 0;
  background: var(--teal); color: var(--asphalt); font: 700 17px/1 var(--text-face); letter-spacing: 0; text-transform: none;
  text-decoration: none; box-shadow: none; transition: background .2s;
}
.sp .btn:hover { background: #7ff2df; color: var(--asphalt); transform: none; box-shadow: none; }
.sp .text-link { font-weight: 700; color: var(--text); text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; display: inline-flex; align-items: center; min-height: 44px; }
.store-badge { display: inline-flex; min-height: 52px; align-items: center; }
.store-badge img { height: 52px; width: auto; display: block; }

/* the sign plate: the motif. A white regulation sign with a framed inner border. */
.plate {
  position: relative; background: var(--sign); color: var(--sign-ink); border-radius: 10px; padding: 16px 20px 15px;
  box-shadow: inset 0 0 0 3px var(--sign), inset 0 0 0 5.5px var(--sign-ink), 0 18px 30px -18px rgba(0, 0, 0, .8);
  font-family: var(--display);
}
.plate .pl-k { display: block; font: 900 clamp(26px, 2.5vw, 36px)/.95 var(--display); text-transform: uppercase; letter-spacing: 0; }
.plate .pl-sub { display: block; font: 700 13.5px/1.2 var(--display); text-transform: uppercase; letter-spacing: .05em; margin-top: 6px; }
.plate .pl-usd { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font: 700 clamp(30px, 3vw, 40px)/1 var(--mono); letter-spacing: -.02em; }
.plate .pl-usd small { font-size: .6em; vertical-align: .2em; margin-right: 1px; }
.plate.win { color: var(--sign-green); box-shadow: inset 0 0 0 3px var(--sign), inset 0 0 0 5.5px var(--sign-green), 0 18px 30px -18px rgba(0, 0, 0, .8); }
.plate.win .pl-p {
  display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border: 3px solid currentColor; border-radius: 50%;
  font: 900 .62em/1 var(--display); vertical-align: .08em; margin-right: 10px;
}
.plate.red { color: var(--sign-red); box-shadow: inset 0 0 0 3px var(--sign), inset 0 0 0 5.5px var(--sign-red), 0 18px 30px -18px rgba(0, 0, 0, .8); }

/* hero */
.sp-hero { padding: clamp(112px, 12vw, 150px) 0 clamp(56px, 7vw, 96px); position: relative; overflow: clip; }
.sp-hero::before { /* sodium-free night: one cool pool of light where the free spot is */
  content: ""; position: absolute; right: -10%; top: 0; width: 70%; height: 100%;
  background: radial-gradient(closest-side, rgba(46, 230, 200, .10), transparent 70%); pointer-events: none;
}
.sp-hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; position: relative; }
.sp-hero .kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font: 700 16px/1 var(--text-face); color: var(--muted); }
.sp-hero .kicker img { width: 40px; height: 40px; border-radius: 10px; }
.sp-hero .actions { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 30px; }
.sp-hero .small { margin-top: 18px; font-size: 15px; color: var(--faint); }
.post { position: relative; padding-left: 26px; max-width: 420px; justify-self: end; width: 100%; }
.post::before { /* the pole */
  content: ""; position: absolute; left: 8px; top: -30px; bottom: -40px; width: 9px; border-radius: 3px;
  background: linear-gradient(90deg, #4b5566, #8d97a6 45%, #3a4352);
}
.post .plate { margin: 0 0 14px; }
.post .plate::before, .post .plate::after { /* the two bolts */
  content: ""; position: absolute; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #9aa2ad;
}
.post .plate::before { top: 9px; } .post .plate::after { bottom: 9px; }
.post .plate.win { padding: 22px 20px 20px; }
.post .plate.win .pl-k { font-size: clamp(44px, 4.4vw, 60px); }
.post .cap { margin: 22px 0 0 0; font-size: 14px; line-height: 1.5; color: var(--faint); max-width: 40ch; }
.post .cap b { color: var(--muted); font-weight: 700; }
@media (max-width: 900px) {
  .sp-hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .post { justify-self: stretch; max-width: 460px; margin-top: 12px; }
}

/* sections */
.sp-band { padding: clamp(72px, 9vw, 136px) 0; position: relative; }
.sp-band.panel { background: var(--asphalt-2); }
.sp-band.curb { border-top: 6px solid var(--teal); } /* painted curb edge: used once, where the night starts */
.sp-band .head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }

/* the night, in four screens */
.night { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); counter-reset: n; }
.night li { counter-increment: n; display: flex; flex-direction: column; }
.blade { /* street-name blade: when in the night this happens */
  display: inline-flex; align-self: flex-start; align-items: center; min-height: 34px; padding: 4px 12px 3px; border-radius: 4px;
  background: var(--sign-green); color: #fff; box-shadow: inset 0 0 0 2px var(--sign-green), inset 0 0 0 3.5px rgba(255, 255, 255, .85);
  font: 800 17px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 18px;
}
.phone { margin: 0; border-radius: 30px; padding: 7px; background: #05070c; box-shadow: 0 0 0 1px #2a3446, 0 30px 50px -28px rgba(0, 0, 0, .9); }
.phone img { width: 100%; height: auto; border-radius: 24px; }
.night .phone { order: 2; margin-top: 20px; }
.night h3 { margin-bottom: 8px; }
.night p { color: var(--muted); font-size: 16.5px; margin: 0; }
@media (max-width: 1000px) {
  .night { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .night li { display: grid; grid-template-columns: minmax(0, 1fr) 42%; gap: 0 20px; align-items: start; }
  .night .blade, .night h3, .night p { grid-column: 1; }
  .night .phone { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
}
@media (max-width: 420px) { .night li { grid-template-columns: minmax(0, 1fr) 44%; gap: 0 14px; } .night p { font-size: 15.5px; } }

/* the math, opened: two worked examples from the app's own screens */
.cases { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); }
.case { border-top: 2px solid var(--kerb); padding-top: 26px; }
.case .where { font: 800 clamp(26px, 2.6vw, 38px)/1.05 var(--display); margin: 0 0 6px; }
.case .src { font-size: 14.5px; color: var(--faint); margin: 0 0 22px; }
.bill { list-style: none; margin: 0; padding: 0; font-family: var(--mono); }
.bill li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.bill .what { font-family: var(--text-face); font-size: 17px; }
.bill .what small { display: block; font-size: 14px; color: var(--faint); margin-top: 2px; }
.bill .usd { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.bill li.win .usd { color: var(--teal); }
.bill li.win .what b { color: var(--teal); }
.bill li.sum { border-top: 2px solid var(--text); border-bottom: 0; margin-top: -1px; }
.bill li.sum .usd { font-size: 30px; }
.case .verdict { margin: 22px 0 0; font-size: 17px; color: var(--muted); }
.case .verdict b { color: var(--text); }
.case.lose .where::after { content: "Close call"; display: inline-block; vertical-align: middle; margin-left: 14px; padding: 6px 9px 5px; border-radius: 4px; font: 800 14px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; background: var(--coral); color: var(--asphalt); transform: translateY(-4px); }
.method { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.method h3 { font-size: clamp(30px, 3vw, 42px); }
.method dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; }
.method dl div { border-top: 1px solid var(--line); padding: 16px 0 18px; }
.method dt { font-weight: 700; margin-bottom: 4px; }
.method dd { margin: 0; color: var(--muted); font-size: 16.5px; }
@media (max-width: 900px) { .cases, .method { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .method dl { grid-template-columns: minmax(0, 1fr); } .bill .usd { font-size: 21px; } }

/* map + coverage */
.map { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.map figure { margin: 0; }
.map figure img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px var(--kerb), 0 40px 60px -40px #000; }
.map figcaption, .sp .cap-s { font-size: 14.5px; color: var(--faint); margin-top: 12px; max-width: 56ch; }
.legend { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 16px; color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
.figs { display: flex; flex-wrap: wrap; gap: 18px 48px; margin: 34px 0 0; }
.figs div { min-width: 120px; }
.figs b { display: block; font: 800 clamp(42px, 4.6vw, 66px)/1 var(--display); letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.figs span { display: block; margin-top: 8px; font-size: 14.5px; color: var(--faint); max-width: 20ch; }

/* the sign on the pole wins: limitations as a regulation sign */
.rules { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.rules .plate { padding: clamp(24px, 3vw, 36px); max-width: 560px; }
.rules .plate h2 { font-size: clamp(36px, 4vw, 56px); text-transform: uppercase; margin: 0 0 18px; line-height: .92; color: var(--sign-red); }
.rules .plate ul { list-style: none; margin: 0; padding: 0; color: var(--sign-ink); font-family: var(--text-face); }
.rules .plate li { padding: 12px 0; border-top: 2px solid rgba(21, 24, 29, .14); font-size: 17px; line-height: 1.45; }
.rules .plate li b { display: block; font: 800 18px/1.15 var(--display); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 2px; }
.nope { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--line); }
.nope li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.nope b { font: 800 20px/1.15 var(--display); }
.nope span { color: var(--muted); font-size: 16.5px; }
.why-free { margin-top: 22px; max-width: 60ch; }
.why-free summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.why-free p { color: var(--muted); }
@media (max-width: 900px) { .rules { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .nope li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* cities: street-name blades */
.blades { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.blades a {
  display: inline-flex; align-items: center; min-height: 46px; padding: 6px 16px 4px; border-radius: 5px; text-decoration: none;
  background: var(--sign-green); color: #fff; box-shadow: inset 0 0 0 2px var(--sign-green), inset 0 0 0 3.5px rgba(255, 255, 255, .85);
  font: 800 22px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; transition: transform .2s;
}
.blades a:hover { color: #fff; transform: translateY(-2px); }
.blades .all a { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--kerb); }

/* last call */
.last { text-align: left; }
.last .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; align-items: end; }
.last .actions { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 26px; }
.last .sig { font-size: 15.5px; color: var(--faint); margin-top: 26px; }
.last .phone { max-width: 260px; justify-self: end; transform: rotate(2deg); }
@media (max-width: 900px) { .last .wrap { grid-template-columns: minmax(0, 1fr); } .last .phone { display: none; } }

@media (prefers-reduced-motion: reduce) { .blades a { transition: none; } }

/* the 3D curb behind the sign post (restored, /spotless/curb.js): wet curb, meter, LED streetlight, rain, teal pins.
   It lives inside .post, behind the plates, takes no pointer events and no layout space on desktop, and fades in once it
   has a frame. On phones the post opens a fixed gap above the first plate for it, so the curb shows above the sign. */
.sp-hero .wrap { z-index: 1; }
.sp-stage { position: absolute; left: -42%; right: calc(-1 * max(var(--gut), (100vw - var(--wrap)) / 2 + var(--gut))); top: -30%; bottom: -34%; z-index: -1; pointer-events: none; }
.post .cap { position: relative; background: rgba(10, 14, 23, .78); margin-left: -10px; padding: 8px 10px; border-radius: 6px; }
.sp-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.4s cubic-bezier(.16, 1, .3, 1); }
.sp-stage.ready canvas { opacity: 1; }
.sp-stage::after { /* melt the scene into the asphalt at the edges */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--asphalt) 0%, rgba(10, 14, 23, 0) 14%), linear-gradient(0deg, var(--asphalt) 0%, rgba(10, 14, 23, 0) 20%),
              linear-gradient(180deg, var(--asphalt) 0%, rgba(10, 14, 23, 0) 16%);
}
.sp-stage .fallback { display: none; }
@media (max-width: 900px) {
  .post { padding-top: 300px; }
  .post::before { top: 150px; }
  .post .cap { margin-left: 0; background: none; padding: 0; }
  .sp-stage { left: calc(-1 * var(--gut)); right: calc(-1 * var(--gut)); top: -40px; bottom: auto; height: 470px; }
  .sp-stage::after { background: linear-gradient(180deg, var(--asphalt) 0%, rgba(10, 14, 23, 0) 26%), linear-gradient(0deg, rgba(10, 14, 23, .9) 0%, rgba(10, 14, 23, 0) 30%); }
  .sp-stage.no-webgl .fallback, html:not(.js) .sp-stage .fallback { display: block; position: absolute; left: 12%; right: 12%; top: 40px; height: 300px; width: 76%; }
}
@media (prefers-reduced-motion: reduce) { .sp-stage canvas { transition: none; } }