/* Brainstead landing page. Layout styles live inline in index.html, as in the design;
   this file holds the tokens, page basics and the interactive states. */
:root {
  --accent: #e8a13c;     /* Amber. Alternatives from the design: Ember #ff6a3d, Lime #a7ff4a */
  --accent-ink: #7a4a0c; /* accent on the light Security section */
  color-scheme: dark;
}

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

body { margin: 0; background: #0e0819; }
[hidden] { display: none !important; }

.mb {
  width: 100%;
  overflow-x: hidden;
  font-family: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #f4efe6;
  background: #0e0819;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

a { color: #f4efe6; }
a:hover { color: #e8a13c; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid #e8a13c;
  outline-offset: 3px;
}

summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.faq-plus { transition: transform .2s ease; display: inline-block; }
details[open] .faq-plus { transform: rotate(45deg); }

input::placeholder, textarea::placeholder { color: #8a8199; }

@keyframes mb-breathe { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes mb-drift { 0% { background-position: 0 0; } 100% { background-position: 18px 9px; } }
.mb-live { animation: mb-breathe 4.5s ease-in-out infinite, mb-drift 14s linear infinite; }
@media (prefers-reduced-motion: reduce) { .mb-live { animation: none; } }

@media (max-width: 760px) { .hide-sm { display: none !important; } }

/* Demo form */
.field {
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid #3a2f50;
  background: #0e0819;
  color: #f4efe6;
  font: inherit;
  font-size: 16px;
}
.field[aria-invalid="true"] { border: 2px solid #ff7a70; }

.chip {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  background: transparent;
  color: #f4efe6;
  border: 1px solid #4a3e60;
}
.chip[aria-pressed="true"] {
  background: #f4efe6;
  color: #0e0819;
  border-color: #f4efe6;
  font-weight: 600;
}