/* Fair E Web Host production UI layer - loaded after page styles. */
:root {
    --fwh-green: #15803d;
    --fwh-green-dark: #0f5f2d;
    --fwh-blue: #0369a1;
    --fwh-ink: #172033;
    --fwh-muted: #5f6b7a;
    --fwh-surface: #ffffff;
    --fwh-soft: #f5f8fb;
    --fwh-border: #dce4ec;
    --fwh-focus: #f59e0b;
    --fwh-radius: 14px;
    --fwh-shadow: 0 12px 34px rgba(23, 32, 51, 0.09);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
}

body {
    color: var(--fwh-ink);
    overflow-x: clip;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

a,
button,
input,
select,
textarea,
[tabindex] {
    scroll-margin-top: 100px;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--fwh-focus) !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
}

.skip-to-content,
.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100000;
    padding: 0.75rem 1rem;
    color: #fff !important;
    background: var(--fwh-ink);
    border-radius: 8px;
    transform: translateY(-160%);
}

.skip-to-content:focus,
.skip-link:focus {
    transform: translateY(0);
}

:where(.btn, .btn-primary, .btn-plan, button, input[type="submit"]) {
    min-height: 44px;
}

:where(.btn-primary, .btn-plan) {
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(21, 128, 61, 0.18);
}

:where(.btn-primary, .btn-plan):hover {
    transform: translateY(-1px);
}

header {
    isolation: isolate;
}

header,
.site-header {
    box-shadow: 0 1px 0 rgba(23, 32, 51, 0.08);
}

.top-bar a,
header nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.card,
.plan,
.pricing-card,
.service-card,
.feature-card,
.testimonial,
.faq-item {
    border-color: var(--fwh-border);
}

:where(.card, .plan, .pricing-card, .service-card, .feature-card) {
    border-radius: var(--fwh-radius);
}

.table-responsive,
table {
    max-width: 100%;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    border-collapse: collapse;
}

th {
    text-align: left;
}

input,
select,
textarea {
    max-width: 100%;
    min-height: 44px;
    font-size: 1rem;
}

textarea {
    min-height: 120px;
}

footer {
    overflow: hidden;
}

footer a {
    text-underline-offset: 3px;
}

.footer-grid {
    align-items: start;
}

.fwh-updated {
    color: var(--fwh-muted);
    font-size: 0.875rem;
}

@media (max-width: 900px) {
    .container {
        width: min(100%, 100% - 28px);
        padding-left: 0;
        padding-right: 0;
    }

    header .container,
    .nav {
        min-height: 64px;
    }

    .hero,
    .section,
    main > section {
        overflow: clip;
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 2rem 1.25rem !important;
    }
}

@media (max-width: 640px) {
    html {
        scroll-padding-top: 74px;
    }

    h1 {
        font-size: clamp(2rem, 10vw, 2.8rem) !important;
        overflow-wrap: anywhere;
    }

    h2 {
        font-size: clamp(1.55rem, 7vw, 2.15rem) !important;
    }

    p,
    li {
        overflow-wrap: anywhere;
    }

    .top-bar-left {
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .top-bar-left span:first-child {
        display: none;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
    }

    .footer-bottom,
    .subfooter {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .pricing-grid,
    .plans-grid,
    .features-grid,
    .services-grid {
        grid-template-columns: 1fr !important;
    }

    .modal,
    [role="dialog"] {
        max-width: calc(100vw - 24px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    header,
    footer,
    .top-bar,
    .mobile-menu,
    .mobile-menu-btn,
    .mobile-menu-toggle,
    .chat-widget,
    .cookie-banner {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
        text-decoration: underline;
    }
}