:root {
      --brand-primary: #5eaaa8;
      --brand-primary-dark: #3d8b89;
      --brand-navy: #2c4a7c;
      --brand-blue: #4a7fc1;
      --text-primary: #2d3748;
      --text-muted: #718096;
      --bg-light: #f7f9fc;
      --border-light: #e8edf3;
      --radius-card: 14px;
      --radius-img: 20px;
      /* Pastel palette */
      --pastel-teal: #e0f5f4;
      --pastel-blue: #e8f0fb;
      --pastel-lavender: #ede9f8;
      --pastel-mint: #e6f7f0;
      --pastel-peach: #fdf0e8;
      --pastel-rose: #fce8ec;
      --pastel-yellow: #fdf6e3;
    }

    /* ── Global shadow reset ────────────────────── */
    *, *::before, *::after { box-sizing: border-box; box-shadow: none !important; }
    body {
      font-family: 'Inter', sans-serif;
      color: var(--text-primary);
      background: #fff;
      font-size: 1rem;
      line-height: 1.7;
    }

    /* ── Navbar ─────────────────────────────────── */
    .site-navbar {
      background: #fafcff;
      border-bottom: 1px solid var(--border-light);
      padding: .75rem 0;
      /* Sticky only on mobile */
    }
    @media (max-width: 991px) {
      .site-navbar { position: sticky; top: 0; z-index: 1030; }
    }
    .site-navbar .navbar-brand {
      font-weight: 800;
      font-size: 1rem;
      color: var(--brand-primary-dark);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: .5rem;
      line-height: 1.15;
    }
    .site-navbar .navbar-brand .logo-text {
      display: flex;
      flex-direction: column;
    }
    .site-navbar .navbar-brand .logo-line1 {
      font-size: .95rem;
      font-weight: 800;
      color: var(--brand-navy);
      letter-spacing: -.01em;
    }
    .site-navbar .navbar-brand .logo-line2 {
      font-size: .72rem;
      font-weight: 600;
      color: var(--brand-primary);
      letter-spacing: .02em;
    }
    .site-navbar .nav-link {
      font-size: .9rem;
      font-weight: 500;
      color: var(--text-primary);
      padding: .4rem .75rem;
      border-radius: 8px;
      transition: background .15s, color .15s;
    }
    .site-navbar .nav-link:hover { background: #f0fdfb; color: var(--brand-primary-dark); }
    /* ── Contextual body links ──────────────────── */
    p a { color: var(--brand-primary); text-decoration: none; }
    p a:hover { color: var(--brand-primary-dark); text-decoration: underline; }
    /* ── Content sections: layout & image fix ───── */
    .content-section { padding: 3rem 0; }
    .content-section .row { align-items: flex-start; margin-bottom: 0 !important; padding-bottom: 0 !important; }
    .content-section .row + .row { margin-top: 2rem; }
    .content-section [class*="col-"] > img {
      width: 100%; max-height: 380px;
      border-radius: 16px; object-fit: cover; display: block;
      /* Reserve space before image loads to prevent layout shift */
      aspect-ratio: 4 / 3;
    }
    /* ── Breadcrumb ─────────────────────────────── */
    .dest-breadcrumb {
      background: var(--bg-light);
      border-bottom: 1px solid var(--border-light);
      padding: .6rem 0;
      font-size: .82rem;
    }
    .dest-breadcrumb .breadcrumb { margin: 0; }
    .dest-breadcrumb .breadcrumb-item a {
      color: var(--brand-primary-dark);
      text-decoration: none;
    }
    .dest-breadcrumb .breadcrumb-item a:hover { text-decoration: underline; }
    .dest-breadcrumb .breadcrumb-item.active { color: var(--text-muted); }

    /* ── Hero ───────────────────────────────────── */
    .dest-hero {
      padding: 2.5rem 0 3rem;
    }
    .dest-hero h1 {
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      font-weight: 800;
      line-height: 1.2;
      color: var(--brand-navy);
    }
    .dest-hero .subtitle {
      font-size: 1.1rem;
      color: var(--text-muted);
      max-width: 560px;
    }
    .article-dateline {
      font-size: .82rem;
      color: var(--text-muted);
      opacity: .8;
    }
    .dest-hero-img {
      width: 100%;
      border-radius: var(--radius-img);
      display: block;
      object-fit: cover;
      aspect-ratio: 4 / 3;
    }

    /* ── Label badge ────────────────────────────── */
    .dest-label {
      display: inline-block;
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: var(--brand-primary-dark);
      background: var(--pastel-teal);
      border-radius: 50px;
      padding: .2rem .75rem;
      margin-bottom: .75rem;
    }
    .dest-label-blue {
      color: var(--brand-navy);
      background: var(--pastel-blue);
    }

    /* ── Section label with circle number ──────── */
    .section-badge {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      margin-bottom: .85rem;
    }
    .section-badge .circle-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px; height: 28px;
      border-radius: 50%;
      background: var(--brand-primary);
      color: #fff;
      font-weight: 700;
      font-size: .78rem;
      flex-shrink: 0;
    }
    .section-badge .badge-text {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: var(--brand-primary-dark);
    }
    /* Step-box circle num (smaller, inside card) */
    .step-num-badge {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      margin-bottom: .5rem;
    }
    .step-num-badge .circle-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px; height: 26px;
      border-radius: 50%;
      background: var(--brand-primary);
      color: #fff;
      font-weight: 700;
      font-size: .76rem;
      flex-shrink: 0;
    }

    /* ── Article grid cards ─────────────────────── */
    .article-card {
      background: var(--pastel-blue);
      border: 1.5px solid #d4e3f5;
      border-radius: var(--radius-card);
      padding: 1.4rem;
      height: 100%;
      transition: border-color .18s, background .18s;
      text-decoration: none;
      display: block;
      color: inherit;
      box-shadow: none;
    }
    .article-card:hover {
      background: var(--pastel-teal);
      border-color: #a8d5d3;
      box-shadow: none;
      text-decoration: none;
      color: inherit;
    }
    .article-card .card-icon {
      font-size: 1.6rem;
      color: var(--brand-primary);
      margin-bottom: .75rem;
    }
    .article-card h3 {
      font-size: .95rem;
      font-weight: 700;
      margin-bottom: .4rem;
      color: var(--text-primary);
    }
    .article-card p {
      font-size: .83rem;
      color: var(--text-muted);
      margin: 0;
      line-height: 1.5;
    }

    /* ── Content sections ───────────────────────── */
    .content-section { padding: 3rem 0; }
    .content-section h2 {
      font-size: clamp(1.25rem, 2.5vw, 1.65rem);
      font-weight: 700;
      color: var(--brand-navy);
      margin-bottom: 1rem;
    }
    .content-section p { color: #374151; }
    .content-section ul li { color: #374151; margin-bottom: .4rem; }
    .content-section .section-img {
      width: 100%;
      border-radius: var(--radius-img);
      object-fit: cover;
    }

    /* ── Step boxes ─────────────────────────────── */
    .step-box-card {
      background: var(--pastel-mint);
      border: 1.5px solid #b8e6d3;
      border-radius: var(--radius-card);
      overflow: hidden;
      height: 100%;
      box-shadow: none;
    }
    .step-box-img-wrap {
      height: 130px;
      overflow: hidden;
      background: var(--pastel-blue);
    }
    .step-box-img-wrap img {
      width: 100%; height: 100%;
      object-fit: cover;
      transform: scale(1.15);
    }
    .step-box-body { padding: 1.25rem; }
    .step-box-body h3 { font-size: 1rem; font-weight: 700; margin-bottom: .4rem; }
    .step-box-body p { font-size: .85rem; color: var(--text-muted); }

    /* ── CTA banner ─────────────────────────────── */
    .dest-refund-banner {
      display: flex;
      border-radius: 16px;
      border: 1.5px solid #c8e6e4;
      overflow: hidden;
      background: linear-gradient(135deg, var(--pastel-teal) 0%, var(--pastel-blue) 100%);
      margin: 3rem 0;
      min-height: 200px;
      box-shadow: none;
    }
    .dest-refund-banner-img {
      width: 260px;
      min-width: 260px;
      overflow: hidden;
      border-radius: 0;
      flex-shrink: 0;
    }
    .dest-refund-banner-img img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 0;
    }
    .dest-refund-banner-body {
      padding: 2rem 2rem 2rem 2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .dest-refund-banner-body h3 {
      font-size: 1.3rem;
      font-weight: 800;
      color: var(--brand-navy);
      margin-bottom: .5rem;
    }
    .dest-refund-banner-body p { color: #374151; font-size: .95rem; margin-bottom: 1rem; }
    .btn-brand-primary {
      background: var(--brand-primary);
      color: #fff;
      border: none;
      border-radius: 50px;
      padding: .55rem 1.4rem;
      font-weight: 600;
      font-size: .9rem;
      text-decoration: none;
      display: inline-block;
      transition: background .15s;
    }
    .btn-brand-primary:hover { background: var(--brand-primary-dark); color: #fff; }
    .btn-brand-outline {
      background: #fff;
      color: var(--brand-primary-dark);
      border: 1.5px solid var(--brand-primary);
      border-radius: 50px;
      padding: .55rem 1.4rem;
      font-weight: 600;
      font-size: .9rem;
      text-decoration: none;
      display: inline-block;
      transition: background .15s;
    }
    .btn-brand-outline:hover { background: #f0fdfb; }

    /* ── Pillar hero gradients ──────────────────── */
    .hero-vpn      { background: linear-gradient(135deg, var(--pastel-blue)     0%, var(--pastel-lavender) 100%); }
    .hero-esim     { background: linear-gradient(135deg, var(--pastel-teal)     0%, var(--pastel-mint)     100%); }
    .hero-password { background: linear-gradient(135deg, var(--pastel-peach)    0%, var(--pastel-rose)     100%); }
    .hero-phishing { background: linear-gradient(135deg, var(--pastel-rose)     0%, var(--pastel-peach)    100%); }
    .hero-2fa      { background: linear-gradient(135deg, var(--pastel-lavender) 0%, var(--pastel-blue)     100%); }
    .hero-wifi     { background: linear-gradient(135deg, var(--pastel-teal)     0%, var(--pastel-blue)     100%); }
    .hero-browsing { background: linear-gradient(135deg, var(--pastel-blue)     0%, var(--pastel-teal)     100%); }
    .hero-proxy    { background: linear-gradient(135deg, var(--pastel-blue)     0%, var(--pastel-lavender) 100%); }
    .hero-antivirus{ background: linear-gradient(135deg, var(--pastel-rose)     0%, var(--pastel-peach)    100%); }
    .hero-mobile   { background: linear-gradient(135deg, var(--pastel-lavender) 0%, var(--pastel-teal)     100%); }
    .hero-darkweb  { background: linear-gradient(135deg, #e8eaf6               0%, var(--pastel-lavender) 100%); }
    .hero-finance  { background: linear-gradient(135deg, var(--pastel-peach)    0%, var(--pastel-yellow)   100%); }
    .hero-business { background: linear-gradient(135deg, var(--pastel-blue)     0%, var(--pastel-teal)     100%); }

    /* ── FAQ ────────────────────────────────────── */
    .faq-section .accordion-button:not(.collapsed) {
      background: var(--pastel-blue);
      color: var(--brand-navy);
      box-shadow: none;
    }
    .faq-section .accordion-button:focus { box-shadow: none; }
    .faq-section .accordion-item { box-shadow: none; }

    /* ── Myths/Facts list ───────────────────────── */
    .myth-fact-item {
      padding: 2rem 0;
      border-bottom: 1px solid rgba(0,0,0,.07);
    }
    .myth-fact-item:last-child { border-bottom: none; }
    .myth-num-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px; height: 32px;
      border-radius: 8px;
      font-weight: 700;
      font-size: .85rem;
      flex-shrink: 0;
    }
    .myth-badge { background: var(--pastel-rose); color: #c0392b; }
    .fact-badge { background: var(--pastel-blue); color: var(--brand-blue); }
    .myth-fact-item .mf-label {
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .myth-fact-item h2 { font-size: 1rem; font-weight: 700; margin: .3rem 0 .6rem; color: var(--text-primary); }

    /* ── Related articles ───────────────────────── */
    .related-card {
      background: var(--pastel-lavender);
      border: 1.5px solid #d4cdf0;
      border-radius: var(--radius-card);
      padding: 1.2rem;
      height: 100%;
      text-decoration: none;
      display: block;
      color: inherit;
      box-shadow: none;
      transition: background .18s, border-color .18s;
    }
    .related-card:hover { background: var(--pastel-blue); border-color: #b8cfe8; box-shadow: none; color: inherit; }
    .related-card .rc-icon { font-size: 1.4rem; color: var(--brand-primary); margin-bottom: .6rem; }
    .related-card h3 { font-size: .9rem; font-weight: 700; margin-bottom: .3rem; }
    .related-card p { font-size: .8rem; color: var(--text-muted); margin: 0; }

    /* ── Footer ─────────────────────────────────── */
    .site-footer {
      background: #0f172a;
      color: #94a3b8;
      padding: 3rem 0 1.5rem;
      margin-top: 0;
      font-size: .88rem;
    }
    .footer-pillar { margin-bottom: 1.75rem; }
    .footer-pillar:last-child { margin-bottom: 0; }
    .site-footer .footer-brand {
      font-size: 1.1rem;
      font-weight: 800;
      color: #fff;
    }
    .site-footer h5 {
      color: #e2e8f0;
      font-size: .9rem;
      font-weight: 700;
      margin-bottom: 1rem;
    }
    .site-footer a { color: #94a3b8; text-decoration: none; display: block; margin-bottom: .4rem; }
    .site-footer a:hover { color: var(--brand-primary); }
    .site-footer .footer-bottom {
      border-top: 1px solid #1e293b;
      margin-top: 2rem;
      padding-top: 1.2rem;
      font-size: .8rem;
      color: #64748b;
    }

    /* ── Utility ────────────────────────────────── */
    .text-brand { color: var(--brand-primary); }
    .text-navy { color: var(--brand-navy); }
    .bg-brand-light { background: #f0fdfb; }
    .pill-cta {
      display: inline-block;
      background: var(--brand-primary);
      color: #fff;
      border-radius: 50px;
      padding: .5rem 1.3rem;
      font-size: .88rem;
      font-weight: 600;
      text-decoration: none;
      transition: background .15s;
    }
    .pill-cta:hover { background: var(--brand-primary-dark); color: #fff; }
    .pill-cta-outline {
      display: inline-block;
      background: transparent;
      color: var(--brand-navy);
      border: 2px solid var(--brand-navy);
      border-radius: 50px;
      padding: .5rem 1.3rem;
      font-size: .88rem;
      font-weight: 600;
      text-decoration: none;
      transition: background .15s;
    }
    .pill-cta-outline:hover { background: var(--brand-navy); color: #fff; }

    /* ── Global breadcrumb bar ──────────────────── */
    .global-breadcrumb {
      background: var(--pastel-blue);
      border-bottom: 1px solid var(--border-light);
      padding: .55rem 0;
      font-size: .8rem;
    }
    .global-breadcrumb .breadcrumb { margin: 0; }
    .global-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }
    .global-breadcrumb .breadcrumb-item a {
      color: var(--brand-primary-dark);
      text-decoration: none;
      font-weight: 500;
    }
    .global-breadcrumb .breadcrumb-item a:hover { text-decoration: underline; }
    .global-breadcrumb .breadcrumb-item.active { color: var(--text-muted); }

    /* ── Language switcher ──────────────────────── */
    .lang-switcher {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      font-size: .78rem;
      font-weight: 600;
    }
    .lang-switcher a {
      color: var(--text-muted);
      text-decoration: none;
      padding: .15rem .35rem;
      border-radius: 4px;
      transition: color .15s;
    }
    .lang-switcher a.lang-active {
      color: var(--brand-primary-dark);
      background: var(--pastel-teal);
    }
    .lang-switcher a:hover { color: var(--brand-primary-dark); }
    .lang-sep { color: var(--border-light); }

    @media (max-width: 767px) {
      .dest-refund-banner { flex-direction: column; }
      .dest-refund-banner-img { width: 100%; min-width: unset; height: 180px; }
    }

    /* ── Ad slots: reserve space up-front to prevent CLS ── */
    .ad-slot {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      /* Desktop: responsive horizontal/rect units typically render ≤250px tall */
      min-height: 250px;
    }
    .ad-slot ins.adsbygoogle {
      display: block;
      width: 100%;
      min-height: inherit;
    }
    @media (max-width: 767px) {
      /* Mobile: responsive units usually fill as 300x250 / large rectangle */
      .ad-slot { min-height: 280px; }
    }
    /* Collapse the reserved space only when AdSense reports no fill */
    .ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }