:root {
  /* Brand scale */
  --brand-50: hsl(222, 9%, 97%);
  --brand-100: hsl(222, 12%, 93%);
  --brand-200: hsl(222, 15%, 85%);
  --brand-300: hsl(222, 18%, 73%);
  --brand-400: hsl(222, 24%, 62%);
  --brand-500: hsl(222, 30%, 45%);
  --brand-600: hsl(222, 32%, 45%);
  --brand-700: hsl(222, 33%, 33%);
  --brand-800: hsl(222, 33%, 22%);
  --brand-900: hsl(222, 32%, 14%);
  --brand-950: hsl(222, 27%, 8%);

  /* Brand RGB values for rgba() usage */
  --brand-400-rgb: 135, 149, 181;
  --brand-500-rgb: 80, 101, 149;
  --brand-500-hsl: 222, 30%, 45%;

  /* Semantic tokens */
  --bg-page: hsl(222, 5%, 97%);
  --bg-surface: #ffffff;
  --bg-elevated: hsl(222, 4%, 95%);
  --bg-card: #ffffff;
  --text-primary: hsl(222, 3%, 12%);
  --text-secondary: hsl(222, 3%, 38%);
  --text-muted: hsl(222, 3%, 55%);
  --accent: hsl(222, 50%, 40%);
  --accent-glow: hsl(222, 24%, 25%) / 0.12;
  --border: hsl(222, 5%, 85%);
  --border-subtle: hsl(222, 4%, 91%);
  --cta-bg: hsl(38, 78%, 48%);
  --cta-text: #111111;
  --cta-hover: hsl(38, 78%, 56%);
  --cta-glow: hsl(38, 78%, 48%) / 0.25;
  --harmonic: hsl(38, 70%, 38%);
  --success: hsl(142, 72%, 35%);
  --warning: hsl(38, 95%, 45%);
  --danger: hsl(0, 84%, 48%);

  /* RGB triplets for glassmorphism / animated gradients */
  --accent-rgb: 51 82 153;
  --bg-elevated-rgb: 38 49 75;

  /* Glass style tokens */
  --glass-bg: rgba(80, 101, 149, 0.08);
  --glass-border: rgba(135, 149, 181, 0.18);
  --glass-border-hover: rgba(135, 149, 181, 0.35);
  --glass-glow: rgba(135, 149, 181, 0.12);

  /* Neon style tokens */
  --neon-glow: rgba(135, 149, 181, 0.4);
  --neon-border: hsl(222, 30%, 45%);
  --neon-bg: hsl(222, 4%, 95%);
}

:root[data-theme="dark"] { --bg-page:hsl(222, 27%, 8%);--bg-surface:hsl(222, 32%, 14%);--bg-elevated:hsl(222, 33%, 22%);--bg-card:hsl(222, 33%, 22%);--text-primary:hsl(222, 9%, 97%);--text-secondary:hsl(222, 18%, 73%);--text-muted:hsl(222, 30%, 45%);--accent:hsl(222, 24%, 62%);--border:hsl(222, 33%, 33%);--border-subtle:hsl(222, 33%, 22%) }
:root[data-theme="light"] { --bg-page:hsl(222, 5%, 97%);--bg-surface:#ffffff;--bg-elevated:hsl(222, 4%, 95%);--bg-card:#ffffff;--text-primary:hsl(222, 3%, 12%);--text-secondary:hsl(222, 3%, 38%);--text-muted:hsl(222, 3%, 55%);--accent:hsl(222, 50%, 40%);--border:hsl(222, 5%, 85%);--border-subtle:hsl(222, 4%, 91%) }

.c-proscons{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media (max-width: 640px){.c-proscons{grid-template-columns:1fr}div[style*="grid-template-columns:1fr 1fr"],ol[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}}.c-proscons__card{padding:1.25rem;border-radius:.75rem;background:#ffffff08;backdrop-filter:blur(4px);border:1px solid var(--border-subtle, rgba(255,255,255,.06))}.c-proscons__card--pro{border-left:3px solid #22c55e}.c-proscons__card--con{border-left:3px solid #ef4444}.c-proscons__title{font-size:.95rem;font-weight:700;margin-bottom:.75rem;display:flex;align-items:center;gap:.375rem}.c-proscons__title--pro{color:#22c55e}.c-proscons__title--con{color:#ef4444}.c-proscons__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}.c-proscons__item{display:flex;align-items:flex-start;gap:.5rem;font-size:.9rem;color:var(--text-secondary, rgba(255,255,255,.6));line-height:1.5}.c-proscons__icon{flex-shrink:0;margin-top:.15rem}.c-proscons__icon--pro{color:#22c55e}.c-proscons__icon--con{color:#ef4444}.c-faq__item{border-radius:0;overflow:hidden;border-bottom:1px solid var(--border-subtle, rgba(255,255,255,.06))}.c-faq__item:last-child{border-bottom:none}.c-faq__item[open]{background:var(--bg-surface, rgba(255,255,255,.02))}.c-faq__q{padding:.85rem 1.5rem;cursor:pointer;font-weight:600;color:var(--text-primary, #f3f0ff);font-size:.95rem}.c-faq__q:hover{color:var(--accent, #8b5cf6)}.c-faq__a{padding:0 1.5rem 1rem;color:var(--text-secondary, rgba(255,255,255,.6));font-size:.875rem;line-height:1.6}