/* ════════════════════════════════════════════════════════════════════════
   WPCONSULTS — MASTER CSS  v5.0
   Production-grade landing-page + section framework
   ════════════════════════════════════════════════════════════════════════

   PURPOSE
   Portable, conflict-free CSS for custom landing pages and sections built
   inside Kadence / Elementor / any WordPress theme.

   ARCHITECTURE RULES
   • Zero bare element selectors (no body, a, h1, img, * at the global level)
   • Reset is OPT-IN via .wpc-root wrapper — never touches the host theme
   • All CSS variables  → --wpc-*
   • All class names     → .wpc-*
   • SVG icons inherit color via currentColor
   • Container-query driven where it matters (cards adapt to THEIR width)
   • Mobile-first: base = mobile, scale up with min-width / @container
   • prefers-reduced-motion fully respected

   COMPANION FILES
   • wpc-kadence-dark.css → site-wide dark-mode bridge (bare selectors live there)
   • master.js            → scroll-reveal, counters, tabs

   ────────────────────────────────────────────────────────────────────────
   TABLE OF CONTENTS
   ────────────────────────────────────────────────────────────────────────
   1.  BRAND DESIGN TOKENS        (palette, semantic, type, space, etc.)
   2.  DARK / LIGHT THEME          (system + [data-theme] toggle)
   3.  BASE LAYER                  (.wpc-root opt-in reset)
   4.  LAYOUT SYSTEM               (container, grid, stack, + @container)
   5.  SECTION CHROME              (tag, eyebrow, heading, subheading)
   6.  HERO COMPONENTS             (.wpc-hero split/centered/media)
   7.  BUTTON / CTA SYSTEM         (buttons, cta-band)
   8.  CARD SYSTEM                 (card, feature, glass)
   9.  LANDING SECTIONS            (features, stats, steps, pricing,
                                    faq, testimonial, logos)
   10. TABLES & COMPARISON         (.wpc-table, .wpc-table-compare)
   11. AI / SEO / SaaS COMPONENTS  (gradient-text, metric, code, terminal,
                                    tag-pill, integration grid)
   12. BADGES / CALLOUT / ENGINE   (badges, callout, banner, engine bar)
   13. THEME TOGGLE + SOCIAL       (toggle button, social buttons)
   14. SVG & DIAGRAM SYSTEM        (.svg-chart-graph — light + dark)
   15. UTILITY CLASSES             (text, bg, border, spacing, layout, etc.)
   16. ANIMATION SYSTEM            (reveal/fade/scale + reduced-motion)
   17. RESPONSIVE HELPERS
   ════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════
   1. BRAND DESIGN TOKENS
   ════════════════════════════════════════════════════════════════════════ */
:root {

  /* ─── Purple scale ─── */
  --wpc-purple-50:  #F5F0FF;
  --wpc-purple-100: #EDE9FE;
  --wpc-purple-200: #DDD6FE;
  --wpc-purple-300: #C4B5FD;
  --wpc-purple-400: #A78BFA;
  --wpc-purple-500: #A78BFA;
  --wpc-purple-600: #673DE5;   /* ← primary brand */
  --wpc-purple-700: #5530C4;
  --wpc-purple-800: #3D1FA8;
  --wpc-purple-900: #2D1680;

  /* ─── Neutral / Gray scale ─── */
  --wpc-gray-0:   #FFFFFF;
  --wpc-gray-25:  #FAFBFF;
  --wpc-gray-50:  #F7F5FF;
  --wpc-gray-75:  #F3F4F6;
  --wpc-gray-100: #EDE9FE;
  --wpc-gray-200: #E5E7EB;
  --wpc-gray-300: #D1D5DB;
  --wpc-gray-400: #9CA3AF;
  --wpc-gray-500: #6B7280;
  --wpc-gray-600: #4B5563;
  --wpc-gray-700: #374151;
  --wpc-gray-800: #1c2431;
  --wpc-gray-850: #18202F;
  --wpc-gray-900: #111827;
  --wpc-gray-950: #0A0F1A;

  /* ─── Status palette ─── */
  --wpc-green:        #10B981;
  --wpc-green-live:   #4ade80;   /* "active/live" signal dot — stays green */
  --wpc-green-dim:    rgba(16,185,129,0.10);
  --wpc-red:          #EF4444;
  --wpc-red-dim:      rgba(239,68,68,0.10);
  --wpc-amber:        #F59E0B;
  --wpc-amber-dim:    rgba(245,158,11,0.10);
  --wpc-blue:         #3B82F6;
  --wpc-blue-dim:     rgba(59,130,246,0.10);
  --wpc-teal:         #0891B2;
  --wpc-teal-dim:     rgba(8,145,178,0.10);

  /* ─── Third-party brand colors ─── */
  --wpc-linkedin:        #0A66C2;
  --wpc-linkedin-bg:     rgba(10,102,194,0.08);
  --wpc-linkedin-border: rgba(10,102,194,0.25);
  --wpc-linkedin-text:   #2A6EAA;
  --wpc-x-text:          #3E4C59;
  --wpc-trustpilot:      #00B67A;
  --wpc-google:          #4285F4;

  /* ─── SEMANTIC TOKENS — LIGHT MODE (default) ─── */

  /* Backgrounds */
  --wpc-bg:          #FFFFFF;
  --wpc-bg-subtle:   #F7F5FF;
  --wpc-bg-tint:     #EDE9FE;
  --wpc-bg-hero:     #FAFBFF;
  --wpc-bg-dim:      rgba(103,61,229,0.08);
  --wpc-bg-overlay:  rgba(103,61,229,0.05);
  --wpc-bg-card:     #FFFFFF;
  --wpc-bg-code:     #1E1B2E;          /* code/terminal block bg */
  --wpc-bg-glass:    rgba(255,255,255,0.7);

  /* Text */
  --wpc-text:        #2D3748;
  --wpc-text-strong: #1A202C;
  --wpc-text-muted:  #718096;
  --wpc-text-faint:  #A0AEC0;
  --wpc-text-inverse:#FFFFFF;
  --wpc-text-on-btn: #FFFFFF;
  --wpc-text-code:   #E2E8F0;          /* text inside code blocks */

  /* Accent */
  --wpc-accent:       #673DE5;
  --wpc-accent-hover: #5530C4;
  --wpc-accent-light: #A78BFA;
  --wpc-accent-dim:   rgba(103,61,229,0.08);

  /* Buttons */
  --wpc-btn-bg:       #673DE5;
  --wpc-btn-hover:    #5530C4;
  --wpc-btn-text:     #FFFFFF;

  /* Borders */
  --wpc-border:        rgba(103,61,229,0.18);
  --wpc-border-strong: rgba(103,61,229,0.35);
  --wpc-border-subtle: rgba(103,61,229,0.10);
  --wpc-border-neutral:rgba(0,0,0,0.08);

  /* Misc semantic */
  --wpc-hero-sub: #718096;
  --wpc-divider:  rgba(103,61,229,0.12);

  /* Links — separate from accent so buttons never get overridden */
  --wpc-link:         #673DE5;
  --wpc-link-hover:   #5530C4;
  --wpc-link-visited: #5530C4;

  /* Gradients */
  --wpc-gradient-hero:    radial-gradient(ellipse 55% 65% at 78% 38%, var(--wpc-bg-dim) 0%, transparent 65%);
  --wpc-gradient-accent:  linear-gradient(135deg, var(--wpc-accent) 0%, var(--wpc-accent-light) 100%);
  --wpc-gradient-subtle:  linear-gradient(140deg, var(--wpc-bg-dim) 0%, var(--wpc-bg) 52%);
  --wpc-gradient-overlay: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 100%);
  --wpc-gradient-text:    linear-gradient(120deg, #673DE5 0%, #A78BFA 50%, #A78BFA 100%);
  --wpc-gradient-mesh:    radial-gradient(at 20% 20%, rgba(103,61,229,.12) 0, transparent 50%),
                          radial-gradient(at 80% 0%, rgba(139,107,255,.10) 0, transparent 50%),
                          radial-gradient(at 60% 80%, rgba(167,139,250,.08) 0, transparent 50%);

  /* ─── TYPOGRAPHY ─── */
  --wpc-font-body:    'Outfit', system-ui, -apple-system, sans-serif;
  --wpc-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --wpc-font-mono:    'Fira Code', ui-monospace, 'Courier New', monospace;

  /* Fluid type scale */
  --wpc-text-2xs:  10px;
  --wpc-text-xs:   11px;
  --wpc-text-sm:   12px;
  --wpc-text-base: 13px;
  --wpc-text-md:   14px;
  --wpc-text-lg:   15px;
  --wpc-text-xl:   16px;
  --wpc-text-2xl:  17px;
  --wpc-text-3xl:  19px;
  --wpc-text-4xl:  22px;
  --wpc-text-5xl:  26px;
  --wpc-text-6xl:  32px;
  --wpc-text-7xl:  42px;
  --wpc-text-8xl:  52px;
  --wpc-text-9xl:  clamp(38px, 5.2vw, 72px);   /* hero display */
  --wpc-text-hero: clamp(30px, 3.8vw, 52px);   /* section headline */
  --wpc-text-metric: clamp(36px, 5vw, 64px);   /* big stat number */

  /* Weights */
  --wpc-weight-thin:     300;
  --wpc-weight-regular:  400;
  --wpc-weight-medium:   500;
  --wpc-weight-semi:     600;
  --wpc-weight-bold:     700;
  --wpc-weight-black:    900;

  /* Line heights */
  --wpc-leading-none:    1;
  --wpc-leading-tightest:1.04;
  --wpc-leading-tight:   1.15;
  --wpc-leading-snug:    1.25;
  --wpc-leading-normal:  1.5;
  --wpc-leading-relaxed: 1.65;
  --wpc-leading-loose:   1.75;
  --wpc-leading-looser:  1.8;

  /* Letter spacing */
  --wpc-tracking-tight:   -0.02em;
  --wpc-tracking-normal:   0em;
  --wpc-tracking-xs:       0.06em;
  --wpc-tracking-sm:       0.08em;
  --wpc-tracking-md:       0.10em;
  --wpc-tracking-lg:       0.12em;
  --wpc-tracking-xl:       0.14em;
  --wpc-tracking-2xl:      0.18em;

  /* ─── SPACING SCALE (4px grid) ─── */
  --wpc-1:  4px;   --wpc-2:  8px;   --wpc-3:  12px;  --wpc-4:  16px;
  --wpc-5:  20px;  --wpc-6:  24px;  --wpc-7:  28px;  --wpc-8:  32px;
  --wpc-9:  36px;  --wpc-10: 40px;  --wpc-11: 44px;  --wpc-12: 48px;
  --wpc-14: 56px;  --wpc-16: 64px;  --wpc-18: 72px;  --wpc-20: 80px;
  --wpc-24: 96px;  --wpc-28: 112px; --wpc-32: 128px;

  /* Section padding — axis-specific */
  --wpc-section-x:          56px;
  --wpc-section-y:          96px;
  --wpc-section-x-sm:       22px;
  --wpc-section-y-sm:       58px;
  --wpc-hero-x:             56px;
  --wpc-hero-y:             60px;

  /* Section padding presets */
  --wpc-section-pad:        var(--wpc-section-y) var(--wpc-section-x);
  --wpc-section-pad-sm:     56px var(--wpc-section-x);
  --wpc-section-pad-mobile: var(--wpc-section-y-sm) var(--wpc-section-x-sm);

  /* Component spacing — named for intent */
  --wpc-eyebrow-mb:         var(--wpc-4);
  --wpc-heading-mb:         var(--wpc-5);
  --wpc-subheading-mb:      var(--wpc-10);
  --wpc-section-inner-gap:  var(--wpc-12);
  --wpc-cta-gap:            var(--wpc-4);
  --wpc-cta-mb:             var(--wpc-12);
  --wpc-card-pad:           var(--wpc-12);
  --wpc-card-pad-sm:        var(--wpc-8);
  --wpc-card-pad-lg:        var(--wpc-16);
  --wpc-grid-gap:           2px;
  --wpc-grid-gap-sm:        var(--wpc-4);
  --wpc-grid-gap-md:        var(--wpc-8);
  --wpc-grid-gap-lg:        var(--wpc-14);

  /* Button dimensions */
  --wpc-btn-py:     15px;  --wpc-btn-px:     34px;
  --wpc-btn-py-sm:  10px;  --wpc-btn-px-sm:  22px;
  --wpc-btn-py-lg:  18px;  --wpc-btn-px-lg:  44px;
  --wpc-btn-py-xl:  20px;  --wpc-btn-px-xl:  56px;
  --wpc-btn-fs:     var(--wpc-text-md);
  --wpc-btn-fs-sm:  var(--wpc-text-sm);
  --wpc-btn-fs-lg:  var(--wpc-text-xl);
  --wpc-btn-tracking: var(--wpc-tracking-xs);

  /* ─── SIZING & CONTAINERS ─── */
  --wpc-max-xs:  480px;
  --wpc-max-sm:  560px;
  --wpc-max-md:  720px;
  --wpc-max-lg:  960px;
  --wpc-max-xl:  1240px;
  --wpc-max-2xl: 1440px;

  /* Container-query breakpoints (for components that respond to own width) */
  --wpc-cq-sm:  400px;
  --wpc-cq-md:  600px;
  --wpc-cq-lg:  900px;

  /* ─── BORDERS & RADIUS ─── */
  --wpc-radius-none: 0px;
  --wpc-radius-xs:   2px;
  --wpc-radius-sm:   4px;
  --wpc-radius-md:   6px;
  --wpc-radius-lg:   12px;
  --wpc-radius-xl:   20px;
  --wpc-radius-2xl:  32px;
  --wpc-radius-full: 9999px;

  /* ─── SHADOWS ─── */
  --wpc-shadow-none: none;
  --wpc-shadow-xs:   0 1px 2px rgba(0,0,0,.04);
  --wpc-shadow-sm:   0 1px 4px rgba(0,0,0,.08);
  --wpc-shadow-md:   0 4px 16px rgba(103,61,229,.10);
  --wpc-shadow-lg:   0 8px 32px rgba(103,61,229,.14);
  --wpc-shadow-xl:   0 16px 48px rgba(103,61,229,.18);
  --wpc-shadow-2xl:  0 24px 64px rgba(103,61,229,.22);
  --wpc-shadow-inner:inset 0 1px 3px rgba(0,0,0,.06);
  --wpc-shadow-glow: 0 0 24px rgba(103,61,229,.20);

  /* ─── TRANSITIONS & Z-INDEX ─── */
  --wpc-ease:        .2s ease;
  --wpc-ease-slow:   .7s ease;
  --wpc-ease-spring: .3s cubic-bezier(.34,1.56,.64,1);
  --wpc-ease-in:     .15s ease-in;
  --wpc-ease-out:    .25s ease-out;

  --wpc-z-0:      0;
  --wpc-z-10:     10;
  --wpc-z-20:     20;
  --wpc-z-100:    100;
  --wpc-z-sticky: 500;
  --wpc-z-modal:  1000;
  --wpc-z-toast:  2000;
  --wpc-z-top:    9999;

  color-scheme: light;
}


/* ════════════════════════════════════════════════════════════════════════
   2. DARK / LIGHT THEME
   a) @media (prefers-color-scheme: dark) — auto
   b) [data-theme="dark"] on <html>       — toggle
   Force light: [data-theme="light"]
   ════════════════════════════════════════════════════════════════════════ */

/* Shared dark token block — applied to both auto + toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wpc-bg:           #111827;
    --wpc-bg-subtle:    #171f35;
    --wpc-bg-tint:      #374151;
    --wpc-bg-hero:      #111827;
    --wpc-bg-dim:       rgba(139,107,255,0.12);
    --wpc-bg-overlay:   rgba(139,107,255,0.07);
    --wpc-bg-card:      #172135;
    --wpc-bg-code:      #0F0D1A;
    --wpc-bg-glass:     rgba(31,41,55,0.6);
    --wpc-text:         #E2E8F0;
    --wpc-text-strong:  #F8FAFC;
    --wpc-text-muted:   #9CA3AF;
    --wpc-text-faint:   #6B7280;
    --wpc-accent:       #A78BFA;
    --wpc-accent-hover: #B9A3FC;
    --wpc-accent-dim:   rgba(167,139,250,0.14);
    --wpc-btn-bg:       #A78BFA;
    --wpc-btn-hover:    #B9A3FC;
    --wpc-btn-text:     #1A202C;   /* dark text — readable on the lighter dark-mode button */
    --wpc-border:        rgba(167,139,250,0.22);
    --wpc-border-strong: rgba(139,107,255,0.40);
    --wpc-border-subtle: rgba(139,107,255,0.10);
    --wpc-border-neutral:rgba(255,255,255,0.08);
    --wpc-hero-sub:     #6B7280;
    --wpc-divider:      rgba(139,107,255,0.14);
    --wpc-x-text:       #CBD5E0;
    --wpc-link:         #A78BFA;
    --wpc-link-hover:   #9B7BFF;
    --wpc-link-visited: #9B7BFF;
    --wpc-gradient-hero:   radial-gradient(ellipse 55% 65% at 78% 38%, rgba(139,107,255,0.12) 0%, transparent 65%);
    --wpc-gradient-subtle: linear-gradient(140deg, rgba(139,107,255,0.12) 0%, #111827 52%);
    --wpc-shadow-xs:   0 1px 2px rgba(0,0,0,.20);
    --wpc-shadow-sm:   0 1px 4px rgba(0,0,0,.30);
    --wpc-shadow-md:   0 4px 16px rgba(0,0,0,.30);
    --wpc-shadow-lg:   0 8px 32px rgba(0,0,0,.40);
    --wpc-shadow-xl:   0 16px 48px rgba(0,0,0,.50);
    --wpc-shadow-glow: 0 0 24px rgba(139,107,255,.25);
    color-scheme: dark;
  }
}

[data-theme="dark"] {
  --wpc-bg:           #111827;
  --wpc-bg-subtle:    #171f35;
  --wpc-bg-tint:      #374151;
  --wpc-bg-hero:      #111827;
  --wpc-bg-dim:       rgba(139,107,255,0.12);
  --wpc-bg-overlay:   rgba(139,107,255,0.07);
  --wpc-bg-card:      #172135;
  --wpc-bg-code:      #0F0D1A;
  --wpc-bg-glass:     rgba(31,41,55,0.6);
  --wpc-text:         #E2E8F0;
  --wpc-text-strong:  #F8FAFC;
  --wpc-text-muted:   #9CA3AF;
  --wpc-text-faint:   #6B7280;
  --wpc-accent:       #A78BFA;
  --wpc-accent-hover: #B9A3FC;
  --wpc-accent-dim:   rgba(167,139,250,0.14);
  --wpc-btn-bg:       #A78BFA;
  --wpc-btn-hover:    #B9A3FC;
  --wpc-btn-text:     #1A202C;   /* dark text — readable on the lighter dark-mode button */
  --wpc-border:        rgba(167,139,250,0.22);
  --wpc-border-strong: rgba(139,107,255,0.40);
  --wpc-border-subtle: rgba(139,107,255,0.10);
  --wpc-border-neutral:rgba(255,255,255,0.08);
  --wpc-hero-sub:     #6B7280;
  --wpc-divider:      rgba(139,107,255,0.14);
  --wpc-x-text:       #CBD5E0;
  --wpc-link:         #A78BFA;
  --wpc-link-hover:   #9B7BFF;
  --wpc-link-visited: #9B7BFF;
  --wpc-gradient-hero:   radial-gradient(ellipse 55% 65% at 78% 38%, rgba(139,107,255,0.12) 0%, transparent 65%);
  --wpc-gradient-subtle: linear-gradient(140deg, rgba(139,107,255,0.12) 0%, #111827 52%);
  --wpc-shadow-xs:   0 1px 2px rgba(0,0,0,.20);
  --wpc-shadow-sm:   0 1px 4px rgba(0,0,0,.30);
  --wpc-shadow-md:   0 4px 16px rgba(0,0,0,.30);
  --wpc-shadow-lg:   0 8px 32px rgba(0,0,0,.40);
  --wpc-shadow-xl:   0 16px 48px rgba(0,0,0,.50);
  --wpc-shadow-glow: 0 0 24px rgba(139,107,255,.25);
  color-scheme: dark;
}

[data-theme="light"] {
  --wpc-bg:           #FFFFFF;
  --wpc-bg-subtle:    #F7F5FF;
  --wpc-bg-tint:      #EDE9FE;
  --wpc-bg-hero:      #FAFBFF;
  --wpc-bg-dim:       rgba(103,61,229,0.08);
  --wpc-bg-overlay:   rgba(103,61,229,0.05);
  --wpc-bg-card:      #FFFFFF;
  --wpc-bg-code:      #1E1B2E;
  --wpc-bg-glass:     rgba(255,255,255,0.7);
  --wpc-text:         #2D3748;
  --wpc-text-strong:  #1A202C;
  --wpc-text-muted:   #718096;
  --wpc-text-faint:   #A0AEC0;
  --wpc-accent:       #673DE5;
  --wpc-accent-hover: #5530C4;
  --wpc-accent-dim:   rgba(103,61,229,0.08);
  --wpc-btn-bg:       #673DE5;
  --wpc-btn-hover:    #5530C4;
  --wpc-border:        rgba(103,61,229,0.18);
  --wpc-border-strong: rgba(103,61,229,0.35);
  --wpc-border-subtle: rgba(103,61,229,0.10);
  --wpc-border-neutral:rgba(0,0,0,0.08);
  --wpc-hero-sub:     #718096;
  --wpc-divider:      rgba(103,61,229,0.12);
  --wpc-link:         #673DE5;
  --wpc-link-hover:   #5530C4;
  --wpc-link-visited: #5530C4;
  --wpc-gradient-hero:   radial-gradient(ellipse 55% 65% at 78% 38%, var(--wpc-bg-dim) 0%, transparent 65%);
  --wpc-gradient-subtle: linear-gradient(140deg, var(--wpc-bg-dim) 0%, var(--wpc-bg) 52%);
  color-scheme: light;
}


/* ════════════════════════════════════════════════════════════════════════
   3. BASE LAYER — OPT-IN via .wpc-root
   Wrap your landing-page container in <div class="wpc-root"> to get
   border-box, font smoothing, and the container-query context — without
   ever touching Kadence's global elements.
   ════════════════════════════════════════════════════════════════════════ */
.wpc-root,
.wpc-root *,
.wpc-root *::before,
.wpc-root *::after {
  box-sizing: border-box;
}

.wpc-root {
  font-family: var(--wpc-font-body);
  color: var(--wpc-text);
  line-height: var(--wpc-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Establishes the container-query context for descendants */
  container-type: inline-size;
  container-name: wpc;
}

.wpc-root img,
.wpc-root svg { display: block; max-width: 100%; }
.wpc-root svg { height: auto; }

/* Icons inherit text color via currentColor */
.wpc-icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; color: inherit; }
.wpc-icon svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; }
.wpc-icon-fill svg { fill: currentColor; stroke: none; }


/* ════════════════════════════════════════════════════════════════════════
   4. LAYOUT SYSTEM
   ════════════════════════════════════════════════════════════════════════ */

/* Container */
.wpc-container {
  width: 100%;
  max-width: var(--wpc-max-xl);
  margin-inline: auto;
  padding-inline: var(--wpc-section-x-sm);   /* mobile-first */
}
.wpc-container-md     { max-width: var(--wpc-max-lg); }
.wpc-container-narrow { max-width: var(--wpc-max-sm); }
.wpc-container-wide   { max-width: var(--wpc-max-2xl); }

/* Section wrapper */
.wpc-section {
  padding: var(--wpc-section-pad-mobile);   /* mobile-first */
}
.wpc-section-subtle { background: var(--wpc-bg-subtle); border-top: 1px solid var(--wpc-border); }
.wpc-section-base   { background: var(--wpc-bg);        border-top: 1px solid var(--wpc-border); }
.wpc-section-hero   { background: var(--wpc-bg-hero); }
.wpc-section-mesh   { background-color: var(--wpc-bg); background-image: var(--wpc-gradient-mesh); }

/* Auto-fit grid — columns adapt to available width, mobile-first */
.wpc-grid {
  display: grid;
  gap: var(--wpc-grid-gap-md);
  grid-template-columns: 1fr;
}
.wpc-grid-flush { gap: var(--wpc-grid-gap); }       /* 2px hairline grid */
.wpc-grid-sm    { gap: var(--wpc-grid-gap-sm); }
.wpc-grid-lg    { gap: var(--wpc-grid-gap-lg); }

/* Auto-responsive grids (no media queries needed) */
.wpc-grid-auto    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.wpc-grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.wpc-grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

/* Fixed column grids (collapse on mobile via @container below) */
.wpc-grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--wpc-grid-gap); }
.wpc-grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--wpc-grid-gap); }
.wpc-grid-4 { display: grid; grid-template-columns: 1fr; gap: var(--wpc-grid-gap); }

/* Split layout (hero, feature-with-media) */
.wpc-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wpc-12);
  align-items: center;
}

/* Stack helper */
.wpc-stack { display: flex; flex-direction: column; gap: var(--wpc-4); }

/* ─── CONTAINER QUERIES — components respond to .wpc-root width ─── */
@container wpc (min-width: 600px) {
  .wpc-grid-2 { grid-template-columns: 1fr 1fr; }
  .wpc-grid-3 { grid-template-columns: 1fr 1fr; }
  .wpc-grid-4 { grid-template-columns: 1fr 1fr; }
  .wpc-split  { grid-template-columns: 1fr 1fr; gap: var(--wpc-16); }
}
@container wpc (min-width: 900px) {
  .wpc-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .wpc-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Fallback for when .wpc-root container context is absent (viewport-based) */
@supports not (container-type: inline-size) {
  @media (min-width: 600px) {
    .wpc-grid-2, .wpc-grid-3, .wpc-grid-4 { grid-template-columns: 1fr 1fr; }
    .wpc-split { grid-template-columns: 1fr 1fr; }
  }
  @media (min-width: 900px) {
    .wpc-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .wpc-grid-4 { grid-template-columns: repeat(4, 1fr); }
  }
}

/* Desktop section padding scales up */
@media (min-width: 768px) {
  .wpc-container { padding-inline: var(--wpc-section-x); }
  .wpc-section   { padding: var(--wpc-section-pad); }
}


/* ════════════════════════════════════════════════════════════════════════
   5. SECTION CHROME — tag / eyebrow / heading / subheading
   ════════════════════════════════════════════════════════════════════════ */
.wpc-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--wpc-3);
  color: var(--wpc-accent);
  font-family: var(--wpc-font-body);
  font-size: var(--wpc-text-sm);
  font-weight: var(--wpc-weight-semi);
  letter-spacing: var(--wpc-tracking-xl);
  text-transform: uppercase;
  margin-bottom: var(--wpc-eyebrow-mb);
}
.wpc-tag::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--wpc-accent);
  flex-shrink: 0;
}
.wpc-tag-center { justify-content: center; }

.wpc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--wpc-3);
  margin-bottom: var(--wpc-eyebrow-mb);
}
.wpc-eyebrow-line { width: 36px; height: 1px; background: var(--wpc-accent); }
.wpc-eyebrow-text {
  font-size: var(--wpc-text-sm);
  font-weight: var(--wpc-weight-semi);
  color: var(--wpc-accent);
  letter-spacing: var(--wpc-tracking-xl);
  text-transform: uppercase;
}

.wpc-heading {
  font-family: var(--wpc-font-display);
  font-size: var(--wpc-text-hero);
  font-weight: var(--wpc-weight-black);
  color: var(--wpc-text-strong);
  line-height: var(--wpc-leading-tightest);
  margin-bottom: var(--wpc-heading-mb);
}
.wpc-heading em,
.wpc-heading .wpc-mark { color: var(--wpc-accent); font-style: normal; }

.wpc-heading-xl { font-size: var(--wpc-text-9xl);  line-height: var(--wpc-leading-tightest); }
.wpc-heading-lg { font-size: var(--wpc-text-hero); line-height: 1.08; }
.wpc-heading-md { font-size: var(--wpc-text-5xl);  line-height: 1.15; }
.wpc-heading-sm { font-size: var(--wpc-text-4xl);  line-height: 1.2;  }
.wpc-heading-xs { font-size: var(--wpc-text-3xl);  line-height: 1.25; }

.wpc-subheading {
  font-size: var(--wpc-text-2xl);
  color: var(--wpc-text-muted);
  line-height: var(--wpc-leading-loose);
  max-width: var(--wpc-max-sm);
  font-weight: var(--wpc-weight-thin);
  margin-bottom: var(--wpc-subheading-mb);
}
.wpc-subheading-center { margin-inline: auto; text-align: center; }

.wpc-pull-quote {
  font-family: var(--wpc-font-display);
  font-size: clamp(18px, 2.1vw, 27px);
  font-weight: var(--wpc-weight-bold);
  color: var(--wpc-text-strong);
  border-left: 3px solid var(--wpc-accent);
  padding-left: var(--wpc-7);
  line-height: var(--wpc-leading-snug);
}


/* ════════════════════════════════════════════════════════════════════════
   6. HERO COMPONENTS
   ════════════════════════════════════════════════════════════════════════ */
.wpc-hero {
  position: relative;
  overflow: hidden;
  background: var(--wpc-bg-hero);
  padding: var(--wpc-section-y-sm) var(--wpc-section-x-sm);
}
.wpc-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--wpc-gradient-hero);
  pointer-events: none;
}
.wpc-hero > * { position: relative; z-index: 1; }

/* Split hero — text + media */
.wpc-hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wpc-12);
  align-items: center;
  min-height: auto;
}

/* Centered hero */
.wpc-hero-centered { text-align: center; }
.wpc-hero-centered .wpc-subheading,
.wpc-hero-centered .wpc-hero-sub { margin-inline: auto; }
.wpc-hero-centered .wpc-hero-actions { justify-content: center; }

.wpc-hero-title {
  font-family: var(--wpc-font-display);
  font-size: var(--wpc-text-9xl);
  font-weight: var(--wpc-weight-black);
  line-height: var(--wpc-leading-tightest);
  color: var(--wpc-text-strong);
  margin-bottom: var(--wpc-3);
}
.wpc-hero-title em,
.wpc-hero-title .wpc-mark { color: var(--wpc-accent); font-style: normal; }

.wpc-hero-sub {
  font-family: var(--wpc-font-display);
  font-size: clamp(16px, 1.7vw, 22px);
  font-weight: var(--wpc-weight-bold);
  color: var(--wpc-hero-sub);
  margin-bottom: var(--wpc-7);
}

.wpc-hero-desc {
  font-size: var(--wpc-text-2xl);
  line-height: var(--wpc-leading-loose);
  color: var(--wpc-text-muted);
  max-width: 510px;
  margin-bottom: var(--wpc-11);
  font-weight: var(--wpc-weight-thin);
}
.wpc-hero-desc strong { color: var(--wpc-text-strong); font-weight: var(--wpc-weight-medium); }

.wpc-hero-actions {
  display: flex;
  gap: var(--wpc-cta-gap);
  flex-wrap: wrap;
  margin-bottom: var(--wpc-cta-mb);
}

.wpc-hero-media { display: flex; align-items: center; justify-content: center; }
.wpc-hero-media img,
.wpc-hero-media svg { width: 100%; max-width: 500px; height: auto; }

@container wpc (min-width: 900px) {
  .wpc-hero { padding: var(--wpc-hero-y) var(--wpc-hero-x); }
  .wpc-hero-split { grid-template-columns: 1fr 1fr; gap: var(--wpc-10); min-height: 90vh; }
}
@supports not (container-type: inline-size) {
  @media (min-width: 900px) {
    .wpc-hero { padding: var(--wpc-hero-y) var(--wpc-hero-x); }
    .wpc-hero-split { grid-template-columns: 1fr 1fr; gap: var(--wpc-10); min-height: 90vh; }
  }
}


/* ════════════════════════════════════════════════════════════════════════
   7. BUTTON / CTA SYSTEM
   ════════════════════════════════════════════════════════════════════════ */
.wpc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wpc-2);
  font-family: var(--wpc-font-body);
  font-size: var(--wpc-btn-fs);
  font-weight: var(--wpc-weight-bold);
  letter-spacing: var(--wpc-btn-tracking);
  text-transform: uppercase;
  text-decoration: none !important;
  line-height: 1;
  border: none;
  cursor: pointer;
  transition: background var(--wpc-ease), transform var(--wpc-ease),
              border-color var(--wpc-ease), color var(--wpc-ease),
              box-shadow var(--wpc-ease);
  white-space: nowrap;
}

/* Primary — color !important beats [data-theme="dark"] a { color } */
.wpc-btn-primary {
  background: var(--wpc-btn-bg);
  color: var(--wpc-btn-text) !important;
  padding: var(--wpc-btn-py) var(--wpc-btn-px);
  border: 2px solid transparent;
}
.wpc-btn-primary:hover,
.wpc-btn-primary:focus,
.wpc-btn-primary:active {
  background: var(--wpc-btn-hover);
  color: var(--wpc-btn-text) !important;
  transform: translateY(-1px);
  box-shadow: var(--wpc-shadow-md);
}

/* Ghost — outlined */
.wpc-btn-ghost {
  background: transparent;
  color: var(--wpc-text) !important;
  padding: var(--wpc-btn-py) var(--wpc-btn-px);
  border: 1px solid var(--wpc-border);
}
.wpc-btn-ghost:hover,
.wpc-btn-ghost:focus {
  border-color: var(--wpc-accent);
  color: var(--wpc-accent) !important;
}

/* Gradient — for high-emphasis SaaS CTAs */
.wpc-btn-gradient {
  background: var(--wpc-gradient-accent);
  color: #fff !important;
  padding: var(--wpc-btn-py) var(--wpc-btn-px);
  border: none;
}
.wpc-btn-gradient:hover { transform: translateY(-1px); box-shadow: var(--wpc-shadow-lg); color: #fff !important; }

/* Size modifiers */
.wpc-btn-sm { padding: var(--wpc-btn-py-sm) var(--wpc-btn-px-sm); font-size: var(--wpc-btn-fs-sm); }
.wpc-btn-lg { padding: var(--wpc-btn-py-lg) var(--wpc-btn-px-lg); font-size: var(--wpc-btn-fs-lg); }
.wpc-btn-xl { padding: var(--wpc-btn-py-xl) var(--wpc-btn-px-xl); font-size: var(--wpc-text-2xl); }
.wpc-btn-full { width: 100%; justify-content: center; }
.wpc-btn-icon { gap: var(--wpc-2); }

/* CTA band — full-width call-to-action section */
.wpc-cta-band {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: var(--wpc-20) var(--wpc-section-x-sm);
  background: var(--wpc-bg);
  border-top: 1px solid var(--wpc-border);
}
.wpc-cta-band-accent { background: var(--wpc-gradient-accent); }
.wpc-cta-band-accent .wpc-heading,
.wpc-cta-band-accent .wpc-cta-band-text { color: #fff; }
.wpc-cta-band-mesh { background-color: var(--wpc-bg); background-image: var(--wpc-gradient-mesh); }
.wpc-cta-band-text {
  font-size: var(--wpc-text-2xl);
  color: var(--wpc-text-muted);
  max-width: var(--wpc-max-sm);
  margin: 0 auto var(--wpc-10);
  line-height: var(--wpc-leading-loose);
  font-weight: var(--wpc-weight-thin);
}
.wpc-cta-band-actions { display: flex; gap: var(--wpc-cta-gap); justify-content: center; flex-wrap: wrap; }
@media (min-width: 768px) { .wpc-cta-band { padding: var(--wpc-24) var(--wpc-section-x); } }


/* ════════════════════════════════════════════════════════════════════════
   8. CARD SYSTEM
   ════════════════════════════════════════════════════════════════════════ */
.wpc-card {
  padding: var(--wpc-card-pad-sm);
  border: 1px solid var(--wpc-border);
  background: var(--wpc-bg-card);
  transition: border-color var(--wpc-ease), background var(--wpc-ease),
              transform var(--wpc-ease), box-shadow var(--wpc-ease);
}
.wpc-card:hover { border-color: var(--wpc-accent); }
.wpc-card-sm { padding: var(--wpc-card-pad-sm); }
.wpc-card-lg { padding: var(--wpc-card-pad-lg); }
.wpc-card-accent { background: var(--wpc-bg-dim); border-color: var(--wpc-border-strong); }
.wpc-card-hover-lift:hover { transform: translateY(-3px); box-shadow: var(--wpc-shadow-lg); }
.wpc-card-rounded { border-radius: var(--wpc-radius-lg); }

@container wpc (min-width: 600px) {
  .wpc-card { padding: var(--wpc-card-pad); }
}

.wpc-card-icon { margin-bottom: var(--wpc-eyebrow-mb); color: var(--wpc-accent); }
.wpc-card-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; }

.wpc-card-title {
  font-family: var(--wpc-font-display);
  font-size: var(--wpc-text-3xl);
  font-weight: var(--wpc-weight-bold);
  color: var(--wpc-text-strong);
  margin-bottom: var(--wpc-2);
  line-height: var(--wpc-leading-snug);
}
.wpc-card-body {
  font-size: var(--wpc-text-lg);
  color: var(--wpc-text-muted);
  line-height: var(--wpc-leading-relaxed);
  font-weight: var(--wpc-weight-thin);
}
.wpc-card-body strong { color: var(--wpc-accent); font-weight: var(--wpc-weight-medium); }

/* Glassmorphism card — for hero overlays on imagery */
.wpc-glass {
  background: var(--wpc-bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--wpc-border);
  border-radius: var(--wpc-radius-lg);
  padding: var(--wpc-card-pad-sm);
  box-shadow: var(--wpc-shadow-lg);
}


/* ════════════════════════════════════════════════════════════════════════
   9. LANDING SECTIONS
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Feature grid ─── */
.wpc-features { display: grid; grid-template-columns: 1fr; gap: var(--wpc-grid-gap); }
.wpc-feature {
  padding: var(--wpc-8);
  border: 1px solid var(--wpc-border);
  background: var(--wpc-bg-card);
  transition: border-color var(--wpc-ease), background var(--wpc-ease);
}
.wpc-feature:hover { border-color: var(--wpc-accent); background: var(--wpc-bg-dim); }
.wpc-feature-icon { color: var(--wpc-accent); margin-bottom: var(--wpc-4); }
.wpc-feature-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; }
.wpc-feature-title {
  font-family: var(--wpc-font-display);
  font-size: var(--wpc-text-3xl);
  font-weight: var(--wpc-weight-bold);
  color: var(--wpc-text-strong);
  margin-bottom: var(--wpc-2);
}
.wpc-feature-text { font-size: var(--wpc-text-lg); color: var(--wpc-text-muted); line-height: var(--wpc-leading-relaxed); font-weight: var(--wpc-weight-thin); }

/* ─── Stats / metrics row ─── */
.wpc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wpc-grid-gap); }
.wpc-stat { padding: var(--wpc-8); text-align: center; border: 1px solid var(--wpc-border); background: var(--wpc-bg-card); }
.wpc-stat-num {
  font-family: var(--wpc-font-display);
  font-size: var(--wpc-text-metric);
  font-weight: var(--wpc-weight-black);
  color: var(--wpc-accent);
  line-height: 1;
  margin-bottom: var(--wpc-2);
}
.wpc-stat-label { font-size: var(--wpc-text-sm); color: var(--wpc-text-muted); text-transform: uppercase; letter-spacing: var(--wpc-tracking-sm); }

/* ─── Steps / process ─── */
.wpc-steps { display: flex; flex-wrap: wrap; position: relative; gap: var(--wpc-6); }
.wpc-step { flex: 1; min-width: 120px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--wpc-2); }
.wpc-step-num {
  width: 52px; height: 52px;
  border-radius: var(--wpc-radius-full);
  background: var(--wpc-bg);
  border: 1px solid var(--wpc-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--wpc-font-display);
  font-size: var(--wpc-text-2xl);
  font-weight: var(--wpc-weight-bold);
  color: var(--wpc-accent);
  margin-bottom: var(--wpc-3);
  position: relative; z-index: 1;
}
.wpc-step-name { font-size: var(--wpc-text-sm); font-weight: var(--wpc-weight-bold); color: var(--wpc-text-strong); margin-bottom: var(--wpc-1); }
.wpc-step-desc { font-size: var(--wpc-text-xs); color: var(--wpc-text-muted); line-height: var(--wpc-leading-normal); }
/* Connector line behind step numbers (desktop) */
@container wpc (min-width: 600px) {
  .wpc-steps::after {
    content: ''; position: absolute; top: 26px; left: 26px; right: 26px;
    height: 1px; background: var(--wpc-border); z-index: 0;
  }
}

/* ─── Pricing ─── */
.wpc-pricing { display: grid; grid-template-columns: 1fr; gap: var(--wpc-grid-gap-md); }
.wpc-price-card {
  padding: var(--wpc-card-pad);
  border: 1px solid var(--wpc-border);
  background: var(--wpc-bg-card);
  border-radius: var(--wpc-radius-lg);
  display: flex; flex-direction: column;
}
.wpc-price-featured {
  border-color: var(--wpc-accent);
  border-width: 2px;
  box-shadow: var(--wpc-shadow-lg);
  position: relative;
}
.wpc-price-tier { font-size: var(--wpc-text-sm); font-weight: var(--wpc-weight-bold); letter-spacing: var(--wpc-tracking-md); text-transform: uppercase; color: var(--wpc-accent); margin-bottom: var(--wpc-3); }
.wpc-price-amount { font-family: var(--wpc-font-display); font-size: var(--wpc-text-7xl); font-weight: var(--wpc-weight-bold); color: var(--wpc-text-strong); line-height: 1; }
.wpc-price-amount small { font-size: var(--wpc-text-xl); color: var(--wpc-text-muted); font-weight: var(--wpc-weight-regular); }
.wpc-price-note { font-size: var(--wpc-text-md); color: var(--wpc-text-muted); margin-top: var(--wpc-1); margin-bottom: var(--wpc-6); }
.wpc-price-list { list-style: none; padding: 0; margin: 0 0 var(--wpc-8); display: flex; flex-direction: column; gap: var(--wpc-3); }
.wpc-price-list li { display: flex; gap: var(--wpc-2); align-items: flex-start; font-size: var(--wpc-text-lg); color: var(--wpc-text); }
.wpc-price-list li::before { content: '✓'; color: var(--wpc-accent); font-weight: var(--wpc-weight-bold); flex-shrink: 0; }
.wpc-price-card .wpc-btn { margin-top: auto; }

/* ─── FAQ (native <details>, no JS) ─── */
.wpc-faq { display: flex; flex-direction: column; gap: var(--wpc-2); max-width: var(--wpc-max-md); margin-inline: auto; }
.wpc-faq-item {
  border: 1px solid var(--wpc-border);
  border-radius: var(--wpc-radius-md);
  background: var(--wpc-bg-card);
  overflow: hidden;
}
.wpc-faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--wpc-5) var(--wpc-6);
  font-weight: var(--wpc-weight-semi);
  font-size: var(--wpc-text-xl);
  color: var(--wpc-text-strong);
  display: flex; justify-content: space-between; align-items: center; gap: var(--wpc-4);
  transition: color var(--wpc-ease);
}
.wpc-faq-item > summary::-webkit-details-marker { display: none; }
.wpc-faq-item > summary::after {
  content: '+';
  font-size: var(--wpc-text-4xl);
  color: var(--wpc-accent);
  line-height: 1;
  transition: transform var(--wpc-ease);
  flex-shrink: 0;
}
.wpc-faq-item[open] > summary::after { transform: rotate(45deg); }
.wpc-faq-item > summary:hover { color: var(--wpc-accent); }
.wpc-faq-answer { padding: 0 var(--wpc-6) var(--wpc-5); color: var(--wpc-text-muted); line-height: var(--wpc-leading-relaxed); font-size: var(--wpc-text-lg); }

/* ─── Accordion (JS-driven, animated) — paired with master.js ───
   Markup:
   <div class="wpc-acc">
     <div class="wpc-acc-item">
       <button class="wpc-acc-q" type="button" aria-expanded="false">
         Question <svg class="wpc-acc-chev" …><polyline points="6 9 12 15 18 9"/></svg>
       </button>
       <div class="wpc-acc-a"><div class="wpc-acc-inner">Answer…</div></div>
     </div>
   </div>
   master.js opens one item at a time per .wpc-acc and toggles .is-open. */
.wpc-acc { display: flex; flex-direction: column; gap: var(--wpc-grid-gap); max-width: var(--wpc-max-md); margin-inline: auto; }
.wpc-acc-item { border: 1px solid var(--wpc-border); background: var(--wpc-bg-subtle); overflow: hidden; }
.wpc-acc-q {
  width: 100%; text-align: left;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--wpc-4);
  padding: var(--wpc-6) var(--wpc-7);
  font-family: var(--wpc-font-body); font-size: var(--wpc-text-xl); font-weight: var(--wpc-weight-semi);
  color: var(--wpc-text-strong); line-height: var(--wpc-leading-snug);
  /* !important + appearance reset: beat theme/Kadence/Elementor native <button> styling */
  background: transparent !important; border: none !important; box-shadow: none !important;
  -webkit-appearance: none; appearance: none;
  cursor: pointer; transition: color var(--wpc-ease); user-select: none;
}
.wpc-acc-q:hover, .wpc-acc-q:focus, .wpc-acc-q:active, .wpc-acc-q:focus-visible {
  background: transparent !important; box-shadow: none !important; outline: none;
}
.wpc-acc-q:hover, .wpc-acc-q.is-open { color: var(--wpc-accent); }
.wpc-acc-chev { flex-shrink: 0; color: var(--wpc-accent); transition: transform var(--wpc-ease); margin-top: 2px; }
.wpc-acc-q.is-open .wpc-acc-chev { transform: rotate(180deg); }
.wpc-acc-a {
  max-height: 0; overflow: hidden;
  transition: max-height .4s ease, padding .3s ease;
  font-size: var(--wpc-text-md); color: var(--wpc-text-muted);
  line-height: var(--wpc-leading-loose); font-weight: var(--wpc-weight-thin);
  padding: 0 var(--wpc-7);
}
.wpc-acc-a.is-open { max-height: 600px; padding: 0 var(--wpc-7) var(--wpc-6); }
.wpc-acc-a strong { color: var(--wpc-text-strong); font-weight: var(--wpc-weight-medium); }
.wpc-acc-inner { padding-top: 0; }

/* ─── Testimonials ─── */
.wpc-testimonial {
  padding: var(--wpc-card-pad);
  border: 1px solid var(--wpc-border);
  background: var(--wpc-bg-card);
  border-radius: var(--wpc-radius-lg);
}
.wpc-quote { font-size: var(--wpc-text-2xl); line-height: var(--wpc-leading-relaxed); color: var(--wpc-text); margin-bottom: var(--wpc-6); }
.wpc-quote::before { content: '“'; font-family: var(--wpc-font-display); font-size: var(--wpc-text-7xl); color: var(--wpc-accent); line-height: 0; vertical-align: -0.4em; margin-right: var(--wpc-1); }
.wpc-testimonial-author { display: flex; align-items: center; gap: var(--wpc-3); }
.wpc-avatar { width: 44px; height: 44px; border-radius: var(--wpc-radius-full); overflow: hidden; flex-shrink: 0; border: 2px solid var(--wpc-accent); }
.wpc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wpc-author-name { font-weight: var(--wpc-weight-semi); color: var(--wpc-text-strong); font-size: var(--wpc-text-lg); }
.wpc-author-role { font-size: var(--wpc-text-md); color: var(--wpc-text-muted); }

/* ─── Tabs (paired with master.js) ─── */
.wpc-tabs { display: flex; flex-wrap: wrap; border: 1px solid var(--wpc-border); background: var(--wpc-bg); margin-bottom: var(--wpc-10); }
.wpc-tab {
  flex: 1; min-width: 140px;
  padding: var(--wpc-4) var(--wpc-5);
  text-align: center;
  font-family: var(--wpc-font-body);
  font-size: var(--wpc-text-base);
  font-weight: var(--wpc-weight-bold);
  letter-spacing: var(--wpc-tracking-sm);
  text-transform: uppercase;
  color: var(--wpc-text-muted);
  background: transparent;
  border: none;
  border-right: 1px solid var(--wpc-border);
  cursor: pointer;
  transition: background var(--wpc-ease), color var(--wpc-ease);
}
.wpc-tab:last-child { border-right: none; }
.wpc-tab.is-active { background: var(--wpc-btn-bg); color: #fff; }
.wpc-panel { display: none; }
.wpc-panel.is-active { display: block; }
@media (max-width: 600px) {
  .wpc-tabs { flex-direction: column; }
  .wpc-tab { border-right: none; border-bottom: 1px solid var(--wpc-border); }
  .wpc-tab:last-child { border-bottom: none; }
}

/* ─── Logo / trust strip ─── */
.wpc-logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--wpc-10);
  padding: var(--wpc-8) 0;
}
.wpc-logos img { height: 32px; width: auto; opacity: .6; filter: grayscale(1); transition: opacity var(--wpc-ease), filter var(--wpc-ease); }
.wpc-logos img:hover { opacity: 1; filter: grayscale(0); }


/* ════════════════════════════════════════════════════════════════════════
   10. TABLES & COMPARISON TABLES  (namespaced, was .single-entry table)
   ════════════════════════════════════════════════════════════════════════ */
.wpc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--wpc-8) 0; }
.wpc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wpc-text-lg);
  border-radius: var(--wpc-radius-md);
  overflow: hidden;
  box-shadow: var(--wpc-shadow-sm);
  background: var(--wpc-bg-card);
  min-width: 480px;
}
.wpc-table thead th {
  background: var(--wpc-bg-dim);
  color: var(--wpc-text-strong);
  font-weight: var(--wpc-weight-semi);
  padding: var(--wpc-3) var(--wpc-5);
  text-align: left;
  border: 1px solid var(--wpc-border-strong);
}
.wpc-table thead { border-bottom: 3px solid var(--wpc-border-strong); }
.wpc-table th  { border-bottom: 2px solid var(--wpc-border-strong); }
.wpc-table td  { padding: var(--wpc-3) var(--wpc-4); border: 1px solid var(--wpc-border); color: var(--wpc-text); }
.wpc-table tbody tr:nth-child(even) { background: var(--wpc-bg-dim); }
.wpc-table tbody tr:hover { background: var(--wpc-bg-subtle); transition: background var(--wpc-ease); }
.wpc-table tbody tr:last-child td { border-bottom: 3px solid var(--wpc-border-strong); }

/* Comparison table — ✓ / ✗ cells */
.wpc-table-compare td { text-align: center; }
.wpc-table-compare td:first-child { text-align: left; font-weight: var(--wpc-weight-medium); color: var(--wpc-text-strong); }
.wpc-cell-yes { color: var(--wpc-green); font-weight: var(--wpc-weight-bold); }
.wpc-cell-no  { color: var(--wpc-text-faint); }
.wpc-col-highlight { background: var(--wpc-bg-dim) !important; }


/* ════════════════════════════════════════════════════════════════════════
   11. AI / SEO / SaaS COMPONENTS
   ════════════════════════════════════════════════════════════════════════ */

/* Gradient headline fill */
.wpc-gradient-text {
  background: var(--wpc-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Animated metric (pairs with master.js data-target) */
.wpc-metric {
  font-family: var(--wpc-font-display);
  font-size: var(--wpc-text-metric);
  font-weight: var(--wpc-weight-black);
  color: var(--wpc-accent);
  line-height: 1;
}

/* Code block */
.wpc-code {
  font-family: var(--wpc-font-mono);
  font-size: var(--wpc-text-md);
  background: var(--wpc-bg-code);
  color: var(--wpc-text-code);
  padding: var(--wpc-5) var(--wpc-6);
  border-radius: var(--wpc-radius-md);
  overflow-x: auto;
  line-height: var(--wpc-leading-relaxed);
  border: 1px solid var(--wpc-border);
}
.wpc-code-inline {
  font-family: var(--wpc-font-mono);
  font-size: .9em;
  background: var(--wpc-bg-dim);
  color: var(--wpc-accent);
  padding: 2px 6px;
  border-radius: var(--wpc-radius-sm);
}

/* Terminal — code block with traffic-light header */
.wpc-terminal {
  background: var(--wpc-bg-code);
  border-radius: var(--wpc-radius-md);
  overflow: hidden;
  border: 1px solid var(--wpc-border);
  box-shadow: var(--wpc-shadow-lg);
}
.wpc-terminal-bar { display: flex; gap: var(--wpc-2); padding: var(--wpc-3) var(--wpc-4); background: rgba(255,255,255,0.04); }
.wpc-terminal-dot { width: 11px; height: 11px; border-radius: var(--wpc-radius-full); }
.wpc-terminal-dot:nth-child(1) { background: #FF5F56; }
.wpc-terminal-dot:nth-child(2) { background: #FFBD2E; }
.wpc-terminal-dot:nth-child(3) { background: #27C93F; }
.wpc-terminal-body { font-family: var(--wpc-font-mono); font-size: var(--wpc-text-md); color: var(--wpc-text-code); padding: var(--wpc-5) var(--wpc-6); line-height: var(--wpc-leading-relaxed); white-space: pre-wrap; }
.wpc-terminal-body .wpc-prompt { color: var(--wpc-accent-light); }

/* Capability tag-pill (AI model chips, feature tags) */
.wpc-tag-pill {
  display: inline-flex; align-items: center; gap: var(--wpc-1);
  padding: var(--wpc-1) var(--wpc-3);
  font-size: var(--wpc-text-sm);
  font-weight: var(--wpc-weight-medium);
  color: var(--wpc-accent);
  background: var(--wpc-bg-dim);
  border: 1px solid var(--wpc-border);
  border-radius: var(--wpc-radius-full);
  white-space: nowrap;
}
.wpc-tag-pill-row { display: flex; flex-wrap: wrap; gap: var(--wpc-2); }

/* Integration grid (logo + name cards) */
.wpc-integrations { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--wpc-grid-gap); }
.wpc-integration {
  display: flex; align-items: center; gap: var(--wpc-3);
  padding: var(--wpc-4) var(--wpc-5);
  border: 1px solid var(--wpc-border);
  background: var(--wpc-bg-card);
  transition: border-color var(--wpc-ease);
}
.wpc-integration:hover { border-color: var(--wpc-accent); }
.wpc-integration img { width: 32px; height: 32px; object-fit: contain; }
.wpc-integration-name { font-weight: var(--wpc-weight-medium); color: var(--wpc-text-strong); font-size: var(--wpc-text-lg); }
@container wpc (min-width: 600px) { .wpc-integrations { grid-template-columns: repeat(3, 1fr); } }
@container wpc (min-width: 900px) { .wpc-integrations { grid-template-columns: repeat(4, 1fr); } }


/* ════════════════════════════════════════════════════════════════════════
   12. BADGES / CALLOUT / ENGINE BAR
   ════════════════════════════════════════════════════════════════════════ */
.wpc-badge {
  display: inline-flex; align-items: center;
  font-size: var(--wpc-text-xs);
  font-weight: var(--wpc-weight-bold);
  letter-spacing: var(--wpc-tracking-md);
  text-transform: uppercase;
  padding: 4px 10px;
  line-height: 1;
}
.wpc-badge-solid   { background: var(--wpc-btn-bg); color: #fff; }
.wpc-badge-outline { border: 1px solid var(--wpc-accent); color: var(--wpc-accent); }
.wpc-badge-subtle  { background: var(--wpc-bg-dim); color: var(--wpc-accent); }
.wpc-badge-green   { background: var(--wpc-green-dim); color: var(--wpc-green); }
.wpc-badge-red     { background: var(--wpc-red-dim); color: var(--wpc-red); }
.wpc-badge-amber   { background: var(--wpc-amber-dim); color: var(--wpc-amber); }

.wpc-callout {
  padding: var(--wpc-6) var(--wpc-7);
  border-left: 3px solid var(--wpc-accent);
  background: var(--wpc-bg-dim);
  font-size: var(--wpc-text-xl);
  color: var(--wpc-text-muted);
  line-height: var(--wpc-leading-looser);
  font-weight: var(--wpc-weight-thin);
  margin-top: var(--wpc-9);
}
.wpc-callout strong { color: var(--wpc-text-strong); font-weight: var(--wpc-weight-medium); }

.wpc-banner {
  background: var(--wpc-bg-dim);
  border: 1px solid var(--wpc-border);
  padding: 26px 36px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--wpc-5);
  margin-top: var(--wpc-9);
}
.wpc-banner-text { font-size: var(--wpc-text-xl); color: var(--wpc-text); line-height: var(--wpc-leading-relaxed); }
.wpc-banner-text strong { color: var(--wpc-accent); font-weight: var(--wpc-weight-semi); }

.wpc-engine-bar { display: flex; flex-wrap: wrap; border: 1px solid var(--wpc-border); overflow: hidden; background: var(--wpc-bg); }
.wpc-engine-item { flex: 1 0 50%; padding: 13px 14px; border-right: 1px solid var(--wpc-border); border-bottom: 1px solid var(--wpc-border); text-align: center; }
.wpc-engine-label { font-size: var(--wpc-text-xs); font-weight: var(--wpc-weight-semi); color: var(--wpc-text-muted); letter-spacing: var(--wpc-tracking-xs); text-transform: uppercase; margin-bottom: 5px; }
.wpc-engine-status { font-size: var(--wpc-text-sm); font-weight: var(--wpc-weight-medium); display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--wpc-text); }
@container wpc (min-width: 600px) {
  .wpc-engine-item { flex: 1; border-bottom: none; }
  .wpc-engine-item:last-child { border-right: none; }
}

/* Status dots */
.wpc-dot { width: 6px; height: 6px; border-radius: var(--wpc-radius-full); display: inline-block; flex-shrink: 0; }
.wpc-dot-live   { background: var(--wpc-green-live); }
.wpc-dot-accent { background: var(--wpc-accent); }
.wpc-dot-muted  { background: var(--wpc-text-muted); }
.wpc-dot-red    { background: var(--wpc-red); }
.wpc-dot-amber  { background: var(--wpc-amber); }


/* ════════════════════════════════════════════════════════════════════════
   13. THEME TOGGLE + SOCIAL BUTTONS
   ════════════════════════════════════════════════════════════════════════ */
.wpc-theme-toggle {
  position: fixed; top: 20px; right: 20px;
  width: 42px; height: 42px;
  border-radius: var(--wpc-radius-full);
  background: var(--wpc-bg);
  border: 1px solid var(--wpc-border);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: var(--wpc-z-top);
  transition: background var(--wpc-ease), border-color var(--wpc-ease);
  color: var(--wpc-accent);
  box-shadow: var(--wpc-shadow-sm);
}
.wpc-theme-toggle:hover { border-color: var(--wpc-accent); background-color: var(--wpc-bg-dim); }
.wpc-theme-toggle-inline { position: static; box-shadow: none; }

.wpc-social-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--wpc-2);
  padding: 7px 14px;
  font-family: var(--wpc-font-body);
  font-size: var(--wpc-text-sm);
  font-weight: var(--wpc-weight-semi);
  letter-spacing: var(--wpc-tracking-xs);
  text-decoration: none; text-transform: uppercase;
  transition: background var(--wpc-ease), border-color var(--wpc-ease);
  white-space: nowrap;
}
.wpc-social-linkedin { background: var(--wpc-linkedin-bg); border: 1px solid var(--wpc-linkedin-border); color: var(--wpc-linkedin-text); }
.wpc-social-linkedin:hover { background: rgba(10,102,194,.15); color: var(--wpc-linkedin-text); }
.wpc-social-x { background: var(--wpc-bg-dim); border: 1px solid var(--wpc-border); color: var(--wpc-x-text); }
.wpc-social-x:hover { background: var(--wpc-bg-dim); border-color: var(--wpc-accent); color: var(--wpc-x-text); }


/* ════════════════════════════════════════════════════════════════════════
   14. SVG & DIAGRAM SYSTEM   (.svg-chart-graph — unchanged from v4)
   No inline <style> blocks in SVG — all styling here.
   ════════════════════════════════════════════════════════════════════════ */

/* Container — responsive, scrolls on mobile rather than crushing */
.svg-chart-graph { padding: 20px; margin-bottom: 35px; border-radius: var(--wpc-radius-sm); border: 1px solid var(--wpc-border); background: var(--wpc-bg-dim); }
.svg-chart-graph svg { width: 100%; height: auto; display: block; min-width: 520px; }
@media (max-width: 600px) { .svg-chart-graph { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 14px; } }

/* Typography */
.svg-chart-graph .hd   { font: bold 17px/1.4 sans-serif; fill: #1A202C; }
.svg-chart-graph .lbl  { font: 15px/1.4 sans-serif;      fill: #2D3748; }
.svg-chart-graph .sub  { font: 13px/1.4 sans-serif;      fill: #718096; }
.svg-chart-graph .note { font: italic 13px/1.4 sans-serif; fill: #718096; }
.svg-chart-graph .num  { font: bold 13px/1 sans-serif;   fill: #673DE5; }
.svg-chart-graph .badge-text { font: bold 11px/1 sans-serif; fill: #ffffff; letter-spacing: .04em; }

/* Nodes / boxes */
.svg-chart-graph .box  { fill: #ffffff; stroke: #C4B5FD; stroke-width: 1.5; }
.svg-chart-graph .live { fill: rgba(103,61,229,0.08); stroke: #673DE5; stroke-width: 1.5; }
.svg-chart-graph .dead { fill: rgba(220,38,38,0.07); stroke: #DC2626; stroke-width: 1.5; }
.svg-chart-graph .ok   { fill: rgba(5,150,105,0.08); stroke: #059669; stroke-width: 1.5; }
.svg-chart-graph .info { fill: rgba(37,99,235,0.07); stroke: #2563EB; stroke-width: 1.5; }
.svg-chart-graph .data { fill: rgba(8,145,178,0.07); stroke: #0891B2; stroke-width: 1.5; }
.svg-chart-graph .warn { fill: rgba(217,119,6,0.08); stroke: #D97706; stroke-width: 1.5; }
.svg-chart-graph .off  { fill: #F3F4F6; stroke: #9CA3AF; stroke-width: 1.5; }
.svg-chart-graph .dark { fill: #1E293B; stroke: #334155; stroke-width: 1.5; }
.svg-chart-graph .dark + .lbl,
.svg-chart-graph .lbl.on-dark { fill: #F8FAFC; }

/* Badges */
.svg-chart-graph .badge-purple { fill: #673DE5; }
.svg-chart-graph .badge-red    { fill: #DC2626; }
.svg-chart-graph .badge-green  { fill: #059669; }
.svg-chart-graph .badge-blue   { fill: #2563EB; }
.svg-chart-graph .badge-teal   { fill: #0891B2; }
.svg-chart-graph .badge-amber  { fill: #D97706; }
.svg-chart-graph .badge-gray   { fill: #6B7280; }

/* Data-chart bars & lines (SOLID fills, for bar/line charts, NOT flow nodes).
   Refined chart palette: explicit light values here, dark mirrors in the dark blocks below. */
.svg-chart-graph .bar-track  { fill: #E9E6F7; }
.svg-chart-graph .bar-accent { fill: #673DE5; }
.svg-chart-graph .bar-green  { fill: #1F9D6B; }
.svg-chart-graph .bar-red    { fill: #E25C52; }
.svg-chart-graph .bar-blue   { fill: #4C82E6; }
.svg-chart-graph .bar-amber  { fill: #E59E3C; }
.svg-chart-graph .bar-teal   { fill: #2AA5B6; }
.svg-chart-graph .bar-gray   { fill: #9AA4B2; }
.svg-chart-graph .line-accent { fill: none; stroke: #673DE5; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.svg-chart-graph .line-green  { fill: none; stroke: #1F9D6B; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.svg-chart-graph .line-red    { fill: none; stroke: #E25C52; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.svg-chart-graph .dot-accent  { fill: #673DE5; }
.svg-chart-graph .dot-green   { fill: #1F9D6B; }
.svg-chart-graph .dot-red     { fill: #E25C52; }
.svg-chart-graph .axis        { stroke: #CFC9E8; stroke-width: 1; }
.svg-chart-graph .gridline    { stroke: #E6E2F4; stroke-width: 1; }

/* Structure */
.svg-chart-graph .lane    { fill: rgba(103,61,229,0.04); stroke: rgba(103,61,229,0.18); stroke-width: 1; }
.svg-chart-graph .group   { fill: none; stroke: #9CA3AF; stroke-width: 1.5; stroke-dasharray: 5 3; }
.svg-chart-graph .divider { stroke: #C4B5FD; stroke-width: 1; }
.svg-chart-graph .band-purple { fill: rgba(103,61,229,0.08); }
.svg-chart-graph .band-gray   { fill: rgba(0,0,0,0.04); }

/* Arrows */
.svg-chart-graph .arr        { stroke: #718096; stroke-width: 2; fill: none; }
.svg-chart-graph .arr-accent { stroke: #673DE5; stroke-width: 2; fill: none; }
.svg-chart-graph .arr-ok     { stroke: #059669; stroke-width: 2; fill: none; }
.svg-chart-graph .arr-dead   { stroke: #DC2626; stroke-width: 2; fill: none; }
.svg-chart-graph .arr-dashed { stroke: #9CA3AF; stroke-width: 1.5; fill: none; stroke-dasharray: 5 4; }
.svg-chart-graph .arr-thick  { stroke: #673DE5; stroke-width: 3; fill: none; }
.svg-chart-graph .arr-none   { stroke: none; fill: none; }

/* SVG dark mode */
[data-theme="dark"] .svg-chart-graph .hd   { fill: #F8FAFC; }
[data-theme="dark"] .svg-chart-graph .lbl  { fill: #E2E8F0; }
[data-theme="dark"] .svg-chart-graph .sub  { fill: #9CA3AF; }
[data-theme="dark"] .svg-chart-graph .note { fill: #9CA3AF; }
[data-theme="dark"] .svg-chart-graph .num  { fill: #A78BFA; }
[data-theme="dark"] .svg-chart-graph .box  { fill: #171f35; stroke: rgba(139,107,255,0.35); }
[data-theme="dark"] .svg-chart-graph .live { fill: rgba(139,107,255,0.12); stroke: #A78BFA; }
[data-theme="dark"] .svg-chart-graph .dead { fill: rgba(239,68,68,0.12);   stroke: #e981fc; }
[data-theme="dark"] .svg-chart-graph .ok   { fill: rgba(16,185,129,0.12);  stroke: #34D399; }
[data-theme="dark"] .svg-chart-graph .info { fill: rgba(96,165,250,0.10);  stroke: #60A5FA; }
[data-theme="dark"] .svg-chart-graph .data { fill: rgba(34,211,238,0.10);  stroke: #22D3EE; }
[data-theme="dark"] .svg-chart-graph .warn { fill: rgba(251,191,36,0.10);  stroke: #FCD34D; }
[data-theme="dark"] .svg-chart-graph .off  { fill: #374151; stroke: #6B7280; }
[data-theme="dark"] .svg-chart-graph .dark { fill: #0F172A; stroke: #1E293B; }
[data-theme="dark"] .svg-chart-graph .badge-purple { fill: #A78BFA; }
[data-theme="dark"] .svg-chart-graph .badge-red    { fill: #e981fc; }
[data-theme="dark"] .svg-chart-graph .badge-green  { fill: #34D399; }
[data-theme="dark"] .svg-chart-graph .badge-blue   { fill: #60A5FA; }
[data-theme="dark"] .svg-chart-graph .badge-teal   { fill: #22D3EE; }
[data-theme="dark"] .svg-chart-graph .badge-amber  { fill: #FCD34D; }
[data-theme="dark"] .svg-chart-graph .badge-gray   { fill: #9CA3AF; }
[data-theme="dark"] .svg-chart-graph .lane    { fill: rgba(139,107,255,0.06); stroke: rgba(139,107,255,0.2); }
[data-theme="dark"] .svg-chart-graph .group   { stroke: #4B5563; }
[data-theme="dark"] .svg-chart-graph .divider { stroke: rgba(139,107,255,0.25); }
[data-theme="dark"] .svg-chart-graph .band-purple { fill: rgba(139,107,255,0.1); }
[data-theme="dark"] .svg-chart-graph .band-gray   { fill: rgba(255,255,255,0.04); }
[data-theme="dark"] .svg-chart-graph .arr        { stroke: #6B7280; }
[data-theme="dark"] .svg-chart-graph .arr-accent { stroke: #A78BFA; }
[data-theme="dark"] .svg-chart-graph .arr-ok     { stroke: #34D399; }
[data-theme="dark"] .svg-chart-graph .arr-dead   { stroke: #e981fc; }
[data-theme="dark"] .svg-chart-graph .arr-dashed { stroke: #4B5563; }
[data-theme="dark"] .svg-chart-graph .arr-thick  { stroke: #A78BFA; }
[data-theme="dark"] .svg-chart-graph .bar-track  { fill: #1E2740; }
[data-theme="dark"] .svg-chart-graph .bar-accent { fill: #A78BFA; }
[data-theme="dark"] .svg-chart-graph .bar-green  { fill: #4FC591; }
[data-theme="dark"] .svg-chart-graph .bar-red    { fill: #F07E75; }
[data-theme="dark"] .svg-chart-graph .bar-blue   { fill: #74A2F2; }
[data-theme="dark"] .svg-chart-graph .bar-amber  { fill: #F2C063; }
[data-theme="dark"] .svg-chart-graph .bar-teal   { fill: #54C6D6; }
[data-theme="dark"] .svg-chart-graph .bar-gray   { fill: #6B7682; }
[data-theme="dark"] .svg-chart-graph .line-accent { stroke: #A78BFA; }
[data-theme="dark"] .svg-chart-graph .line-green  { stroke: #4FC591; }
[data-theme="dark"] .svg-chart-graph .line-red    { stroke: #F07E75; }
[data-theme="dark"] .svg-chart-graph .dot-accent  { fill: #A78BFA; }
[data-theme="dark"] .svg-chart-graph .dot-green   { fill: #4FC591; }
[data-theme="dark"] .svg-chart-graph .dot-red     { fill: #F07E75; }
[data-theme="dark"] .svg-chart-graph .axis        { stroke: #334155; }
[data-theme="dark"] .svg-chart-graph .gridline    { stroke: #232C44; }

/* SVG dark mode — OS-level auto-detect mirror.
   Safari can leave data-theme="dark" unset on first paint when dark mode
   comes purely from the OS (matchMedia timing quirk in the early <head>
   script), even though @media (prefers-color-scheme:dark) already matches
   and the --wpc-* tokens (and this diagram's container) have switched.
   These inner SVG fills/strokes are hardcoded, not token-based, so they
   need the same @media coverage as the [data-theme="dark"] block above —
   exact mirror of it, line for line. :not([data-theme="light"]) still
   respects an explicit "force light" choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .svg-chart-graph .hd   { fill: #F8FAFC; }
  :root:not([data-theme="light"]) .svg-chart-graph .lbl  { fill: #E2E8F0; }
  :root:not([data-theme="light"]) .svg-chart-graph .sub  { fill: #9CA3AF; }
  :root:not([data-theme="light"]) .svg-chart-graph .note { fill: #9CA3AF; }
  :root:not([data-theme="light"]) .svg-chart-graph .num  { fill: #A78BFA; }
  :root:not([data-theme="light"]) .svg-chart-graph .box  { fill: #171f35; stroke: rgba(139,107,255,0.35); }
  :root:not([data-theme="light"]) .svg-chart-graph .live { fill: rgba(139,107,255,0.12); stroke: #A78BFA; }
  :root:not([data-theme="light"]) .svg-chart-graph .dead { fill: rgba(239,68,68,0.12);   stroke: #e981fc; }
  :root:not([data-theme="light"]) .svg-chart-graph .ok   { fill: rgba(16,185,129,0.12);  stroke: #34D399; }
  :root:not([data-theme="light"]) .svg-chart-graph .info { fill: rgba(96,165,250,0.10);  stroke: #60A5FA; }
  :root:not([data-theme="light"]) .svg-chart-graph .data { fill: rgba(34,211,238,0.10);  stroke: #22D3EE; }
  :root:not([data-theme="light"]) .svg-chart-graph .warn { fill: rgba(251,191,36,0.10);  stroke: #FCD34D; }
  :root:not([data-theme="light"]) .svg-chart-graph .off  { fill: #374151; stroke: #6B7280; }
  :root:not([data-theme="light"]) .svg-chart-graph .dark { fill: #0F172A; stroke: #1E293B; }
  :root:not([data-theme="light"]) .svg-chart-graph .badge-purple { fill: #A78BFA; }
  :root:not([data-theme="light"]) .svg-chart-graph .badge-red    { fill: #e981fc; }
  :root:not([data-theme="light"]) .svg-chart-graph .badge-green  { fill: #34D399; }
  :root:not([data-theme="light"]) .svg-chart-graph .badge-blue   { fill: #60A5FA; }
  :root:not([data-theme="light"]) .svg-chart-graph .badge-teal   { fill: #22D3EE; }
  :root:not([data-theme="light"]) .svg-chart-graph .badge-amber  { fill: #FCD34D; }
  :root:not([data-theme="light"]) .svg-chart-graph .badge-gray   { fill: #9CA3AF; }
  :root:not([data-theme="light"]) .svg-chart-graph .lane    { fill: rgba(139,107,255,0.06); stroke: rgba(139,107,255,0.2); }
  :root:not([data-theme="light"]) .svg-chart-graph .group   { stroke: #4B5563; }
  :root:not([data-theme="light"]) .svg-chart-graph .divider { stroke: rgba(139,107,255,0.25); }
  :root:not([data-theme="light"]) .svg-chart-graph .band-purple { fill: rgba(139,107,255,0.1); }
  :root:not([data-theme="light"]) .svg-chart-graph .band-gray   { fill: rgba(255,255,255,0.04); }
  :root:not([data-theme="light"]) .svg-chart-graph .arr        { stroke: #6B7280; }
  :root:not([data-theme="light"]) .svg-chart-graph .arr-accent { stroke: #A78BFA; }
  :root:not([data-theme="light"]) .svg-chart-graph .arr-ok     { stroke: #34D399; }
  :root:not([data-theme="light"]) .svg-chart-graph .arr-dead   { stroke: #e981fc; }
  :root:not([data-theme="light"]) .svg-chart-graph .arr-dashed { stroke: #4B5563; }
  :root:not([data-theme="light"]) .svg-chart-graph .arr-thick  { stroke: #A78BFA; }
  :root:not([data-theme="light"]) .svg-chart-graph .bar-track  { fill: #1E2740; }
  :root:not([data-theme="light"]) .svg-chart-graph .bar-accent { fill: #A78BFA; }
  :root:not([data-theme="light"]) .svg-chart-graph .bar-green  { fill: #4FC591; }
  :root:not([data-theme="light"]) .svg-chart-graph .bar-red    { fill: #F07E75; }
  :root:not([data-theme="light"]) .svg-chart-graph .bar-blue   { fill: #74A2F2; }
  :root:not([data-theme="light"]) .svg-chart-graph .bar-amber  { fill: #F2C063; }
  :root:not([data-theme="light"]) .svg-chart-graph .bar-teal   { fill: #54C6D6; }
  :root:not([data-theme="light"]) .svg-chart-graph .bar-gray   { fill: #6B7682; }
  :root:not([data-theme="light"]) .svg-chart-graph .line-accent { stroke: #A78BFA; }
  :root:not([data-theme="light"]) .svg-chart-graph .line-green  { stroke: #4FC591; }
  :root:not([data-theme="light"]) .svg-chart-graph .line-red    { stroke: #F07E75; }
  :root:not([data-theme="light"]) .svg-chart-graph .dot-accent  { fill: #A78BFA; }
  :root:not([data-theme="light"]) .svg-chart-graph .dot-green   { fill: #4FC591; }
  :root:not([data-theme="light"]) .svg-chart-graph .dot-red     { fill: #F07E75; }
  :root:not([data-theme="light"]) .svg-chart-graph .axis        { stroke: #334155; }
  :root:not([data-theme="light"]) .svg-chart-graph .gridline    { stroke: #232C44; }
}


/* ════════════════════════════════════════════════════════════════════════
   15. UTILITY CLASSES
   ════════════════════════════════════════════════════════════════════════ */

/* Text colors */
.wpc-text-accent  { color: var(--wpc-accent)      !important; }
.wpc-text-strong  { color: var(--wpc-text-strong)  !important; }
.wpc-text-muted   { color: var(--wpc-text-muted)   !important; }
.wpc-text-faint   { color: var(--wpc-text-faint)   !important; }
.wpc-text-inverse { color: var(--wpc-text-inverse) !important; }
.wpc-text-link    { color: var(--wpc-link)         !important; }
.wpc-text-green   { color: var(--wpc-green)        !important; }
.wpc-text-red     { color: var(--wpc-red)          !important; }
.wpc-text-amber   { color: var(--wpc-amber)        !important; }

/* Alignment */
.wpc-text-left   { text-align: left; }
.wpc-text-center { text-align: center; }
.wpc-text-right  { text-align: right; }

/* Weights */
.wpc-thin   { font-weight: var(--wpc-weight-thin); }
.wpc-medium { font-weight: var(--wpc-weight-medium); }
.wpc-semi   { font-weight: var(--wpc-weight-semi); }
.wpc-bold   { font-weight: var(--wpc-weight-bold); }
.wpc-black  { font-weight: var(--wpc-weight-black); }

/* Font family */
.wpc-font-display { font-family: var(--wpc-font-display); }
.wpc-font-body    { font-family: var(--wpc-font-body); }
.wpc-font-mono    { font-family: var(--wpc-font-mono); }

/* Sizes */
.wpc-size-xs  { font-size: var(--wpc-text-xs); }
.wpc-size-sm  { font-size: var(--wpc-text-sm); }
.wpc-size-md  { font-size: var(--wpc-text-md); }
.wpc-size-lg  { font-size: var(--wpc-text-lg); }
.wpc-size-xl  { font-size: var(--wpc-text-xl); }
.wpc-size-2xl { font-size: var(--wpc-text-2xl); }
.wpc-size-3xl { font-size: var(--wpc-text-3xl); }
.wpc-size-4xl { font-size: var(--wpc-text-4xl); }
.wpc-size-5xl { font-size: var(--wpc-text-5xl); }
.wpc-size-6xl { font-size: var(--wpc-text-6xl); }
.wpc-size-7xl { font-size: var(--wpc-text-7xl); }

/* Transform */
.wpc-uppercase  { text-transform: uppercase; }
.wpc-capitalize { text-transform: capitalize; }
.wpc-no-wrap    { white-space: nowrap; }
.wpc-truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Letter spacing */
.wpc-track-wide   { letter-spacing: var(--wpc-tracking-xl); }
.wpc-track-normal { letter-spacing: 0; }

/* Line heights */
.wpc-leading-tight   { line-height: var(--wpc-leading-tight); }
.wpc-leading-normal  { line-height: var(--wpc-leading-normal); }
.wpc-leading-relaxed { line-height: var(--wpc-leading-relaxed); }
.wpc-leading-loose   { line-height: var(--wpc-leading-loose); }
.wpc-leading-looser  { line-height: var(--wpc-leading-looser); }

/* Backgrounds */
.wpc-bg        { background: var(--wpc-bg) !important; }
.wpc-bg-subtle { background: var(--wpc-bg-subtle) !important; }
.wpc-bg-tint   { background: var(--wpc-bg-tint) !important; }
.wpc-bg-hero   { background: var(--wpc-bg-hero) !important; }
.wpc-bg-dim    { background: var(--wpc-bg-dim) !important; }
.wpc-bg-accent { background: var(--wpc-accent) !important; }
.wpc-bg-btn    { background: var(--wpc-btn-bg) !important; }
.wpc-bg-mesh   { background-color: var(--wpc-bg); background-image: var(--wpc-gradient-mesh); }

/* Borders */
.wpc-bordered      { border: 1px solid var(--wpc-border); }
.wpc-border-top    { border-top: 1px solid var(--wpc-border); }
.wpc-border-bottom { border-bottom: 1px solid var(--wpc-border); }
.wpc-border-left   { border-left: 1px solid var(--wpc-border); }
.wpc-border-right  { border-right: 1px solid var(--wpc-border); }
.wpc-border-accent { border-color: var(--wpc-accent) !important; }
.wpc-border-strong { border-color: var(--wpc-border-strong) !important; }
.wpc-border-left-accent { border-left: 3px solid var(--wpc-accent); }

/* Radius */
.wpc-rounded-none { border-radius: var(--wpc-radius-none); }
.wpc-rounded-sm   { border-radius: var(--wpc-radius-sm); }
.wpc-rounded-md   { border-radius: var(--wpc-radius-md); }
.wpc-rounded-lg   { border-radius: var(--wpc-radius-lg); }
.wpc-rounded-xl   { border-radius: var(--wpc-radius-xl); }
.wpc-rounded-full { border-radius: var(--wpc-radius-full); }

/* Shadows */
.wpc-shadow-sm   { box-shadow: var(--wpc-shadow-sm); }
.wpc-shadow-md   { box-shadow: var(--wpc-shadow-md); }
.wpc-shadow-lg   { box-shadow: var(--wpc-shadow-lg); }
.wpc-shadow-xl   { box-shadow: var(--wpc-shadow-xl); }
.wpc-shadow-glow { box-shadow: var(--wpc-shadow-glow); }

/* Margin */
.wpc-m-0 { margin: 0; }
.wpc-m-auto { margin: auto; }
.wpc-mx-auto { margin-inline: auto; }
.wpc-mt-2 { margin-top: var(--wpc-2); } .wpc-mt-4 { margin-top: var(--wpc-4); }
.wpc-mt-6 { margin-top: var(--wpc-6); } .wpc-mt-8 { margin-top: var(--wpc-8); }
.wpc-mt-10 { margin-top: var(--wpc-10); } .wpc-mt-12 { margin-top: var(--wpc-12); }
.wpc-mt-16 { margin-top: var(--wpc-16); } .wpc-mt-20 { margin-top: var(--wpc-20); }
.wpc-mb-2 { margin-bottom: var(--wpc-2); } .wpc-mb-4 { margin-bottom: var(--wpc-4); }
.wpc-mb-6 { margin-bottom: var(--wpc-6); } .wpc-mb-8 { margin-bottom: var(--wpc-8); }
.wpc-mb-10 { margin-bottom: var(--wpc-10); } .wpc-mb-12 { margin-bottom: var(--wpc-12); }
.wpc-mb-16 { margin-bottom: var(--wpc-16); }

/* Padding */
.wpc-p-0 { padding: 0; }
.wpc-p-4 { padding: var(--wpc-4); } .wpc-p-6 { padding: var(--wpc-6); }
.wpc-p-8 { padding: var(--wpc-8); } .wpc-p-10 { padding: var(--wpc-10); }
.wpc-p-12 { padding: var(--wpc-12); }
.wpc-px-4 { padding-inline: var(--wpc-4); } .wpc-px-6 { padding-inline: var(--wpc-6); }
.wpc-px-8 { padding-inline: var(--wpc-8); }
.wpc-py-4 { padding-block: var(--wpc-4); } .wpc-py-6 { padding-block: var(--wpc-6); }
.wpc-py-8 { padding-block: var(--wpc-8); } .wpc-py-12 { padding-block: var(--wpc-12); }
.wpc-py-16 { padding-block: var(--wpc-16); } .wpc-py-24 { padding-block: var(--wpc-24); }

/* Flex / grid */
.wpc-flex { display: flex; }
.wpc-inline-flex { display: inline-flex; }
.wpc-flex-col { display: flex; flex-direction: column; }
.wpc-flex-center { display: flex; align-items: center; justify-content: center; }
.wpc-flex-between { display: flex; align-items: center; justify-content: space-between; }
.wpc-flex-start { display: flex; align-items: flex-start; }
.wpc-flex-wrap { flex-wrap: wrap; }
.wpc-flex-1 { flex: 1; }
.wpc-flex-shrink-0 { flex-shrink: 0; }
.wpc-items-center { align-items: center; }
.wpc-items-start { align-items: flex-start; }
.wpc-justify-center { justify-content: center; }
.wpc-justify-between { justify-content: space-between; }
.wpc-justify-end { justify-content: flex-end; }
.wpc-gap-2 { gap: var(--wpc-2); } .wpc-gap-3 { gap: var(--wpc-3); }
.wpc-gap-4 { gap: var(--wpc-4); } .wpc-gap-5 { gap: var(--wpc-5); }
.wpc-gap-6 { gap: var(--wpc-6); } .wpc-gap-8 { gap: var(--wpc-8); }
.wpc-gap-10 { gap: var(--wpc-10); } .wpc-gap-12 { gap: var(--wpc-12); }
.wpc-gap-14 { gap: var(--wpc-14); } .wpc-gap-16 { gap: var(--wpc-16); }

/* Sizing */
.wpc-w-full { width: 100%; }
.wpc-h-full { height: 100%; }
.wpc-min-h-screen { min-height: 100vh; }
.wpc-max-w-sm { max-width: var(--wpc-max-sm); }
.wpc-max-w-md { max-width: var(--wpc-max-md); }
.wpc-max-w-lg { max-width: var(--wpc-max-lg); }
.wpc-max-w-xl { max-width: var(--wpc-max-xl); }

/* Display & visibility */
.wpc-block { display: block; }
.wpc-inline-block { display: inline-block; }
.wpc-hidden { display: none; }
.wpc-invisible { visibility: hidden; }
.wpc-overflow-hidden { overflow: hidden; }
.wpc-relative { position: relative; }
.wpc-absolute { position: absolute; }
.wpc-fixed { position: fixed; }
.wpc-inset-0 { inset: 0; }
.wpc-pointer-none { pointer-events: none; }


/* ════════════════════════════════════════════════════════════════════════
   16. ANIMATION SYSTEM  (reduced-motion respected)
   ════════════════════════════════════════════════════════════════════════ */
.wpc-reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--wpc-ease-slow), transform var(--wpc-ease-slow); }
.wpc-reveal.is-visible { opacity: 1; transform: translateY(0); }

.wpc-fade { opacity: 0; transition: opacity var(--wpc-ease-slow); }
.wpc-fade.is-visible { opacity: 1; }

.wpc-scale-in { opacity: 0; transform: scale(.96); transition: opacity var(--wpc-ease-slow), transform var(--wpc-ease-slow); }
.wpc-scale-in.is-visible { opacity: 1; transform: scale(1); }

/* Staggered children helper (set --wpc-delay inline) */
.wpc-reveal[style*="--wpc-delay"] { transition-delay: var(--wpc-delay); }

/* Marquee / infinite scroll track */
.wpc-marquee { overflow: hidden; }
.wpc-marquee-track { display: flex; gap: var(--wpc-8); width: max-content; animation: wpc-scroll-x 30s linear infinite; }
@keyframes wpc-scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.wpc-marquee:hover .wpc-marquee-track { animation-play-state: paused; }

/* Spin (loaders) */
.wpc-spin { animation: wpc-spin 1s linear infinite; }
@keyframes wpc-spin { to { transform: rotate(360deg); } }

/* Pulse (live dots, attention) */
.wpc-pulse { animation: wpc-pulse 2s ease-in-out infinite; }
@keyframes wpc-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* ── REDUCED MOTION — disable all animation, show final state ── */
@media (prefers-reduced-motion: reduce) {
  .wpc-reveal,
  .wpc-fade,
  .wpc-scale-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .wpc-marquee-track,
  .wpc-spin,
  .wpc-pulse { animation: none !important; }
  .wpc-root *,
  .wpc-root *::before,
  .wpc-root *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   17. RESPONSIVE HELPERS
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) { .wpc-hide-lg { display: none !important; } }
@media (max-width: 768px) {
  .wpc-hide-md { display: none !important; }
  .wpc-stack-md { flex-direction: column !important; }
}
@media (max-width: 480px) {
  .wpc-hide-sm { display: none !important; }
  /* full-width buttons must wrap (not nowrap) so long labels never clip */
  .wpc-btn-primary,
  .wpc-btn-ghost,
  .wpc-btn-gradient { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .wpc-stack-sm { flex-direction: column !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   18. BLOG CONTENT BLOCKS  (native Gutenberg Group blocks in post content)
   Add the class to a Group block's "Additional CSS class(es)" field.
   Changelog also gets the HTML anchor "article-update-logs".
   Token-driven, light + dark automatic. No inline CSS in posts.
   ════════════════════════════════════════════════════════════════════════ */

/* Key Takeaways box (opens the article) */
.wpc-takeaways {
  border: 2px solid var(--wpc-border);
  background: var(--wpc-bg-overlay);
  border-radius: var(--wpc-radius-lg);
  padding: var(--wpc-4) var(--wpc-5);
  font-size: var(--wpc-text-lg);
}
.wpc-takeaways > :first-child { margin-top: 0; }
.wpc-takeaways > :last-child  { margin-bottom: 0; }
.wpc-takeaways ul { margin: var(--wpc-2) 0 0; padding-left: var(--wpc-5); }
.wpc-takeaways li { margin-bottom: var(--wpc-2); }
.wpc-takeaways li:last-child { margin-bottom: 0; }

/* Bottom post CTA (distinct from the page-level .wpc-cta-band) */
.wpc-post-cta {
  border: 3px solid var(--wpc-border);
  background: var(--wpc-bg-overlay);
  border-radius: var(--wpc-radius-lg);
  padding: var(--wpc-5) var(--wpc-6);
}
.wpc-post-cta > :first-child { margin-top: 0; }
.wpc-post-cta > :last-child  { margin-bottom: 0; }

/* Article changelog (anchor: #article-update-logs) */
.wpc-changelog {
  background: var(--wpc-bg-card);
  color: var(--wpc-text-muted);
  border: 1px solid var(--wpc-border-subtle);
  border-radius: var(--wpc-radius-md);
  padding: var(--wpc-4) var(--wpc-5);
  font-size: var(--wpc-text-lg);
}

.wpc-changelog h2{
  font-size: var(--wpc-text-3xl);
}
.wpc-changelog > :first-child { margin-top: 0; }
.wpc-changelog > :last-child  { margin-bottom: 0; }
.wpc-changelog ul { margin: var(--wpc-2) 0 0; padding-left: var(--wpc-5); }
.wpc-changelog li { margin-bottom: var(--wpc-1); }

/* ════════════════════════════════════════════════════════════════════════
   19. INLINE PERSON / AUTHORITY CARD  ->  moved out of master.css.
   The hovercard now ships inside the "WPConsults Person Cards" plugin
   (assets/css/wpc-person.css + assets/js/wpc-person.js), so the feature is a
   self-contained plugin. Do not re-add the .wpc-person styles here.
   ════════════════════════════════════════════════════════════════════════ */

/* end master.css v5.0 */