/* Base styles that sit alongside the components' own helmet styles. */
html { background: #FAF8F3; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #FAF8F3; overflow-x: hidden; }
#app { min-height: 100vh; }

/* Anchor jumps land below the sticky header */
section[id] { scroll-margin-top: 72px; }

/* Boot splash while components load */
.boot { min-height: 100vh; display: grid; place-items: center; }
.boot img { animation: bootBob 1.6s ease-in-out infinite; }
@keyframes bootBob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }

/* Hover / focus helpers generated from style-hover: ease the change */
.dc-ps { transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; }

/* Lazily-mounted phones: reserve space with the device silhouette, then fade in */
.dc-lazy { border-radius: 62px; background: #0A0A0D; box-shadow: 0 0 0 2px #2b2a30; }
.dc-lazy.dc-on { background: none; box-shadow: none; }
.dc-lazy.dc-on > * { animation: dcIn .45s ease both; }
@keyframes dcIn { from { opacity: 0 } to { opacity: 1 } }

/* Pause animations that are out of view to keep scrolling smooth */
.dc-paused *, .dc-off * { animation-play-state: paused !important; }

/* Horizontal phone carousel: snap to each phone */
#screens > div:last-child { scroll-snap-type: x mandatory; scroll-padding-inline: max(clamp(16px, 4vw, 40px), calc((100vw - 1200px) / 2 + 40px)); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
#screens > div:last-child > div { scroll-snap-align: start; }

/* Scrollable top nav: fade the trailing edge so it reads as scrollable */
.ws-nav::-webkit-scrollbar { display: none; }
@media (max-width: 900px) {
  .ws-nav { -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); padding-right: 24px; }
}

/* Hero phone stage: shrink on small screens so both phones stay in view */
@media (max-width: 560px) {
  .ws-hero-stage { zoom: .84; width: calc((100vw - 24px) / .84); flex-basis: auto !important; max-width: none !important; }
}
@media (max-width: 380px) {
  .ws-hero-stage { zoom: .76; width: calc((100vw - 20px) / .76); }
}

:focus-visible { outline: 3px solid #4F8F3F; outline-offset: 2px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}