/* Shared reading, touch and responsive layout refinements. */
:root { scroll-padding-top: 100px; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
main, section, .grid > *, .flex > * { min-width: 0; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; }
main p, main li { overflow-wrap: break-word; }
nav[aria-label="Breadcrumb"] { flex-wrap: wrap; }
.bp-badge { display: inline-block; max-width: 100%; line-height: 1.6; }
.bp-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.bp-table-scroll table { width: 100%; min-width: 440px; }
.bluephone-product-notice { padding: 12px 16px !important; margin: 18px 0 !important; font-size: 14px !important; line-height: 1.55 !important; border-color: #395780 !important; background: #14243d !important; text-align: left; }
.bluephone-product-notice strong { display: block; color: #fff; margin-bottom: 3px; }
.bluephone-product-notice span { display: block; color: #cbd5e1; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid #93c5fd; outline-offset: 4px; }
#bp-hero { padding-top: 40px; padding-bottom: 56px; gap: 40px; }
#bp-hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); line-height: 1.08; margin-bottom: 20px; }
#bp-hero h1 + p + p { font-size: 18px; line-height: 1.65; margin-bottom: 24px; }
#bp-hero button { padding: 16px 22px; font-size: 16px; }
#bp-hero .text-slate-500, #bp-hero [style*="color:#64748b"] { color: #94a3b8 !important; }
#view-login, #view-signup { padding-top: 112px; padding-bottom: 48px; align-items: flex-start !important; }
#view-login > div, #view-signup > div { margin-top: 0; }
#mobileMenu { z-index: 60; padding: 80px 20px 32px; gap: 20px; overflow-y: auto; justify-content: safe center; }
#mobileMenu[inert] { visibility: hidden; }
#mainNav button { min-height: 44px; }
@media (min-width: 1024px) {
 #bp-hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
 #bp-hero > .relative { margin-left: auto; margin-right: auto; }
}
@media (max-width: 767px) {
 main { padding-left: 20px !important; padding-right: 20px !important; }
 main.pt-32 { padding-top: 112px !important; }
 .input-field, input[type="email"], input[type="password"], input[type="text"], select, textarea { font-size: 16px !important; }
 .faq-header { padding: 18px; gap: 12px; }
 .faq-answer { padding-left: 18px; padding-right: 18px; }
 .faq-header h3 { font-size: 15px; line-height: 1.5; }
 .auth-card { padding: 26px 20px; border-radius: 24px; }
 #view-login, #view-signup { padding-left: 16px; padding-right: 16px; }
 footer a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 639px) {
 #view-landing > .pt-32 { padding-top: 96px; }
 #bp-hero { padding: 24px 20px 36px; gap: 28px; }
 #bp-hero h1 { font-size: clamp(1.9rem, 8.2vw, 2.7rem); margin-top: 20px; }
 #bp-hero h1 + p + p { font-size: 16px; line-height: 1.6; }
 #bp-hero .bluephone-product-notice { margin: 16px 0 !important; }
 #bp-hero button { min-height: 52px; }
 #bp-hero > .absolute { width: 100%; }
 #mobileMenu a, #mobileMenu button { font-size: 18px; min-height: 44px; }
 #mobileMenu > button:last-child { padding: 12px 24px; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto !important; }
 *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

main [style*="display:grid"] > * { min-width: 0; }
@media (max-width: 479px) { .bp-stack-small { grid-template-columns: 1fr !important; } }
body > nav a:not([style*="background"]):not([class*="bg-"]) { color: #cbd5e1; }
body > nav a:hover { color: #fff; }
.input-field::placeholder { color: #94a3b8; }