/* ============================================================
   ON-STREET PARKING — system overview, driver flow, terminal,
   enforcement (content from the On-Street Parking deck).
   Palette per tokens.css: amber only for icons/borders/fills.
   ============================================================ */
.os-pillars, .os-chips, .os-steps, .os-feats { list-style: none; margin: 0; padding: 0; }

/* three pillars: street / driver / city */
.os-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-block-end: var(--sp-4); }
.os-pillars li {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-lg, 14px);
  background: var(--bg); box-shadow: var(--shadow-1);
}
.os-pillars b { display: block; color: var(--navy); font-size: var(--fs-sm); letter-spacing: .08em; text-transform: uppercase; }
.os-pillars li > span:last-child > span { color: var(--text); font-weight: 600; }
.os-pillars__ic, .os-feat__ic, .os-steps__ic {
  flex: none; display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%;
  background: var(--navy);
}
.os-pillars .icon, .os-feat__ic .icon, .os-steps__ic .icon { inline-size: 1.5rem; block-size: 1.5rem; fill: none; stroke: var(--amber); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* deck infographics */
.os-fig { margin: 0; }
.os-fig img {
  display: block; inline-size: 100%; block-size: auto;
  border: 1px solid var(--line); border-radius: var(--radius-lg, 14px); box-shadow: var(--shadow-2); background: #fff;
}
.os-fig figcaption { margin-block-start: var(--sp-2); color: var(--text-muted); font-size: var(--fs-sm); max-inline-size: 70ch; }

/* "no digging" chips */
.os-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: var(--sp-4); }
.os-chips li {
  display: inline-flex; align-items: center; gap: .5em; padding: .6em 1.1em; border-radius: 999px;
  background: var(--navy); color: #fff; font-weight: 700; font-size: var(--fs-sm); letter-spacing: .04em; text-transform: uppercase;
}
.os-chips .icon { inline-size: 1.1em; block-size: 1.1em; fill: none; stroke: var(--amber); stroke-width: 2.6; }

/* five driver steps */
.os-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); counter-reset: none; }
.os-steps li {
  position: relative; display: flex; flex-direction: column; gap: .4rem;
  padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-lg, 14px); background: var(--surface);
}
.os-steps li:not(:last-child)::after {           /* connector to the next step */
  content: ""; position: absolute; inset-block-start: 2.6rem; inset-inline-end: calc(-1 * var(--sp-3));
  inline-size: var(--sp-3); border-block-start: 2px dashed var(--amber);
}
.os-steps__top { display: flex; align-items: center; justify-content: space-between; }
.os-steps__n { font: 800 var(--fs-xl)/1 var(--font-mono); color: var(--line); }
.os-steps b { margin-block-start: .4rem; color: var(--navy); font-size: var(--fs-lg); text-transform: uppercase; letter-spacing: .06em; }
.os-steps li > span:last-child { color: var(--text-muted); font-size: var(--fs-sm); }
.os-sub { margin-block: var(--sp-6) var(--sp-3); }

/* feature rows (terminal + enforcement) */
.os-feats { display: grid; gap: var(--sp-3); }
.os-feats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block-start: var(--sp-4); }
.os-feat { display: flex; gap: var(--sp-2); align-items: flex-start; }
.os-feat b { display: block; color: var(--text); }
.os-feat > span:last-child > span { display: block; color: var(--text-muted); font-size: var(--fs-sm); }

/* terminal split */
.os-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-6); align-items: center; }
.os-term { margin: 0; border-radius: var(--radius-lg, 14px); background: var(--bg); }
.os-term img { display: block; inline-size: 100%; block-size: auto; mix-blend-mode: multiply; }

@media (max-width: 1023px) {
  .os-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .os-steps li::after { display: none; }
  .os-feats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .os-split { grid-template-columns: 1fr; gap: var(--sp-4); }
}
@media (max-width: 699px) {
  .os-pillars { grid-template-columns: 1fr; }
  .os-steps { grid-template-columns: 1fr; }
  .os-feats--4 { grid-template-columns: 1fr; }
}