/* --- Bloco Extraido --- */
    /* cyrillic-ext */
    @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 200 800;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/montserrat/v29/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format('woff2');
        unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    /* cyrillic */
    @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 200 800;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/montserrat/v29/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format('woff2');
        unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* vietnamese */
    @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 200 800;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/montserrat/v29/JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2) format('woff2');
        unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
    }
    /* latin-ext */
    @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 200 800;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/montserrat/v29/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format('woff2');
        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 200 800;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/montserrat/v29/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
/* --- Bloco Extraido --- */
/* --- Bloco Extraido --- */
    [wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {
        display: none;
    }
    [wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {
        display: none;
    }
    [wire\:offline][wire\:offline] {
        display: none;
    }
    [wire\:dirty]:not(textarea):not(input):not(select) {
        display: none;
    }
    [x-cloak]:not([x-cloak-pointer-events-none]) {
        display: none !important;
    }
    [x-cloak][x-cloak-pointer-events-none] {
        pointer-events: none;
    }
/* --- Bloco Extraido --- */
        :root {--btn-background-primary: #4277F0;}
/* --- Bloco Extraido --- */
    @media (max-width: 767px) {
        .vagus-nerve-background {
            background: linear-gradient(to bottom right, #D2D9E0 0%, #D2DAE1 21%, #D2DAE1 43%, #D3DAE1 50%) bottom right / 50% 50% no-repeat, linear-gradient(to bottom left, #D2D9E0 0%, #D2DAE1 21%, #D2DAE1 43%, #D3DAE1 50%) bottom left / 50% 50% no-repeat, linear-gradient(to top left, #D2D9E0 0%, #D2DAE1 21%, #D2DAE1 43%, #D3DAE1 50%) top left / 50% 50% no-repeat, linear-gradient(to top right, #D2D9E0 0%, #D2DAE1 21%, #D2DAE1 43%, #D3DAE1 50%) top right / 50% 50% no-repeat;
        }
    }

/* ============================================================
   MOBILE RESPONSIVENESS — global fixes
   ============================================================ */

/* Prevent horizontal overflow on all devices */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* All images scale within their container */
img {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   MOBILE (max 767px)
   ============================================================ */
@media (max-width: 767px) {

    /* ---------- Urgency bar ---------- */
    #urgency-bar {
        position: relative !important;
        font-size: 13px !important;
        padding: 8px 12px !important;
        gap: 8px !important;
    }
    #urgency-bar #countdown-timer {
        font-size: 16px !important;
    }

    /* ---------- Navigation ---------- */
    #nav {
        position: sticky;
        top: 0;
        z-index: 50;
    }

    /* ---------- Sticky middle banner – compact on mobile ---------- */
    #sticky-middle-banner {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    #sticky-middle-banner .tw-basis-full {
        flex-basis: 100%;
    }

    /* ---------- Hero section ---------- */
    /* Title never overflows the screen */
    h1 {
        font-size: clamp(1.4rem, 6vw, 2rem) !important;
        line-height: 1.25 !important;
    }

    /* Hero image contained + spacing from subheadline */
    picture img {
        width: 95% !important;
        max-width: 95% !important;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1.25rem !important;
        display: block;
    }

    /* Hero image negative margin reset */
    [data-ga-section="3 - Header"] picture img {
        margin-top: 1.5rem !important;
    }

    /* ---------- Sections: remove excessive padding on mobile ---------- */
    .tw-py-s104 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    .tw-py-s80 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    .tw-py-s56 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* ---------- FAQ accordion buttons – constrain SVG icons ---------- */
    .tw-h-\[1\.5em\] {
        height: 1.5em !important;
        width: 1.5em !important;
        flex-shrink: 0;
    }

    /* ---------- Review verified badge SVG ---------- */
    .tw-h-\[1\.2em\] {
        height: 1.2em !important;
        width: 1.2em !important;
        flex-shrink: 0;
    }

    /* Generic SVG guard: prevent SVGs from overflowing without explicit size */
    svg:not([width]):not([height]):not([class*="tw-w-"]):not([class*="tw-h-"]):not([class*="tw-max-w-"]) {
        max-width: 100%;
        height: auto;
    }

    /* ---------- Pricing cards – single column, full width ---------- */
    .derila-pricing-wrap {
        flex-direction: column !important;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .derila-pricing-card {
        width: 100% !important;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
    .derila-pricing-card--featured {
        transform: none !important;
    }

    /* ---------- Payment methods bar on mobile ---------- */
    /* Top payment icons row (nav area) */
    .tw-inline-flex.tw-flex-wrap.tw-items-center {
        justify-content: center;
    }

    /* ---------- Reviews grid – 1 column on mobile ---------- */
    .tw-basis-1\/2,
    .tw-basis-1\/3 {
        flex-basis: 100% !important;
    }

    /* ---------- Image rotator (pillow zones) ---------- */
    .tw-max-w-\[800px\] {
        max-width: 100% !important;
    }

    /* ---------- Sized section (dimensions) ---------- */
    .tw-max-w-\[383px\] {
        max-width: 100% !important;
    }

    /* ---------- Compare section cards ---------- */
    .tw-basis-full {
        flex-basis: 100%;
    }

    /* ---------- Horizontal cards (engineering, positions) ---------- */
    /* Ensure cards wrap properly */
    .tw-flex-nowrap {
        flex-wrap: wrap !important;
    }

    /* ---------- Footer / disclaimer text ---------- */
    .tw-text-xs {
        font-size: 0.7rem;
    }
}

/* ============================================================
   TABLET (768px – 1023px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {

    /* Pricing: 2-col on tablet */
    .derila-pricing-wrap {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
    }
    .derila-pricing-card {
        flex: 0 0 calc(50% - 1rem) !important;
        max-width: calc(50% - 1rem);
    }
    .derila-pricing-card--featured {
        flex: 0 0 calc(50% - 1rem) !important;
        max-width: calc(50% - 1rem);
        transform: none !important;
    }
}

/* ============================================================
   CONTENT SECTIONS WITH BACKGROUND-IMAGE — mobile fixes
   Sections 8-14 use a desktop background-image + inline mobile
   <img> to swap visuals. On mobile the background must be hidden
   so only the inline image shows.
   ============================================================ */
@media (max-width: 767px) {

    /* 1. Remove desktop background-image; inline mobile img provides the visual */
    [data-ga-section="8 - Breathe freely"],
    [data-ga-section="9 - Feel difference"],
    [data-ga-section="10 - Let your neck"],
    [data-ga-section="12 - Perfectly cool"],
    [data-ga-section="13 - Anti allergen"],
    [data-ga-section="14 - Vagus nerve"] {
        background-image: none !important;
    }

    /* 2. Fix full-bleed mobile images (sections 8, 9, 10).
       The classes tw-w-[100vw] / -tw-mx-colgap are for desktop bleed;
       on mobile they can overflow. Reset to safe container width. */
    [data-ga-section="8 - Breathe freely"] img.md\:tw-hidden,
    [data-ga-section="9 - Feel difference"] img.md\:tw-hidden,
    [data-ga-section="10 - Let your neck"] img.md\:tw-hidden {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 3. Cool section (12): remove negative top margin that overlaps the text above */
    [data-ga-section="12 - Perfectly cool"] img.md\:tw-hidden {
        margin-top: 0 !important;
    }

    /* 4. Vagus section (14): the image wrapper div is visible on mobile.
       Ensure it doesn't overflow. */
    [data-ga-section="14 - Vagus nerve"] .md\:tw-hidden {
        width: 100%;
        overflow: hidden;
    }
}

/* ============================================================
   DESKTOP HERO — stack H1 and subheadline vertically
   ============================================================ */
@media (min-width: 768px) {
    /* The tw-hidden md:tw-flex container defaults to flex-row,
       making H1 and subheadline appear side-by-side.
       Column direction stacks them as in the reference. */
    [data-ga-section="3 - Header"] .tw-hidden.md\:tw-flex.tw-gap-s24 {
        flex-direction: column !important;
    }
}

/* ============================================================
   MOBILE-SPECIFIC UI IMPROVEMENTS
   ============================================================ */
@media (max-width: 767px) {

    /* ---------- Hero h1 + subheadline: black text on mobile (override tw-text-white) ---------- */
    [data-ga-section="3 - Header"] h1 {
        color: #000 !important;
    }
    [data-ga-section="3 - Header"] p.tw-text-base {
        color: #000 !important;
    }

    /* ---------- Hero title + subheadline container: show on mobile ---------- */
    /* The H1 and p.tw-text-base are inside a tw-hidden.md:tw-flex container — reveal it on mobile */
    [data-ga-section="3 - Header"] .tw-hidden.md\:tw-flex.tw-gap-s24 {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 0.5rem;
    }

    /* ---------- Hide duplicate logos carousel on mobile (static black-logo row handles mobile) ---------- */
    [data-ga-section="3 - Header"] .md\:tw-hidden.tw-mb-4 {
        display: none !important;
    }

    /* ---------- Mobile logos section: extra vertical padding ---------- */
    .md\:tw-hidden.tw-bg-\[#EEF8FF\] {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* ---------- Sticky middle banner: compact on mobile ---------- */
    #sticky-middle-banner {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* ---------- Section 4 mobile CTA: hide on mobile ---------- */
    [data-ga-section="4 - Transform sleep"] .tw-mt-s40.md\:tw-hidden {
        display: none !important;
    }

    /* ---------- Section 4 bullets: force black color ---------- */
    [data-ga-section="4 - Transform sleep"] .tw-text-lg,
    [data-ga-section="4 - Transform sleep"] .tw-text-lg * {
        color: #000 !important;
    }

    /* ---------- Anti-allergen section (13): reduce vertical spacing ---------- */
    [data-ga-section="13 - Anti allergen"] {
        padding-top: 2rem !important;
        padding-bottom: 0 !important;
    }
    [data-ga-section="13 - Anti allergen"] .tw-gap-y-s24 {
        gap: 0 !important;
    }

    /* ---------- Remove Freshchat chat bubble on mobile ---------- */
    #fc_frame,
    #freshchat-container,
    #fc_widget,
    .fc-widget-open,
    iframe[src*="freshchat"],
    iframe[src*="wchat.freshchat"] {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}