/* Small presentation refinements; brand colors, offer data and tracking stay separate. */
:root { --ui-action: #b84d0b; --ui-action-hover: #a54409; }
.hero-inner > *, .form-step, .slider-header { min-width: 0; }
/* Keep the selector comfortably sized when the hero becomes a single column. */
.hero-inner > .form-card {
  width: 100%;
  max-width: 520px;
  justify-self: center;
}
.btn-primary { background: linear-gradient(135deg, var(--ui-action), var(--ui-action-hover)); }
.btn-primary:hover { background: var(--ui-action-hover); }
.btn-creditor, .nav-cta { background: var(--ui-action); }
.btn-creditor:hover, .nav-cta:hover { background: var(--ui-action-hover); color: #fff; }
.hero-badge, .hero-title span, .slider-value-display, .payment-amount,
.creditor-detail-value.highlight, .creditor-rate-value { color: var(--ui-action); }
.creditor-rank { background: var(--ui-action); }
.comparison-disclaimer, .hero-disclaimer, .results-note, .payment-rate {
  font-size: 14px !important; font-weight: 400; line-height: 1.55; color: var(--text-light);
}
.slider-bounds, .creditor-detail-label, .creditor-rate-label, .creditor-rate-sub {
  font-size: 13px; color: var(--text-light);
}
.creditor-badge { font-size: 13px; }
.loan-summary-item span { font-size: 13px; color: var(--text-light); }
.results-summary-label { font-size: 13px; color: rgba(255,255,255,.8); }
.form-input::placeholder { color: var(--text-light); }
.form-checkbox a { color: var(--ui-action); }
.btn:focus-visible, .btn-creditor:focus-visible, .faq-question:focus-visible,
.range-slider:focus-visible { outline: 3px solid var(--ui-action); outline-offset: 4px; }
.range-slider::-webkit-slider-thumb { width: 28px; }
.range-slider::-moz-range-thumb { width: 28px; }
.faq-question { width: 100%; border: 0; background: none; font: inherit; font-weight: 600; text-align: left; gap: 16px; }
.faq-question:hover { color: var(--ui-action); }
.faq-question:focus-visible { outline-offset: -4px; }
.faq-answer[hidden] { display: none; }
.faq-item.active .faq-answer { max-height: none; }
.results-disclaimer { max-width: 90ch; margin-left: auto; margin-right: auto; line-height: 1.65; text-align: left; }
.results-disclaimer > strong:first-child { display: block; margin-bottom: 8px; }
.representative-example { text-align: left; line-height: 1.6; }
@media (min-width: 1025px) {
  .hero-title { font-size: 48px; line-height: 1.15; }
}
@media (max-width: 768px) {
  .hero { padding-top: 88px; }
  .hero-badge { margin-bottom: 16px; }
  .hero-title { font-size: 30px; margin-bottom: 14px; line-height: 1.2; }
  .hero-subtitle { font-size: 17px; line-height: 1.55; margin-bottom: 14px; }
  .hero-disclaimer { padding: 8px 12px; }
  .form-card { margin-top: 14px; }
  .results-hero { padding-bottom: 24px; }
  .results-hero .no-registration-note, .results-hero .results-calculation-note { margin-top: 12px; }
  .creditor-card { padding: 20px; }
  .cookie-settings {
    position: fixed; left: 12px; bottom: 12px; right: auto; top: auto;
    width: 120px; min-height: 44px; margin: 0; padding: 7px 10px;
    border-radius: 14px; font-size: 13px; line-height: 1.25; white-space: normal;
  }
  input, button, a { scroll-margin-bottom: 80px; }
  body { padding-bottom: 68px; }
  .mobile-toggle { flex-shrink: 0; }
  .header-inner { gap: 8px; }
}
@media (max-width: 360px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-badge { font-size: 13px; padding: 8px 12px; }
  .hero-title { font-size: 28px; }
  .slider-header { gap: 8px; }
  .logo-text { font-size: 20px; }
  .logo { gap: 6px; }
  .header-inner { gap: 6px; }
}

/* Keep the floating settings shortcut clear of text entry on touch screens. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  body:has(input:is([type="text"], [type="email"], [type="tel"], [type="search"], [type="url"], [type="number"], [type="password"], :not([type])):focus, textarea:focus) #cookieSettings {
    visibility: hidden;
    pointer-events: none;
  }
}