/* ── PRICING COLOR SWAP OVERRIDES ── */
      /* Style remains the same (rightmost column has borders, 2nd from right doesn't), but colors swap */

      /* Column 4 (Elite, rightmost): Transparent bg (consistent with other columns) */
      .plan-table th:nth-child(4),
      .plan-table td:nth-child(4),
      .plan-table tr:not(.group-row):not(.unified-highlight-row):not(.progressive-highlight-row) td:nth-child(4) {
          background-color: transparent !important;
          border-left: none !important;
          border-right: none !important;
          font-weight: 400 !important;
      }
      .plan-table th:nth-child(4) {
          border-top: none !important;
      }
      .plan-table tr:last-child td:nth-child(4) {
          border-bottom: 1px dashed rgba(0, 0, 0, 0.08) !important;
          border-radius: 0 !important;
      }
      
      /* Column 4 Recommended badge: Gold -> Champagne Gold */
      .best-value-badge {
          background: #161B28 !important;
          color: #FCC97C !important;
          box-shadow: 0 4px 10px rgba(22, 27, 40, 0.3) !important;
      }

      /* Column 4 checkmarks: Gold bg with dark check -> Black bg with Gold check */
      .plan-table td:nth-child(4) .check-icon {
          background-color: #161B28 !important;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FCC97C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
          box-shadow: 0 2px 6px rgba(22, 27, 40, 0.2) !important;
      }

      /* Column 3 (Premium, 2nd from right): Teal/Green -> Gold checkmarks */
      .plan-table td:nth-child(3) .check-icon {
          background-color: #FAE7CF !important;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191c1d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
          box-shadow: 0 2px 6px rgba(250, 231, 207, 0.4) !important;
      }

      /* Column 3 pricing text (price, billed annually, small text) -> black */
      .plan-table td:nth-child(3) .price-val,
      .plan-table td:nth-child(3) span,
      .plan-table td:nth-child(3) small {
          color: #191c1d !important;
      }

      /* Column 4 small text: gold -> Champagne Gold */
      .plan-table td:nth-child(4) small {
          color: #B8731E !important;
      }

      /* Highlight backgrounds and borders: */
      /* Column 3 (Premium): Teal -> Gold */
      .plan-table tr.unified-highlight-row td:nth-child(3),
      .plan-table tr.progressive-highlight-row td:nth-child(3) {
          background: rgba(250, 231, 207, 0.2) !important;
      }

      /* Column 4 (Elite): Gold -> Champagne Gold */
      .plan-table tr.unified-highlight-row td:nth-child(4),
      .plan-table tr.progressive-highlight-row td:nth-child(4) {
          background-color: rgba(252, 201, 124, 0.25) !important;
          border-left: none !important;
          border-right: none !important;
      }

      /* Column 4 Group row borders and bg: Transparent borders, gray bg to match rest of row */
      @media (min-width: 769px) {
          .plan-table tr.group-row td.elite-col-group {
              background-color: #f8fafc !important;
              border-left: none !important;
              border-right: none !important;
          }
      }

      /* Overrides for bg-teal and text-teal in HTML (so they render Black + Gold) */
      .bg-teal {
          background-color: #161B28 !important;
          box-shadow: 0 4px 10px rgba(22, 27, 40, 0.2) !important;
      }
      .bg-teal svg {
          stroke: #FCC97C !important;
      }
      .text-teal, .text-teal strong {
          color: #B8731E !important;
      }
      .text-teal-dark {
          color: #B8731E !important;
      }

      .plan-header-flex {
          justify-content: center !important;
      }

      /* ── NAVBAR OVERRIDE: Restore homepage navbar styles (overridden by product page CSS) ── */
      .site-header {
          border-bottom: none !important;
      }
      .header-container {
          width: min(calc(100% - 64px), 1440px) !important;
      }
      .site-nav {
          gap: 20px !important;
      }
      .site-nav a {
          padding: 8px 12px !important;
      }

      /* Desktop default for mobile icons */
      @media (min-width: 1025px) {
          .show-on-mobile { display: none !important; }
      }

      /* Mobile navbar rearrangement & height reduction */
      @media (max-width: 1024px) {
          /* Note: The global height/padding reduction is now in style.css */
          
          /* Grid layout for left-center-right distribution */
          .header-container {
              display: grid !important;
              grid-template-columns: 1fr auto 1fr;
              align-items: center;
          }
          
          .brand {
              grid-column: 2;
              justify-self: center;
              margin: 0 !important; /* clear any default margins */
          }
          
          /* Make header-right a contents wrapper so its children are grid items */
          .header-right {
              display: contents;
          }
          
          /* Hamburger Menu */
          .nav-toggle {
              grid-column: 1;
              grid-row: 1;
              justify-self: start;
              margin-left: 0 !important;
          }
          
          /* Search Icon */
          .header-icon[aria-label="Search"] {
              grid-column: 1;
              grid-row: 1;
              justify-self: start;
              margin-left: 48px; /* space after hamburger */
          }
          
          /* Cart Icon (Account container) */
          .header-icon[aria-label="Account"] {
              grid-column: 3;
              grid-row: 1;
              justify-self: end;
          }
          
          .hide-on-mobile { display: none !important; }
          .show-on-mobile { display: block !important; }
      }

      /* ── APP DOWNLOAD HERO ── */
      #hero-app {
          position: relative;
          width: 100%;
          height: 720px;
          overflow: hidden;
          border: none;
      }
      #hero-app-bg {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center bottom;
          display: block;
          border: none;
          outline: none;
          transform: scale(1.35);
          transform-origin: center bottom;
      }
      #hero-app-bg-mobile {
          width: 100%;
          height: auto;
          display: block;
          border: none;
          outline: none;
      }
      #hero-app-text {
          position: absolute;
          top: 100px;
          left: 0;
          width: 100%;
          text-align: center;
          z-index: 1;
      }
      /* Match homepage banner font sizes */
      #hero-app-text h2 {
          font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
          font-size: 48px !important;
          font-weight: 700;
          line-height: 1.15;
          letter-spacing: normal;
          margin-bottom: 12px; /* 减小标题与副标题的间距 */
      }
      #hero-app-text p {
          font-size: 18px !important;
          line-height: 28px;
          color: #4B5563 !important;
      }

      /* Ultra-wide 4K adjustments via JS physical width detection (solves OS scaling issues) */
      .is-4k-screen #hero-app-text {
          top: 90px !important; /* 原来是60px, 整体下移30px */
      }
      .is-4k-screen #hero-app-bg {
          transform: scale(1.2) translateY(30px) !important; /* 原本是 80px，上移 50px 所以变成了 30px */
      }

      /* Fix for wide/ultra-wide viewports to prevent background image from overlapping text */
      @media (min-width: 1600px) {
          #hero-app {
              height: 780px !important;
          }
          #hero-app-bg, .is-4k-screen #hero-app-bg {
              transform: scale(1.2) translateY(15px) !important;
          }
      }
      @media (min-width: 1921px) {
          #hero-app {
              height: 880px !important;
          }
          #hero-app-bg, .is-4k-screen #hero-app-bg {
              transform: scale(1.1) translateY(30px) !important;
          }
      }
      @media (min-width: 2561px) {
          #hero-app {
              height: 1000px !important;
          }
          #hero-app-bg, .is-4k-screen #hero-app-bg {
              transform: scale(1.0) translateY(45px) !important;
          }
      }


      @media (max-width: 768px) {
          /* ── UNIFIED SECTION SPACING ──
             Target: all .section blocks get the same 48px top/bottom padding on mobile.
             This overrides per-section custom values (#benefits, #subscribe, etc.)
             to maintain a consistent visual rhythm between sections. */
          .section,
          #benefits.section,
          #subscribe.section,
          .plans-section,
          .video-showcase-section {
              padding-top: 48px !important;
              padding-bottom: 48px !important;
          }

          /* ── HALVE SPACING BETWEEN HEADINGS AND CONTENT ON MOBILE ── */
          /* Comu Web section */
          #web-app-download .container > .section-heading:nth-of-type(1) { margin-bottom: 24px !important; }
          #web-app-download .container > .section-heading:nth-of-type(2) { margin-bottom: 12px !important; }
          
          /* Comu Plans section */
          .plans-section .section-heading { margin-bottom: 10px !important; }
          
          /* Purchase module */
          #purchase-module .section-heading { margin-bottom: 12px !important; }
          
          /* Privacy and Compliance */
          #compliance .section-heading { margin-bottom: 12px !important; }
          
          /* FAQ */
          .faq-section .section-heading { margin-bottom: 12px !important; }
          #hero-app {
              height: auto !important;
              max-height: none !important;
          }
          #hero-app-text h2 {
              font-size: 32px !important;
              margin-bottom: 16px;
          }
          #hero-app-text p {
              font-size: 16px !important;
              padding: 0 16px;
          }
          #purchase-module > .container > div:nth-child(2) {
              gap: 24px !important;
          }
          .mobile-product-card {
              padding: 24px !important;
          }
          .mobile-product-card .img-wrapper {
              height: 180px !important;
              margin-top: 24px !important;
              margin-bottom: 16px !important;
          }
          .mobile-product-card h3 {
              font-size: 18px !important;
          }
          .mobile-product-card .price-row {
              margin-bottom: 16px !important;
          }
          .mobile-product-card .price-row span:first-child {
              font-size: 20px !important;
          }
          .mobile-product-card .button-row button {
              padding: 12px !important;
              font-size: 14px !important;
          }
      }

      /* ── STICKY BOTTOM BAR STYLING ── */
      .sticky-bottom-bar {
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          height: 80px;
          background: #ffffff;
          border-top: 1px solid #e2e8f0;
          box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
          z-index: 1000;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      }
      .sticky-bar-container {
          width: 100%;
          max-width: 1128px;
          padding: 0 24px;
          display: flex;
          align-items: center;
          justify-content: space-between;
      }
      .sticky-bar-left {
          display: flex;
          flex-direction: column;
          gap: 2px;
      }
      .sticky-bar-title {
          font-size: 18px;
          font-weight: 700;
          color: #191c1d;
      }
      .sticky-bar-subtitle {
          font-size: 13px;
          color: #64748b;
          font-weight: 400;
      }
      .sticky-bar-right {
          display: flex;
          align-items: center;
          gap: 24px;
      }
      .sticky-bar-price-wrap {
          display: flex;
          align-items: center;
          gap: 8px;
      }
      .sticky-price-now {
          font-size: 22px;
          font-weight: 800;
          color: #191c1d;
      }
      .sticky-price-was {
          font-size: 13px;
          color: #94a3b8;
          text-decoration: line-through;
      }
      .sticky-save-badge {
          font-size: 11px;
          font-weight: 700;
          color: #ffffff;
          background-color: #ef4444;
          padding: 2.5px 10px;
          border-radius: 9999px;
          letter-spacing: 0.02em;
      }
      .sticky-bar-buttons {
          display: flex;
          align-items: center;
          gap: 12px;
          flex-shrink: 0;
      }
      .sticky-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          height: 44px;
          padding: 0 24px;
          font-size: 14px;
          font-weight: 600;
          border-radius: 100px;
          cursor: pointer;
          text-decoration: none;
          transition: all 0.2s ease;
          box-sizing: border-box;
          white-space: nowrap;
          flex-shrink: 0;
      }
      .sticky-btn-outline {
          border: 1.5px solid #191c1d;
          color: #191c1d;
          background: transparent;
      }
      .sticky-btn-outline:hover {
          background: rgba(25, 28, 29, 0.05);
      }
      .sticky-btn-solid {
          background: #191c1d;
          color: #ffffff;
          border: none;
      }
      .sticky-btn-solid:hover {
          background: #000000;
      }

      /* Responsive Styling */
      @media (max-width: 768px) {
          .sticky-bottom-bar {
              height: 70px;
          }
          .sticky-bar-left {
              display: none;
          }
          .sticky-bar-container {
              padding: 0 16px;
          }
          .sticky-bar-right {
              width: 100%;
              justify-content: space-between;
              gap: 12px;
          }
          .sticky-bar-price-wrap {
              flex-direction: column;
              align-items: flex-start;
              gap: 2px;
          }
          .sticky-price-now {
              font-size: 18px;
              line-height: 1;
          }
          .sticky-price-was {
              font-size: 11px;
          }
          .sticky-save-badge {
              font-size: 9px;
              padding: 1.5px 5px;
          }
          .sticky-btn {
              height: 38px;
              padding: 0 16px;
              font-size: 13px;
          }
      }

      @media (max-width: 480px) {
          .sticky-bar-right {
              gap: 8px;
          }
          .sticky-bar-buttons {
              gap: 8px;
          }
          .sticky-btn {
              padding: 0 12px;
              font-size: 12px;
          }
      }

      /* Remove the default 80px body padding intended for the sticky bottom bar */
      body {
          padding-bottom: 0 !important;
      }