:root {
      --wp-blue: #008dd2;
      --wp-blue-dark: #006ea6;
      --wp-pink: #e5097f;
      --wp-pink-dark: #b8076a;
      --wp-ink: #14212b;
      --wp-soft-blue: #eaf6fc;
      --wp-soft-pink: #fdebf5;
      --bs-body-font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      --bs-body-color: #2b3a46;
      --bs-link-color: var(--wp-blue-dark);
      --bs-link-hover-color: var(--wp-pink);
    }
    html { scroll-behavior: smooth; scroll-padding-top: 90px; }
    body { font-size: 1.075rem; line-height: 1.75; }
    h1, h2, h3, .display-font { font-family: 'Fraunces', Georgia, serif; color: var(--wp-ink); letter-spacing: -0.01em; }

    /* Buttons */
    .btn-wp { background: var(--wp-pink); border-color: var(--wp-pink); color: #fff; font-weight: 700; }
    .btn-wp:hover, .btn-wp:focus { background: var(--wp-pink-dark); border-color: var(--wp-pink-dark); color: #fff; }
    .btn-wp-outline { border: 2px solid var(--wp-blue); color: var(--wp-blue-dark); font-weight: 700; }
    .btn-wp-outline:hover { background: var(--wp-blue); color: #fff; }
    .btn:focus-visible, a:focus-visible { outline: 3px solid var(--wp-pink); outline-offset: 2px; }

    /* Navbar */
    .navbar { border-bottom: 4px solid transparent; border-image: linear-gradient(90deg, var(--wp-blue) 50%, var(--wp-pink) 50%) 1; }
    .navbar-brand img { height: 52px; width: auto; }
    .nav-link { font-weight: 500; color: var(--wp-ink); }
    .nav-link:hover { color: var(--wp-pink); }

    /* Hero */
    .hero { background: var(--wp-soft-blue); position: relative; overflow: hidden; }
    .hero::after {
      content: ""; position: absolute; right: -80px; bottom: -80px; width: 340px; height: 340px;
      background: var(--wp-pink); opacity: .1;
      clip-path: path('M170 320 C-60 170 40 20 120 20 C150 20 165 40 170 55 C175 40 190 20 220 20 C300 20 400 170 170 320 Z');
    }
    .hero h1 { font-weight: 800; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.12; max-width: 22ch; }
    .hero h1 .pink { color: var(--wp-pink); }
    .meta { font-size: .95rem; color: #50626f; }
    .breadcrumb a { text-decoration: none; }

    /* Article */
    .article h2 { font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 3rem; margin-bottom: 1rem; padding-left: 1rem; border-left: 6px solid var(--wp-pink); }
    .article h2:nth-of-type(even) { border-left-color: var(--wp-blue); }
    .article h3 { font-weight: 600; font-size: 1.3rem; margin-top: 1.8rem; }
    .article p { max-width: 70ch; }
    .article li { margin-bottom: .4rem; }
    .lead-in { font-size: 1.2rem; color: var(--wp-ink); }

    .callout { background: var(--wp-soft-pink); border-left: 6px solid var(--wp-pink); border-radius: .5rem; padding: 1.25rem 1.5rem; margin: 1.75rem 0; }
    .callout.blue { background: var(--wp-soft-blue); border-left-color: var(--wp-blue); }
    .callout p:last-child { margin-bottom: 0; }

    .check-list { list-style: none; padding-left: 0; }
    .check-list li { position: relative; padding-left: 2rem; }
    .check-list li::before {
      content: ""; position: absolute; left: 0; top: .5em; width: 1.1rem; height: 1rem; background: var(--wp-pink);
      clip-path: path('M8.8 16 C-4 8 2 0 6 0 C7.5 0 8.4 1 8.8 2 C9.2 1 10.1 0 11.6 0 C15.6 0 21.6 8 8.8 16 Z');
    }

    .step { display: flex; gap: 1rem; margin-bottom: 1.25rem; }
    .step-n { flex: 0 0 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--wp-blue); color: #fff; font-weight: 700; display: grid; place-items: center; }
    .step:nth-child(even) .step-n { background: var(--wp-pink); }
    .step h3 { margin: 0 0 .15rem; font-size: 1.15rem; }
    .step p { margin: 0; }

    /* Sidebar */
    .toc { position: sticky; top: 100px; }
    .toc-card { border: 1px solid #dbe7ee; border-top: 5px solid var(--wp-blue); border-radius: .5rem; background: #fff; }
    .toc a { display: block; padding: .35rem 0; text-decoration: none; color: var(--wp-ink); font-size: .96rem; line-height: 1.4; }
    .toc a:hover { color: var(--wp-pink); }
    .side-cta { background: var(--wp-ink); color: #fff; border-radius: .5rem; border-top: 5px solid var(--wp-pink); }
    .side-cta h2 { color: #fff; }

    /* Table */
    .table caption { color: var(--wp-ink); font-weight: 700; }
    .table thead th { background: var(--wp-blue); color: #fff; border-color: var(--wp-blue); }
    .table tbody th { background: var(--wp-soft-pink); color: var(--wp-ink); }

    /* FAQ */
    .accordion-button { font-weight: 700; color: var(--wp-ink); }
    .accordion-button:not(.collapsed) { background: var(--wp-soft-blue); color: var(--wp-blue-dark); box-shadow: none; }
    .accordion-button:focus { border-color: var(--wp-blue); box-shadow: 0 0 0 .25rem rgba(0,141,210,.25); }

    /* CTA band */
    .cta-band { background: linear-gradient(100deg, var(--wp-blue) 0 58%, var(--wp-pink) 58% 100%); color: #fff; }
    .cta-band h2 { color: #fff; }
    @media (max-width: 767.98px) { .cta-band { background: var(--wp-blue); } }

    footer { background: var(--wp-ink); color: #c7d3db; }
    footer a { color: #fff; text-decoration: none; }
    footer a:hover { color: #ff7ac1; }
    footer img { height: 56px; background: #fff; padding: 6px 10px; border-radius: .4rem; }

    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }