/* ==========================================================================
   EVA — Red Light Therapy | Responsive Stylesheet
   Author : IT Geeks
   File   : responsive.css  (all pages — home + inner pages)
   Order  : large desktop → desktop → tablet → mobile → small mobile
   Note   : Typography, spacing and layout variables are re-scaled at each
            breakpoint so every component shrinks from a single source.
   ========================================================================== */

/* ==========================================================================
   BREAKPOINT — 1440px : Large Desktop
   ========================================================================== */
@media (max-width: 1440px) {

    :root {
        --container-wide: 1280px;
        --section-padding-y: 76px;
        --gutter-width: 24px;
    }

}

/* ==========================================================================
   BREAKPOINT — 1200px : Small Desktop
   ========================================================================== */
@media (max-width: 1200px) {

    :root {
        /* Headings */
        --font-display-xl: 50px;
        --font-display-lg: 36px;
        --font-display-md: 28px;
        --font-display-sm: 22px;

        --font-h1: 84px;
        --font-h2: 44px;
        --font-h3: 34px;
        --font-h4: 26px;
        --font-h5: 21px;
        --font-h6: 17px;

        /* Layout */
        --container-width: 100%;
        --section-padding-y: 72px;
        --section-padding-y-sm: 52px;
        --grid-gap: 28px;
    }

    .story-grid,
    .split {
        gap: var(--space-56);
    }




    .footer-columns {
        gap: var(--space-40);
    }

}

/* ==========================================================================
   BREAKPOINT — 1024px : Tablet Landscape
   ========================================================================== */
@media (max-width: 1024px) {

    .brand-logo {
        height: 92px;
        width: auto;
    }

    :root {
        /* Headings */
        --font-display-xl: 44px;
        --font-display-lg: 32px;
        --font-display-md: 26px;
        --font-display-sm: 21px;

        --font-h1: 68px;
        --font-h2: 38px;
        --font-h3: 30px;
        --font-h4: 24px;
        --font-h5: 20px;
        --font-h6: 16px;

        /* Body scale — nudged down one step */
        --font-20: 18px;
        --font-19: 17px;
        --font-18: 17px;
        --font-17: 16px;
        --font-16: 15px;

        /* Spacing */
        --space-160: 96px;
        --space-120: 80px;
        --space-96: 64px;
        --space-80: 56px;
        --space-64: 48px;
        --space-56: 40px;
        --space-48: 36px;
        --space-40: 32px;

        /* Layout */
        --section-padding-y: 64px;
        --section-padding-y-sm: 46px;
        --gutter-width: 20px;
        --grid-gap: 24px;
        --header-height: 116px;
    }

    /* ---------- Navigation ---------- */
    .main-nav {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    /* ---------- Hero ---------- */









    /* ---------- Splits ---------- */
    .story-grid,
    .split {
        flex-direction: column;
    }

    /* stacked: nothing to stick against */
    .split-visual {
        position: static;
    }

    .hero-figure {
        width: 44%;
    }

    .hero-line.is-right {
        padding-top: var(--space-120);
    }

    .hero-stat {
        width: 200px;
    }

    /* ---------- Grids ---------- */
    .card {
        flex: 1 1 260px;
    }


    .shield-detail {
        max-width: 100%;
    }


    .feature {
        gap: var(--space-40);
    }

    .feature-gallery {
        position: static;
    }

    /* ---------- Reviews ---------- */
    .slider-track > * {
        flex: 0 0 calc((100% - var(--grid-gap)) / 2);
    }

    .slider.is-marquee .slider-track > * {
        flex: 0 0 300px;
    }

    .slider.is-marquee[data-marquee-direction] .slider-track > * {
        flex: 0 0 320px;
    }


    /* ---------- Custom Service orbit ---------- */
    .orbit-stage {
        max-width: 640px;
    }

    .orbit-core {
        width: 34%;
    }

    /* the stage is narrower here, so the tiles shrink and their ring pulls in */
    .orbit-node.is-spec {
        width: 132px;
        padding: var(--space-12);
        --radius: 236px;
    }

    .orbit-node-media {
        width: 92px;
        height: 92px;
    }

    .orbit-node-label {
        padding: var(--space-4) var(--space-12);
        top: calc(100% - 12px);
    }


    /* ---------- Spec sheet ---------- */
    /* The rail turns vertical rather than disappearing: five labels will not
       fit along a horizontal axis this narrow, but they sit happily down one.
       Each marker keeps its own --x, read as a distance down instead of
       across, so the positions stay true to the nanometre scale. */
    .spec-layout {
        flex-direction: column;
    }

    .spec-figure {
        flex: 0 0 auto;
        /* keeps the source ratio here too, capped so it does not tower over
           the wavelength list it sits above */
        width: 100%;
        max-width: 420px;
        min-height: 0;
    }

    .spec-spectrum {
        padding: var(--space-8) 0 0;
        position: relative;
    }

    .spec-waves {
        display: block;
        /* tall enough that the two closest markers clear each other, no more */
        height: 460px;
        position: relative;
    }

    /* the same gradient, stood on its end and sitting under the dots */
    .spec-rail {
        display: block;
        width: 8px;
        height: 100%;
        top: 0;
        bottom: auto;
        /* centres on the dots, which are 18px wide starting at x=0 */
        left: 5px;
        right: auto;
        transform: none;
        transform-origin: center top;
        background-image: linear-gradient(180deg,
            #4B6BE2 0%,
            #63C7D6 14%,
            #E8B33C 27%,
            #E2483C 34%,
            #A83232 50%,
            #8E2A2A 64%,
            #6B2020 80%,
            #4A1616 100%);
    }

    .spec-spectrum.is-visible .spec-rail {
        transform: none;
    }

    .spec-axis,
    .spec-bands,
    .spec-wave-label::after {
        display: none;
    }

    .spec-wave {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-12);
        width: 100%;
        left: 0;
        top: var(--x);
        transform: translateY(-50%);
    }

    .spec-wave-dot {
        position: static;
        transform: scale(1);
        flex: 0 0 auto;
        margin-left: 0;
    }

    .spec-spectrum.is-visible .spec-wave-dot {
        transform: scale(1);
    }

    /* nm and name share one line here: stacked, the two visible reds sit only
       36px apart on the rail and their labels collided */
    .spec-wave:nth-child(odd) .spec-wave-label,
    .spec-wave:nth-child(even) .spec-wave-label,
    .spec-wave:first-child .spec-wave-label,
    .spec-wave:last-child .spec-wave-label {
        flex-direction: row;
        align-items: baseline;
        gap: var(--space-8);
        width: auto;
        position: static;
        transform: none;
        text-align: left;
        top: auto;
        bottom: auto;
    }

    .spec-wave-nm {
        font-size: var(--font-display-sm);
    }

    /* ---------- Comparison table ---------- */
    /* the table scrolls sideways here, so the card gets a soft right edge to
       signal there is more of it than fits */
    .compare-table-wrap {
        -webkit-mask-image: linear-gradient(to right, #000 0%, #000 88%, rgba(0, 0, 0, 0.35) 100%);
        mask-image: linear-gradient(to right, #000 0%, #000 88%, rgba(0, 0, 0, 0.35) 100%);
        scrollbar-width: thin;
    }

    /* the table needs the full width to scroll in, so the photo moves above it */
    .compare-layout {
        flex-direction: column;
    }

    .compare-aside {
        flex: 0 0 auto;
        max-height: 340px;
    }

    .compare-table-wrap {
        overflow-x: auto;
    }

    .compare-table {
        min-width: 720px;
    }

    .compare-thumb {
        width: 72px;
        height: 72px;
    }

    .compare-table tbody th {
        width: 30%;
    }

    /* ---------- Newsletter ---------- */


    /* ---------- Footer ---------- */
    .footer-top {
        flex-direction: column;
        gap: var(--space-48);
    }

    .footer-brand {
        /* the 340px flex-basis is a WIDTH while the row is horizontal, but
           once this stacks it becomes a HEIGHT — which left 200px of empty
           space under the socials */
        flex: 0 0 auto;
        max-width: 100%;
    }

    .footer-columns {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: var(--space-48);
    }

}

/* ==========================================================================
   BREAKPOINT — 900px : Tablet Portrait
   ========================================================================== */
@media (max-width: 900px) {

    :root {
        --font-h1: 54px;
        --font-h2: 34px;
        --font-h3: 27px;
        --section-padding-y: 60px;
    }

    .container {
        gap: var(--space-40);
    }

    .hero-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-24);
    }

    .hero-figure {
        width: 52%;
    }

    .section-head-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-24);
    }

    .duo {
        flex-direction: column;
        gap: var(--space-40);
    }

    .duo-aside {
        position: static;
        flex: 1 1 100%;
        width: 100%;
    }

    .duo-main {
        flex: 1 1 100%;
        width: 100%;
    }

    .review-summary {
        flex-wrap: wrap;
        justify-content: center;
        padding: var(--space-24) var(--space-32);
        border-radius: var(--radius-xl);
    }

    .press-row {
        justify-content: center;
        gap: var(--space-32);
    }

    .press-row img {
        height: 28px;
    }

}

/* ==========================================================================
   BREAKPOINT — 768px : Mobile Landscape / Large Phone
   ========================================================================== */
@media (max-width: 768px) {

    /* the bar is shorter here, so the mark comes down with it */
    .brand-logo {
        height: 80px;
        width: auto;
    }

    .site-header.is-stuck {
        height: 64px;
    }

    .site-header.is-stuck .brand-logo {
        height: 48px;
    }

    /* the wave shelves are the same height at any width, but 100px of extra
       padding around them is a lot of empty screen on a phone */
    .section.has-leds {
        padding-top: calc(var(--section-padding-y) + 56px);
        padding-bottom: calc(var(--section-padding-y) + 56px);
    }

    /* ---------- Slider ----------
       The viewport's deep bottom padding exists to let the desktop hover
       shadow paint; on touch there is no hover, so it only pushed the arrows
       60px away from the cards. The arrows also move out to the card edges
       instead of huddling around the dots. */
    .slider-viewport {
        padding: 40px 0 88px;
        margin-block: -32px -72px;
    }

    .slider {
        gap: var(--space-16);
    }

    .slider-controls {
        justify-content: space-between;
        gap: var(--space-12);
        padding-inline: var(--gutter-width);
    }

    .mcarousel-nav {
        display: flex;
    }

    /* ---------- Exact Fit points become a swipeable row ---------- */
    /* a native scroll-snap carousel: no JS, and the platform's own momentum */
    .feature-list {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--space-12);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter-width);
        /* lets the cards run to the screen edge while staying aligned */
        margin-inline: calc(-1 * var(--gutter-width));
        padding-inline: var(--gutter-width);
        padding-bottom: var(--space-8);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .feature-list::-webkit-scrollbar {
        display: none;
    }

    .feature-item {
        /* one card at a time on a phone, two-and-a-bit on a tablet */
        flex: 0 0 clamp(240px, 78%, 320px);
        flex-direction: column;
        gap: var(--space-12);
        scroll-snap-align: start;
        padding: var(--space-20);
        background-color: rgba(255, 255, 255, 0.6);
        border: var(--border-thin) solid var(--color-line-soft);
        border-radius: var(--radius-lg);
    }

    /* ---------- Touch targets ---------- */
    /* bare icons and dots are fine to look at but too small to hit */
    .footer-social {
        width: 40px;
        height: 40px;
    }

    .slider-dot {
        padding: 18px 8px;
        background-clip: content-box;
    }

    .footer-links a,
    .nav-drawer-links a,
    .btn-link {
        padding-block: var(--space-8);
    }


    :root {
        /* Headings */
        --font-display-xl: 36px;
        --font-display-lg: 27px;
        --font-display-md: 23px;
        --font-display-sm: 19px;

        --font-h1: 42px;
        --font-h2: 30px;
        --font-h3: 25px;
        --font-h4: 21px;
        --font-h5: 18px;
        --font-h6: 15px;

        /* Body scale */
        --font-20: 17px;
        --font-19: 16px;
        --font-18: 16px;
        --font-17: 15px;
        --font-16: 15px;
        --font-15: 14px;
        --font-14: 14px;
        --font-13: 12px;
        --font-12: 12px;
        --font-11: 11px;
        --font-10: 10px;

        /* Letter spacing — tighter tracking on small type */
        --ls-tighter: -1px;
        --ls-tight: -0.4px;
        --ls-widest: 2.4px;

        /* Spacing */
        --space-120: 64px;
        --space-96: 56px;
        --space-80: 48px;
        --space-64: 40px;
        --space-56: 36px;
        --space-48: 32px;
        --space-40: 28px;
        --space-32: 24px;
        --space-28: 20px;

        /* Layout */
        --section-padding-y: 52px;
        --section-padding-y-sm: 40px;
        --gutter-width: 18px;
        --grid-gap: 18px;
        --grid-gap-sm: 14px;
        --header-height: 92px;
        --announcement-height: 38px;

        /* Radius — softer, smaller corners on phones */
        --radius-2xl: 28px;
        --radius-xl: 22px;
        --radius-lg: 16px;
    }

    /* ---------- Hero ---------- */
    /* the arc can't hold four points this narrow — stack them below */







    /* ---------- Story ---------- */
    .story-copy {
        padding-top: var(--space-40);
    }

    .hero {
        /* stacked, and the figure is in the flow rather than centred behind
           the headline as it is on desktop */
        flex-direction: column;
        align-items: center;
        min-height: auto;
        padding: calc(var(--header-height) + var(--space-16)) var(--gutter-width) var(--space-40);
    }

    .hero-inner {
        gap: var(--space-24);
    }

    .hero-display {
        flex-direction: column;
        align-items: center;
        gap: var(--space-4);
        text-align: center;
    }

    .hero-line,
    .hero-line.is-right {
        max-width: 100%;
        padding-top: 0;
        text-align: center;
    }

    .hero-line.is-left {
        padding-top: 0;
    }

    /* centred with the headline it sits under, and smaller on a phone */
    .hero-line-mask {
        max-height: 104px;
        margin-inline: auto;
    }

    .hero-figure {
        /* without flex: 0 0 auto the row's shrink factor collapsed this to
           about a quarter of its intended width */
        flex: 0 0 auto;
        width: 78%;
        max-width: 320px;
        margin-inline: auto;
        position: static;
        transform: none;
    }

    /* the headline is the page's largest type — the 0.8 desktop scale left it
       smaller than the section headings once the mobile scale kicked in */
    .hero-display {
        font-size: var(--font-h1);
    }

    .hero-stats {
        width: 100%;
    }

    .hero-stat {
        flex: 1 1 0;
        width: auto;
    }

    /* ---------- Cards ---------- */
    .card {
        flex: 1 1 100%;
        padding: var(--space-32) var(--space-24);
    }

    .card {
        min-height: 320px;
    }

    .card-icon {
        width: 48px;
        height: 48px;
    }

    .feature {
        flex-direction: column;
    }

    .feature-gallery,
    .feature-detail {
        flex: 1 1 100%;
        width: 100%;
    }

    .feature-stage {
        padding: var(--space-24);
    }

    .purchase {
        padding: var(--space-20);
    }

    .purchase-row {
        flex-wrap: wrap;
    }

    .purchase-row .btn {
        flex: 1 1 100%;
    }


    /* ---------- Reviews ---------- */
    .slider-track > * {
        flex: 0 0 100%;
    }

    .slider.is-marquee .slider-track > * {
        flex: 0 0 268px;
    }

    .slider.is-marquee[data-marquee-direction] .slider-track > * {
        flex: 0 0 260px;
    }

    .review-card {
        flex-direction: column;
    }

    .review-media {
        flex: 0 0 auto;
        max-height: 260px;
    }

    /* ---------- FAQ ---------- */
    .faq-question {
        padding: var(--space-20);
        gap: var(--space-16);
    }

    .faq-answer-inner {
        padding: 0 var(--space-20) var(--space-20);
    }


    .shield {
        gap: var(--space-32);
    }

    .shield-compare {
        flex-direction: column;
        align-items: center;
        gap: var(--space-40);
    }

    .shield-col {
        max-width: 100%;
    }

    /* ---------- Orbit stays a ring on phones ----------
       The ring and its scroll rotation are the point of this section, so
       rather than flattening it into a carousel the whole thing scales down:
       a smaller stage, a tighter radius and smaller tiles. */
    .orbit-stage {
        /* full-bleed: the ring needs every pixel of width it can get on a
           phone, and the section's gutters were costing it 32 of them */
        width: 100vw;
        max-width: 100vw;
        margin-inline: calc(50% - 50vw);
        aspect-ratio: 1 / 1;
    }

    .orbit-core img {
        /* capped by height: the artwork is portrait, and it was its height
           that the ring's tiles were running into */
        width: auto;
        max-width: 60%;
        max-height: 27vw;
    }

    .orbit-node.is-spec {
        /* Six nodes sit 60deg apart, so the chord between neighbours is now
           1.0 x the radius — it was 1.18 with five. The tile has to stay
           comfortably under that, in both dimensions, or they collide. */
        width: 100px;
        padding: var(--space-8);
        gap: var(--space-4);
        /* scales with the stage so the ring never outgrows a narrow screen */
        --radius: min(158px, 33vw);
    }

    .orbit-node-icon {
        width: 26px;
        height: 26px;
        font-size: var(--font-13);
    }

    .orbit-node-value {
        font-size: var(--font-18);
    }

    .orbit-node.is-spec .orbit-node-label {
        font-size: var(--font-10);
    }

    /* the ring needs no arrows — it turns with the page */
    #custom .mcarousel-nav {
        display: none;
    }

    /* ---------- Newsletter ---------- */


    /* ---------- Footer ---------- */
    .footer-column-title {
        font-size: var(--font-16);
    }

    .footer-columns {
        gap: var(--space-32);
    }

    .footer-column {
        min-width: 132px;
        flex: 1 1 132px;
    }

    /* ---------- Newsletter ---------- */
    /* the panel stacks and the visual becomes a banner above the offer */
    .signup-panel {
        flex-direction: column;
        max-height: 92vh;
        overflow-y: auto;
    }

    .signup-visual {
        flex: 0 0 auto;
        padding: var(--space-32) var(--space-32) var(--space-24);
    }

    .signup-visual img {
        width: 52%;
    }

    .signup-body {
        padding: var(--space-32) var(--space-24) var(--space-40);
    }

    .signup-field {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-10);
        padding: var(--space-14);
        border-radius: var(--radius-lg);
    }

    .signup-submit {
        justify-content: center;
        width: 100%;
    }

    /* a pill in the corner rather than a tab on the edge */
    .signup-tab {
        writing-mode: horizontal-tb;
        padding: var(--space-12) var(--space-20);
        top: auto;
        bottom: var(--space-24);
        left: var(--space-20);
        transform: none;
        border-radius: var(--radius-pill);
    }

    .signup-tab:hover {
        padding-right: var(--space-20);
    }

    /* ---------- Utility ---------- */
    .back-to-top {
        right: var(--space-16);
        bottom: var(--space-16);
        width: 44px;
        height: 44px;
    }

}

/* ==========================================================================
   BREAKPOINT — 576px : Mobile
   ========================================================================== */
@media (max-width: 576px) {

    /* ---------- Blocks that were shrink-wrapping to their widest child ---------- */
    .footer-columns,
    .purchase-row,
    .duo-cta {
        width: 100%;
    }

    .purchase-row .btn,
    .duo-cta .btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    /* the announcement is a fixed-height bar, so its line has to stay one line */
    .announcement-item {
        font-size: var(--font-12);
        gap: var(--space-6);
    }

    /* two stat cards side by side leave about 160px each — too narrow for the
       avatars and their line of copy */
    .hero-stats {
        flex-direction: column;
    }

    .hero-stat {
        width: 100%;
    }


    /* ---------- Spec sheet ---------- */
    .spec-wave {
        flex: 1 1 100%;
    }


    :root {
        --font-display-xl: 32px;
        --font-display-lg: 25px;
        --font-display-md: 21px;
        --font-display-sm: 18px;

        --font-h1: 36px;
        --font-h2: 27px;
        --font-h3: 23px;
        --font-h4: 20px;
        --font-h5: 17px;

        --section-padding-y: 46px;
        --section-padding-y-sm: 34px;
        --gutter-width: 16px;
        --grid-gap: 16px;
    }

    /* ---------- Header ---------- */
    .header-inner {
        gap: var(--space-12);
    }

    .brand-logo {
        height: 72px;
        width: auto;
    }

    .header-actions .btn-primary {
        display: none;
    }

    .header-cart {
        width: 40px;
        height: 40px;
    }

    /* ---------- Announcement ---------- */
    .announcement-item {
        text-align: center;
    }

    /* ---------- Drawer ---------- */
    .nav-drawer {
        max-width: 100%;
        padding: var(--space-24) var(--space-20) var(--space-32);
    }

    /* ---------- Buttons ---------- */
    .btn-group {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .btn-group .btn {
        width: 100%;
    }

    .btn {
        padding: var(--space-16) var(--space-24);
    }

    /* ---------- Hero ---------- */
    /* ---------- Story ---------- */
    .story-copy {
        padding-top: var(--space-8);
    }

    .orbit-core img {
        width: 78%;
    }

    .orbit-node {
        flex: 0 0 44%;
    }


    /* ---------- Reviews ---------- */
    /* ---------- CTA ---------- */
    /* ---------- Footer ---------- */
    .review-summary {
        flex-direction: column;
        gap: var(--space-16);
        text-align: center;
    }

    .review-summary-divider {
        width: 40px;
        height: var(--border-thin);
    }

    /* two per row rather than a single stacked list — Explore and Support sit
       beside each other, Say Hello wraps under them */
    .footer-columns {
        flex-wrap: wrap;
        gap: var(--space-28) var(--space-24);
    }

    .footer-column {
        flex: 1 1 40%;
        min-width: 0;
    }

}

/* ==========================================================================
   BREAKPOINT — 400px : Small Mobile
   ========================================================================== */
@media (max-width: 400px) {

    /* the tightest screens: the ring keeps its shape, but the tiles and the
       mask in the middle both come in so they clear each other */
    /* the tightest screens: six tiles need more ring than five did */
    .orbit-node.is-spec {
        width: 88px;
        padding: var(--space-6);
        --radius: 34vw;
    }
}

/* ---------- ≤ 340px : the last step the six-node ring needs ---------- */
@media (max-width: 340px) {

    .orbit-node.is-spec {
        width: 76px;
        padding: var(--space-4);
        --radius: 37vw;
    }

    .orbit-node.is-spec .orbit-node-label {
        font-size: 9px;
        line-height: 1.25;
    }

    .orbit-core img {
        max-height: 17vw;
    }


    :root {
        --font-display-xl: 28px;
        --font-display-lg: 22px;
        --font-display-md: 20px;
        --font-display-sm: 17px;

        --font-h1: 30px;
        --font-h2: 25px;
        --font-h3: 21px;

        --section-padding-y: 40px;
        --gutter-width: 14px;
    }

    .eyebrow::before,
    .eyebrow.is-centered::after {
        width: 18px;
    }



    .press-row {
        gap: var(--space-20);
    }

    .press-row img {
        height: 22px;
    }

    .review-avatars img {
        width: 34px;
        height: 34px;
    }

}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {

    .announcement,
    .site-header,
    .nav-drawer,
    .overlay,
    .back-to-top,
    .slider-controls {
        display: none;
    }

    body {
        background-color: var(--color-white);
        color: #000000;
    }

    .section {
        padding: var(--space-24) 0;
    }

}