/* Premium Sender — ps-theme.css (extracted from NEW_DESIGN) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');
    /*
      Premium Sender — "Premium Checkout" design system, GREEN brand variant.
      Same token architecture as premiumsenderplus.app; accent scale shifted to
      emerald green to match Premium Sender's existing brand color.
    */
    :root {
      color-scheme: only light;
      /* Surfaces (warm beige with a soft green undertone) */
      --bg-main: #ffffff;
      --bg-container: #ffffff;
      --bg-elevated: #ffffff;
      /* Text */
      --text-primary: #0f172a;
      --text-secondary: #64748b;
      --text-muted: #94a3b8;
      --text-inverse: #ffffff;
      /* Borders */
      --border-color: #e2e8f0;
      --border-focus: #10b981;
      /* Brand / Accent (Premium Green) */
      --accent-50: #ecfdf5;
      --accent-100: #d1fae5;
      --accent-300: #6ee7b7;
      --accent-400: #34d399;
      --accent-500: #10b981;
      --accent-600: #059669;
      --accent-700: #065f46;
      --accent-900: #06281e;
      --accent: var(--accent-600);
      --accent-glow: rgba(5, 150, 105, 0.35);
      /* Status Colors */
      --success: #10b981;
      --success-bg: rgba(16, 185, 129, 0.1);
      --error: #ef4444;
      --error-bg: rgba(239, 68, 68, 0.05);
      --warning: #f59e0b;
      --warning-bg: rgba(245, 158, 11, 0.1);
      --info: #3b82f6;
      --info-bg: rgba(59, 130, 246, 0.08);
      /* Typography */
      --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --font-mono: 'Space Mono', monospace;
      --fs-xs: 12px;
      --fs-sm: 14px;
      --fs-base: 15px;
      --fs-md: 16px;
      --fs-lg: 20px;
      --fs-xl: 24px;
      --fs-2xl: 28px;
      --fs-3xl: 36px;
      --fw-regular: 400;
      --fw-medium: 500;
      --fw-semibold: 600;
      --fw-bold: 700;
      --lh-tight: 1.2;
      --lh-normal: 1.5;
      --ls-tight: -0.5px;
      --ls-wide: 0.5px;
      --ls-widest: 2px;
      /* Spacing Scale */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-8: 32px;
      --space-10: 40px;
      --space-12: 48px;
      /* Radius Scale */
      --radius-sm: 6px;
      --radius-md: 12px;
      --radius-lg: 14px;
      --radius-xl: 20px;
      --radius-2xl: 28px;
      --radius-full: 9999px;
      /* Shadows */
      --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
      --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
      --shadow-xl: 0 20px 35px -5px rgba(0, 0, 0, 0.1), 0 10px 15px -5px rgba(0, 0, 0, 0.04);
      --shadow-glow-accent: 0 10px 20px -5px rgba(5, 150, 105, 0.4);
      --shadow-glow-success: 0 0 30px rgba(16, 185, 129, 0.7), 0 0 60px rgba(16, 185, 129, 0.4);
      --shadow-glow-error: 0 0 30px rgba(255, 110, 80, 0.7), 0 0 60px rgba(255, 80, 100, 0.4);
      /* Motion */
      --ease-out-spring: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
      --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
      --duration-fast: 0.2s;
      --duration-normal: 0.4s;
      --duration-slow: 0.6s;
    }
    body.dark {
      --bg-main: #101311;
      --bg-container: #171c18;
      --bg-elevated: #1c231d;
      --text-primary: #f8fafc;
      --text-secondary: #a1a1aa;
      --text-muted: #71717a;
      --border-color: #262e28;
      --border-focus: #34d399;
      --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.5);
      --shadow-xl: 0 20px 35px -5px rgba(0, 0, 0, 0.6);
    }

    /* ============ RESET & BASE ============ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; color-scheme: only light; }
    body {
      font-family: var(--font-main);
      font-size: var(--fs-base);
      font-weight: var(--fw-regular);
      line-height: var(--lh-normal);
      color: var(--text-primary);
      background: var(--bg-main);
      -webkit-font-smoothing: antialiased;
    }
    img, svg { display: block; max-width: 100%; }
    a { color: var(--accent); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); }
    a:hover { color: var(--accent-700); }
    button { font-family: var(--font-main); cursor: pointer; }
    :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
    .container { max-width: 1160px; margin: 0 auto; padding: 0 var(--space-6); }
    section { padding: var(--space-12) 0; }
    .section-label {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-widest);
      text-transform: uppercase;
      color: var(--accent);
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      margin-bottom: var(--space-4);
    }
    .section-label::before { content: ''; width: 24px; height: 2px; background: linear-gradient(90deg, #065f46, #10b981); border-radius: var(--radius-full); }
    .section-title { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin-bottom: var(--space-4); }
    .section-sub { color: var(--text-secondary); font-size: var(--fs-md); max-width: 640px; }
    .center { text-align: center; }
    .center .section-sub { margin: 0 auto; }

    /* ============ BRAND COMPONENTS (green variant of Premium Checkout kit) ============ */
    .btn-primary {
      width: 100%;
      padding: 16px 24px;
      background: linear-gradient(135deg, #065f46, #059669, #10b981);
      background-size: 200% 200%;
      color: white;
      border: none;
      border-radius: 14px;
      font-family: var(--font-main);
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 10px 20px -5px rgba(5, 150, 105, 0.4);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    .btn-primary:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 15px 25px -5px rgba(5, 150, 105, 0.5);
      background-position: 100% 0;
    }
    .btn-primary:active:not(:disabled) {
      transform: translateY(0);
      box-shadow: 0 5px 15px -5px rgba(5, 150, 105, 0.4);
    }
    .btn-primary:disabled { opacity: 0.7; cursor: not-allowed; }
    .icon-badge {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: linear-gradient(135deg, #065f46, #10b981);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
    }
    .tab-active { position: relative; }
    .tab-active::after {
      content: '';
      position: absolute;
      bottom: -25px;
      left: 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg, #065f46, #10b981);
      border-radius: 3px 3px 0 0;
    }
    .premium-surface {
      background: linear-gradient(135deg, #041f16 0%, #0a3d2c 45%, #0e5a41 80%, #059669 100%);
      border-radius: 20px;
      color: white;
      position: relative;
      overflow: hidden;
    }
    .premium-surface::before {
      content: '';
      position: absolute;
      inset: -50%;
      background: radial-gradient(ellipse at 80% 20%, rgba(52, 211, 153, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(16, 185, 129, 0.2) 0%, transparent 40%);
      pointer-events: none;
    }
    .gradient-text {
      background: linear-gradient(90deg, #ffffff, #6ee7b7);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    .glow-border-success {
      box-shadow: 0 0 30px rgba(16, 185, 129, 0.7), 0 0 60px rgba(16, 185, 129, 0.4);
      background: linear-gradient(135deg, #10b981, #34d399, #059669);
    }
    .glow-border-processing { position: relative; overflow: hidden; }
    .glow-border-processing::before {
      content: '';
      position: absolute;
      inset: -50%;
      background: conic-gradient(transparent 0deg, transparent 120deg,
        #ff7e5f 180deg, #feb47b 240deg, #ff3b30 300deg, transparent 360deg);
      animation: spinConic 1.8s linear infinite;
    }
    @keyframes spinConic { to { transform: rotate(360deg); } }

    /* ============ INTERACTIVE NETWORK BACKGROUND ============ */
    /* A living "contact network" behind the whole page — nodes are customers,
       lines are conversations. It connects to your cursor as you move. */
    #netFx { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
    .site-header, main, .site-footer { position: relative; z-index: 1; }
    @media (prefers-reduced-motion: reduce) { #netFx { display: none; } }

    .btn-inline { width: auto; display: inline-flex; }
    .btn-ghost {
      display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
      padding: 15px 24px; border-radius: var(--radius-lg);
      background: var(--bg-container); color: var(--text-primary);
      border: 1px solid var(--border-color);
      font-size: var(--fs-md); font-weight: var(--fw-semibold);
      box-shadow: var(--shadow-sm);
      transition: all var(--duration-fast) var(--ease-standard);
    }
    .btn-ghost:hover { border-color: var(--accent-300); color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }

    /* ============ HEADER ============ */
    .site-header {
      position: sticky; top: 0; z-index: 100;
      background: color-mix(in srgb, var(--bg-main) 85%, transparent);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border-color);
    }
    .site-header .nav { position: relative; }
    .nav {
      display: flex; align-items: center; justify-content: space-between;
      padding: var(--space-4) var(--space-6);
      max-width: 1160px; margin: 0 auto;
    }
    .brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
    .brand-logo-img { display: block; width: 40px; height: 40px; border-radius: var(--radius-sm); flex-shrink: 0; }
    .brand-wordmark { display: inline-flex; align-items: baseline; gap: 0.2em; font-size: clamp(22px, 2.5vw, 32px); font-weight: var(--fw-bold); line-height: 1; letter-spacing: var(--ls-tight); white-space: nowrap; }
    .brand-premium { color: #1e5ee5; }
    .brand-sender { color: #1ebea5; }
    .site-header .menu { display: flex; align-items: center; gap: var(--space-8); flex-wrap: nowrap; }
    .nav-links { display: flex; align-items: center; gap: var(--space-8); list-style: none; margin: 0; padding: 0; }
    .nav-links li { display: flex; align-items: center; }
    .nav-links a { color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; }
    .nav-links a:hover { color: var(--accent); }
    .nav-cta { display: flex; align-items: center; flex-shrink: 0; margin: 0; }
    .nav-cta .btn-primary { margin: 0; white-space: nowrap; }
    .nav-toggle { display: none; background: none; border: none; color: var(--text-primary); padding: var(--space-2); }

    /* ============ HERO (light split with chat preview) ============ */
    .hero { padding: var(--space-10) 0 var(--space-8); }
    .hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-12); align-items: center; }
    .hero-badge {
      display: inline-flex; align-items: center; gap: var(--space-2);
      font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-wide);
      color: var(--accent-700); border: 1px solid var(--accent-100);
      background: var(--accent-50);
      padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
      margin-bottom: var(--space-6);
    }
    .hero h1 { font-size: clamp(var(--fs-2xl), 4.5vw, 52px); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin-bottom: var(--space-5); color: var(--text-primary); }
    .gradient-text-green {
      background: linear-gradient(90deg, #065f46, #10b981);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .hero-sub { color: var(--text-secondary); font-size: var(--fs-lg); font-weight: var(--fw-regular); max-width: 520px; margin-bottom: var(--space-8); }
    .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-5); }
    .hero-note {
      display: inline-flex; align-items: center; gap: var(--space-2);
      font-size: var(--fs-sm); color: var(--accent-700);
      background: var(--success-bg); border-radius: var(--radius-full);
      padding: var(--space-2) var(--space-4);
    }
    .hero-stats { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }
    .stat { background: var(--bg-container); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm); }
    .stat b { display: block; font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--accent); }
    .stat span { font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: var(--ls-wide); text-transform: uppercase; }

    /* Chat-style preview */
    .hero-media { position: relative; }
    .chat-mock {
      background: var(--bg-container); border: 1px solid var(--border-color);
      border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl);
      padding: var(--space-5); max-width: 420px; margin-left: auto;
    }
    .chat-head { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-color); margin-bottom: var(--space-4); }
    .chat-head h3 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
    .chat-head p { font-size: var(--fs-xs); color: var(--success); }
    .bubble {
      max-width: 86%; padding: var(--space-3) var(--space-4);
      border-radius: var(--radius-lg); font-size: var(--fs-sm);
      margin-bottom: var(--space-3); line-height: var(--lh-normal);
    }
    .bubble.out { background: var(--accent-100); color: var(--accent-900); margin-left: auto; border-bottom-right-radius: var(--radius-sm); }
    .bubble.in { background: var(--bg-main); border: 1px solid var(--border-color); color: var(--text-primary); border-bottom-left-radius: var(--radius-sm); }
    .bubble .meta { display: flex; justify-content: flex-end; gap: var(--space-1); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent-600); margin-top: var(--space-1); }
    /* Floating stat chips */
    .float-chip {
      position: absolute; display: flex; align-items: center; gap: var(--space-3);
      background: var(--bg-container); border: 1px solid var(--border-color);
      border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
      padding: var(--space-3) var(--space-4);
      font-size: var(--fs-xs); font-weight: var(--fw-semibold);
      animation: floaty 5s ease-in-out infinite;
    }
    .float-chip b { font-family: var(--font-mono); color: var(--accent); display: block; font-size: var(--fs-sm); }
    .float-chip.tl { top: -16px; left: -8px; }
    .float-chip.br { bottom: -16px; right: -8px; animation-delay: 2.5s; }
    @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

    /* Generic chips (reused in sections) */
    .chip { font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); }
    .chip.sent { color: var(--success); background: var(--success-bg); }
    .chip.queue { color: var(--warning); background: var(--warning-bg); }

    /* ============ SUPPORT STATS ============ */
    .support-band { padding: var(--space-8) 0; }
    .support-inner { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); align-items: center; gap: var(--space-6); background: var(--bg-container); border: 1px solid var(--border-color); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-sm); }
    .support-inner h2 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
    .support-inner > p { grid-column: 1; color: var(--text-secondary); font-size: var(--fs-sm); }
    .support-stat b { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--accent); display: block; }
    .support-stat span { font-size: var(--fs-sm); color: var(--text-secondary); }

    /* ============ CARDS / GRIDS ============ */
    .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: var(--space-10); }
    .card {
      background: var(--bg-container); border: 1px solid var(--border-color);
      border-radius: var(--radius-xl); padding: var(--space-6);
      box-shadow: var(--shadow-sm);
      transition: transform var(--duration-fast) var(--ease-out-spring), box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
    }
    .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent-300); }
    .card h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: var(--space-4) 0 var(--space-2); }
    .card p { font-size: var(--fs-sm); color: var(--text-secondary); }

    /* ============ STEPS ============ */
    .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: var(--space-10); }
    .step { background: var(--bg-container); border: 1px solid var(--border-color); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-sm); }
    .step-num { font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--accent); background: var(--accent-50); border: 1px solid var(--accent-100); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); display: inline-block; margin-bottom: var(--space-4); }
    .step h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin-bottom: var(--space-2); }
    .step p { font-size: var(--fs-sm); color: var(--text-secondary); }

    /* ============ PRICING ============ */
    .pricing-tabs { display: flex; justify-content: center; gap: var(--space-2); margin: var(--space-8) 0 var(--space-10); }
    .pricing-tabs button {
      padding: var(--space-3) var(--space-6); border-radius: var(--radius-full);
      border: 1px solid var(--border-color); background: var(--bg-container);
      color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
      transition: all var(--duration-fast) var(--ease-standard);
    }
    .pricing-tabs button[aria-selected="true"] {
      background: linear-gradient(135deg, #065f46, #059669, #10b981);
      color: var(--text-inverse); border-color: transparent;
      box-shadow: var(--shadow-glow-accent);
    }
    .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
    .price-card { background: var(--bg-container); border: 1px solid var(--border-color); border-radius: var(--radius-2xl); padding: var(--space-6); box-shadow: var(--shadow-md); display: flex; flex-direction: column; text-align: left; }
    .pricing-section .price-card { padding: 0; overflow: hidden; border-radius: var(--radius-xl); }
    .pricing-section .price-card h3 { margin: 0; }
    .pricing-section .price-card > .price { margin-bottom: 0; }
    .price-card.featured { border: 2px solid var(--accent-500); box-shadow: var(--shadow-xl); position: relative; }
    .popular-flag {
      position: absolute; top: calc(-1 * var(--space-4)); left: 50%; transform: translateX(-50%);
      background: linear-gradient(135deg, #065f46, #10b981); color: var(--text-inverse);
      font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide);
      padding: var(--space-2) var(--space-5); border-radius: var(--radius-full); white-space: nowrap;
      box-shadow: var(--shadow-glow-accent);
    }
    .price-card h3 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin-bottom: var(--space-1); }
    .price-desc { color: var(--text-secondary); font-size: var(--fs-xs); margin-bottom: var(--space-4); }
    .price { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); margin-bottom: var(--space-4); }
    .price small { font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-regular); }
    .plan-list { list-style: none; margin: 0 0 var(--space-6); display: grid; gap: var(--space-3); flex: 1; }
    .plan-list li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-xs); color: var(--text-secondary); }
    .plan-list svg { flex: none; margin-top: 2px; color: var(--success); }
    .pricing-note { max-width: 820px; margin: var(--space-10) auto 0; font-size: var(--fs-xs); color: var(--text-muted); background: var(--info-bg); border: 1px solid var(--accent-100); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }

    /* ============ CHARACTERISTICS ============ */
    .char-band { padding: var(--space-10) var(--space-8); }
    .char-inner { position: relative; z-index: 1; }
    .char-inner h2 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); margin-bottom: var(--space-2); }
    .char-inner > p { color: var(--accent-100); opacity: 0.85; margin-bottom: var(--space-8); }
    .char-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
    .char-item { border: 1px solid rgba(110, 231, 183, 0.25); background: rgba(4, 31, 22, 0.35); border-radius: var(--radius-lg); padding: var(--space-5); }
    .char-item h3 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-top: var(--space-3); }

    /* ============ FAQ ============ */
    .faq-wrap { max-width: 780px; margin: var(--space-10) auto 0; display: grid; gap: var(--space-3); }
    details {
      background: var(--bg-container); border: 1px solid var(--border-color);
      border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
      transition: border-color var(--duration-fast) var(--ease-standard);
    }
    details[open] { border-color: var(--accent-300); }
    summary {
      display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
      cursor: pointer; list-style: none;
      padding: var(--space-5) var(--space-6);
      font-size: var(--fs-md); font-weight: var(--fw-semibold);
    }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: '+'; font-family: var(--font-mono); font-size: var(--fs-lg); color: var(--accent); transition: transform var(--duration-fast) var(--ease-standard); }
    details[open] summary::after { transform: rotate(45deg); }
    details p { padding: 0 var(--space-6) var(--space-5); color: var(--text-secondary); font-size: var(--fs-sm); }

    /* ============ FINAL CTA ============ */
    .cta-final { padding: var(--space-12) var(--space-8); text-align: center; }
    .cta-final-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
    .cta-final h2 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin-bottom: var(--space-4); }
    .cta-final p { color: var(--accent-100); opacity: 0.85; margin-bottom: var(--space-8); }

    /* ============ FOOTER ============ */
    .site-footer { border-top: 1px solid var(--border-color); padding: var(--space-12) 0 var(--space-8); margin-top: var(--space-12); background: var(--bg-container); }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-10); }
    .footer-grid p { color: var(--text-secondary); font-size: var(--fs-sm); max-width: 340px; margin-top: var(--space-4); }
    .footer-col h4 { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-5); }
    .footer-col ul { list-style: none; display: grid; gap: var(--space-3); }
    .footer-col a { color: var(--text-secondary); font-size: var(--fs-sm); }
    .footer-col a:hover { color: var(--accent); }
    .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); border-top: 1px solid var(--border-color); margin-top: var(--space-10); padding-top: var(--space-6); font-size: var(--fs-xs); color: var(--text-muted); }

    /* ============ SCROLL REVEAL ============ */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity var(--duration-slow) var(--ease-out-spring), transform var(--duration-slow) var(--ease-out-spring);
      transition-delay: var(--reveal-delay, 0s);
      will-change: opacity, transform;
    }
    .reveal.in-view { opacity: 1; transform: none; }
    .reveal-left { transform: translateX(-32px); }
    .reveal-right { transform: translateX(32px); }
    .reveal-scale { transform: scale(0.94); }
    @media (prefers-reduced-motion: reduce) {
      .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; }
    }

    /* ============ FEATURE DETAIL HELPERS ============ */
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-10); }
    .showcase { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center; margin-top: var(--space-10); }
    .showcase h3 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); margin-bottom: var(--space-3); }
    .showcase p { color: var(--text-secondary); margin-bottom: var(--space-5); }
    .showcase-media { border-radius: var(--radius-xl); border: 1px solid var(--border-color); background: var(--bg-container); box-shadow: var(--shadow-lg); padding: var(--space-6); }
    .file-types { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-8); }
    .file-type {
      display: inline-flex; align-items: center; gap: var(--space-2);
      padding: var(--space-3) var(--space-5);
      background: var(--bg-container); border: 1px solid var(--border-color);
      border-radius: var(--radius-full); box-shadow: var(--shadow-sm);
      font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary);
    }
    .file-type svg { color: var(--accent); flex: none; }
    .setting-row {
      display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
      padding: var(--space-3) var(--space-4);
      border: 1px solid var(--border-color); border-radius: var(--radius-md);
      background: var(--bg-container); margin-bottom: var(--space-3); font-size: var(--fs-sm);
    }
    .setting-row b { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); white-space: nowrap; }
    .setting-row span { color: var(--text-secondary); }
    .send-progress { height: 8px; border-radius: var(--radius-full); background: var(--accent-100); overflow: hidden; margin: var(--space-4) 0 var(--space-2); }
    .send-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #065f46, #10b981); }
    .send-progress-label { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); }

    /* ============ STICKY STACKING FEATURE SHOWCASE (hyzap-style) ============ */
    .stack-wrap { margin-top: var(--space-10); }
    .stack-card {
      position: sticky;
      display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center;
      background: var(--bg-container);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-2xl);
      padding: var(--space-10) var(--space-8);
      box-shadow: var(--shadow-xl);
      margin-bottom: var(--space-8);
      text-align: left;
    }
    .stack-card:nth-child(even) { background: color-mix(in srgb, var(--accent-500) 5%, var(--bg-container)); }
    .stack-card:nth-child(1) { top: 88px; }
    .stack-card:nth-child(2) { top: 100px; }
    .stack-card:nth-child(3) { top: 112px; }
    .stack-card:nth-child(4) { top: 124px; }
    .stack-card:nth-child(5) { top: 136px; }
    .stack-card:nth-child(6) { top: 148px; }
    .stack-card:nth-child(7) { top: 160px; }
    .stack-card:nth-child(8) { top: 172px; }
    .stack-num {
      font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold);
      letter-spacing: var(--ls-widest); text-transform: uppercase;
      color: var(--accent); display: block; margin-bottom: var(--space-3);
    }
    .stack-card h3 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin-bottom: var(--space-3); }
    .stack-intro { color: var(--text-secondary); margin-bottom: var(--space-5); }
    .stack-list { list-style: none; display: grid; gap: var(--space-3); }
    .stack-list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--text-secondary); }
    .stack-list svg { flex: none; margin-top: 2px; color: var(--success); }
    /* Faux screenshot panel — swap with a real <img> of the extension anytime */
    .shot { border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-main); padding: var(--space-4); box-shadow: var(--shadow-md); }
    .shot-bar { display: flex; gap: var(--space-2); padding-bottom: var(--space-3); }
    .shot-bar i { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--border-color); }
    .shot-row {
      display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
      background: var(--bg-container); border: 1px solid var(--border-color);
      border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
      margin-bottom: var(--space-3); font-size: var(--fs-sm);
    }
    .shot-row:last-child { margin-bottom: 0; }
    .shot-row small { display: block; color: var(--text-muted); font-size: var(--fs-xs); }
    .shot-row .mono { font-family: var(--font-mono); font-size: var(--fs-xs); }
    .shot-blur { filter: blur(4px); user-select: none; }
    @media (max-width: 900px) {
      .stack-card { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-6); }
    }

    /* ============ SENIOR POLISH ============ */
    /* Skip link (keyboard users) */
    .skip-link {
      position: absolute; left: var(--space-4); top: -60px; z-index: 300;
      background: var(--accent); color: var(--text-inverse);
      padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
      font-weight: var(--fw-semibold); font-size: var(--fs-sm);
      transition: top var(--duration-fast) var(--ease-standard);
    }
    .skip-link:focus { top: var(--space-4); color: var(--text-inverse); }
    /* Reading progress bar */
    .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 400; background: linear-gradient(90deg, #065f46, #10b981); }
    /* Header elevation on scroll + active section in nav */
    .site-header { transition: box-shadow var(--duration-fast) var(--ease-standard); }
    .site-header.scrolled { box-shadow: var(--shadow-md); }
    .nav-links a { position: relative; }
    .nav-links a.active { color: var(--accent); font-weight: var(--fw-semibold); }
    .nav-links a.active::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
      background: linear-gradient(90deg, #065f46, #10b981); border-radius: var(--radius-full);
    }
    /* Pricing value anchoring */
    .save-badge {
      display: inline-block; font-style: normal; font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-bold);
      color: var(--success); background: var(--success-bg);
      padding: 1px var(--space-2); border-radius: var(--radius-full); margin-left: var(--space-2); vertical-align: middle;
    }
    .per-month { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-1); }
    /* Step flow connectors (desktop) */
    @media (min-width: 1025px) {
      .step { position: relative; }
      .step:not(:last-child)::after {
        content: ''; position: absolute; top: 34px; right: calc(-1 * var(--space-5));
        width: var(--space-5); border-top: 2px dashed var(--accent-300);
      }
    }
    /* Icon micro-interaction inside cards */
    .card .icon-badge, .step .icon-badge { transition: transform var(--duration-fast) var(--ease-bounce); }
    .card:hover .icon-badge { transform: scale(1.08) rotate(-4deg); }
    /* Back to top */
    .to-top {
      position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 150;
      width: 44px; height: 44px; border-radius: var(--radius-full);
      border: 1px solid var(--border-color); background: var(--bg-container); color: var(--accent);
      box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none; transform: translateY(8px);
      transition: all var(--duration-fast) var(--ease-standard);
    }
    .to-top.show { opacity: 1; pointer-events: auto; transform: none; }
    .to-top:hover { border-color: var(--accent-300); box-shadow: var(--shadow-glow-accent); }
    /* Mobile sticky conversion bar */
    .mobile-cta { position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 150; display: none; }
    @media (max-width: 768px) {
      .mobile-cta { display: block; transform: translateY(130%); transition: transform var(--duration-normal) var(--ease-out-spring); }
      .mobile-cta.show { transform: none; }
      .to-top { bottom: 88px; }
    }
    /* Footer trust line */
    .footer-trust { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--text-muted); }
    .footer-trust svg { color: var(--success); flex: none; }

    /* ============ MOTION & A11Y ============ */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
      html { scroll-behavior: auto; }
    }

    /* ============ RESPONSIVE ============ */
    @media (max-width: 1024px) {
      .hero-inner { grid-template-columns: 1fr; }
      .grid-4 { grid-template-columns: repeat(2, 1fr); }
      .grid-3 { grid-template-columns: repeat(2, 1fr); }
      .showcase { grid-template-columns: 1fr; }
      .steps { grid-template-columns: repeat(2, 1fr); }
      .pricing-grid { grid-template-columns: repeat(2, 1fr); }
      .char-grid { grid-template-columns: repeat(2, 1fr); }
      .support-inner { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 768px) {
      .site-header .menu { display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: var(--space-4);
        background: var(--bg-container); border-bottom: 1px solid var(--border-color);
        padding: var(--space-6); box-shadow: var(--shadow-lg); }
      .site-header .menu.active { display: flex; }
      .nav-links, .nav-cta .btn-ghost { display: none; }
      .nav-toggle, .menu-toggle { display: block; }
      .nav-links.open,
      .menu.active .nav-links {
        display: grid; gap: var(--space-5);
      }
      .menu.active .nav-cta { display: flex; justify-content: center; padding-top: var(--space-2); }
      .hero-inner { gap: var(--space-8); }
      .chat-mock { margin: var(--space-6) auto 0; }
      .float-chip.tl { left: 0; }
      .float-chip.br { right: 0; }
      .pricing-grid, .grid-4, .grid-3, .steps, .char-grid { grid-template-columns: 1fr; }
      .support-inner { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
      .section-title { font-size: var(--fs-2xl); }
    }

/* ============ APP EXTENSIONS (checkout, auth, dashboard) ============ */
.ps-page { min-height: 100vh; }
.ps-auth-wrap { min-height: calc(100vh - 80px); display: flex; align-items: center; justify-content: center; padding: var(--space-8) var(--space-4); }
.ps-auth-card, .ps-checkout-card, .ps-form-card {
  width: 100%; max-width: 520px;
  background: var(--bg-container); border: 1px solid var(--border-color);
  border-radius: var(--radius-2xl); padding: var(--space-8);
  box-shadow: var(--shadow-lg);
}
.ps-checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); max-width: 960px; margin: 0 auto; }
.ps-field { margin-bottom: var(--space-5); }
.ps-field label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); margin-bottom: var(--space-2); }
.ps-field input[type="text"], .ps-field input[type="email"], .ps-field input[type="password"], .ps-field input[type="number"], .ps-field input[type="tel"], .ps-field select, .ps-field textarea,
.form-control {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); background: var(--bg-container);
  color: var(--text-primary); font-family: var(--font-main); font-size: var(--fs-base);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.ps-field input:focus, .ps-field select:focus, .ps-field textarea:focus, .form-control:focus {
  outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.alert-success, .col-md-12.alert-success { background: var(--success-bg); color: var(--accent-700); border: 1px solid var(--accent-100); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); }
.alert-danger, .col-md-12.alert-danger { background: var(--error-bg); color: var(--error); border: 1px solid rgba(239,68,68,0.2); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); }
.ps-table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-container); }
.ps-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ps-table th, .ps-table td { padding: var(--space-4); border-bottom: 1px solid var(--border-color); text-align: left; }
.ps-table th { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); background: var(--bg-main); }
.payment-card { background: var(--bg-container); border: 2px solid var(--border-color); border-radius: var(--radius-xl); padding: var(--space-5); cursor: pointer; transition: all var(--duration-fast) var(--ease-standard); }
.payment-card:hover, .payment-card[aria-checked="true"] { border-color: var(--accent-500); box-shadow: var(--shadow-glow-accent); }
@media (max-width: 900px) { .ps-checkout-grid { grid-template-columns: 1fr; } }

/* ============ POLICY / STATIC PAGES ============ */
.ps-policy-section { padding: var(--space-12) 0; }
.ps-policy-card {
  max-width: 820px; margin: 0 auto;
  background: var(--bg-container); border: 1px solid var(--border-color);
  border-radius: var(--radius-2xl); padding: var(--space-10);
  box-shadow: var(--shadow-lg);
}
.ps-policy-card h1 { font-size: var(--fs-2xl); margin-bottom: var(--space-3); }
.ps-policy-card .last-updated { color: var(--text-muted); font-style: italic; margin-bottom: var(--space-8); font-size: var(--fs-sm); }
.ps-policy-card .policy-text p, .ps-policy-card .policy-text li { margin-bottom: var(--space-5); line-height: var(--lh-normal); color: var(--text-secondary); }
.ps-policy-card .policy-text .section-number { font-weight: var(--fw-semibold); color: var(--text-primary); margin-top: var(--space-8); margin-bottom: var(--space-2); }
.ps-error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-8); }
.ps-error-card { max-width: 480px; background: var(--bg-container); border: 1px solid var(--border-color); border-radius: var(--radius-2xl); padding: var(--space-10); box-shadow: var(--shadow-lg); }
.ps-activate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-8); }
.ps-activate-card { background: var(--bg-container); border: 1px solid var(--border-color); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-sm); min-height: 320px; display: flex; flex-direction: column; }
.ps-activate-card img { margin-top: var(--space-4); border-radius: var(--radius-md); max-width: 100%; }
@media (max-width: 900px) { .ps-activate-grid { grid-template-columns: 1fr; } }

/* ============ CHECKOUT (getproversion) ============ */
.ps-checkout-wrap { padding: var(--space-8) 0 var(--space-12); }
.ps-checkout-container { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-4); }
.ps-checkout-header { text-align: center; margin-bottom: var(--space-8); }
.ps-checkout-header h2 { font-size: var(--fs-2xl); margin: 0; }
.ps-checkout-form-card {
  background: var(--bg-container); border: 1px solid var(--border-color);
  border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-sm); margin-bottom: var(--space-6);
}
.ps-checkout-form-card h3 { font-size: var(--fs-lg); margin: 0 0 var(--space-5); }
.ps-order-summary {
  background: var(--bg-container); border: 1px solid var(--border-color);
  border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-sm);
  position: sticky; top: calc(80px + var(--space-4));
}
.ps-order-summary h3 { font-size: var(--fs-lg); margin: 0 0 var(--space-5); }
.ps-price-row { display: flex; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); font-size: var(--fs-sm); color: var(--text-secondary); }
.ps-price-row strong { color: var(--text-primary); }
.ps-terms-text { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-5); line-height: var(--lh-normal); }
.ps-terms-text a { color: var(--accent-600); text-decoration: none; }
.order-btn, .continue-btn {
  width: 100%; margin-top: var(--space-4); padding: 14px 20px;
  background: var(--accent-500); color: #fff; border: none; border-radius: var(--radius-md);
  font-weight: var(--fw-semibold); font-size: var(--fs-base); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.order-btn:hover, .continue-btn:hover { background: var(--accent-600); }
.order-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.form-label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); margin-bottom: var(--space-2); }
.form-select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); background: var(--bg-container); color: var(--text-primary);
  font-family: var(--font-main); font-size: var(--fs-base);
}
.password-field-wrapper { position: relative; }
.password-field-wrapper .form-control { padding-right: 40px; }
.password-toggle-btn {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; line-height: 0;
}
.password-toggle-btn:hover { color: var(--accent-600); }
.password-toggle-btn svg { width: 16px; height: 16px; display: block; }
.ps-auth-card h1, .ps-auth-card h2 { font-size: var(--fs-xl); text-align: center; margin-bottom: var(--space-6); }
.ps-auth-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-5); }
.ps-auth-actions a { font-size: var(--fs-sm); color: var(--accent-600); text-decoration: none; }
.ps-auth-submit { padding: 12px 24px; background: var(--accent-500); color: #fff; border: none; border-radius: var(--radius-md); font-weight: var(--fw-semibold); cursor: pointer; }
.ps-auth-submit:hover { background: var(--accent-600); }
.ps-renew-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-8); background: var(--bg-main); }
.ps-renew-card { text-align: center; background: var(--bg-container); border: 1px solid var(--border-color); border-radius: var(--radius-xl); padding: var(--space-10); box-shadow: var(--shadow-lg); }
.ps-renew-card img { max-width: 80px; margin-bottom: var(--space-4); }

/* ============ PAYMENT (checkout.php) ============ */
.ps-payment-wrap { max-width: 980px; margin: var(--space-6) auto; padding: 0 var(--space-4); }
.ps-payment-card {
  max-width: 920px; margin: 0 auto; padding: var(--space-6);
  border-radius: var(--radius-xl); background: var(--bg-container);
  box-shadow: var(--shadow-lg); border: 1px solid var(--border-color);
}
.ps-payment-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--accent-600); margin: 0 0 var(--space-2); }
.ps-payment-sub { margin: 0 0 var(--space-6); color: var(--text-muted); font-size: var(--fs-sm); }
.ps-payment-grid { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-5); align-items: start; }
.ps-order-card {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--border-color);
  background: var(--bg-main); box-shadow: var(--shadow-sm);
}
.ps-order-card h3 { margin: 0; font-size: var(--fs-lg); }
.ps-order-card p { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.ps-order-price { font-weight: var(--fw-bold); color: var(--accent-600); font-size: var(--fs-2xl); text-align: right; }
.ps-payment-section { margin-top: var(--space-5); }
.ps-payment-section-title { font-weight: var(--fw-bold); margin-bottom: var(--space-3); }
.ps-payment-methods { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.ps-payment-methods .payment-card {
  flex: 1 1 160px; min-width: 140px; display: flex; align-items: center; gap: var(--space-3);
}
.ps-payment-methods .payment-card:hover { transform: translateY(-2px); }
.payment-card.selected, .payment-card[aria-checked="true"] { border-color: var(--accent-500); box-shadow: var(--shadow-glow-accent); }
.payment-card.stripe-card, .payment-card.pix-card, .payment-card.paypal-card { justify-content: center; align-items: center; text-align: center; flex-direction: column; }
.payment-card.stripe-card .pay-icon, .payment-card.pix-card .pay-icon { width: 100%; height: 34px; justify-content: center; }
.payment-card.paypal-card #paypal-button-container {
  width: 100%; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.payment-card.paypal-card #paypal-button-container > div {
  width: 100% !important; max-width: 100% !important; margin: 0 auto !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
}
.payment-card.stripe-card .pay-icon img { width: 90px !important; height: 45px !important; object-fit: contain; }
.payment-card.pix-card .pay-icon img { width: 120px !important; height: 45px !important; object-fit: contain; }
.pay-icon { width: 44px; height: 34px; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); }
.ps-summary-panel {
  padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--border-color); background: var(--bg-main);
}
.ps-summary-panel h4 { margin: 0 0 var(--space-4); font-size: var(--fs-base); }
.ps-summary-line { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) 0; border-bottom: 1px dashed var(--border-color); font-size: var(--fs-sm); }
.ps-summary-line:last-child { border-bottom: 0; }
.ps-summary-total { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-4); margin-top: var(--space-3); border-top: 1px dashed var(--border-color); font-weight: var(--fw-bold); }
.ps-summary-total .price { color: var(--accent-600); font-size: var(--fs-xl); }
.ps-muted { color: var(--text-muted); font-size: var(--fs-sm); }
#overlay {
  display: none; position: fixed; justify-content: center; align-items: center;
  top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 9999;
}
#overlaytext { color: #fff; font-size: var(--fs-xl); text-align: center; }
@media (max-width: 980px) { .ps-payment-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .ps-order-price { font-size: var(--fs-xl); } }

/* License duplicate modal */
@keyframes ps-bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } 60% { transform: translateY(-3px); } }
@keyframes ps-pulse-soft { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.2); } 70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } }
.key-container.active-copy { background-color: var(--success-bg) !important; border-color: var(--accent-600) !important; border-style: solid !important; transform: scale(0.96); animation: none !important; }
.key-container.active-copy .tap-hint { color: var(--accent-700) !important; }

/* Memberarea dashboard styles live in memberarea/css/ps-dash.css */