/* DevSweep — base + animations (ported from the design helmet) + responsive layer. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #161617;
  color: rgba(255, 255, 255, 0.96);
  font-family: 'Work Sans', -apple-system, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 6px;
  border-radius: 5px;
}

@keyframes barIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes revealUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes pulseDot { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes shrinkBar { from { width: 84%; } to { width: 31%; } }

/* ── Responsive layer ───────────────────────────────────────────────
   The design was authored at 1280px with inline-styled multi-column
   grids. These overrides (scoped to #app, !important to beat inline
   styles) collapse the layout gracefully on tablet/phone without
   touching the desktop rendering. */

@media (max-width: 900px) {
  #app [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  #app [style*="columns:3"],
  #app [style*="columns: 3"] { columns: 2 !important; }
  /* keep the pricing comparison table readable as a 3-col grid */
  #app .dsw-cmp-table [style*="grid-template-columns"] { grid-template-columns: 1.4fr 1fr 1fr !important; }
  #app h1 { font-size: 40px !important; }
}

@media (max-width: 620px) {
  #app [style*="columns:3"],
  #app [style*="columns: 3"] { columns: 1 !important; }
  #app h1 { font-size: 33px !important; }
  #app .dsw-nav-links { display: none !important; }
  #app section { padding-left: 16px !important; padding-right: 16px !important; }
}

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