/* ── styles.css — page-specific overrides ──
   Everything reusable lives in components.css (design system).
   Before adding rules here, confirm the style can't live in the
   design system instead. */

/* Page-local: center-aligned helper (no DS utility class). */
.text-center { text-align: center; }
/* Page-local: spacing above pill rows inside cards (no DS utility for margin-top on inline elements). */
.pill-row { margin-top: var(--sp-3); }
/* Page-local: gap between cards grid and credentials header (.label is inline-block, can't self-space). */
.credentials-header { margin-top: var(--sp-10); }
/* Page-local: restore list padding inside card descriptions (DS global reset zeroes it out). */
.card-showcase-desc ul { padding-left: var(--sp-6); }
/* Page-local: spacing between intro paragraph and bullet list inside card descriptions. */
.card-showcase-desc > * + * { margin-top: var(--sp-3); }
/* Page-local: green → cobalt blue accent (originally the retired Bajan Buddy
   gradient, now the JP signature). Neutralizes the area246 violet surfaces
   and auras to a cool slate so the personal site reads as distinct from the
   product portfolio. */
body[data-product="jp"] {
  /* Accent gradient + tints */
  --product-grad: linear-gradient(135deg, #25D366 0%, #40A0E6 100%);
  --product-grad-label: linear-gradient(90deg, #25D366, #40A0E6);
  --product-start: #25D366;
  --product-mid: #33B9A6;
  --product-end: #40A0E6;
  --product-accent: #40A0E6;
  --product-accent-soft: rgba(37, 211, 102, 0.18);
  --product-glow: rgba(64, 160, 230, 0.35);
  --product-halo: rgba(37, 211, 102, 0.35);
  --product-tint: rgba(64, 160, 230, 0.12);
  --product-border: rgba(64, 160, 230, 0.25);
  --shadow-glow: 0 4px 20px rgba(64, 160, 230, 0.35), 0 0 40px rgba(37, 211, 102, 0.35);
  --fg-on-brand: #04231a;

  /* Cool slate surfaces (replaces area246 violet) */
  --bg-canvas: #0a0f1a;
  --bg-surface-1: #0f1623;
  --bg-surface-2: #131a2a;
  --bg-surface-3: #1a2333;
  --bg-surface-glass: rgba(10, 15, 26, 0.92);

  /* Ambient glows retuned to the green/blue palette */
  --aura-core:
    radial-gradient(ellipse 50% 60% at 50% 40%, rgba(64, 160, 230, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 30% 70%, rgba(37, 211, 102, 0.06) 0%, transparent 70%);
  --aura-alt: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(64, 160, 230, 0.08) 0%, transparent 70%);
}
/* Page-local: variant comparison labels and dividers (hero-variants.html in scratchpad only). */
.variant-label {
  text-align: center;
  padding: var(--sp-4) 0 0;
  color: var(--product-accent);
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-13);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.variant-divider { border-top: 1px solid var(--border-default); margin: 0; }
/* Page-local: force line break after credential separator on mobile only. */
.mobile-only { display: none; }
@media (max-width: 640px) { .mobile-only { display: block; } }