/* ═══════════════════════════════════════════════════════════════════════
   PERCEPTRIC BRAND SYSTEM — CSS
   Version 3 · Neo-brutalist blueprint style
   ─────────────────────────────────────────────────────────────────────
   HOW TO USE
   Wrap any embed in <div class="pc"> … </div>. Everything is scoped to
   .pc so it never leaks into (or gets broken by) the site theme.
   Load Inter once per page:
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

   BRAND RULES (apply to every graphic, embed and page)
   1. Logo: always the image file, never the "perceptric.com" text.
      https://perceptric.com/wp-content/uploads/2026/03/Perceptric-_-Logo.png
      Always set the logo height explicitly (see .pc-logo sizes). Never let it scale freely.
   2. Titles stand alone. No subtitle or explanation line under a title.
   3. Embeds: outer container has margin: 0, internal padding only,
      and a little bottom padding so content never sits flush at the bottom.
   4. Colour: blue does the talking, black draws the lines, gold is the
      rare accent (stars, coins, a single highlight). Never more than one gold
      element competing for attention.
   5. Shape language: 2px black borders, small radii (4–6px), hard offset
      shadows (no blur). Shadows are blue on light cards, black on blue cards.
   6. Bullets: blue squares for top-level items, small blue dots for nested items.
   7. Copy: 9th-grade vocabulary, short sentences, direct "you". No em dashes.
      Avoid "not X, Y" and "X, not Y" phrasing. Avoid lists of three in prose.
   8. Featured images: 1200×630, no text, logo in a centered top badge.
   ═══════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────
   1. TOKENS
   ─────────────────────────────────────────────────────────────────────── */
.pc {
  /* Brand blue */
  --pc-brand: #0943B0;          /* primary: buttons, bullets, key data */
  --pc-brand-fg: #2E6BE0;       /* lighter blue for links on dark, hover glows */
  --pc-brand-deep: #062E7A;     /* hover/pressed state for primary */
  --pc-brand-bg: #E8EFFC;       /* tinted fills, tags, chart bars */
  --pc-brand-pale: #F4F8FE;     /* card headers, highlighted rows */
  --pc-brand-mist: #C9D7F3;     /* skeleton lines on blue-tinted surfaces */

  /* Ink and neutrals */
  --pc-line: #000000;           /* all structural borders */
  --pc-ink: #0B0D12;            /* headings, strong text */
  --pc-ink-2: #2B3242;          /* body text */
  --pc-n700: #232A38;           /* labels, form text */
  --pc-g600: #4A5363;           /* secondary text */
  --pc-g500: #7C8697;           /* captions, axis labels */
  --pc-g-dis: #A6AEBB;          /* placeholders, disabled */
  --pc-border: #D9DEE6;         /* inner dividers */
  --pc-border-faint: #EDF0F4;   /* gridlines */
  --pc-skel: #E3E7EE;           /* skeleton text in illustrations */

  /* Surfaces */
  --pc-white: #FFFFFF;
  --pc-paper: #F8F8FF;          /* page background */
  --pc-bg-ink: #0B0D12;         /* dark panels */
  --pc-bg-ink-2: #171B23;
  --pc-on-dark: #FFFFFF;
  --pc-on-dark-2: #C9CFDA;
  --pc-on-dark-3: #8D97A6;

  /* Accents (use sparingly) */
  --pc-gold: #F5B70A;           /* stars, coins, one highlight per piece */
  --pc-medal-silver: #C9D0DA;
  --pc-medal-bronze: #D08A4E;
  --pc-success: #28C840;
  --pc-success-bg: #D6EFDC;
  --pc-danger: #B3241A;
  --pc-danger-bg: #FFE1DE;

  /* Typography */
  --pc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pc-fs-display: 48px;  /* hero H1 */
  --pc-fs-h2: 34px;       /* section heading in posts */
  --pc-fs-h2-section: 44px; /* landing page section heading */
  --pc-fs-h3: 22px;       /* sub-heading, FAQ question */
  --pc-fs-h4: 18px;       /* card title */
  --pc-fs-body: 18px;     /* article body */
  --pc-fs-ui: 16px;       /* UI text, summaries, buttons */
  --pc-fs-small: 15px;
  --pc-fs-label: 14px;
  --pc-fs-micro: 12px;
  --pc-lh-tight: 1.1;
  --pc-lh-heading: 1.25;
  --pc-lh-ui: 1.6;
  --pc-lh-body: 1.75;
  --pc-tracking-display: -0.03em;
  --pc-tracking-heading: -0.02em;

  /* Spacing (4px base) */
  --pc-s1: 4px;  --pc-s2: 8px;  --pc-s3: 12px; --pc-s4: 16px;
  --pc-s5: 20px; --pc-s6: 24px; --pc-s7: 28px; --pc-s8: 32px;
  --pc-s10: 40px; --pc-s12: 48px; --pc-s16: 64px;

  /* Shape */
  --pc-border-w: 2px;
  --pc-radius-sm: 3px;
  --pc-radius: 4px;
  --pc-radius-md: 6px;
  --pc-radius-lg: 10px;
  --pc-radius-pill: 999px;

  /* Hard offset shadows (never blurred) */
  --pc-shadow-sm: 4px 4px 0 var(--pc-brand);
  --pc-shadow: 6px 6px 0 var(--pc-brand);
  --pc-shadow-lg: 8px 8px 0 var(--pc-brand);
  --pc-shadow-ink: 6px 6px 0 var(--pc-line);
  --pc-shadow-ink-lg: 10px 10px 0 var(--pc-line);

  /* Motion */
  --pc-ease: cubic-bezier(.2,.7,.2,1);
  --pc-fast: .15s;

  /* Layout */
  --pc-max: 1200px;
  --pc-gutter: 40px;

  margin: 0 !important;
  padding: 0 8px 12px 0 !important;  /* room for offset shadow + bottom breathing room */
  font-family: var(--pc-font) !important;
  color: var(--pc-ink-2);
  -webkit-font-smoothing: antialiased;
}

/* Scoped reset: blocks theme styles from leaking in */
.pc, .pc *, .pc *::before, .pc *::after { box-sizing: border-box; font-family: var(--pc-font) !important; }
.pc h1, .pc h2, .pc h3, .pc h4, .pc p, .pc ul, .pc ol, .pc li, .pc figure, .pc table {
  margin: 0; padding: 0; text-transform: none !important;
}
.pc img { max-width: 100%; height: auto; }


/* ───────────────────────────────────────────────────────────────────────
   2. TYPOGRAPHY
   ─────────────────────────────────────────────────────────────────────── */
.pc .pc-display { font-size: var(--pc-fs-display) !important; font-weight: 500 !important; line-height: var(--pc-lh-tight) !important; letter-spacing: var(--pc-tracking-display) !important; color: var(--pc-ink) !important; }
.pc .pc-h2 { font-size: var(--pc-fs-h2) !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: -0.025em !important; color: var(--pc-ink) !important; margin-bottom: var(--pc-s8) !important; }
.pc .pc-h2--section { font-size: var(--pc-fs-h2-section) !important; letter-spacing: -0.035em !important; line-height: 1.08 !important; }
.pc .pc-h3 { font-size: var(--pc-fs-h3) !important; font-weight: 500 !important; line-height: 1.35 !important; letter-spacing: -0.015em !important; color: var(--pc-ink) !important; }
.pc .pc-h4 { font-size: var(--pc-fs-h4) !important; font-weight: 500 !important; line-height: 1.35 !important; letter-spacing: -0.015em !important; color: var(--pc-ink) !important; }
.pc .pc-body { font-size: var(--pc-fs-body) !important; line-height: var(--pc-lh-body) !important; color: var(--pc-ink-2) !important; }
.pc .pc-body + .pc-body { margin-top: var(--pc-s4) !important; }
.pc .pc-ui { font-size: var(--pc-fs-ui) !important; line-height: var(--pc-lh-ui) !important; color: var(--pc-ink-2) !important; }
.pc .pc-small { font-size: var(--pc-fs-small) !important; line-height: 1.5 !important; color: var(--pc-g600) !important; }
.pc .pc-caption { font-size: var(--pc-fs-label) !important; line-height: 1.5 !important; color: var(--pc-g600) !important; text-align: center; }
.pc b, .pc strong { font-weight: 600 !important; color: var(--pc-ink) !important; }
.pc .pc-num { font-variant-numeric: tabular-nums; }

/* Links */
.pc a, .pc a:link, .pc a:visited {
  color: var(--pc-brand) !important; font-weight: 500;
  text-decoration: underline !important;
  text-decoration-color: rgba(9,67,176,.35) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
  transition: color var(--pc-fast), text-decoration-color var(--pc-fast);
}
.pc a:hover { color: var(--pc-brand-deep) !important; text-decoration-color: var(--pc-brand) !important; }
.pc a:focus-visible { outline: 2px solid var(--pc-brand); outline-offset: 3px; }


/* ───────────────────────────────────────────────────────────────────────
   3. LOGO
   ─────────────────────────────────────────────────────────────────────── */
.pc .pc-logo { display: block; width: auto !important; object-fit: contain; margin: 0 !important; }
.pc .pc-logo--sm { height: 18px !important; max-width: 90px !important; }   /* inside tables, chips */
.pc .pc-logo--md { height: 24px !important; max-width: 120px !important; }  /* cards, top-pick strips */
.pc .pc-logo--lg { height: 36px !important; max-width: 180px !important; }  /* featured image badges */

/* Centered logo badge (featured images) */
.pc .pc-logo-badge { display: inline-flex; align-items: center; justify-content: center; width: 230px; height: 68px; padding: 0 24px; background: var(--pc-white); border: var(--pc-border-w) solid var(--pc-line); border-radius: 8px; box-shadow: 5px 5px 0 var(--pc-brand); }


/* ───────────────────────────────────────────────────────────────────────
   4. BUTTONS
   ─────────────────────────────────────────────────────────────────────── */
.pc .pc-btn, .pc a.pc-btn, .pc a.pc-btn:link, .pc a.pc-btn:visited {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: var(--pc-fs-ui) !important; font-weight: 500 !important; line-height: 1.2 !important;
  padding: 14px 22px; border: var(--pc-border-w) solid var(--pc-line) !important; border-radius: var(--pc-radius);
  text-decoration: none !important; white-space: nowrap; cursor: pointer;
  transition: background var(--pc-fast), color var(--pc-fast), transform var(--pc-fast) var(--pc-ease), box-shadow var(--pc-fast) var(--pc-ease);
}
.pc .pc-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--pc-fast); }
.pc .pc-btn:hover svg { transform: translateX(3px); }
.pc .pc-btn:focus-visible { outline: 2px solid var(--pc-brand); outline-offset: 3px; }

/* Primary: blue fill, black shadow on hover */
.pc .pc-btn--primary, .pc a.pc-btn--primary:link, .pc a.pc-btn--primary:visited { background: var(--pc-brand) !important; color: var(--pc-white) !important; }
.pc .pc-btn--primary:hover { background: var(--pc-brand-deep) !important; color: var(--pc-white) !important; transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--pc-line); }

/* Secondary: white fill, blue shadow on hover */
.pc .pc-btn--secondary, .pc a.pc-btn--secondary:link, .pc a.pc-btn--secondary:visited { background: var(--pc-white) !important; color: var(--pc-ink) !important; }
.pc .pc-btn--secondary:hover { color: var(--pc-ink) !important; transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--pc-brand); }

/* On dark panels */
.pc .pc-btn--on-dark { background: var(--pc-white) !important; color: var(--pc-ink) !important; border-color: var(--pc-white) !important; }
.pc .pc-btn--on-dark:hover { box-shadow: 4px 4px 0 var(--pc-brand-fg); transform: translate(-2px,-2px); }
.pc .pc-btn--ghost-dark { background: transparent !important; color: var(--pc-white) !important; border: 1px solid rgba(255,255,255,.4) !important; }
.pc .pc-btn--ghost-dark:hover { background: var(--pc-bg-ink-2) !important; border-color: var(--pc-white) !important; }

.pc .pc-btn--lg { font-size: 18px !important; padding: 18px 28px; }
.pc .pc-btn--block { width: 100%; }

/* Text link with arrow */
.pc .pc-text-link, .pc a.pc-text-link:link, .pc a.pc-text-link:visited { display: inline-flex; align-items: center; gap: 6px; font-size: var(--pc-fs-small) !important; font-weight: 500 !important; color: var(--pc-ink) !important; text-decoration: none !important; border-bottom: 1px solid var(--pc-line); padding-bottom: 2px; }
.pc a.pc-text-link:hover { color: var(--pc-brand) !important; border-color: var(--pc-brand); }


/* ───────────────────────────────────────────────────────────────────────
   5. TAGS, BADGES, CHIPS
   ─────────────────────────────────────────────────────────────────────── */
/* Small label above a title (sentence case, never uppercase) */
.pc .pc-tag { display: inline-block; font-size: var(--pc-fs-micro) !important; font-weight: 500 !important; line-height: 1.3 !important; color: var(--pc-brand) !important; background: var(--pc-brand-bg); border-radius: 2px; padding: 4px 8px; }

/* "Recommended" / "Most popular" */
.pc .pc-badge { display: inline-block; font-size: var(--pc-fs-micro) !important; font-weight: 500 !important; line-height: 1.3 !important; color: var(--pc-white) !important; background: var(--pc-brand); border: 1px solid var(--pc-line); border-radius: var(--pc-radius-sm); padding: 3px 8px; white-space: nowrap; }

/* Rank number square */
.pc .pc-rank { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border: 1px solid var(--pc-line); border-radius: var(--pc-radius); background: var(--pc-white); font-size: var(--pc-fs-label) !important; font-weight: 500 !important; color: var(--pc-ink) !important; font-variant-numeric: tabular-nums; }
.pc .pc-rank--top { background: var(--pc-brand); color: var(--pc-white) !important; }

/* Medals (no numbers needed) */
.pc .pc-medal { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--pc-line); flex-shrink: 0; }
.pc .pc-medal--gold { background: var(--pc-gold); }
.pc .pc-medal--silver { background: var(--pc-medal-silver); }
.pc .pc-medal--bronze { background: var(--pc-medal-bronze); }

/* Filter / choice chips (pills) */
.pc .pc-pill { display: inline-flex; align-items: center; font-size: var(--pc-fs-label) !important; color: var(--pc-n700) !important; background: var(--pc-white); border: 1px solid var(--pc-border); border-radius: var(--pc-radius-pill); padding: 7px 14px; cursor: pointer; transition: background var(--pc-fast), color var(--pc-fast), border-color var(--pc-fast); }
.pc .pc-pill:hover { border-color: var(--pc-line); }
.pc .pc-pill.is-on { background: var(--pc-ink); border-color: var(--pc-ink); color: var(--pc-white) !important; }

/* Round icon chip (illustrations) */
.pc .pc-chip { width: 62px; height: 62px; border-radius: 50%; background: var(--pc-white); border: var(--pc-border-w) solid var(--pc-line); box-shadow: var(--pc-shadow-sm); display: flex; align-items: center; justify-content: center; }
.pc .pc-chip svg { width: 26px; height: 26px; stroke: var(--pc-ink); fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.pc .pc-chip--blue { background: var(--pc-brand); box-shadow: 4px 4px 0 var(--pc-line); }
.pc .pc-chip--blue svg { stroke: var(--pc-white); }
.pc .pc-chip--pale { background: var(--pc-brand-bg); }

/* Check circle */
.pc .pc-check { width: 28px; height: 28px; border-radius: 50%; background: var(--pc-brand); border: var(--pc-border-w) solid var(--pc-line); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pc .pc-check svg { width: 13px; height: 13px; stroke: var(--pc-white); fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }


/* ───────────────────────────────────────────────────────────────────────
   6. SURFACES: FRAMES, CARDS, WINDOWS
   ─────────────────────────────────────────────────────────────────────── */
.pc .pc-frame { background: var(--pc-white); border: var(--pc-border-w) solid var(--pc-line) !important; border-radius: var(--pc-radius-md); overflow: hidden; }
.pc .pc-frame--shadow { box-shadow: var(--pc-shadow); }
.pc .pc-frame--shadow-lg { box-shadow: var(--pc-shadow-lg); }
.pc .pc-frame--shadow-ink { box-shadow: var(--pc-shadow-ink); }
.pc .pc-frame--pale { background: var(--pc-brand-pale); }
.pc .pc-frame--blue { background: var(--pc-brand); color: var(--pc-white); box-shadow: var(--pc-shadow-ink); }
.pc .pc-frame__head { display: flex; align-items: center; gap: 12px; padding: 16px 28px; background: var(--pc-brand-pale); border-bottom: 1px solid var(--pc-line); }
.pc .pc-frame__body { padding: 24px 28px 28px; }
.pc .pc-frame__foot { padding: 16px 28px; background: var(--pc-brand-pale); border-top: 1px solid var(--pc-line); }

/* Hover lift for clickable cards */
.pc .pc-lift { transition: transform .2s var(--pc-ease), box-shadow .2s var(--pc-ease); }
.pc .pc-lift:hover { transform: translate(-3px,-3px); box-shadow: 6px 6px 0 var(--pc-brand); }

/* Browser window (mock UI) */
.pc .pc-window { background: var(--pc-white); border: var(--pc-border-w) solid var(--pc-line); border-radius: var(--pc-radius-lg); box-shadow: var(--pc-shadow-ink-lg); overflow: hidden; }
.pc .pc-window__bar { height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: var(--pc-brand-pale); border-bottom: var(--pc-border-w) solid var(--pc-line); }
.pc .pc-window__bar i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); }
.pc .pc-window__bar i:nth-child(1) { background: #FF5F57; }
.pc .pc-window__bar i:nth-child(2) { background: #FEBC2E; }
.pc .pc-window__bar i:nth-child(3) { background: #28C840; }
.pc .pc-window--dark { background: var(--pc-bg-ink); }
.pc .pc-window--dark .pc-window__bar { background: var(--pc-bg-ink-2); }

/* Dark CTA panel */
.pc .pc-panel-dark { background: var(--pc-bg-ink); color: var(--pc-on-dark-2); border: var(--pc-border-w) solid var(--pc-line); border-radius: var(--pc-radius-md); box-shadow: var(--pc-shadow-lg); padding: 48px; }
.pc .pc-panel-dark .pc-h2, .pc .pc-panel-dark .pc-h3 { color: var(--pc-on-dark) !important; }

/* Blueprint dot grid background */
.pc .pc-dotgrid { background-color: var(--pc-paper); background-image: radial-gradient(rgba(9,67,176,.2) 1.3px, transparent 1.3px); background-size: 24px 24px; }

/* Skeleton line (illustrations) */
.pc .pc-skel { display: block; height: 9px; border-radius: 5px; background: var(--pc-skel); }
.pc .pc-skel + .pc-skel { margin-top: 11px; }


/* ───────────────────────────────────────────────────────────────────────
   7. LISTS
   Top level: blue squares. Nested / inside FAQ answers: small blue dots.
   ─────────────────────────────────────────────────────────────────────── */
.pc .pc-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.pc .pc-list > li { display: flex; gap: 14px; font-size: var(--pc-fs-body) !important; line-height: var(--pc-lh-body) !important; color: var(--pc-ink-2) !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
.pc .pc-list > li::marker { content: none; }
.pc .pc-list > li + li { margin-top: 20px !important; }
.pc .pc-list > li::before { content: ''; width: 8px; height: 8px; background: var(--pc-brand); flex-shrink: 0; margin-top: 12px; }
.pc .pc-list--tight > li { font-size: var(--pc-fs-ui) !important; line-height: var(--pc-lh-ui) !important; gap: 12px; }
.pc .pc-list--tight > li + li { margin-top: 10px !important; }
.pc .pc-list--tight > li::before { width: 6px; height: 6px; margin-top: 10px; }
.pc .pc-list--dots > li::before { width: 6px; height: 6px; border-radius: 50%; margin-top: 13px; }
.pc .pc-list--dots > li + li { margin-top: 8px !important; }

/* Title + description list item */
.pc .pc-list .pc-list__t { display: block; font-size: 19px !important; font-weight: 500 !important; letter-spacing: -0.015em !important; line-height: 1.4 !important; color: var(--pc-ink) !important; margin-bottom: 10px !important; }


/* ───────────────────────────────────────────────────────────────────────
   8. QUICK SUMMARY
   ─────────────────────────────────────────────────────────────────────── */
.pc .pc-summary { background: var(--pc-white); border: var(--pc-border-w) solid var(--pc-line); border-radius: var(--pc-radius-md); box-shadow: var(--pc-shadow); overflow: hidden; }
.pc .pc-summary__head { display: flex; align-items: center; gap: 12px; padding: 16px 28px; background: var(--pc-brand-pale); border-bottom: 1px solid var(--pc-line); }
.pc .pc-summary__icon { width: 30px; height: 30px; border-radius: var(--pc-radius); background: var(--pc-brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pc .pc-summary__icon svg { width: 16px; height: 16px; fill: var(--pc-white); }
.pc .pc-summary__title { font-size: 20px !important; font-weight: 500 !important; letter-spacing: -0.015em !important; color: var(--pc-ink) !important; }
.pc .pc-summary__body { padding: 24px 28px 28px; }

/* Top-pick strip */
.pc .pc-pick { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; background: var(--pc-brand-pale); border: 1px solid var(--pc-line); border-radius: var(--pc-radius); }
.pc .pc-pick__k { font-size: var(--pc-fs-label) !important; font-weight: 500 !important; color: var(--pc-brand) !important; }
.pc .pc-pick__d { font-size: var(--pc-fs-small) !important; line-height: 1.5 !important; color: var(--pc-ink-2) !important; }


/* ───────────────────────────────────────────────────────────────────────
   9. STATS STRIP
   ─────────────────────────────────────────────────────────────────────── */
.pc .pc-stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--pc-line); border-radius: var(--pc-radius); overflow: hidden; }
.pc .pc-stat { padding: 16px 18px; background: var(--pc-brand-pale); }
.pc .pc-stat + .pc-stat { border-left: 1px solid var(--pc-border); }
.pc .pc-stat__num { font-size: 20px !important; font-weight: 500 !important; letter-spacing: -0.02em !important; line-height: 1.15 !important; color: var(--pc-brand) !important; margin-bottom: 4px !important; font-variant-numeric: tabular-nums; }
.pc .pc-stat__lab { font-size: var(--pc-fs-label) !important; line-height: 1.45 !important; color: var(--pc-ink-2) !important; }
/* Big hero stat */
.pc .pc-stat--hero .pc-stat__num { font-size: 28px !important; letter-spacing: -0.03em !important; }


/* ───────────────────────────────────────────────────────────────────────
   10. FAQ
   ─────────────────────────────────────────────────────────────────────── */
.pc .pc-faq__item { display: flex; gap: 14px; }
.pc .pc-faq__item + .pc-faq__item { margin-top: 40px !important; }
.pc .pc-faq__item::before { content: ''; width: 8px; height: 8px; background: var(--pc-brand); flex-shrink: 0; margin-top: 12px; }
.pc .pc-faq__q { font-size: var(--pc-fs-h3) !important; font-weight: 500 !important; letter-spacing: -0.015em !important; line-height: 1.35 !important; color: var(--pc-ink) !important; margin: 0 0 12px !important; }
.pc .pc-faq__a p { font-size: var(--pc-fs-body) !important; line-height: var(--pc-lh-body) !important; color: var(--pc-ink-2) !important; }
.pc .pc-faq__a p + p, .pc .pc-faq__a p + ul, .pc .pc-faq__a ul + p { margin-top: 16px !important; }
.pc .pc-faq__a ul { list-style: none !important; margin: 12px 0 0 !important; padding: 0 !important; }
.pc .pc-faq__a li { display: flex; gap: 12px; font-size: var(--pc-fs-body) !important; line-height: var(--pc-lh-body) !important; color: var(--pc-ink-2) !important; list-style: none !important; }
.pc .pc-faq__a li::marker { content: none; }
.pc .pc-faq__a li + li { margin-top: 8px !important; }
.pc .pc-faq__a li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pc-brand); flex-shrink: 0; margin-top: 13px; }


/* ───────────────────────────────────────────────────────────────────────
   11. TABLES
   ─────────────────────────────────────────────────────────────────────── */
.pc .pc-table-wrap { background: var(--pc-white); border: var(--pc-border-w) solid var(--pc-line); border-radius: var(--pc-radius-md); box-shadow: var(--pc-shadow); overflow: hidden; }
.pc .pc-table { width: 100% !important; border-collapse: collapse !important; }
.pc .pc-table th { background: var(--pc-brand-pale) !important; padding: 14px 20px !important; border-bottom: var(--pc-border-w) solid var(--pc-line) !important; font-size: var(--pc-fs-label) !important; font-weight: 500 !important; color: var(--pc-brand) !important; text-align: left !important; }
.pc .pc-table th + th, .pc .pc-table td + td { border-left: 1px solid var(--pc-border) !important; }
.pc .pc-table td { padding: 16px 20px !important; border-bottom: 1px solid var(--pc-border) !important; font-size: 17px !important; line-height: 1.55 !important; color: var(--pc-ink-2) !important; vertical-align: middle; }
.pc .pc-table tr:last-child td { border-bottom: 0 !important; }
.pc .pc-table tbody tr:hover td { background: var(--pc-brand-pale) !important; }
.pc .pc-table tr.is-top td { background: var(--pc-brand-pale) !important; }
.pc .pc-table__name { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 500 !important; color: var(--pc-ink) !important; }
.pc .pc-table__name a, .pc .pc-table__name a:link, .pc .pc-table__name a:visited { color: var(--pc-ink) !important; }
.pc .pc-table__name a:hover { color: var(--pc-brand) !important; }


/* ───────────────────────────────────────────────────────────────────────
   12. CALLOUT
   ─────────────────────────────────────────────────────────────────────── */
.pc .pc-callout { padding: 20px 24px; background: var(--pc-brand-pale); border: var(--pc-border-w) solid var(--pc-line); border-radius: var(--pc-radius-md); box-shadow: 5px 5px 0 var(--pc-brand); font-size: var(--pc-fs-body) !important; line-height: 1.6 !important; color: var(--pc-ink-2) !important; }
.pc .pc-quote { padding: 20px 24px; background: var(--pc-brand-pale); border-left: 4px solid var(--pc-brand); border-radius: 0 var(--pc-radius) var(--pc-radius) 0; font-size: 19px !important; line-height: 1.65 !important; color: var(--pc-ink) !important; }


/* ───────────────────────────────────────────────────────────────────────
   13. FORMS
   ─────────────────────────────────────────────────────────────────────── */
.pc .pc-label { display: block; font-size: var(--pc-fs-label) !important; font-weight: 500 !important; color: var(--pc-n700) !important; margin-bottom: 8px !important; }
.pc .pc-label span { color: var(--pc-brand); margin-left: 2px; }
.pc .pc-input, .pc .pc-textarea, .pc .pc-select {
  width: 100%; padding: 12px 14px; font-size: var(--pc-fs-small) !important; color: var(--pc-ink) !important; background: var(--pc-white);
  border: 1px solid var(--pc-border); border-bottom-color: var(--pc-line); border-radius: var(--pc-radius);
  transition: box-shadow var(--pc-fast), border-color var(--pc-fast);
}
.pc .pc-input::placeholder, .pc .pc-textarea::placeholder { color: var(--pc-g-dis); }
.pc .pc-input:focus, .pc .pc-textarea:focus, .pc .pc-select:focus { outline: none; border-color: var(--pc-brand); box-shadow: 0 0 0 3px var(--pc-brand-bg); }
.pc .pc-error { font-size: var(--pc-fs-label) !important; color: var(--pc-danger) !important; background: var(--pc-danger-bg); border: 1px solid var(--pc-danger); border-radius: var(--pc-radius); padding: 10px 12px; }

/* Toggle switch */
.pc .pc-toggle { width: 58px; height: 32px; border-radius: 16px; background: var(--pc-skel); border: var(--pc-border-w) solid var(--pc-line); position: relative; }
.pc .pc-toggle::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--pc-white); border: var(--pc-border-w) solid var(--pc-line); transition: left var(--pc-fast) var(--pc-ease); }
.pc .pc-toggle.is-on { background: var(--pc-brand); }
.pc .pc-toggle.is-on::after { left: 29px; }


/* ───────────────────────────────────────────────────────────────────────
   14. CHARTS
   Bars: pale blue with black outline. Highlight bar: solid blue.
   Lines: brand blue, 2.4 to 4px, round caps. Gridlines: dashed, faint.
   ─────────────────────────────────────────────────────────────────────── */
.pc .pc-chart-bar { fill: var(--pc-brand-bg); stroke: var(--pc-line); stroke-width: 1.5; }
.pc .pc-chart-bar--hl { fill: var(--pc-brand); }
.pc .pc-chart-line { fill: none; stroke: var(--pc-brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pc .pc-chart-area { fill: var(--pc-brand-bg); }
.pc .pc-chart-grid { stroke: var(--pc-border); stroke-width: 1; stroke-dasharray: 3 5; }
.pc .pc-chart-base { stroke: var(--pc-line); stroke-width: 2; }
.pc .pc-chart-dot { fill: var(--pc-white); stroke: var(--pc-brand); stroke-width: 2.5; }
.pc .pc-chart-dot--end { fill: var(--pc-brand); stroke: var(--pc-line); }
.pc .pc-chart-label { font-size: 11px; fill: var(--pc-g500); }
/* Tooltip */
.pc .pc-tip { background: var(--pc-bg-ink); color: var(--pc-white); border-radius: var(--pc-radius); padding: 10px 12px; font-size: 12px !important; line-height: 1.5 !important; box-shadow: 3px 3px 0 var(--pc-brand); }
.pc .pc-tip b { color: var(--pc-white) !important; }
.pc .pc-tip span { color: #9DB8F5; font-weight: 500; }


/* ───────────────────────────────────────────────────────────────────────
   15. LAYOUT HELPERS
   ─────────────────────────────────────────────────────────────────────── */
.pc .pc-wrap { max-width: var(--pc-max); margin: 0 auto; padding: 0 var(--pc-gutter); }
.pc .pc-stack > * + * { margin-top: var(--pc-s6) !important; }
.pc .pc-row { display: flex; gap: var(--pc-s3); flex-wrap: wrap; }
.pc .pc-divider { border: 0; border-top: 1px solid var(--pc-border); margin: var(--pc-s12) 0; }
.pc .pc-section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; padding-bottom: 28px; margin-bottom: 44px; border-bottom: var(--pc-border-w) solid var(--pc-line); }


/* ───────────────────────────────────────────────────────────────────────
   16. RESPONSIVE
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .pc { --pc-gutter: 32px; }
  .pc .pc-section-head { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 720px) {
  .pc { --pc-gutter: 16px; padding: 0 5px 10px 0 !important; }
  .pc .pc-display { font-size: 32px !important; line-height: 1.15 !important; }
  .pc .pc-h2 { font-size: 27px !important; margin-bottom: 24px !important; }
  .pc .pc-h2--section { font-size: 32px !important; }
  .pc .pc-h3, .pc .pc-faq__q { font-size: 19px !important; }
  .pc .pc-body, .pc .pc-faq__a p, .pc .pc-faq__a li, .pc .pc-list > li { font-size: 17px !important; line-height: 1.7 !important; }
  .pc .pc-list--tight > li { font-size: 15px !important; }
  .pc .pc-frame--shadow, .pc .pc-summary, .pc .pc-table-wrap { box-shadow: 5px 5px 0 var(--pc-brand); }
  .pc .pc-frame__head, .pc .pc-summary__head { padding: 14px 18px; }
  .pc .pc-frame__body, .pc .pc-summary__body { padding: 20px 18px 22px; }
  .pc .pc-stats { grid-template-columns: 1fr; }
  .pc .pc-stat + .pc-stat { border-left: 0; border-top: 1px solid var(--pc-border); }
  .pc .pc-panel-dark { padding: 32px 22px; box-shadow: 5px 5px 0 var(--pc-brand); }
  .pc .pc-btn--block-mobile { width: 100%; }
  /* Tables stack into cards */
  .pc .pc-table thead { display: none; }
  .pc .pc-table, .pc .pc-table tbody, .pc .pc-table tr, .pc .pc-table td { display: block; width: 100% !important; }
  .pc .pc-table tr { padding: 16px !important; border-bottom: 1px solid var(--pc-border) !important; }
  .pc .pc-table td { padding: 0 !important; border: 0 !important; font-size: 15px !important; }
  .pc .pc-table td + td { margin-top: 6px; padding-left: 42px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .pc *, .pc *::before, .pc *::after { transition: none !important; animation: none !important; }
  .pc .pc-lift:hover, .pc .pc-btn:hover { transform: none; }
}