/* ── CSS Variables ──────────────────────────── */
        :root{
            --green:      #2ecc71;
            --green-dark: #27ae60;
            --green-pale: #eafaf1;
            --navy:       #1a1a2e;
            --text:       #1e2433;
            --muted:      #6b7280;
            --border:     #e5e9f0;
            --bg:         #f7f9fc;
            --white:      #ffffff;
            --radius:     12px;
            --radius-lg:  20px;
            --shadow-sm:  0 1px 4px rgba(0,0,0,.06);
            --shadow:     0 4px 20px rgba(0,0,0,.08);
        }

        /* ── Reset ──────────────────────────────────── */
        *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}
        img,svg{display:block}
        body{
            font-family:'DM Sans',sans-serif;
            background:var(--bg);
            color:var(--text);
            line-height:1.7;
            font-size:1rem;
            -webkit-font-smoothing:antialiased;
        }

        /* ══════════════════════════════════════════════
           HERO  — layered background image
        ══════════════════════════════════════════════ */
        .policy-hero{
            position:relative;
            padding:90px 0 72px;
            overflow:hidden;
            isolation:isolate;
        }

        /* Layer 1 — Unsplash tech photo */
        .policy-hero::before{
            content:'';
            position:absolute;inset:0;
            background-image:url('../../images/HP 24 Inch Edge-to-Edge Monitor.png');
            background-size:cover;
            background-position:center 40%;
            background-repeat:no-repeat;
            z-index:-3;
            transition:opacity .4s;
        }

        /* Layer 2 — dark gradient overlay (readability) */
        .policy-hero-overlay{
            position:absolute;inset:0;
            background:
                linear-gradient(135deg,
                    rgba(14,14,34,.93) 0%,
                    rgba(18,26,44,.88) 55%,
                    rgba(14,14,34,.80) 100%
                );
            z-index:-2;
        }

        /* Layer 3 — green radial glows */
        .hero-glow{
            position:absolute;inset:0;
            background:
                radial-gradient(ellipse 55% 70% at 8%  55%, rgba(46,204,113,.20) 0%, transparent 60%),
                radial-gradient(ellipse 35% 50% at 92% 15%, rgba(46,204,113,.11) 0%, transparent 55%);
            z-index:-1;
            pointer-events:none;
        }

        /* Layer 4 — subtle moving grid */
        .hero-grid{
            position:absolute;inset:0;
            background-image:
                linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
            background-size:44px 44px;
            z-index:-1;
            pointer-events:none;
            animation:gridMove 24s linear infinite;
        }
        @keyframes gridMove{
            from{background-position:0 0}
            to{background-position:44px 44px}
        }

        /* Top scan-line pulse */
        .hero-scanline{
            position:absolute;top:0;left:0;right:0;height:3px;
            background:linear-gradient(90deg,transparent,var(--green),transparent);
            z-index:1;
            animation:scanPulse 3s ease-in-out infinite;
        }
        @keyframes scanPulse{0%,100%{opacity:.35}50%{opacity:1}}

        /* ── Hero inner ── */
        .hero-inner{
            position:relative;z-index:2;
            max-width:900px;margin:0 auto;padding:0 1.5rem;
            text-align:center;
        }

        .hero-tag{
            display:inline-flex;align-items:center;gap:7px;
            background:rgba(46,204,113,.14);
            border:1px solid rgba(46,204,113,.32);
            color:var(--green);
            font-size:.78rem;font-weight:700;
            letter-spacing:.1em;text-transform:uppercase;
            padding:6px 16px;border-radius:50px;
            margin-bottom:1.25rem;
            backdrop-filter:blur(8px);
            animation:fadeDown .55s ease both;
        }
        .hero-tag-dot{
            width:6px;height:6px;border-radius:50%;
            background:var(--green);
            box-shadow:0 0 6px var(--green);
            animation:blink 2s ease-in-out infinite;
        }
        @keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}

        .hero-title{
            font-family:'Syne',sans-serif;
            font-size:clamp(2.1rem,5.5vw,3.4rem);
            font-weight:800;color:#fff;line-height:1.12;
            margin-bottom:.9rem;
            text-shadow:0 2px 24px rgba(0,0,0,.45);
            animation:fadeDown .6s .08s ease both;
        }
        .hero-title .accent{color:var(--green)}

        .hero-sub{
            color:rgba(255,255,255,.68);font-size:1.05rem;
            max-width:545px;margin:0 auto 2rem;
            text-shadow:0 1px 10px rgba(0,0,0,.3);
            animation:fadeDown .6s .18s ease both;
        }

        .hero-stats{
            display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;
            animation:fadeDown .6s .28s ease both;
        }
        .stat-chip{
            display:flex;align-items:center;gap:8px;
            background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.15);
            border-radius:50px;padding:8px 16px;
            color:#fff;font-size:.84rem;font-weight:500;
            backdrop-filter:blur(10px);
            transition:background .2s,border-color .2s,transform .2s;
            cursor:default;
        }
        .stat-chip:hover{
            background:rgba(46,204,113,.18);
            border-color:rgba(46,204,113,.4);
            transform:translateY(-2px);
        }
        .stat-chip .dot{
            width:7px;height:7px;border-radius:50%;
            background:var(--green);flex-shrink:0;
            box-shadow:0 0 7px var(--green);
        }

        @keyframes fadeDown{
            from{opacity:0;transform:translateY(-14px)}
            to{opacity:1;transform:none}
        }

        /* ── Breadcrumb ─────────────────────────────── */
        .breadcrumb-bar{background:var(--white);border-bottom:1px solid var(--border);padding:.6rem 0}
        .breadcrumb{
            max-width:1100px;margin:0 auto;padding:0 1.5rem;
            display:flex;align-items:center;gap:6px;
            font-size:.8rem;color:var(--muted);
        }
        .breadcrumb a{color:var(--muted);text-decoration:none;transition:color .18s}
        .breadcrumb a:hover{color:var(--green-dark)}
        .breadcrumb-sep{opacity:.4;font-size:.7rem}
        .breadcrumb-current{color:var(--text);font-weight:500}

        /* ── Page layout ────────────────────────────── */
        .page-wrap{
            max-width:1100px;margin:0 auto;
            padding:3rem 1.5rem 5rem;
            display:grid;grid-template-columns:1fr 300px;
            gap:2rem;align-items:start;
        }
        .policy-content{min-width:0}

        .policy-meta{
            display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
            margin-bottom:2rem;padding-bottom:1.25rem;
            border-bottom:1px solid var(--border);
            font-size:.82rem;color:var(--muted);
        }
        .policy-meta span{display:flex;align-items:center;gap:5px}

        /* ── Section cards ──────────────────────────── */
        .policy-section{
            background:var(--white);border-radius:var(--radius-lg);
            border:1px solid var(--border);box-shadow:var(--shadow-sm);
            margin-bottom:1.5rem;overflow:hidden;
            transition:box-shadow .2s,transform .2s;
        }
        .policy-section:hover{box-shadow:var(--shadow);transform:translateY(-1px)}

        .section-head{
            display:flex;align-items:center;gap:14px;
            padding:1.25rem 1.5rem;
            border-bottom:1px solid var(--border);
            background:#fdfdfe;
        }
        .section-icon{
            width:42px;height:42px;border-radius:10px;
            background:var(--green-pale);
            display:flex;align-items:center;justify-content:center;
            font-size:1.2rem;flex-shrink:0;
        }
        .section-title{font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:700;color:var(--navy)}
        .section-number{
            margin-left:auto;font-size:.72rem;font-weight:700;
            color:var(--green);background:var(--green-pale);
            border:1px solid rgba(46,204,113,.25);
            padding:3px 9px;border-radius:50px;letter-spacing:.05em;
        }

        .section-body{padding:1.5rem}
        .section-body p{color:#3d4556;margin-bottom:1rem;line-height:1.75}
        .section-body p:last-child{margin-bottom:0}

        /* info grid */
        .info-grid{
            display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
            gap:1rem;margin-top:1.25rem;
        }
        .info-tile{
            background:var(--bg);border:1px solid var(--border);
            border-radius:var(--radius);padding:1rem 1.1rem;position:relative;
        }
        .info-tile::before{
            content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
            background:var(--green);border-radius:3px 0 0 3px;
        }
        .info-tile-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.3rem}
        .info-tile-value{font-size:1.05rem;font-weight:700;color:var(--navy);font-family:'Syne',sans-serif}
        .info-tile-sub{font-size:.75rem;color:var(--muted);margin-top:2px}

        /* steps */
        .steps{counter-reset:step;list-style:none;display:flex;flex-direction:column;gap:.85rem}
        .steps li{counter-increment:step;display:flex;gap:14px;align-items:flex-start}
        .steps li::before{
            content:counter(step);flex-shrink:0;
            width:28px;height:28px;border-radius:50%;
            background:var(--navy);color:var(--green);
            font-size:.78rem;font-weight:800;font-family:'Syne',sans-serif;
            display:flex;align-items:center;justify-content:center;margin-top:2px;
        }
        .steps li span{color:#3d4556;line-height:1.65}
        .steps li strong{color:var(--navy)}

        /* check / cross lists */
        .check-list,.cross-list{list-style:none;display:flex;flex-direction:column;gap:.6rem}
        .check-list li,.cross-list li{display:flex;gap:10px;align-items:flex-start;color:#3d4556}
        .check-list li::before{
            content:'✓';flex-shrink:0;width:20px;height:20px;border-radius:50%;
            background:var(--green);color:#fff;font-size:.65rem;font-weight:800;
            display:flex;align-items:center;justify-content:center;margin-top:3px;
        }
        .cross-list li::before{
            content:'✕';flex-shrink:0;width:20px;height:20px;border-radius:50%;
            background:#fee2e2;color:#dc2626;font-size:.6rem;font-weight:800;
            display:flex;align-items:center;justify-content:center;margin-top:3px;
        }

        /* split cols */
        .split-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:.5rem}
        .split-box{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem}
        .split-box-title{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.75rem;display:flex;align-items:center;gap:6px}
        .split-box-title.green{color:#16a34a}
        .split-box-title.red{color:#dc2626}

        /* method badges */
        .method-grid{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.75rem}
        .method-badge{display:flex;align-items:center;gap:8px;padding:.6rem 1.1rem;border-radius:50px;font-size:.85rem;font-weight:600;border:1.5px solid}
        .method-badge.active{background:var(--green-pale);border-color:rgba(46,204,113,.4);color:#15803d}
        .method-badge.inactive{background:#f9fafb;border-color:#e5e7eb;color:#9ca3af;text-decoration:line-through}

        /* fee highlight */
        .fee-highlight{
            display:flex;align-items:center;gap:12px;
            background:var(--green-pale);border:1px solid rgba(46,204,113,.3);
            border-radius:var(--radius);padding:1rem 1.25rem;margin-top:.75rem;
        }
        .fee-icon{font-size:1.6rem;flex-shrink:0}
        .fee-text strong{font-family:'Syne',sans-serif;font-size:1rem;color:#15803d}
        .fee-text p{font-size:.85rem;color:#3d4556;margin:0}

        /* alert boxes */
        .alert-box{display:flex;gap:12px;padding:1rem 1.25rem;border-radius:var(--radius);margin-top:1.25rem;font-size:.875rem}
        .alert-box.info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af}
        .alert-box.warn{background:#fffbeb;border:1px solid #fde68a;color:#92400e}
        .alert-box-icon{font-size:1.1rem;flex-shrink:0;margin-top:1px}
        .alert-box p{margin:0;line-height:1.6}

        /* contact card */
        .contact-card{background:var(--navy);border-radius:var(--radius-lg);padding:1.5rem;color:#fff;margin-top:1.5rem}
        .contact-card h3{font-family:'Syne',sans-serif;font-size:1.1rem;margin-bottom:.9rem;color:#fff}
        .contact-methods{display:flex;flex-direction:column;gap:.65rem}
        .contact-row{display:flex;align-items:center;gap:10px;font-size:.875rem;color:rgba(255,255,255,.8)}
        .contact-row a{color:var(--green);text-decoration:none;font-weight:500}
        .contact-row a:hover{text-decoration:underline}
        .contact-icon{width:32px;height:32px;background:rgba(46,204,113,.15);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}

        /* ── Sidebar ────────────────────────────────── */
        .policy-sidebar{position:sticky;top:1.5rem}

        .toc-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:1.25rem}
        .toc-header{padding:1rem 1.25rem;border-bottom:1px solid var(--border);font-family:'Syne',sans-serif;font-size:.9rem;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px}
        .toc-list{list-style:none;padding:.75rem 0}
        .toc-list li a{
            display:flex;align-items:center;gap:10px;
            padding:.5rem 1.25rem;font-size:.845rem;color:var(--muted);
            text-decoration:none;transition:all .18s;
            border-left:3px solid transparent;
        }
        .toc-list li a:hover,.toc-list li a.active{color:var(--green-dark);background:var(--green-pale);border-left-color:var(--green)}
        .toc-list li a span{font-size:.9rem}

        .summary-card{background:var(--navy);border-radius:var(--radius-lg);padding:1.25rem;color:#fff;margin-bottom:1.25rem}
        .summary-card h3{font-family:'Syne',sans-serif;font-size:.9rem;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.07em;margin-bottom:1rem}
        .summary-row{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:.82rem}
        .summary-row:last-child{border-bottom:none;padding-bottom:0}
        .summary-key{color:rgba(255,255,255,.55);flex-shrink:0}
        .summary-val{color:#fff;font-weight:600;text-align:right;font-size:.82rem}
        .summary-val.green{color:var(--green)}

        .help-card{background:linear-gradient(135deg,var(--green-dark),#1db954);border-radius:var(--radius-lg);padding:1.25rem;color:#fff;text-align:center}
        .help-card .help-icon{font-size:2rem;margin-bottom:.5rem}
        .help-card h3{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;margin-bottom:.4rem}
        .help-card p{font-size:.8rem;opacity:.9;margin-bottom:1rem}
        .help-btn{display:inline-block;background:#fff;color:var(--green-dark);font-weight:700;font-size:.82rem;padding:.55rem 1.25rem;border-radius:50px;text-decoration:none;transition:transform .18s,box-shadow .18s}
        .help-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.2)}

        /* ── Scroll reveal ──────────────────────────── */
        .reveal{opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .5s ease}
        .reveal.visible{opacity:1;transform:none}

        /* ── Responsive ─────────────────────────────── */
        @media(max-width:900px){
            .page-wrap{grid-template-columns:1fr;padding:2rem 1.25rem 3.5rem}
            .policy-sidebar{position:static;order:-1}
            .toc-card{display:none}
        }
        @media(max-width:640px){
            .policy-hero{padding:62px 0 52px}
            .hero-stats{gap:.55rem}
            .stat-chip{font-size:.78rem;padding:6px 12px}
            .split-cols{grid-template-columns:1fr}
            .info-grid{grid-template-columns:1fr 1fr}
            .section-head{padding:1rem 1.1rem}
            .section-body{padding:1.1rem}
        }
        @media(max-width:400px){.info-grid{grid-template-columns:1fr}}

        /* ── Print ──────────────────────────────────── */
        @media print{
            .policy-hero::before{display:none}
            .policy-sidebar,.breadcrumb-bar{display:none}
            .page-wrap{display:block;max-width:100%;padding:1rem}
            .policy-section{break-inside:avoid;box-shadow:none;border:1px solid #ccc}
        }

       
    /* FOOTER */
    footer { background:#080808; color:rgba(255,255,255,0.55); padding:70px 5% 36px; }
    .footer-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:50px; margin-bottom:50px; }
    .footer-brand p { font-size:0.83rem; line-height:1.8; margin-top:14px; color:rgba(255,255,255,0.42); }
    footer h4 { font-family:'Syne',sans-serif; font-size:0.75rem; color:rgba(255,255,255,0.3); letter-spacing:3px; text-transform:uppercase; margin-bottom:18px; }
    footer ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
    footer ul li a { color:rgba(255,255,255,0.5); text-decoration:none; font-size:0.85rem; transition:color 0.2s; }
    footer ul li a:hover { color:var(--green); }
    .footer-contact-item { display:flex; gap:10px; margin-bottom:11px; font-size:0.85rem; }
    .footer-contact-item .icon { color:var(--green); flex-shrink:0; }
    .footer-bottom {
      max-width:1200px; margin:0 auto; padding-top:34px;
      border-top:1px solid rgba(255,255,255,0.06);
      display:flex; justify-content:space-between; align-items:center; font-size:0.78rem;
      flex-wrap: wrap; gap: 10px;
    }
    .footer-bottom a { color:var(--green); text-decoration:none; }