* {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }

    body {
      background: #0D0F12;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* Same ambient-glow technique as the landing page's hero (index.css) —
       kept emerald, not lime: this site's established convention is lime for
       brand/CTA elements and emerald for this kind of atmospheric background
       glow (see index.css's own notes on the hero glow / .btn-done etc.). */
    /* Soft edge from a radial mask instead of filter: blur(100px), which
       had to be re-rendered while scrolling (29fps at 4x CPU throttle). */
    .page-glow {
      position: absolute;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      -webkit-mask-image: radial-gradient(circle closest-side, #000 25%, transparent 100%);
      mask-image: radial-gradient(circle closest-side, #000 25%, transparent 100%);
      pointer-events: none;
    }

    /* .tech-badge / .text-gradient are shared via base.css (still emerald
       there, for any page not yet converted) — this page's dark variant
       lives here instead, same approach index.css uses. */
    .tech-badge {
      color: #C5F578;
      background: rgba(197, 245, 120, 0.12);
    }
    .text-gradient {
      background: linear-gradient(135deg, #A3E635 0%, #C5F578 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    /* ===== NAVBAR ===== */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      padding: 16px 24px;
    }
    
    
    .navbar.classic .nav-inner {
      background: transparent;
      backdrop-filter: none;
      border: none;
      box-shadow: none;
      border-radius: 0;
      padding: 0;
    }
    
    
    /* Dark glass — the nav's text/logo are white for the dark page, and
       .floating triggers at just 50px of scroll, so a light pill would flash
       in over dark content almost immediately and go low-contrast. */
    .navbar.floating .nav-inner {
      background: rgba(10, 14, 12, 0.75);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
      border-radius: 100px;
      padding: 8px 24px;
    }
    
    
    /* ===== LANGUAGE SWITCH ===== */
    .lang-switch {
      display: flex; align-items: center; gap: 2px;
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 100px; padding: 3px; flex-shrink: 0;
    }
    .lang-switch-btn {
      background: none; border: none; cursor: pointer;
      padding: 6px 12px; border-radius: 100px;
      font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
      /* Raised from 0.5, which measured under 4.5:1 here. The selected
         option reads from its filled pill, not from dimming the other. */
      color: rgba(255,255,255,0.8); transition: background 0.2s ease, color 0.2s ease;
    }
    .lang-switch-btn:hover { color: #fff; }
    .lang-switch-btn.active { background: #C5F578; color: #0D0F12; }
    .mobile-nav-panel .lang-switch { width: 100%; }
    .mobile-nav-panel .lang-switch-btn { flex: 1; text-align: center; }

    /* ===== MOBILE NAV DRAWER ===== */
    .mobile-nav-toggle {
      display: inline-flex; align-items: center; justify-content: center;
      width: 44px; height: 44px; border-radius: 12px;
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
      color: #fff; cursor: pointer; flex-shrink: 0;
      transition: background 0.2s ease, border-color 0.2s ease;
    }
    .mobile-nav-toggle:hover { background: rgba(255,255,255,0.1); border-color: rgba(197,245,120,0.4); }

    /* Closed = visibility:hidden, not just opacity:0 - a transparent overlay
       with a live backdrop-filter still made the browser re-blur the whole
       page behind it on every scroll frame. Blur only while open. */
    .mobile-nav-overlay {
      position: fixed; inset: 0; z-index: 200;
      background: rgba(0,0,0,0.6);
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    }
    .mobile-nav-overlay.active { opacity: 1; visibility: visible; pointer-events: all; transition-delay: 0s; backdrop-filter: blur(4px); }

    .mobile-nav-panel {
      position: absolute; top: 0; right: 0; bottom: 0;
      width: min(320px, 85vw); background: #0D0F12;
      border-left: 1px solid rgba(255,255,255,0.1);
      padding: 20px 24px 32px; overflow-y: auto;
      transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    }
    .mobile-nav-overlay.active .mobile-nav-panel { transform: translateX(0); }

    .mobile-nav-link {
      display: block; padding: 14px 4px; font-size: 16px; font-weight: 500;
      color: rgba(255,255,255,0.75); border-bottom: 1px solid rgba(255,255,255,0.08);
      text-decoration: none; transition: color 0.2s ease;
    }
    .mobile-nav-link:hover { color: #fff; }

    /* ===== AUTH MODAL =====
       Same structure as index.html's/analysis.html's own copy — pricing.html
       never had a working one before (the old "Log In" button called
       openAuthModal() into a modal that didn't exist), but Checkout now
       requires being logged in, so this page needs the real thing too. */
    .auth-modal {
      background: #12151A; border: 1px solid rgba(255,255,255,0.1);
      border-radius: 24px; padding: 40px 32px;
      max-width: 420px; width: 100%; position: relative;
      box-shadow: 0 24px 80px rgba(0,0,0,0.5);
      animation: slideUpAuth 0.3s ease-out;
    }
    @keyframes slideUpAuth { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

    .auth-tab {
      flex: 1; text-align: center; padding: 13px 0; font-weight: 600;
      font-size: 14px; cursor: pointer; transition: all 0.2s ease;
      border-bottom: 2px solid transparent; color: #9CA3AF;
      background: none; border-top: none; border-left: none; border-right: none;
    }
    .auth-tab.active { color: #C5F578; border-bottom-color: #C5F578; }

    .form-label {
      display: block; font-size: 12px; font-weight: 600;
      color: #9CA3AF; margin-bottom: 6px;
    }
    .form-input {
      width: 100%; padding: 12px 14px; border-radius: 12px;
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
      color: #FFFFFF; font-size: 14px;
      transition: border-color 0.2s ease, background 0.2s ease;
    }
    .form-input::placeholder { color: #6B7280; }
    .form-input:focus { outline: none; border-color: #C5F578; background: rgba(255,255,255,0.08); }

    /* ===== WITHDRAWAL ACK MODAL ===== */
    .withdrawal-modal {
      position: relative;
      background: #12151A; border: 1px solid rgba(255,255,255,0.1);
      border-radius: 24px; padding: 32px 28px;
      max-width: 440px; width: 100%;
      box-shadow: 0 24px 80px rgba(0,0,0,0.5);
    }

    /* ===== TECH BADGE ===== */

    /* ===== TEXT GRADIENT ===== */
    
    /* Toggle Switch */
    .toggle-container {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      padding: 3px;
      border-radius: 100px;
      display: inline-flex;
      gap: 2px;
    }

    .toggle-option {
      padding: 8px 20px;
      border-radius: 100px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      border: none;
      background: transparent;
      /* #9CA3AF measured under 4.5:1 on the toggle's dark pill. The selected
         option is still obvious from its filled background, so the unselected
         label does not need to be dimmed to make that read. */
      color: #C3C9D2;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .toggle-option.active {
      background: #C5F578;
      color: #0D0F12;
      box-shadow: 0 2px 8px rgba(197, 245, 120, 0.25);
    }
    
    .toggle-badge {
      background: #C5F578;
      color: #0D0F12;
      font-size: 9px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 100px;
      letter-spacing: 0.05em;
    }

    /* Pricing Cards — dark glass, per every other card on the site now. */
    .pricing-card {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 24px;
      padding: 32px 28px;
      position: relative;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    /* The featured plan gets a glowing lime border instead of the emerald
       one it used to have — it's the one card meant to draw the eye. */
    .pricing-card.featured {
      border-color: #C5F578;
      border-width: 2px;
      box-shadow: 0 8px 40px rgba(197, 245, 120, 0.15), 0 0 0 1px rgba(197, 245, 120, 0.15) inset;
    }

    .pricing-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(197, 245, 120, 0.25);
      border-color: #C5F578;
    }

    .pricing-card.featured:hover {
      transform: translateY(-6px);
      box-shadow: 0 24px 60px rgba(197, 245, 120, 0.25), 0 0 0 3px rgba(197, 245, 120, 0.4);
      border-color: #C5F578;
    }

    /* Top Badge — the plan being pushed ("MOST POPULAR"), so it's the lime
       brand accent. Dark text, same as every other lime-filled pill. */
    .card-badge {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: #C5F578;
      color: #0D0F12;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.05em;
      padding: 5px 18px;
      border-radius: 100px;
      white-space: nowrap;
      z-index: 2;
      box-shadow: 0 4px 12px rgba(197, 245, 120, 0.35);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .pricing-card:hover .card-badge {
      box-shadow: 0 6px 20px rgba(197, 245, 120, 0.5);
      transform: translateX(-50%) scale(1.05);
    }
    
    /* Ultimate's badge stays visually secondary to the lime "MOST POPULAR"
       one (a dark navy fill would otherwise vanish into the new dark card) —
       translucent white glass rather than a second lime badge, so the two
       still read as "the recommended one" vs. "the top tier", not identical. */
    .card-badge.best-value {
      background: rgba(255, 255, 255, 0.1);
      color: #FFFFFF;
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .pricing-card:hover .card-badge.best-value {
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    }

    .trial-badge {
      display: inline-block;
      background: #C5F578;
      color: #0D0F12;
      font-size: 10px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 100px;
      margin-top: 6px;
      letter-spacing: 0.03em;
    }

    /* Feature List */
    .feature-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 14px;
      color: #9CA3AF;
      line-height: 1.5;
      transition: color 0.3s ease;
    }

    .pricing-card:hover .feature-item {
      color: #FFFFFF;
    }

    .feature-item i {
      color: #C5F578;
      font-size: 18px;
      margin-top: 1px;
      flex-shrink: 0;
      transition: transform 0.3s ease;
    }
    
    .pricing-card:hover .feature-item i {
      transform: scale(1.1);
    }

    /* Features not built yet but already priced in — same layout as a normal
       feature-item, just visually de-emphasized so it doesn't read as
       available today. */
    /* Dimmer than a shipped feature, but still readable: #6B7280 measured
       under 4.5:1 on the card. The "coming soon" pill beside it is what
       marks these as unavailable, not the text being hard to read. */
    .feature-item.soon {
      color: #A9B0BB;
    }

    .feature-item.soon i {
      color: #6B7280;
    }

    .feature-item.soon .soon-tag {
      display: inline-block;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: #9CA3AF;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 100px;
      padding: 1px 8px;
      margin-left: 6px;
      vertical-align: middle;
    }

    /* CTA Buttons — the two paid-tier plans (Pro, Ultimate) both use the
       Primary Accent look (.btn-primary and .btn-dark are visually
       identical now — kept as two classes since the HTML already assigns
       them per-card, rather than renaming for no visual difference). The
       Free tier is the Secondary Glass look. */
    .btn-primary, .btn-dark {
      background: #C5F578;
      color: #0D0F12;
      border: none;
      padding: 14px 28px;
      border-radius: 100px;
      font-weight: 700;
      font-size: 15px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 4px 14px rgba(197, 245, 120, 0.25);
      text-align: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      text-decoration: none;
    }

    .btn-primary:hover, .btn-dark:hover {
      opacity: 0.88;
      box-shadow: 0 6px 20px rgba(197, 245, 120, 0.35);
      transform: translateY(-1px);
    }

    .btn-outline {
      background: rgba(255, 255, 255, 0.05);
      color: #FFFFFF;
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 14px 28px;
      border-radius: 100px;
      font-weight: 600;
      font-size: 15px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      text-align: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      text-decoration: none;
    }

    .btn-outline:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.32);
    }
    
    /* Comparison Table */
    .comparison-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
    }
    
    .comparison-table th,
    .comparison-table td {
      padding: 14px 20px;
      text-align: left;
      font-size: 14px;
    }
    
    .comparison-table th {
      font-weight: 600;
      color: #FFFFFF;
      font-size: 13px;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      background: rgba(255, 255, 255, 0.05);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .comparison-table td {
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      color: #9CA3AF;
    }

    .comparison-table tr:last-child td {
      border-bottom: none;
    }

    .category-header td {
      font-weight: 700;
      color: #FFFFFF;
      font-size: 13px;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      padding-top: 24px;
      padding-bottom: 12px;
      background: transparent;
    }

    .check-icon {
      color: #C5F578;
      font-weight: 700;
      font-size: 16px;
    }

    .dash-icon {
      color: rgba(255, 255, 255, 0.25);
      font-size: 16px;
    }

    .soon-icon {
      display: inline-block;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: #9CA3AF;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 100px;
      padding: 2px 8px;
    }

    /* Footer Links */
    footer a {
      transition: color 0.2s ease;
    }
    
    footer a:hover {
      color: #FFFFFF;
    }