/* ShippingMu — Cargo Manifest v2 (rebuilt from design_handoff_shippingmu_website) */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Black&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: #0e1116;
  font-family: 'Archivo', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes flap-in {
  from { transform: rotateX(-90deg); opacity: 0.3; }
  to { transform: rotateX(0deg); opacity: 1; }
}
@keyframes sm-panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sm-spin {
  to { transform: rotate(360deg); }
}
.sm-spinner {
  animation: sm-spin 0.85s linear infinite;
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 26s linear infinite;
}
.flap-digit {
  animation: flap-in 0.28s ease-out;
}
.sm-panel-anim {
  animation: sm-panel-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.sm-input:focus { outline: none; border-color: #F77F2A !important; }

@media (max-width: 860px) {
  .sm-hero-grid { grid-template-columns: 1fr !important; }
  .sm-stack { flex-direction: column !important; align-items: stretch !important; }
  .sm-ledger-3 { grid-template-columns: 1fr !important; }
  .sm-tiers-3 { grid-template-columns: 1fr !important; }
  .sm-steps-3 { grid-template-columns: 1fr !important; }
  .sm-grid-2 { grid-template-columns: 1fr !important; }
  /* Category panel / result column: show above the form on mobile instead of
     below it, so it's visible without scrolling past the whole form first. */
  #result-mount { order: -1; position: static !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none !important; }
  .flap-digit { animation: none !important; opacity: 1 !important; transform: none !important; }
  .sm-panel-anim { animation: none !important; opacity: 1 !important; transform: none !important; }
  .sm-spinner { animation: none !important; }
  * { transition: none !important; scroll-behavior: auto !important; }
}