/* Base styles. Most layout styles are inline in index.html (exported from the approved design). */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #ffffff; }
img { max-width: 100%; height: auto; }
a { color: #160391; }
a:hover { color: #0e0266; }
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: " +"; color: #ff7600; font-weight: 800; }
details[open] summary::after { content: " –"; }
input[type=range] { accent-color: #ff7600; width: 100%; height: 28px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #ff7600; outline-offset: 3px; }
input:not([type=checkbox]):not([type=range]):focus { border-color: #160391 !important; }
button:disabled { opacity: 0.6; cursor: wait !important; }

.skip { position: absolute; left: -9999px; top: 8px; background: #160391; color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }

/* Honeypot field for spam bots – hidden from people */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

#form-status[data-kind="ok"] { color: #0f6b3a; font-weight: 600; }
#form-status[data-kind="error"] { color: #a3141f; font-weight: 600; }

/* Phones: tone down the large desktop type sizes and spacing */
@media (max-width: 640px) {
  h1 { font-size: 38px !important; }
  h2 { font-size: 28px !important; }
  blockquote { font-size: 20px !important; }
  #out-annual { font-size: 42px !important; }
  section > div { padding-top: 56px !important; padding-bottom: 56px !important; }
  #book > div > div { padding: 36px 24px !important; }
  header nav { gap: 14px !important; font-size: 15px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}