/* Minimal CSS to replace Tailwind utilities used in landing.html */

/* Base */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* Offset for fixed header */
}

html,
body {
    margin: 0;
    padding: 0;
}

.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Times New Roman', Times, serif;
}

/* Colors */

.bg-white {
    background-color: #ffffff;
}

.bg-indigo-50 {
    background-color: #EEF2FF;
}

.bg-indigo-600 {
    background-color: #4F46E5;
}

.text-white {
    color: #ffffff;
}

.text-gray-800 {
    color: #E5E7EB;
    /* light text for dark bg */
}

.text-gray-700 {
    color: #CBD5E1;
    /* secondary on dark bg */
}

.text-gray-600 {
    color: #9CA3AF;
    /* tertiary on dark bg */
}

.text-gray-500 {
    color: #9CA3AF;
    /* captions on dark bg */
}

.text-indigo-600 {
    color: #4F46E5;
}

.text-indigo-700 {
    color: #4338CA;
}

/* Borders */
.border {
    border: 1px solid #E5E7EB;
}

.border-2 {
    border-width: 2px;
}

.border-t {
    border-top: 1px solid #E5E7EB;
}

.border-white {
    border-color: #ffffff;
}

.border-indigo-50 {
    border-color: #EEF2FF;
}

.border-indigo-600 {
    border-color: #4F46E5;
}

.border-b {
    border-bottom: 1px solid #E5E7EB;
}

/* Radius */
.rounded-md {
    border-radius: 0.375rem;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-2xl {
    border-radius: 1rem;
}

/* Shadows */
.shadow {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Layout & spacing */
.container {
    width: 100%;
}

.bg-gray-50 {
    background-color: #202123;
}

.max-w-4xl {
    max-width: 56rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* reaffirm text palette for dark background */
.text-gray-800 {
    color: #E5E7EB;
}

.text-gray-700 {
    color: #CBD5E1;
}

.text-gray-600 {
    color: #9CA3AF;
}

.text-gray-500 {
    color: #9CA3AF;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.hero-subtitle {
    margin-top: 1rem;
    color: #9CA3AF;
}

.p-8 {
    padding: 2rem;
}

.hero-bullets {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    color: #CBD5E1;
}

.gap-4 {
    gap: 1rem;
}

.btn-primary {
    background-color: #7C3AED;
    color: #fff;
    padding: 0.75rem 1.25rem;
}

.btn-primary:hover {
    background-color: #6D28D9;
}

.mt-2 {
    margin-top: 0.5rem;
}

.btn-outline {
    border: 1px solid #A78BFA;
    color: #A78BFA;
    padding: 0.75rem 1.25rem;
    background: transparent;
}

.btn-outline:hover {
    background-color: rgba(167, 139, 250, 0.12);
}

.mt-8 {
    margin-top: 2rem;
}

.card {
    background: #a19c9c;
    /* user-chosen card bg */
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 1.5rem;
    color: #111827;
    /* dark text for contrast on light card */
}

.mt-16 {
    margin-top: 4rem;
}

.text-right {
    text-align: right;
}

.preview-box {
    margin-top: 1rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    overflow: hidden;
}

.inline-block {
    display: inline-block;
}

.hidden {
    display: none !important;
}

.btn-soft {
    background: #E5E7EB;
    color: #111827;
    padding: 0.5rem 0.5rem;
    border-radius: 0.375rem;
}

.items-start {
    align-items: flex-start;
}

.section-desc {
    margin-top: 0.5rem;
    color: #9CA3AF;
}

.justify-center {
    justify-content: center;
}

.card-highlight {
    border: 2px solid #C7D2FE;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.08);
}

.grid {
    display: grid;
}

.space-y-2>*+* {
    margin-top: 0.5rem;
}

.cta {
    margin-top: 4rem;
    border-radius: 0.5rem;
    background-image: linear-gradient(to right, #4F46E5, #0EA5E9);
    color: #fff;
    padding: 2rem;
}

.col-span-2 {
    grid-column: span 2 / span 2;
}

.overflow-hidden {
    overflow: hidden;
}

.cta-text {
    margin-top: 0.5rem;
    opacity: 0.9;
}

/* Sizing */
.footer {
    margin-top: 4rem;
    font-size: 0.875rem;
    color: #9CA3AF;
    text-align: center;
    padding-bottom: 3rem;
}

.h-10 {
    height: 2.5rem;
}

/* Typography */
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.font-extrabold {
    font-weight: 800;
}

.opacity-90 {
    opacity: 0.9;
}

/* Links & buttons */
.hover\:text-indigo-600:hover {
    color: #4F46E5;
}

.rounded-md {
    border-radius: 0.375rem;
}

.hover\:bg-indigo-700:hover {
    background-color: #4338CA;
}

/* Gradients */
.bg-gradient-to-br.from-slate-900.to-indigo-600 {
    background-image: linear-gradient(to bottom right, #0F172A, #4F46E5);
}

.bg-gradient-to-r.from-indigo-600.to-sky-500 {
    background-image: linear-gradient(to right, #4F46E5, #0EA5E9);
}

/* Responsive utilities */
@media (min-width: 640px) {
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .md\:flex {
        display: flex;
    }

    .md\:hidden {
        display: none;
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
}

/* Utilities specific to page elements */
.hover\:bg-indigo-700 {
    transition: background-color 0.2s ease-in-out;
}

.hover\:text-indigo-600 {
    transition: color 0.2s ease-in-out;
}

/* ========================= */
/* Semantic styles for <main> */
/* ========================= */

.landing-main {
    max-width: 72rem;
    /* 6xl */
    margin: 0 auto;
    padding: 6rem 1.5rem 3rem 1.5rem;
    /* pt-24 px-6 pb-12 - extra top padding for fixed header */
}

/* Hero */
.hero {
    display: grid;
    gap: 2rem;
    /* gap-8 */
    align-items: center;
}

@media (min-width: 768px) {
    .hero {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.hero-title {
    font-size: 1.875rem;
    /* text-3xl */
    line-height: 2.25rem;
    font-weight: 800;
    /* extrabold */
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
}

.hero-subtitle {
    margin-top: 1rem;
    /* mt-4 */
    color: #9CA3AF;
}

.hero-cta {
    margin-top: 1.5rem;
    /* mt-6 */
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.btn {
    display: inline-block;
    border-radius: 0.375rem;
    font-weight: 600;
    text-decoration: none;
}

.btn-primary {
    background-color: #7C3AED;
    color: #fff;
    padding: 0.75rem 1.25rem;
}

.btn-primary:hover {
    background-color: #6D28D9;
}

.btn-outline {
    border: 1px solid #A78BFA;
    color: #A78BFA;
    padding: 0.75rem 1.25rem;
    background: transparent;
}

.btn-outline:hover {
    background-color: rgba(167, 139, 250, 0.12);
}

.hero-bullets {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    color: #CBD5E1;
}

@media (min-width: 640px) {
    .hero-bullets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.bullet-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.bullet-dot {
    color: #4F46E5;
    font-weight: 700;
}

/* Preview card */
.card {
    background: #a19c9c;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
    color: #111827;
}

.card-large {
    border-radius: 1rem;
}

.preview-caption {
    font-size: 0.875rem;
    color: #000000;
}

.preview-box {
    margin-top: 1rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    overflow: hidden;
}

.preview-header {
    background-image: linear-gradient(to right, #4F46E5, #0EA5E9);
    color: #fff;
    padding: 1rem;
}

.row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.preview-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.preview-domain {
    font-size: 0.75rem;
    opacity: 0.9;
}

.preview-hours {
    text-align: right;
    font-size: 0.875rem;
}

.preview-helper {
    padding: 1rem;
    font-size: 0.875rem;
    color: #4B5563;
}

.preview-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    font-size: 0.875rem;
}

.btn-soft {
    background: #EEF2FF;
    padding: 0.5rem 0.5rem;
    border-radius: 0.375rem;
}

.full {
    grid-column: 1 / -1;
}

/* Sections */
.section {
    margin-top: 4rem;
}

.section-desc {
    margin-top: 0.5rem;
    color: #9CA3AF;
}

.card-grid {
    display: grid;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .card-grid.two-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .card-grid.three-cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.card-title {
    font-weight: 600;
}

.card-text {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #111827;
}

/* Pricing */
.card-highlight {
    border: 2px solid #EEF2FF;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.price-note {
    font-size: 0.875rem;
    color: #000000;
}

.feature-list {
    margin-top: 1rem;
    font-size: 0.875rem;
}

.block-btn {
    display: block;
    text-align: center;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
}

/* CTA */
.cta {
    margin-top: 4rem;
    border-radius: 0.5rem;
    background-image: linear-gradient(to right, #4F46E5, #0EA5E9);
    color: #fff;
    padding: 2rem;
}

.cta-inner {
    max-width: 56rem;
    margin: 0 auto;
    text-align: center;
}

.cta-text {
    margin-top: 0.5rem;
    opacity: 0.9;
}

.cta-actions {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-light {
    background: #fff;
    color: #4338CA;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
}

.btn-outline-light {
    border: 1px solid #fff;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
}

/* FAQ */
/* FAQ cards reuse .card styles */

/* Footer */
.footer {
    margin-top: 4rem;
    font-size: 0.875rem;
    color: #9CA3AF;
    text-align: center;
    padding-bottom: 3rem;
}

/* ========================= */
/* Header styles (merged)    */
/* ========================= */

.site-header {
    background-color: #0F172A;
    border-bottom: 1px solid #1F2937;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    /* keep above all content */
}

.site-header .container {
    max-width: 72rem;
    /* 6xl */
    margin: 0 auto;
    padding: 1rem 1.5rem;
    /* py-4 px-6 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    /* anchor absolute hamburger on mobile */
    gap: 0.75rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* gap-3 */
    text-decoration: none;
}

.brand-badge {
    width: 2.5rem;
    /* w-10 */
    height: 2.5rem;
    /* h-10 */
    border-radius: 0.375rem;
    /* rounded-md */
    background-image: linear-gradient(to bottom right, #0F172A, #4F46E5);
    /* from slate-900 to indigo-600 */
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.brand-title {
    font-size: 1.125rem;
    /* text-lg */
    font-weight: 600;
    /* font-semibold */
    color: #E5E7EB;
    margin: 0;
}

.brand-subtitle {
    font-size: 0.875rem;
    /* text-sm */
    color: #9CA3AF;
    margin: 0;
}

.site-nav {
    display: none;
    /* hidden by default, JS will show/hide based on screen size */
    gap: 1.5rem;
    align-items: center;
}

.site-nav.show-desktop {
    display: flex !important;
}

.hamburger {
    padding: 0.5rem;
    margin-right: 2.5rem !important;
    /* p-2 */
    border: none;
    background: transparent;
    cursor: pointer;
    display: none;
    /* hidden by default, JS will show/hide based on screen size */
    align-items: center;
    justify-content: center;
    min-width: 44px;
    /* better tap target */
    min-height: 44px;
}

.hamburger.show-mobile {
    display: inline-flex !important;
}

/* Responsive behavior will be handled by JavaScript */

.nav-link {
    font-size: 0.875rem;
    color: #E5E7EB;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.nav-link:hover {
    color: #A78BFA;
}

.btn-cta {
    display: inline-block;
    background-color: #7C3AED;
    color: #ffffff;
    padding: 0.5rem 1rem;
    /* py-2 px-4 */
    border-radius: 0.375rem;
    /* rounded-md */
    font-size: 0.875rem;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}

.btn-cta:hover {
    background-color: #6D28D9;
}

.hamburger svg {
    stroke: #E5E7EB;
    width: 1.5rem;
    height: 1.5rem;
}

.mobile-nav {
    border-top: 1px solid #1F2937;
    display: none;
    /* hidden by default */
    background-color: #0F172A;
}

.mobile-nav .inner {
    padding: 1rem 1.5rem;
    /* px-6 py-4 */
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Show when .hidden is removed via JS toggle */
.mobile-nav:not(.hidden) {
    display: block;
}

/* Never show mobile nav on desktop */
@media (min-width: 768px) {
    .mobile-nav {
        display: none !important;
    }
}

/* Desktop-specific layout - ensure proper spacing */
@media (min-width: 1280px) {
    .site-header .container {
        padding: 1rem 1.5rem;
        /* full padding on large desktop */
    }
}

/* Medium tablets (768–1279): aggressive spacing to fit nav */
@media (min-width: 768px) and (max-width: 1279.98px) {
    .site-header .container {
        padding: 1rem 0.75rem !important;
        /* tight padding */
    }

    .site-nav {
        gap: 0.875rem !important;
        /* reduce gap between nav items */
    }

    .nav-link {
        font-size: 0.8125rem !important;
        /* slightly smaller nav links */
    }

    .btn-cta {
        padding: 0.375rem 0.75rem !important;
        /* compact CTA button */
        font-size: 0.8125rem !important;
        /* smaller CTA text */
        margin-right: 2.5rem !important;
        /* add gap between button and right edge */
    }

    .brand-title {
        font-size: 1rem !important;
        /* smaller brand title */
    }

    .brand-subtitle {
        font-size: 0.75rem !important;
        /* smaller brand subtitle */
    }
}

/* Mobile-specific placement for hamburger: keep in flow, align right */
@media (max-width: 767.98px) {
    .site-header .container {
        padding: 1rem 0.75rem;
        /* reduce right padding to prevent cutoff */
    }

    .hamburger {
        position: static;
        margin-left: auto;
        flex-shrink: 0;
        /* prevent hamburger from shrinking */
        margin-right: 0;
        /* ensure it doesn't push beyond edge */
    }

    .brand {
        flex: 1 1 auto;
        min-width: 0;
        /* allow shrink */
        overflow: hidden;
        /* clip overflowing text */
        margin-right: 0.5rem;
        /* space between brand and hamburger */
    }

    .brand-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .brand-subtitle {
        display: none;
    }
}