/* Why section */

    .why-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:2rem}

    @media (max-width:768px){
      .why-grid{
        grid-template-columns:1fr;
        gap:1.2rem; /* Increased from 0.9rem */
      }

      .feature{
        padding:1.3rem 1.2rem; /* Increased from 0.9rem 1rem for better breathing room */
      }
    }

    .feature{
      position:relative;
      padding:2rem 1.5rem;
      border-radius:20px;
      border:1px solid rgba(255,255,255,.15);
      background:linear-gradient(135deg, rgba(91,138,255,.08) 0%, rgba(118,221,255,.04) 100%);
      box-shadow:0 12px 40px rgba(12,16,27,.3);
      transition:all 0.3s ease;
      overflow:hidden;
    }
    
    .feature::before{
      content:'';
      position:absolute;
      top:0;
      left:0;
      right:0;
      height:3px;
      background:linear-gradient(90deg, var(--brand), var(--accent));
      opacity:0.6;
    }
    
    .feature:hover{
      transform:translateY(-4px);
      box-shadow:0 16px 50px rgba(91,138,255,.2);
      border-color:rgba(91,138,255,.3);
    }

    html[data-theme="light"] .feature{
      border-color:rgba(10,20,40,.12);
      background:linear-gradient(135deg, rgba(37,99,235,.04) 0%, rgba(8,145,178,.02) 100%);
      box-shadow:0 12px 40px rgba(37,99,235,.08);
    }
    
    html[data-theme="light"] .feature:hover{
      box-shadow:0 16px 50px rgba(37,99,235,.15);
    }

    .icon-wrap{
      width:56px;
      height:56px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
      border:1px solid rgba(255,255,255,.2);
      box-shadow:0 6px 20px rgba(91,138,255,.25);
      margin-bottom:1.2rem;
    }

    .icon-wrap svg{width:26px;height:26px;color:#fff}

    .feature h3{
      margin:0 0 0.6rem 0;
      font-weight:700;
      letter-spacing:-.01em;
      color:#fff;
      font-size:1.25rem;
      line-height:1.3;
    }

    html[data-theme="light"] .feature h3{color:#0a1428}

    .feature p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
      font-size:.95rem;
    }



    /* Product cards unified */

    .product .title{display:flex;align-items:center;gap:.6rem}

    .product h3{margin:0;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

    /* Ensure all text in product cards wraps properly without breaking words unnecessarily */
    .product,
    .product p,
    .product li,
    .product div,
    .product span,
    .product strong{
      overflow-wrap:break-word;
      word-wrap:break-word;
    }

    /* Allow product cards to contain content properly */
    .product{
      min-width:0;
    }

    .punch{margin:.15rem 0 .25rem;font-weight:800;color:#ecf1ff}

    html[data-theme="light"] .punch{color:#182442}

    .note{color:var(--muted-2);font-size:.95rem}



    /* Pricing */

    .pricing-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-auto-rows:1fr}

    /* Upgraded pricing card styling */
    .plan{
      position:relative;
      background:linear-gradient(135deg, rgba(91,138,255,.06) 0%, rgba(118,221,255,.03) 100%);
      border:1px solid rgba(255,255,255,.15);
      box-shadow:0 12px 40px rgba(12,16,27,.3);
      transition:all 0.3s ease;
      display:flex;
      flex-direction:column;
    }

    .plan .actions{
      margin-top:auto;
    }

    .plan::before{
      content:'';
      position:absolute;
      top:0;
      left:0;
      right:0;
      height:3px;
      background:linear-gradient(90deg, var(--brand), var(--accent));
      opacity:0.5;
      border-radius:16px 16px 0 0;
    }

    .plan:hover{
      transform:translateY(-4px);
      box-shadow:0 16px 50px rgba(91,138,255,.2);
      border-color:rgba(91,138,255,.3);
    }

    html[data-theme="light"] .plan{
      background:linear-gradient(135deg, rgba(37,99,235,.04) 0%, rgba(8,145,178,.02) 100%);
      border-color:rgba(10,20,40,.12);
      box-shadow:0 12px 40px rgba(37,99,235,.08);
    }

    html[data-theme="light"] .plan:hover{
      box-shadow:0 16px 50px rgba(37,99,235,.15);
    }

    @media (max-width:1100px){ .pricing-grid{grid-template-columns:repeat(2,minmax(280px,1fr))} }

    @media (max-width:900px){
      .pricing-grid{
        grid-template-columns:1fr;
        grid-auto-rows:auto; /* Let content dictate height on mobile */
      }
    }

    /* Ultra-small screens (< 360px) */
    @media (max-width:359px){
      .pricing-grid{grid-template-columns:1fr}

      .plan{
        padding:1rem;
      }

      .price{
        font-size:1.6rem;
      }

      .container{
        padding-left:max(12px, env(safe-area-inset-left));
        padding-right:max(12px, env(safe-area-inset-right));
      }

      .headline.xl{
        font-size:1.75rem;
        line-height:1.1;
      }

      .btn{
        padding:.65rem .85rem;
        font-size:.9rem;
      }
    }

    /* Better mobile stacking for pricing cards */
    @media (max-width:600px){
      .plan ul{
        font-size:.95rem;
        line-height:1.7;
      }

      .plan li{
        margin-bottom:.6rem;
      }

      /* Mobile overflow fixes */
      .container{
        overflow-x:hidden;
        max-width:100vw;
      }

      /* Ensure all sections respect mobile width */
      section{
        max-width:100vw;
        overflow-x:hidden;
      }

      /* Product cards on mobile */
      .product{
        overflow-wrap:break-word;
      }

      /* FAQ cards on mobile */
      .card strong{
        word-break:break-word;
      }
    }

    /* Collapsible FAQ Styles */
    #faq .card {
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
    }

    #faq .card:hover {
      transform: translateY(-2px);
      border-color: var(--brand);
    }

    /* Only target the question strong (direct child), not answer strong tags */
    #faq .card > strong {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding-right: 2rem;
    }

    /* ONLY target the direct child strong (question), not nested strong tags */
    #faq .card > strong::after {
      content: '▼' !important;
      position: absolute;
      right: 1.2rem;
      font-size: 0.8rem;
      color: var(--muted-2);
      transition: transform 0.3s ease;
    }

    /* Explicitly remove arrows from ALL other strong tags (in answers) */
    #faq .card .note strong::after,
    #faq .card p strong::after {
      content: none !important;
      display: none !important;
    }

    /* Remove arrows from first 3 FAQs (always expanded) */
    #faq .card:nth-child(1) > strong::after,
    #faq .card:nth-child(2) > strong::after,
    #faq .card:nth-child(3) > strong::after {
      content: none !important;
    }

    #faq .card.expanded > strong::after {
      transform: rotate(180deg) !important;
      color: var(--brand);
    }

    #faq .card .note {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: all 0.4s ease;
      margin-top: 0;
    }

    #faq .card.expanded .note {
      max-height: 1000px;
      opacity: 1;
      margin-top: 0.8rem;
    }

    /* Keep first 3 FAQs expanded by default */
    #faq .card:nth-child(1) .note,
    #faq .card:nth-child(2) .note,
    #faq .card:nth-child(3) .note {
      max-height: 1000px;
      opacity: 1;
      margin-top: 0.8rem;
    }

    #faq .card:nth-child(1),
    #faq .card:nth-child(2),
    #faq .card:nth-child(3) {
      --initial-expanded: true;
    }

    @media (max-width:768px){
      /* Tables responsive with horizontal scroll */
      .table-wrapper{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        margin:1rem 0;
      }

      table{
        font-size:.85rem;
        min-width:500px;
      }

      table th,
      table td{
        padding:.6rem .5rem;
        white-space:nowrap;
      }

      /* Card padding adjustments */
      .card{
        padding:1rem;
      }

      /* Testimonial cards */
      .grid.auto-300{
        grid-template-columns:1fr;
      }
      
      .actions{
        gap:.7rem !important;
      }
    }

    .price{font-size:2.2rem;font-weight:900;letter-spacing:.02em}

    .pill{display:inline-flex;gap:.4rem;align-items:center;background:rgba(255,255,255,.12);color:#a5b6db;padding:.28rem .6rem;border-radius:999px;font-size:.82rem;font-weight:800}



    /* Lifetime cap */

    .lt-cap{display:grid;gap:.35rem;margin:.45rem 0 .2rem}

    .capbar{height:8px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}

    .capbar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--accent))}



    /* Sticky CTA */

    .cta-bar{position:fixed;left:0;right:0;bottom:-120px;transition:bottom .35s ease;z-index:50}

    .cta-bar.show{bottom:0}

    .cta-bar.hide{bottom:-140px}

    .cta-inner{max-width:var(--max);width:100%;margin:0 auto;padding-left:calc(clamp(14px,4vw,22px) + env(safe-area-inset-left));padding-right:calc(clamp(14px,4vw,22px) + env(safe-area-inset-right))}

    .cta-inner .bar{display:flex;gap:.8rem;align-items:center;justify-content:center;background:rgba(10,12,20,.98);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);border-radius:14px;padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom))}

    @media (max-width:1100px){ .cta-inner .bar{gap:.6rem;padding:.5rem .8rem calc(.5rem + env(safe-area-inset-bottom))} }

    /* Mobile CTA bar optimizations */
    @media (max-width:768px){
      .cta-bar{
        bottom:-100px;
      }
      
      .cta-bar.hide{
        bottom:-120px;
      }
      
      .cta-inner .bar{
        flex-wrap:wrap;
        justify-content:center;
        padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom));
      }
      
      .cta-close{
        position:absolute;
        right:.5rem;
        top:50%;
        transform:translateY(-50%);
        padding:.4rem .6rem;
        min-height:36px;
        min-width:36px;
      }
    }
    
    @media (max-width:480px){
      .cta-inner .bar .btn{
        font-size:.88rem;
        padding:.6rem .9rem;
      }
    }



    section[id]{scroll-margin-top:84px}

    footer{border-top:1px solid rgba(255,255,255,.08);padding:2rem 0 max(3rem,calc(2rem + env(safe-area-inset-bottom)));color:#a5b6db}

    @media (max-width:768px){
      footer{
        padding:1.5rem 0 max(3rem,calc(2rem + env(safe-area-inset-bottom)));
      }
      
      footer .container > div{
        grid-template-columns:1fr !important;
        gap:2rem !important;
      }
    }

    html[data-theme="light"] footer{color:#3a4866; border-top-color:#d7def0}



    /* Modal */

    .modal{position:fixed;inset:0;display:none;place-items:center;z-index:60;background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}

    .modal.open{display:grid}

    .modal-card{width:min(520px,92vw);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:1rem}

    html[data-theme="light"] .modal-card{background:linear-gradient(180deg,rgba(10,20,40,.03),rgba(10,20,40,.01)); border-color:#d7def0}

    .modal-card header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}

    .modal-card h3{margin:0}

    .modal-close{background:transparent;border:none;color:#a5b6db;cursor:pointer}



    .sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}

    /* Lazy Section Loading - DISABLED (was causing mobile rendering issues) */
    /*
    @media (min-width:769px){
      .lazy-section{
        opacity:0.3;
        transform:translateY(20px);
        transition:opacity 0.6s ease, transform 0.6s ease;
      }
      .lazy-section.loaded{
        opacity:1;
        transform:translateY(0);
      }
    }
    @media (max-width:768px){
      .lazy-section{
        opacity:1!important;
        transform:none!important;
        transition:none!important;
      }
    }
    @media (prefers-reduced-motion:reduce){
      .lazy-section{
        opacity:1!important;
        transform:none!important;
        transition:none!important;
      }
    }
    */

    /* PayPal buttons - AGGRESSIVE dark theme styling with blend mode trick */
    .pp-slot{
      background:transparent !important;
      padding:0;
      border-radius:12px;
      overflow:hidden;
      position:relative;
      isolation:isolate; /* Create new stacking context for blend modes */
    }

    /* Force all PayPal elements to have dark/transparent background */
    .pp-slot,
    .pp-slot *,
    .pp-slot iframe,
    .pp-slot div,
    .pp-slot > div,
    div[id*="paypal"],
    div[id*="paypal"] *,
    div[id^="paypal-button-container-"],
    div[id^="paypal-button-container-"] *,
    div[id^="paypal-button-container-"] > div,
    div[id^="paypal-button-container-"] iframe {
      background:transparent !important;
      background-color:transparent !important;
    }

    /* Ensure PayPal button wrapper has no white space */
    .pp-slot > div {
      margin:0 !important;
      padding:0 !important;
    }

    /* NUCLEAR OPTION: Use blend mode to eliminate white backgrounds from iframe */
    .pp-slot iframe {
      mix-blend-mode:multiply !important;
      filter:contrast(1.1) !important;
    }

    /* Alternative: Darken mode can also work */
    @supports (mix-blend-mode:darken) {
      .pp-slot iframe {
        mix-blend-mode:darken !important;
      }
    }

    /* Target PayPal's inner button wrappers */
    div[data-funding-source] {
      background:transparent !important;
    }

    /* Hide PayPal's white background containers */
    .pp-slot [style*="background"] {
      background:transparent !important;
    }

    /* Keep Buy Now button BLACK */
    #lifetime-form input[type="submit"] {
      background:#000000 !important;
      color:#FFFFFF !important;
      border:none;
      border-radius:8px;
      padding:12px 24px;
      font-size:16px;
      font-weight:700;
      cursor:pointer;
      width:100%;
      min-height:44px;
    }

    /* MOBILE PERFORMANCE: Aggressive optimization for smooth scrolling */
    @media (max-width: 1024px) {
      /* Background effects (aurora, constellations) are now controlled by device-capability.js
         which intelligently detects device performance and shows/hides them accordingly.
         CSS no longer forcibly hides them - let the capability detection handle it! */

      /* Remove expensive filters and blend modes on mobile */
      * {
        mix-blend-mode: normal !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      /* Preserve header blur for visual depth */
      header {
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
      }

      /* Preserve modal backdrop blur */
      .modal {
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
      }

      /* Safari-specific: Keep GPU acceleration for smooth scrolling */
      @supports (-webkit-touch-callout: none) {
        body, main, section {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
        }
      }

      /* Keep hero video visible but optimize it */
      #heroVideo,
      video[id="heroVideo"] {
        display: block !important;
        visibility: visible !important;
        filter: none !important;
      }

      /* Reduce animations on mobile (but don't eliminate entirely) */
      *,
      *::before,
      *::after {
        animation-duration: 0.1s !important;
        transition-duration: 0.1s !important;
      }

      /* Simplify gradients to solid colors */
      .card {
        background: var(--bg-soft) !important;
      }

      /* Force content to stay visible during scroll (fix disappearing content) */
      /* BUT exclude UI elements that need to be hidden (mobile nav, dropdowns) */
      main:not(.mobile-nav):not(.lang-dropdown-menu),
      section:not(.mobile-nav):not(.lang-dropdown-menu),
      .container:not(.mobile-nav):not(.lang-dropdown-menu),
      .hero,
      .card,
      article,
      p,
      h1, h2, h3, h4, h5, h6 {
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        -webkit-transform: none !important;
      }

      /* Ensure UI overlays stay hidden when they should be */
      .mobile-nav:not(.active),
      .lang-dropdown-menu:not(.active) {
        opacity: 0 !important;
        visibility: hidden !important;
      }

      /* Disable smooth scrolling on mobile (causes jank) */
      html {
        scroll-behavior: auto !important;
      }

      /* Prevent paint ordering issues */
      body {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
      }
    }
    
    /* Footer copyright spacing - optimized for mobile */
    footer > div > div:last-child{
      margin-bottom:2rem !important;
      padding-bottom:1rem !important;
    }

    /* Form & Input Styling - Mobile Optimized */
    label{
      display:block;
      font-weight:600;
      margin-bottom:.8rem;
      color:var(--text);
    }
    
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select{
      width:100%;
      padding:.9rem 1rem;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(255,255,255,.06);
      color:var(--text);
      border-radius:10px;
      font-size:1rem;
      font-family:inherit;
      transition:all .2s ease;
      -webkit-appearance:none;
      appearance:none;
      min-height:48px;
    }
    
    html[data-theme="light"] input[type="text"],
    html[data-theme="light"] input[type="email"],
    html[data-theme="light"] input[type="tel"],
    html[data-theme="light"] textarea,
    html[data-theme="light"] select{
      background:#f6f8fc;
      border-color:#d7def0;
      color:#203057;
    }
    
    input:focus,
    textarea:focus,
    select:focus{
      outline:none;
      border-color:var(--brand);
      background:rgba(91,138,255,.08);
      box-shadow:0 0 0 3px rgba(91,138,255,.15);
    }
    
    input::placeholder,
    textarea::placeholder{
      color:var(--muted-2);
      opacity:.7;
    }
    
    .consent{
      display:flex;
      align-items:flex-start;
      gap:.6rem;
      font-size:.92rem;
      color:var(--muted);
      cursor:pointer;
      padding:.5rem 0;
    }
    
    .consent input[type="checkbox"]{
      min-width:20px;
      width:20px;
      height:20px;
      margin:0;
      cursor:pointer;
      flex-shrink:0;
    }
    
    .consent span{
      flex:1;
      line-height:1.5;
    }
    
    /* Mobile form optimizations */
    @media (max-width:768px){
      input[type="text"],
      input[type="email"],
      input[type="tel"],
      textarea{
        font-size:16px; /* Prevents iOS zoom on focus */
        padding:.85rem .95rem;
      }
      
      label{
        font-size:.95rem;
        margin-bottom:.7rem;
      }
      
      .consent{
        font-size:.88rem;
      }
    }
    
    @media (max-width:480px){
      .consent{
        font-size:.75rem;
        gap:.5rem;
      }

      .consent span{
        line-height:1.4;
      }

      .modal-card{
        padding:.9rem;
      }

      .modal-card h3{
        font-size:1.2rem;
      }

      /* Elite Seven product cards - allow title wrapping on very small screens */
      .product .title{
        flex-wrap:wrap;
      }

      .product h3{
        white-space:normal !important;
        flex:1 1 100%;
        font-size:1.1rem;
      }

      .product .badge{
        white-space:nowrap;
        font-size:.65rem !important;
        padding:.25rem .5rem !important;
      }

      /* Responsive screenshot boxes - full width on small mobile */
      .product > div[style*="max-width:280px"]{
        max-width:100% !important;
        margin:0 0 1rem !important;
      }

      /* Comparison slider - optimize for small screens */
      #comparison-slider{
        border-width:2px;
        min-height:400px;
      }

      .comparison-image{
        min-height:400px !important;
      }

      .comparison-image > div[style*="position:absolute"]{
        top:50% !important;
        right:10px !important;
        left:auto !important;
        transform:translateY(-50%) !important;
        padding:.5rem .75rem !important;
        font-size:.85rem !important;
      }

      .comparison-image span{
        font-size:.82rem !important;
      }

      #slider-handle{
        width:3px;
      }

      #slider-handle > div{
        width:40px !important;
        height:40px !important;
      }

      #slider-handle svg{
        width:20px;
        height:20px;
      }

      /* Visual Hierarchy section - mobile optimization */
      #pentarch-details > div[style*="margin:2rem 0"]{
        margin:1.5rem 0 !important;
        padding:1rem !important;
        border-width:1px !important;
      }

      #pentarch-details > div[style*="margin:2rem 0"] > p{
        font-size:.9rem !important;
      }

      #pentarch-details > div[style*="margin:2rem 0"] > div > div{
        padding:.75rem !important;
      }

      #pentarch-details > div[style*="margin:2rem 0"] > div > div > p{
        font-size:.85rem !important;
      }

      #pentarch-details > div[style*="margin:2rem 0"] > div > div li{
        font-size:.8rem !important;
      }

      #comparison-stats{
        gap:1rem !important;
        margin-top:1rem !important;
      }

      #comparison-stats > div > div:first-child{
        font-size:1.5rem !important;
      }

      #comparison-stats > div > div:last-child{
        font-size:.75rem !important;
      }
    }

    /* Tablet optimizations (481px - 768px) */
    @media (min-width:481px) and (max-width:768px){
      /* Product cards - balanced layout */
      .product .title{
        flex-wrap:wrap;
      }

      .product h3{
        font-size:1.3rem;
      }

      .product .badge{
        font-size:.7rem;
        padding:.3rem .6rem;
      }

      /* Comparison slider - tablet sizing */
      #comparison-slider{
        min-height:500px;
      }

      .comparison-image{
        min-height:500px !important;
      }

      #slider-handle > div{
        width:44px !important;
        height:44px !important;
      }
    }