/* Page level rules of the prototype. Only what no component in components.css covers, values from tokens.
   Phone rules are the last block. */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--aks-header-h) + var(--aks-s-2)); }
.aks-section[id] { scroll-margin-top: var(--aks-header-h); }

.aks-car { --car-mask: url("../photos/statement-car-1200.webp"); }
.aks-app-art-box { --art-mask: url("../img/my-afs-car-app.svg"); }   /* the grain on the illustration is cut with the illustration */   /* the grain on the car is cut with the car picture */

/* phone, below 640 px */
@media (max-width: 639px) {
  :root { --aks-pad-card: var(--aks-pad-card-sm); }
  .aks-hero__media { min-height: var(--aks-hero-min-h-phone); padding: var(--aks-s-3); }
}