/* ─── Page-specific component styles ─── */
    *, *::before, *::after { box-sizing: border-box; }

    /* Nav overrides — replicate site-wide nav pattern */
    .nav { position: sticky; top: 0; z-index: 200; background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); padding: 0.875rem 0; }
    .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; font-family: var(--font-ui); font-size: 1.1rem; font-weight: 700; color: #ffffff; white-space: nowrap; }
    .nav-logo img { display: block; height: 40px; width: auto; }
    .nav-links { display: flex; align-items: center; gap: 1.5rem; }
    .nav-link { font-family: var(--font-ui); color: var(--nav-text); text-decoration: none; font-size: 0.9rem; font-weight: 500; }
    .nav-link:hover { color: var(--nav-text-hover); }
    .nav-cta { background: var(--nav-cta-bg); color: #ffffff !important; padding: 0.55rem 1.25rem; border-radius: var(--radius); font-family: var(--font-ui); font-weight: 600; font-size: 0.9rem; text-decoration: none; white-space: nowrap; transition: background 0.2s; }
    .nav-cta:hover { background: var(--nav-cta-hover) !important; color: #ffffff !important; }
    .theme-toggle { background: none; border: none; color: rgba(255,255,255,0.7); cursor: pointer; padding: 0.35rem; display: flex; align-items: center; border-radius: 6px; }
    .theme-toggle svg { width: 18px; height: 18px; }
    .icon-sun { display: none; }
    [data-theme="dark"] .icon-moon { display: none; }
    [data-theme="dark"] .icon-sun { display: block; }
    .hamburger { display: none; align-items: center; justify-content: center; background: none; border: none; color: rgba(255,255,255,0.85); cursor: pointer; padding: 0.35rem; border-radius: 6px; }
    .hamburger svg { width: 22px; height: 22px; }
    .mobile-nav { display: none; flex-direction: column; background: var(--nav-bg); border-top: 1px solid var(--nav-border); padding: 1rem 1.5rem; }
    .mobile-nav.open { display: flex; }
    .mobile-nav-link { color: rgba(255,255,255,0.8); text-decoration: none; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 500; padding: 0.65rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .mobile-nav-link:last-of-type { border-bottom: none; }
    .mobile-nav-cta { display: inline-block; background: var(--nav-cta-bg); color: #fff; text-align: center; text-decoration: none; font-family: var(--font-ui); font-weight: 600; font-size: 0.9rem; padding: 0.75rem 1.5rem; border-radius: var(--radius); margin-top: 0.75rem; }
    @media (max-width: 760px) { .hamburger { display: flex; } .nav-links { display: none; } }
    @media (max-width: 560px) { .nav-logo img { height: 32px; } }

    /* ─── Hero ─── */
    .page-hero {
      background: linear-gradient(135deg, #0F1729 0%, #14213D 55%, #1F3A5F 100%);
      color: #ffffff;
      padding: 4.5rem 0 4rem;
      position: relative;
      overflow: hidden;
    }
    .page-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 75% 40%, rgba(46,117,182,0.12) 0%, transparent 65%);
      pointer-events: none;
    }
    .page-hero h1 { color: #ffffff; margin-bottom: 1rem; position: relative; }
    .page-hero .hero-lead { color: rgba(255,255,255,0.82); font-size: 1.15rem; max-width: 700px; position: relative; margin-bottom: 2rem; line-height: 1.7; }
    .breadcrumb { font-size: 0.82rem; color: rgba(255,255,255,0.5); margin-bottom: 1.25rem; position: relative; }
    .breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
    .breadcrumb a:hover { color: rgba(255,255,255,0.9); }
    .hero-badge {
      display: inline-block;
      font-family: var(--font-ui);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #5B9BD5;
      margin-bottom: 0.75rem;
      position: relative;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; position: relative; }
    .hero-actions .btn-primary { background: #2E75B6; font-size: 1.05rem; padding: 0.9rem 2.25rem; }
    .hero-actions .btn-primary:hover { background: #1F3A5F; }
    .hero-actions .btn-ghost {
      display: inline-block;
      background: transparent;
      color: rgba(255,255,255,0.85);
      text-decoration: none;
      font-family: var(--font-ui);
      font-weight: 600;
      font-size: 1rem;
      padding: 0.85rem 1.75rem;
      border: 2px solid rgba(255,255,255,0.25);
      border-radius: var(--radius);
      transition: border-color 0.2s, color 0.2s;
      min-height: 44px;
    }
    .hero-actions .btn-ghost:hover { border-color: rgba(255,255,255,0.65); color: #ffffff; }
    .hero-trust {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      margin-top: 2.5rem;
      position: relative;
    }
    .trust-pill {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--font-ui);
      font-size: 0.85rem;
      font-weight: 600;
      color: rgba(255,255,255,0.75);
    }
    .trust-pill svg { color: #5B9BD5; flex-shrink: 0; }

    /* ─── Content sections ─── */
    .content-section { padding: 4.5rem 0; }
    .alt-bg { background: var(--bg-surface); }

    /* ─── Why CE / reasons grid ─── */
    .reasons-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.25rem;
      margin-top: 2rem;
    }
    .reason-card {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 1.75rem;
      box-shadow: var(--shadow);
    }
    .alt-bg .reason-card { background: var(--bg); }
    .reason-icon {
      width: 44px;
      height: 44px;
      background: var(--accent-muted);
      border-radius: var(--radius);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
    }
    .reason-icon svg { color: var(--accent); width: 22px; height: 22px; }
    .reason-card h3 { font-size: 1rem; margin-bottom: 0.5rem; color: var(--text-primary); }
    .reason-card p { color: var(--text-secondary); font-size: 0.9rem; margin: 0; }

    /* ─── Pricing ─── */
    .price-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 1.25rem;
      margin-top: 2rem;
    }
    .price-card {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem 1.75rem;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
    }
    .alt-bg .price-card { background: var(--bg); }
    .price-card.featured {
      border-color: #2E75B6;
      border-width: 2px;
    }
    .price-label {
      font-family: var(--font-ui);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 0.5rem;
    }
    .price-card h3 { font-size: 1.1rem; margin-bottom: 0.75rem; color: var(--text-primary); }
    .price-amount {
      font-family: var(--font-ui);
      font-size: 2.25rem;
      font-weight: 800;
      color: #1F3A5F;
      line-height: 1;
      margin-bottom: 0.35rem;
    }
    [data-theme="dark"] .price-amount { color: #5B9BD5; }
    .price-suffix {
      font-family: var(--font-ui);
      font-size: 0.82rem;
      color: var(--text-secondary);
      margin-bottom: 1.25rem;
      font-weight: 400;
    }
    .price-card p { color: var(--text-secondary); font-size: 0.88rem; flex: 1; line-height: 1.6; }
    .price-note {
      display: inline-block;
      background: var(--accent-muted);
      color: var(--accent);
      font-family: var(--font-ui);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      padding: 0.25rem 0.65rem;
      border-radius: 999px;
      margin-bottom: 1rem;
    }

    /* ─── Band table ─── */
    .band-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow); }
    .band-table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: 0.9rem; min-width: 520px; }
    .band-table th { background: #1F3A5F; color: #fff; padding: 0.8rem 1.1rem; text-align: left; font-weight: 700; font-size: 0.83rem; letter-spacing: 0.04em; }
    .band-table td { padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--border); color: var(--text-primary); }
    .band-table tbody tr:last-child td { border-bottom: none; }
    .band-table tbody tr:hover td { background: var(--bg-elevated); }
    .band-table td.price-cell { font-weight: 800; color: #2E75B6; }
    [data-theme="dark"] .band-table th { background: #0a1020; }
    .table-note { font-family: var(--font-ui); font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.75rem; }

    /* ─── Scope cards / what's included ─── */
    .scope-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.25rem;
      margin-top: 2rem;
    }
    .scope-card {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 1.5rem;
      box-shadow: var(--shadow);
      position: relative;
    }
    .alt-bg .scope-card { background: var(--bg); }
    .scope-num {
      font-family: var(--font-ui);
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #2E75B6;
      margin-bottom: 0.4rem;
    }
    .scope-card h3 { font-size: 1rem; margin-bottom: 0.4rem; }
    .scope-card p { color: var(--text-secondary); font-size: 0.88rem; margin: 0; }

    /* ─── Process steps ─── */
    .process-steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1.5rem;
      margin-top: 2rem;
      counter-reset: steps;
    }
    .process-step {
      counter-increment: steps;
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 1.75rem 1.5rem 1.5rem;
      position: relative;
      box-shadow: var(--shadow);
    }
    .alt-bg .process-step { background: var(--bg); }
    .process-step::before {
      content: counter(steps);
      position: absolute;
      top: -14px;
      left: 1.25rem;
      background: #1F3A5F;
      color: #ffffff;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-ui);
      font-size: 0.82rem;
      font-weight: 800;
    }
    .process-step h3 { font-size: 1rem; margin-bottom: 0.5rem; margin-top: 0.4rem; }
    .process-step p { color: var(--text-secondary); font-size: 0.88rem; margin: 0; }

    /* ─── Controls grid ─── */
    .controls-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.25rem;
      margin-top: 2rem;
    }
    .control-card {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-left: 4px solid #2E75B6;
      border-radius: var(--radius-lg);
      padding: 1.5rem;
      box-shadow: var(--shadow);
    }
    .alt-bg .control-card { background: var(--bg); }
    .control-num {
      font-family: var(--font-ui);
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #2E75B6;
      margin-bottom: 0.4rem;
    }
    .control-card h3 { font-size: 1rem; margin-bottom: 0.4rem; }
    .control-card p { color: var(--text-secondary); font-size: 0.88rem; margin: 0; }

    /* ─── Differentiator box ─── */
    .info-box {
      background: #EEF4FC;
      border: 1px solid #C0D8F0;
      border-left: 4px solid #2E75B6;
      border-radius: var(--radius);
      padding: 1.25rem 1.5rem;
      margin: 2rem 0;
      max-width: 780px;
    }
    [data-theme="dark"] .info-box { background: rgba(46,117,182,0.10); border-color: rgba(91,155,213,0.3); border-left-color: #5B9BD5; }
    .info-box p { color: var(--text-primary); font-size: 0.95rem; margin: 0; }

    /* ─── Why Wolds ─── */
    .why-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 1.25rem;
      margin-top: 2rem;
    }
    .why-card {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--radius-lg);
      padding: 1.5rem;
    }
    .why-card h3 { color: #ffffff; font-size: 1rem; margin-bottom: 0.5rem; }
    .why-card p { color: rgba(255,255,255,0.7); font-size: 0.88rem; margin: 0; }

    /* ─── Who it's for ─── */
    .sectors-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-top: 1.5rem;
    }
    .sector-chip {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 0.45rem 1.1rem;
      font-family: var(--font-ui);
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text-primary);
    }
    .alt-bg .sector-chip { background: var(--bg); }

    /* ─── FAQ ─── */
    .faq-list { max-width: 780px; }
    .faq-item { border-bottom: 1px solid var(--border); padding: 1.35rem 0; }
    .faq-item:last-child { border-bottom: none; }
    .faq-item h3 { font-size: 1.05rem; margin-bottom: 0.5rem; color: var(--text-primary); }
    .faq-item p, .faq-item p a { color: var(--text-secondary); margin: 0; font-size: 0.95rem; }

    /* ─── CTA section ─── */
    .cta-section {
      background: linear-gradient(135deg, #0F1729 0%, #14213D 55%, #1F3A5F 100%);
      color: #ffffff;
      padding: 5rem 0;
      text-align: center;
    }
    .cta-section h2 { color: #ffffff; margin-bottom: 1rem; }
    .cta-section p { color: rgba(255,255,255,0.78); max-width: 620px; margin: 0 auto 2rem; }
    .cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
    .cta-section .btn-primary { background: #2E75B6; font-size: 1.1rem; padding: 1rem 2.5rem; }
    .cta-section .btn-primary:hover { background: #ffffff; color: #1F3A5F; }
    .cta-alt { margin-top: 1.1rem; font-size: 0.95rem; color: rgba(255,255,255,0.72); }
    .cta-alt a { color: #ffffff; }
    .cta-alt a:hover { color: rgba(255,255,255,0.82); }
    .cta-contact-details {
      margin-top: 2rem;
      font-family: var(--font-ui);
      font-size: 0.9rem;
      color: rgba(255,255,255,0.6);
    }
    .cta-contact-details a { color: rgba(255,255,255,0.8); }
    .cta-contact-details a:hover { color: #ffffff; }

    /* ─── Footer ─── */

    /* ─── Responsive ─── */
    @media (max-width: 640px) {
      .content-section { padding: 3rem 0; }
      .page-hero { padding: 3rem 0 2.5rem; }
      .hero-trust { gap: 1rem; }
      .price-cards { grid-template-columns: 1fr; }
    }