/* Parking check-in app — efficient / operational mood. Scanner blue from the app's own tab colour (#007bff), green and amber from its buttons. */
:root{
  --accent:#4c9bff;
  --accent-hover:#2f86f5;
  --accent-soft:#4c9bff22;
  --accent-2:#3ddc97;
  --amber:#ffb340;
}
.btn-primary,.skip-link,.loop li::before{color:#04162b}
.loop li::before{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){--accent:#0b62c4;--accent-hover:#0a52a3;--accent-soft:#0b62c417;--accent-2:#0a7a4d;--amber:#9a5b00}
  :root:not([data-theme="dark"]) .btn-primary,
  :root:not([data-theme="dark"]) .skip-link,
  :root:not([data-theme="dark"]) .loop li::before{color:#fff}
  :root:not([data-theme="dark"]) .eyebrow{color:#0a7566}
}
:root[data-theme="light"]{--accent:#0b62c4;--accent-hover:#0a52a3;--accent-soft:#0b62c417;--accent-2:#0a7a4d;--amber:#9a5b00}
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .skip-link,
:root[data-theme="light"] .loop li::before{color:#fff}
:root[data-theme="light"] .eyebrow{color:#0a7566}
.tg-mark{border-radius:14px;flex:none}
.callout-warn{border-color:color-mix(in srgb,var(--amber) 50%,var(--border-subtle));background:color-mix(in srgb,var(--amber) 9%,transparent)}
.phone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:var(--space-5)}
.phone-grid > *{min-width:0}
.phone-grid figure{margin:0}
.phone-grid img{width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:#fff}
.phone-grid .shot-caption{text-align:left}
.price-demo{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:var(--space-4)}
.price-demo .stat{text-align:left}
.render-note{
  display:inline-block;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;
  padding:.25rem .7rem;border-radius:var(--radius-full);color:var(--amber);background:color-mix(in srgb,var(--amber) 12%,transparent);margin-bottom:var(--space-3)
}