/* Hello Sunshine — global styles
   Colors and fonts preserved exactly from the original design. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; font-family: Nunito, sans-serif; color: #2B2F55; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-thumb { background: #D9D3E8; border-radius: 6px; }

@keyframes spinslow { to { transform: rotate(360deg); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes fadeup { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.reveal { animation: fadeup .6s ease both; }

/* Interactive helpers */
.pointer { cursor: pointer; }

/* Currency dropdown / mobile menu / auth modal open states are toggled via [hidden] */
[hidden] { display: none !important; }

/* Responsive grid collapses (preserved from original) */
@media (max-width: 900px) {
  .featgrid, .howgrid, .pricegrid { grid-template-columns: 1fr 1fr !important; }
  .benefitgrid, .footgrid { grid-template-columns: 1fr !important; }
  .footgrid { gap: 24px !important; }
}
@media (max-width: 680px) {
  .navlinks { display: none !important; }
  .hammenu { display: block !important; }
  .featgrid, .howgrid, .pricegrid { grid-template-columns: 1fr !important; }
}

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

/* Visible keyboard focus */
a:focus-visible, [tabindex]:focus-visible, input:focus-visible, button:focus-visible, .pointer:focus-visible {
  outline: 3px solid #9B6BFF;
  outline-offset: 2px;
  border-radius: 8px;
}

/* Real form inputs styled to match the original mockup fields */
.hs-input {
  width: 100%;
  background: #F7F9FF;
  border: 1.5px solid #E4E1F2;
  border-radius: 13px;
  padding: 13px 15px;
  font: 600 14px Nunito;
  color: #2B2F55;
}
.hs-input::placeholder { color: #9AA0BE; }
.hs-input:focus { outline: none; border-color: #9B6BFF; }