@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/roboto-regular.woff2') format('woff2'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/roboto-medium.woff2') format('woff2'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/roboto-bold.woff2') format('woff2'); }
@font-face { font-family: Roboto; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/roboto-italic.woff2') format('woff2'); }
body, button, input, textarea, select, .text-button, .swipe-button, .quiz-top { font-family: Roboto, Arial, sans-serif; }
h1, h2, h3 { font-family: Impact, 'Arial Narrow', sans-serif; overflow-wrap: anywhere; }
button, input, textarea { font-size: 1rem; }
.skip-link { position: fixed; left: 12px; top: -100px; z-index: 100; padding: 10px 18px; color: #fff; background: #8c1026; }
.skip-link:focus { top: 10px; }
header .site-nav { height: auto; min-height: 82px; flex-wrap: nowrap; gap: 20px; }
header .site-nav .navlinks { gap: 6px 18px; min-width: 0; flex-wrap: wrap; justify-content: flex-end; padding: 10px 0; }
.nav-toggle { display: none; background: #21151d; border: 1px solid #885267; color: #fff; border-radius: 4px; padding: 9px 14px; min-height: 44px; cursor: pointer; }
header .site-nav .brand-logo { width: 58px; height: 58px; }
header .site-nav .brand-wordmark { display: block; width: 180px; height: 68px; }
:focus-visible { outline: 3px solid #ff9bad; outline-offset: 4px; }
.feedback-card { min-width: 0; }
.feedback-form { min-width: 0; }
.feedback-form fieldset { min-width: 0; }
.feedback-form.is-rated button { display: inline-flex; }
.feedback-form.is-rated .stars, .feedback-form.is-rated .feedback-comment { pointer-events: auto; opacity: 1; }
.feedback-form button:disabled { opacity: .65; cursor: wait; }
.feedback-form fieldset:disabled .stars { opacity: .7; }
.feedback-form fieldset:disabled label { cursor: default; }
.feedback-form .honeypot { display: none; }
.rating-result { flex-wrap: wrap; }
.feedback-form .stars { gap: 7px; }
.feedback-form .stars label { font-size: clamp(1.9rem, 8vw, 2.75rem); }
@media (max-width: 1100px) {
  header .site-nav { flex-wrap: wrap; padding: 10px 0; justify-content: space-between; gap: 10px; }
  .js-nav .nav-toggle { display: inline-flex; align-items: center; gap: 8px; }
  header .site-nav .navlinks { order: 3; width: 100%; flex: 0 0 100%; flex-wrap: wrap; white-space: normal; overflow: visible; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; padding: 10px 0; max-height: 65vh; overflow-y: auto; }
  .js-nav header .site-nav .navlinks:not(.is-open) { display: none; }
  header .site-nav .navlinks a { display: flex; align-items: center; padding: 10px 8px; min-height: 44px; border-radius: 4px; overflow-wrap: anywhere; }
  header .site-nav .navlinks a:hover, header .site-nav .navlinks a.active { background: #27151e; }
  .mobile, .mobile-menu { display: none; }
  .test-picker, .quiz-card, .result-card { scroll-margin-top: 100px; }
}
@media (max-width: 540px) {
  header .site-nav .brand { gap: 7px; }
  header .site-nav .brand-logo { width: 44px; height: 44px; }
  header .site-nav .brand-wordmark { width: 125px; height: 48px; }
  .nav-toggle { padding: 8px 10px; font-size: .875rem; }
  .feedback-card, .support-card { padding: 24px 18px; gap: 24px; }
  .feedback-card h2 { font-size: clamp(1.8rem, 9vw, 2.6rem); }
  .feedback-form .stars { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }