/* Automatically fit the available browser width. Load after tailwind.css. */
:root {
    --page-gutter: clamp(16px, 3.6vw, 48px);
    --section-space: clamp(32px, 4.5vw, 64px);
    --card-space: clamp(16px, 2vw, 26px);
    --grid-gap: clamp(12px, 1.6vw, 20px);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 0; min-height: 100vh; min-height: 100svh; overflow-wrap: anywhere; }
button, a, summary { touch-action: manipulation; }
.landing-home { padding-bottom: calc(104px + var(--safe-bottom)); }

.landing-home > header,
.landing-home > section,
.legal-page > header,
.legal-page > main {
    width: 100%;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    padding-left: max(var(--page-gutter), var(--safe-left));
    padding-right: max(var(--page-gutter), var(--safe-right));
}

.landing-home > header {
    padding-top: calc(clamp(36px, 6vw, 88px) + var(--safe-top));
    padding-bottom: 0;
}
.landing-home > header > .absolute { max-width: 100%; }

.landing-home > header h1 {
    width: 100%; max-width: 1000px;
    margin-bottom: clamp(14px, 1.8vw, 24px);
    font-size: clamp(24px, calc(14px + 3vw), 60px);
    line-height: 1.18; letter-spacing: -0.025em; text-wrap: balance;
}
.landing-home > header h1 > span { display: block; }
.landing-home > header h1 > br { display: none; }
.landing-home > header h1 > span + span { margin-top: clamp(8px, 1vw, 12px); }
.landing-home > header > p {
    max-width: 640px; padding: 0;
    font-size: clamp(14px, calc(12px + 0.45vw), 18px);
    line-height: 1.7;
}
.landing-home > section:first-of-type { padding-top: clamp(24px, 3vw, 40px); padding-bottom: 0; }
.landing-home > section:first-of-type > p {
    margin-bottom: clamp(16px, 2vw, 28px);
    font-size: clamp(11px, calc(10px + 0.2vw), 13px);
    line-height: 1.5; letter-spacing: 0.12em;
}

/* Column count follows content width instead of individual device models. */
#bento-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    grid-auto-rows: auto;
    gap: var(--grid-gap);
}
#bento-container > .bento-card {
    grid-column: auto; min-width: 0;
    padding: var(--card-space);
    border-radius: clamp(18px, 2vw, 22px);
}
#bento-container .bento-content {
    display: grid;
    grid-template-columns: clamp(40px, 4vw, 48px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(12px, 1.5vw, 16px);
    min-width: 0;
}
#bento-container .bento-content > div:first-child {
    width: clamp(40px, 4vw, 48px); height: clamp(40px, 4vw, 48px);
    margin: 0; border-radius: 12px;
}
#bento-container .bento-content > div:first-child i { font-size: clamp(26px, 2.8vw, 30px); line-height: 1; }
#bento-container h3 { min-width: 0; margin: 0; font-size: clamp(16px, calc(14px + 0.7vw), 19px); line-height: 1.4; }
#bento-container .bento-content > p {
    grid-column: 1 / -1; max-width: none;
    font-size: clamp(14px, calc(12px + 0.3vw), 16px); line-height: 1.7;
}

.landing-home > section:nth-of-type(2),
.landing-home > section:nth-of-type(3) {
    max-width: 820px; padding-top: var(--section-space); padding-bottom: 0;
}
.landing-home > section:nth-of-type(3) { max-width: 800px; }
.landing-home > section h2 {
    margin-bottom: clamp(24px, 3vw, 40px);
    font-size: clamp(22px, calc(17px + 1.2vw), 32px);
    line-height: 1.3; text-wrap: balance;
}
.landing-home > section:nth-of-type(2) > div { margin-left: 15px; padding-bottom: 0; }
.landing-home > section:nth-of-type(2) > div > div { padding-left: clamp(27px, 3vw, 36px); }
.landing-home > section:nth-of-type(2) h4 { font-size: clamp(17px, calc(15px + 0.5vw), 20px); line-height: 1.4; }
.landing-home > section:nth-of-type(2) h4 ~ p:last-child { font-size: clamp(14px, calc(12px + 0.3vw), 16px); line-height: 1.7; }
.landing-home > section:nth-of-type(2) > div > div + div { margin-top: clamp(26px, 3vw, 36px); }

#faq-wrapper summary {
    min-height: 44px; align-items: center; gap: 14px;
    font-size: clamp(15px, calc(13px + 0.3vw), 17px); line-height: 1.5;
}
#faq-wrapper summary > span { min-width: 0; }
#faq-wrapper .faq-icon { flex: 0 0 auto; }
#faq-wrapper details { padding: clamp(8px, 1vw, 12px) 0; }
#faq-wrapper .faq-inner { padding-top: 8px; font-size: clamp(14px, calc(12px + 0.3vw), 16px); line-height: 1.7; }

.landing-home > footer {
    margin-top: var(--section-space);
    padding: clamp(30px, 4vw, 48px) max(var(--page-gutter), var(--safe-right)) 24px max(var(--page-gutter), var(--safe-left));
}
.landing-home > footer > div > div:first-of-type,
.legal-page footer > div > div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr));
    align-items: center; width: 100%; max-width: 640px;
    gap: 4px 12px; margin-bottom: 20px;
}
footer a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; line-height: 1.4; }
.landing-home > footer .bento-card { width: 100%; padding: clamp(16px, 2vw, 22px); }
.landing-home > footer .bento-card p { font-size: clamp(12px, calc(10px + 0.3vw), 14px); line-height: 1.7; }

.floating-cta {
    left: 0; right: 0; bottom: 0; width: 100%; max-width: none; transform: none;
    padding: 14px max(16px, var(--safe-right)) calc(12px + var(--safe-bottom)) max(16px, var(--safe-left));
    background: linear-gradient(180deg, rgba(3, 7, 18, 0), rgba(3, 7, 18, 0.94) 32%);
}
.floating-cta > button {
    width: 100%; max-width: 480px; min-height: 54px; margin: 0 auto;
    padding: 14px 18px; font-size: clamp(14px, calc(12px + 0.5vw), 16px);
    line-height: 1.4; border-radius: 16px;
}

#wa-modal { padding: max(12px, var(--safe-top)) max(12px, var(--safe-right)) max(12px, var(--safe-bottom)) max(12px, var(--safe-left)) !important; }
#wa-modal .wa-modal-panel {
    width: 100%; max-width: 460px !important;
    max-height: calc(100vh - 24px - var(--safe-top) - var(--safe-bottom));
    max-height: calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom));
    padding: clamp(18px, 3vw, 26px) !important;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    border-radius: clamp(18px, 2vw, 22px) !important;
}
#wa-modal .wa-modal-close { top: 8px !important; right: 8px !important; width: 44px !important; height: 44px !important; font-size: 24px !important; }
#wa-modal-title { font-size: clamp(18px, calc(16px + 0.7vw), 22px) !important; line-height: 1.4 !important; }
#wa-modal [data-track-source="home_modal"] { min-height: 52px; }

.legal-page { padding-bottom: calc(24px + var(--safe-bottom)); }
.legal-page > header,
.legal-page > main { max-width: 820px; }
.legal-page > header { padding-top: calc(clamp(32px, 6vw, 80px) + var(--safe-top)); padding-bottom: clamp(26px, 4vw, 42px); }
.legal-page h1 { font-size: clamp(26px, calc(20px + 1.8vw), 42px); line-height: 1.25; text-wrap: balance; }
.legal-page main .bento-card { min-width: 0; padding: var(--card-space); border-radius: clamp(18px, 2vw, 22px); }
.legal-page main p,
.legal-page main ul { font-size: clamp(14px, calc(12px + 0.3vw), 16px); line-height: 1.7; }
.legal-page footer {
    margin-top: var(--section-space);
    padding: clamp(28px, 4vw, 44px) max(var(--page-gutter), var(--safe-right)) clamp(28px, 4vw, 44px) max(var(--page-gutter), var(--safe-left));
}

@media (min-width: 1024px) {
    #bento-container > .bento-card:first-child { grid-column: span 2; }
}
@media (max-height: 540px) {
    #wa-modal .wa-modal-panel { padding-top: 16px !important; padding-bottom: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .bento-card, .bento-card::before, .faq-icon, .faq-content { transition: none; }
}