/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE.CSS — PATCH v3

   Breakpoint correction: "tablet" is now 451–850px (was 851–1024px).

   Final structure:
     ≥ 1025px       Desktop     (hover states, untouched)
     851–1024px     Large tablet / small desktop (new minimal block)
     451–850px      Tablet      (main responsive treatment)
       651–850px    ↳ 2×2 feature cards (nested range)
       451–650px    ↳ single-column feature cards (nested range)
     ≤ 450px        Mobile small (hamburger, unchanged from v2)

   This file is a FULL REPLACEMENT for responsive.css.
   The desktop block (≥1025px) and mobile block (≤450px) are
   identical to v2 — included here for completeness so you
   deploy one file, not a patchwork.
═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR HIDE — global
═══════════════════════════════════════════════════════════════ */

.scrollable-content {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scrollable-content::-webkit-scrollbar {
    display: none;
}


/* ═══════════════════════════════════════════════════════════════
   DESKTOP — hover states only (≥1025px)
   Unchanged from v1/v2.
═══════════════════════════════════════════════════════════════ */

@media (min-width: 1025px) {

    .features-container:hover .glass {
        transform: rotate(0deg) scale(0.88);
        margin: 0 8px;
    }

    .features-container .glass:hover {
        transform: rotate(0deg) scale(1.18);
        z-index: 10;
    }

    .features-container .glass:hover::before {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .features-container .glass:hover::after {
        max-height: 120px;
        opacity: 1;
        padding: 1rem 1.2rem 0.5rem 1.2rem;
    }
}

@media (min-width: 1025px) and (min-height: 800px) {

    .lifey-section {
        min-height: 650px;
        max-height: 1000px;
        height: auto;
    }

    .lifey-section p {
        line-height: 2 !important;
    }

    .preorder-btn {
        width: 12rem;
        aspect-ratio: 1/0.35;
        font-size: 1rem;
    }

    .preorder-btn svg {
        width: 1rem;
        height: 1rem;
    }
}


/* ═══════════════════════════════════════════════════════════════
   LARGE TABLET / SMALL DESKTOP (851px – 1024px)

   Pill nav holds up fine at this size — no hamburger needed.
   Only the feature cards need the 2×2 grid here.
   Everything else inherits desktop styles cleanly.
═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) and (min-width: 851px) {

    .nav-brand{
        font-size: 2rem;
    }

    .nav-links a{
        font-size: 1.2rem;
    }

    #lifey_waitlist{
        font-size: 1.2rem;
    }

    .icon-square {
        display: none;
    }

    .menu-btn {
        display: none;
    }

    /* Minor hero scaling */
    .hero-title {
        font-size: 7rem;
    }

    .about-hero-title {
        font-size: 7rem;
    }

    .about-hero-sub{
        font-size: 2rem;
        max-width: 90%;
    }

    .about-eyebrow{
        font-size: 1.25rem;
    }

    .story-text p {
        font-size: 1.25rem;
    }

    .story-text h3{
        font-size: 1.5rem;
    }

    .value-card h4 {
        font-size: 1.5rem;
    }

    .value-card p {
        font-size: 1.25rem;
    }

    .hero-sub {
        font-size: 2rem;
    }

    .hero-body {
        font-size: 1.5rem;
        max-width: 90%;
    }

    /* Lifey section: single column at this size */
    .lifey-section {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        padding: 2.5rem 2rem;
        gap: 1.75rem;
        min-height: auto;
    }

    .lifey-section .section-title-container {
        grid-column: 1;
        grid-row: 1;
        flex-direction: column;
        align-items: center;
        gap: 0.6rem;
    }

    .lifey-section .section-title-container h2 {
        font-size: 3.25rem;
        text-align: center;
    }

    .lifey-section .section-title-container h3 {
        font-size: 1.75rem;
        text-align: center;
    }

    .lifey-section .section-paragraph {
        grid-column: 1;
        grid-row: 2;
        font-size: 1rem;
        line-height: 1.8;
        text-align: center;
    }

    .lifey-section .preorder-d {
        grid-column: 1;
        grid-row: 3;
        justify-self: center;
        padding: 0;
    }

    .lifey-section .preorder-d .btn-primary {
        font-size: 1rem;
        padding: 0.65rem 1.75rem;
    }

    /* Feature section: 2×2 grid

       Calculation for 851–1024px:
         Min usable at 851px:  851 - 64px (2rem padding × 2) = 787px
         Max usable at 1024px: 1024 - 64px = 960px
         Column gap: 1.5rem = 24px
         Card at 851px: (787 - 24) / 2 = 381px
         Card at 1024px: (960 - 24) / 2 = 468px → cap with max-width: 380px
    */
    .features-section {
        height: fit-content;
        margin-top: 6vh;
        margin-bottom: 0;
        padding: 0 2rem 2rem;
    }

    .features-section .section-title-container {
        padding-left: 0;
        text-align: center;
        width: 100%;
        margin-bottom: 2.5rem;
    }

    .features-section .section-title-container h4 {
        font-size: 2.5rem;
    }

        .features-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1.5rem;
        row-gap: 0;
        justify-items: center;
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        padding: 0 1rem;
    }

    .features-container .glass {
        width: min(42vw, 370px);
        height: min(42vw, 370px);
        background: linear-gradient(rgb(24, 61, 61, 0.3), transparent);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 25px 25px rgba(24, 61, 61, 0.25);
        transition: none;
        border-radius: 10px;
        margin-bottom: 130px;
        transform: rotate(0deg);
        overflow: visible;
    }

    .features-container .glass:nth-child(3),
    .features-container .glass:nth-child(4) {
        margin-bottom: 2rem;
    }

    .features-container .glass img {
        width: 38%;
        height: 38%;
        margin-bottom: 1.25rem;
    }

    .features-container .glass::before {
        font-size: 1rem;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .features-container .glass::after {
        max-height: fit-content;
        opacity: 1;
        padding: 1rem 1.25rem;
        font-size: 0.9rem;
        line-height: 1.55;
        transition: none;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    /* Footer: readable at this size */
    .footer-container {
        padding: 0 2rem;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 2.5rem;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .update-f {
        grid-column: span 2 / span 2;
    }

    .footer-description {
        font-size: 0.9rem;
        max-width: 100%;
    }

    .footer-logo {
        font-size: 1.6rem;
    }

    .social-link {
        width: 44px;
        height: 44px;
    }

    .social-link svg {
        width: 44%;
        height: 44%;
    }

    .footer-column h4 {
        font-size: 0.95rem;
    }

    .footer-links a {
        font-size: 0.9rem;
        display: inline-block;
        padding: 0.35rem 0;
    }

    .footer-links li {
        margin-bottom: 0.5rem;
    }

    .newsletter-input {
        font-size: 0.875rem;
        padding: 0.65rem 1rem;
    }

    .newsletter-btn {
        font-size: 0.875rem;
        padding: 0.65rem 1.1rem;
        min-height: 44px;
    }

    .newsletter-msg {
        font-size: 0.8rem;
    }

    .newsletter-msg-mobile {
        display: none;
    }
}


/* ═══════════════════════════════════════════════════════════════
   TABLET (451px – 850px)   ← CORRECTED from 851–1024px

   This is the main tablet treatment.
   Pill nav stays visible. Hamburger hidden.
   Full vertical layout for all sections.
═══════════════════════════════════════════════════════════════ */

@media (max-width: 850px) and (min-width: 500px) {

    /* ── Icons ── */
    .icon-square {
        display: none;
    }

    /* ── Navbar ──
       Pill nav stays fully visible at 451–850px.
       Sizes scale down proportionally.
       Hamburger stays hidden — pill nav has room. */
    .navbar {
        padding: 0.85rem 1.25rem;
    }

    .nav-pill {
        gap: 0.4rem;
        padding: 0.75rem 10px;
    }

    .nav-brand {
        font-size: 1.5rem;
        padding: 4px 12px 4px 8px;
    }

    .nav-divider {
        width: 1px;
        height: 16px;
    }

    .nav-links a {
        font-size: 1.1rem;
        padding: 0.35rem 0.65rem;
    }

    .nav-actions .btn-primary {
        font-size: 1.1rem;
        padding: 0.45rem 0.9rem;
        margin-left: 0.15rem;
    }

    .menu-btn {
        display: none;
    }

    /* ── Hero ── */
    .hero {
        padding: 2rem 2vw;
        min-height: 90vh;
    }

    .hero-title {
        font-size: 6rem;
    }

    .about-eyebrow{
        font-size: 1rem;
    }

    .about-hero-title {
        font-size: 6rem;
    }

    .about-hero-sub{
        font-size: 1.5rem;
        max-width: 90%;
    }

    .hero-sub {
        font-size: 2rem;
        margin-top: 1.1rem;
    }

    .hero-body {
        font-size: 1.5rem;
        line-height: 1.75;
        width: 100%;
        max-width: 100%;
        margin-top: 0.9rem;
    }

    /* ── Lifey section — vertical, readable ── */
    .lifey-section {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        padding: 2rem 1.75rem;
        gap: 2.5rem;
        min-height: auto;
    }

    .lifey-section .section-title-container {
        grid-column: 1;
        grid-row: 1;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .lifey-section .section-title-container h2 {
        font-size: 5.75rem;
        text-align: center;
    }

    .lifey-section .section-title-container h3 {
        font-size: 2.5rem;
        text-align: center;
    }

    .lifey-section .section-paragraph {
        grid-column: 1;
        grid-row: 2;
        font-size: 1.75rem;
        line-height: 1.8;
        text-align: center;
    }

    .lifey-section .preorder-d {
        grid-column: 1;
        grid-row: 3;
        justify-self: center;
        padding: 0;
    }

    /* Lifey waitlist button — larger than nav btn */
    .lifey-section .preorder-d .btn-primary {
        font-size: 1.95rem;
        padding: 0.85rem 1.75rem;
        border-radius: 2rem;
    }

    /* ── Features section ── */
    .features-section {
        height: fit-content;
        justify-content: center;
        margin-top: 6vh;
        margin-bottom: 0;
        padding: 0 1.5rem 1.5rem;
    }

    .features-section .section-title-container {
        padding-left: 0;
        text-align: center;
        width: 100%;
        margin-bottom: 2rem;
    }

    .features-section .section-title-container h4 {
        font-size: 3.2rem;
        margin-bottom: 4rem;
    }

    /* ── Footer — readable, touch-friendly ── */
    .footer-container {
        padding: 0 1.5rem;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto auto;
        gap: 1.75rem 1.5rem;
        margin-bottom: 0;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .update-f {
        grid-column: span 2 / span 2;
    }

    .footer-description {
        max-width: 100%;
        font-size: 0.875rem;
        line-height: 1.65;
    }

    .footer-logo {
        font-size: 1.5rem;
    }

    .footer-social {
        gap: 0.65rem;
    }

    .social-link {
        width: 42px;
        height: 42px;
    }

    .social-link svg {
        width: 44%;
        height: 44%;
    }

    .footer-column h4 {
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }

    .footer-links a {
        font-size: 0.875rem;
        display: inline-block;
        padding: 0.35rem 0;
    }

    .footer-links li {
        margin-bottom: 0.4rem;
    }

    .newsletter-input-row {
        height: fit-content;
    }

    .newsletter-input {
        font-size: 0.875rem;
        border-radius: 1rem;
        padding: 0.65rem 0.9rem;
    }

    .newsletter-btn {
        font-size: 0.875rem;
        height: fit-content;
        min-height: 44px;
        padding: 0.65rem 1rem;
        border-radius: 1rem;
    }

    .newsletter-msg {
        font-size: 0.8rem;
    }

    .newsletter-msg-mobile {
        display: none;
    }
}


/* ─────────────────────────────────────────────────────────────
   TABLET SUB-RANGE: 651–850px — 2×2 feature card grid

   Calculation:
     Min usable at 651px:  651 - 48px (1.5rem × 2) = 603px
     Max usable at 850px:  850 - 48px = 802px
     Column gap: 1rem = 16px
     Card at 651px: (603 - 16) / 2 = 293px
     Card at 850px: (802 - 16) / 2 = 393px → cap with max-width

     Use min(42vw, 340px):
       At 651px: 42vw = 273px  ← slightly under calculation, fine
       At 850px: 42vw = 357px  ← fits comfortably

     ::after panel height: ~90px
     Top row margin-bottom: 115px (card + panel + gap)
     Bottom row margin-bottom: 2rem (just visual breathing room)
───────────────────────────────────────────────────────────── */

@media (max-width: 850px) and (min-width: 651px) {
    .btn-full {
        display: inline;
    }

    .btn-short {
        display: none;
    }

    .features-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1rem;
        row-gap: 0;
        justify-items: center;
        width: 100%;
        max-width: 740px;
        margin: 0 auto;
        padding: 0;
    }

    .features-container .glass {
        width: min(42vw, 340px);
        height: min(42vw, 340px);
        background: linear-gradient(rgb(24, 61, 61, 0.3), transparent);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 25px 25px rgba(24, 61, 61, 0.25);
        transition: none;
        border-radius: 10px;
        margin-bottom: 10rem;
        transform: rotate(0deg);
        overflow: visible;
    }

    /* Bottom row: no extra space below */
    .features-container .glass:nth-child(3),
    .features-container .glass:nth-child(4) {
        margin-bottom: 2rem;
    }

    .features-container .glass img {
        width: 38%;
        height: 38%;
        margin-bottom: 1.25rem;
    }

    .features-container .glass::before {
        font-size: 1.4rem;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .features-container .glass::after {
        max-height: fit-content;
        opacity: 1;
        padding: 0.9rem 1.1rem;
        font-size: 1.2rem;
        line-height: 1.45;
        transition: none;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
}


/* ─────────────────────────────────────────────────────────────
   TABLET SUB-RANGE: 451–650px — single column feature cards

   At this width a 2×2 grid produces cards ~220px wide which is
   too small to read the description text comfortably.
   Single column, centered, scroll through them.

   Calculation:
     Usable at 451px: 451 - 48px = 403px
     Usable at 650px: 650 - 48px = 602px
     Use min(72vw, 300px):
       At 451px: 72vw = 325px → 300px cap applied
       At 650px: 72vw = 468px → 300px cap applied
     Clean 300×300 card across the whole sub-range.
───────────────────────────────────────────────────────────── */

@media (max-width: 650px) and (min-width: 500px) {

    .features-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-bottom: 6rem;
        gap: 0;
    }

    .features-container .glass {
        width: min(72vw, 300px);
        height: min(72vw, 300px);
        background: linear-gradient(rgb(24, 61, 61, 0.3), transparent);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 25px 25px rgba(24, 61, 61, 0.25);
        transition: none;
        border-radius: 10px;
        margin-bottom: 110px;
        transform: rotate(0deg);
        overflow: visible;
    }

    /* Last card: no extra space below */
    .features-container .glass.editable {
        margin-bottom: 1.5rem;
    }

    .features-container .glass img {
        width: 38%;
        height: 38%;
        margin-bottom: 1rem;
    }

    .features-container .glass::before {
        font-size: 0.95rem;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .features-container .glass::after {
        max-height: fit-content;
        opacity: 1;
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
        line-height: 1.5;
        transition: none;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE SMALL (≤ 450px)
   Unchanged from v2.
═══════════════════════════════════════════════════════════════ */

@media (max-width: 499px) {
    .btn-full {
        display: none;
    }

    .btn-short {
        display: inline;
    }

    /* ── Icons ── */
    .icon-square {
        display: none;
    }

    /* ── Navbar ── */
    .navbar {
        top: 0.5rem;
        left: 0.75rem;
        right: 0.75rem;
        padding: 0.5rem 0.75rem;
        min-width: unset;
        width: auto;
        border-radius: var(--radius-lg);
    }

    .nav-pill {
        gap: 0.25rem;
        padding: 5px 8px;
        width: 100%;
        justify-content: space-between;
    }

    .nav-brand {
        font-size: 0.95rem;
        padding: 4px 10px 4px 6px;
    }

    .nav-divider {
        display: none;
    }

    .nav-links {
        display: none;
    }

    #lifey_waitlist{
        font-size: 0.8rem;
    }

    .menu-btn {
        display: flex;
        margin-left: auto;
    }

    /* CSS text shortening — requires .btn-full / .btn-short spans in HTML */
    .btn-full {
        display: none;
    }

    .btn-short {
        display: inline;
    }

    /* ── Hero ── */
    .hero {
        padding: 1.5rem 1.25rem;
        min-height: 100vh;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-sub {
        font-size: 1.1rem;
        margin-top: 1rem;
    }

    .hero-body {
        font-size: 0.9rem;
        line-height: 1.7;
        margin-top: 0.9rem;
        width: 100%;
        max-width: 100%;
    }

    /* ── Lifey section ── */
    .lifey-section {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        padding: 1.75rem 1.25rem;
        gap: 1.25rem;
        min-height: auto;
    }

    .lifey-section .section-title-container {
        grid-column: 1;
        grid-row: 1;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
    }

    .lifey-section .section-title-container h2 {
        font-size: 2.25rem;
        text-align: center;
    }

    .lifey-section .section-title-container h3 {
        font-size: 1.2rem;
        text-align: center;
    }

    .lifey-section .section-paragraph {
        grid-column: 1;
        grid-row: 2;
        font-size: 0.9rem;
        line-height: 1.75;
        text-align: center;
    }

    .lifey-section .preorder-d {
        grid-column: 1;
        grid-row: 3;
        justify-self: center;
        padding: 0;
    }

    .lifey-section .preorder-d .btn-primary {
        font-size: 0.95rem;
        padding: 0.65rem 1.5rem;
        width: auto;
    }

    /* ── Features section ── */
    .features-section {
        height: fit-content;
        justify-content: center;
        margin-top: 8vh;
        margin-bottom: 0;
        padding: 0 1rem 1rem;
    }

    .features-section .section-title-container {
        padding-left: 0;
        text-align: center;
        width: 100%;
        margin-bottom: 2rem;
    }

    .features-section .section-title-container h4 {
        font-size: 1.75rem;
        margin-bottom: 3rem;
    }

    /* Single column, centered */
    .features-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-bottom: 6rem;
        gap: 0;
    }

    .features-container .glass {
        width: min(82vw, 300px);
        height: min(82vw, 300px);
        background: linear-gradient(rgb(24, 61, 61, 0.3), transparent);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 25px 25px rgba(24, 61, 61, 0.25);
        transition: none;
        border-radius: 10px;
        margin-bottom: 120px;
        transform: rotate(0deg);
        overflow: visible;
    }

    .features-container .glass.editable {
        margin-bottom: 1.5rem;
    }

    .features-container .glass img {
        width: 38%;
        height: 38%;
        margin-bottom: 1.25rem;
    }

    .features-container .glass::before {
        font-size: 0.95rem;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .features-container .glass::after {
        max-height: 200px;
        opacity: 1;
        padding: 0.85rem 1rem;
        font-size: 0.875rem;
        line-height: 1.5;
        transition: none;
        bottom: initial;
        transform: none;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    /* ── Footer ── */
    .footer-container {
        padding: 0 1.25rem;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto auto;
        gap: 1.5rem 1rem;
        margin-bottom: 0;
    }

    .footer-brand {
        grid-column: span 2 / span 2;
        height: fit-content;
    }

    .menu-f {
        grid-row-start: 2;
    }

    .section-f {
        grid-row-start: 2;
    }

    .update-f {
        grid-column: span 2 / span 2;
    }

    .footer-logo {
        font-size: 1.35rem;
    }

    .footer-description {
        display: none;
    }

    .footer-social {
        gap: 0.6rem;
    }

    .social-link {
        width: 40px;
        height: 40px;
    }

    .social-link svg {
        width: 44%;
        height: 44%;
    }

    .footer-column h4 {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    .footer-links a {
        font-size: 0.85rem;
        display: inline-block;
        padding: 0.35rem 0;
    }

    .footer-links li {
        margin-bottom: 0.35rem;
    }

    /* Newsletter: stacked */
    .newsletter-input-row {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }

    .newsletter-input {
        font-size: 0.9rem;
        border-radius: 0.75rem;
        padding: 0.65rem 0.9rem;
        width: 100%;
        min-width: unset;
    }

    .newsletter-btn {
        font-size: 0.9rem;
        height: auto;
        min-height: 44px;
        padding: 0.7rem 1rem;
        border-radius: 0.75rem;
        width: 100%;
        margin-top: 0.25rem;
    }

    .newsletter-msg {
        display: none;
    }

    .newsletter-msg-mobile {
        font-size: 0.8rem;
        padding-left: 0.25rem;
    }
}


/* ═══════════════════════════════════════════════════════════════
   HEIGHT-BASED MICRO-TWEAKS
═══════════════════════════════════════════════════════════════ */

@media (max-width: 450px) and (min-height: 850px) {
    .lifey-section .section-paragraph {
        line-height: 1.85;
    }
}

@media (max-width: 450px) and (max-height: 680px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-sub {
        font-size: 1rem;
    }
}