/* ============================================================================
   ThreatTape Product Themes — one identity per product (2026-05-12)

   Each .theme-<product> class redefines a small set of CSS variables
   (--pt-bg, --pt-surface, --pt-ink, --pt-accent, --pt-accent-2,
    --pt-display-font, --pt-body-font, --pt-mono-font) and applies them
   to component selectors that already exist in the site CSS.

   Applied to BOTH:
     - .featured-card.theme-X on the homepage (so the card previews the
       product's actual identity)
     - body.theme-X on the product page (so the page carries through)

   The ThreatTape chrome (nav, footer, threat-tape stripes) stays
   consistent everywhere — these themes only re-skin the body content.
   ============================================================================ */

/* ---- Combined font import for all product themes ----
   One @import keeps the network spend down vs. 15 separate imports. */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;700;900&family=Bungee&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Cormorant+Infant:ital,wght@0,400;0,500;0,700;1,400&family=Limelight&family=Major+Mono+Display&family=Marcellus&family=Old+Standard+TT:ital@0;1&family=Special+Elite&family=Yeseva+One&display=swap');

/* Body / pairing fonts — diversified across the 13 themes so cards read
   as distinct typographic relationships, not just different colored serifs. */
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700&family=Atkinson+Hyperlegible:wght@400;700&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=DM+Sans:wght@300;400;500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Geist:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Onest:wght@400;500;600;700&family=Public+Sans:wght@400;500;600;700&family=Sora:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Zilla+Slab:wght@400;500;600;700&display=swap');

/* JetBrains Mono retained for badge/mono text in themes that use it. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ============================================================================
   THEME 01 — EDD-i
   Aligned to live brand:
     - Homepage CARD (.theme-eddi.featured-card) mirrors edd-i.com marketing
       site dialect: Cormorant Garamond + DM Sans, navy + gold #C9922A.
     - Product PAGE (body.theme-eddi) mirrors the EDDi app's in-app dialect:
       Inter + Space Grotesk for data + JetBrains Mono, app bg #1a2030,
       app gold #d4a03a.
   Tokens use the live brand values (--brand-navy, --brand-gold, etc.).
   ============================================================================ */
.theme-eddi {
    /* edd-i.com marketing site palette — silver dialect */
    --pt-bg: #1a2744;            /* --brand-navy */
    --pt-bg-deep: #0f1e36;       /* --brand-navy-deep */
    --pt-surface: #233153;       /* card surface ≈ navy lifted */
    --pt-surface-2: #2d3d63;
    --pt-ink: #ffffff;
    --pt-ink-dim: rgba(255,255,255,0.78);
    --pt-accent: #c0c8d6;        /* bright cool silver */
    --pt-accent-2: #8a92a0;      /* muted silver (was --brand-silver #9aa0ac, slightly dimmer for hover) */
    --pt-accent-3: #ffffff;      /* white CTAs */
    --pt-rule: rgba(192, 200, 214, 0.42);
    --pt-display-font: 'Cormorant Garamond', Georgia, serif;
    --pt-body-font: 'DM Sans', system-ui, sans-serif;
    --pt-mono-font: 'JetBrains Mono', ui-monospace, monospace;
}
.theme-eddi h1, .theme-eddi h2, .theme-eddi h3, .theme-eddi h4 {
    font-family: var(--pt-display-font);
    color: var(--pt-ink);
    font-weight: 500;
    letter-spacing: -0.005em;
}
.theme-eddi h1 { font-weight: 600; letter-spacing: -0.02em; }
.theme-eddi p, .theme-eddi li, .theme-eddi blockquote {
    font-family: var(--pt-body-font);
    color: var(--pt-ink-dim);
    font-weight: 400;
}

/* Homepage card — looks like a slice of edd-i.com */
.theme-eddi.featured-card {
    background: linear-gradient(180deg, var(--pt-bg) 0%, var(--pt-bg-deep) 100%);
    border: 1px solid var(--pt-rule);
    border-top: 3px solid var(--pt-accent);
    color: var(--pt-ink);
}
.theme-eddi.featured-card h3 {
    font-family: var(--pt-display-font);
    color: var(--pt-ink);
    font-weight: 600;
    font-size: 2rem;
    letter-spacing: -0.01em;
}
.theme-eddi.featured-card .featured-short {
    font-family: var(--pt-body-font);
    color: var(--pt-ink-dim);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.55;
}
.theme-eddi.featured-card .featured-points li {
    font-family: var(--pt-body-font);
    color: var(--pt-ink-dim);
    font-weight: 400;
    font-size: 0.95rem;
}
.theme-eddi.featured-card .featured-points li::before { color: var(--pt-accent); }

/* edd-i.com uses solid gold CTAs + outlined white for secondary */
.theme-eddi.featured-card .featured-link.product {
    font-family: var(--pt-body-font);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-size: 0.78rem;
}
.theme-eddi.featured-card .featured-link.product:first-of-type {
    background: var(--pt-accent);
    color: var(--pt-bg-deep);
    border-color: var(--pt-accent);
}
.theme-eddi.featured-card .featured-link.product:first-of-type:hover {
    background: var(--pt-accent-2);
    color: var(--pt-ink);
    border-color: var(--pt-accent-2);
}
.theme-eddi.featured-card .featured-link.product:last-of-type {
    background: transparent;
    color: var(--pt-ink);
    border-color: var(--pt-ink);
}
.theme-eddi.featured-card .featured-link.product:last-of-type:hover {
    background: var(--pt-ink);
    color: var(--pt-bg-deep);
}

/* Status pills + Joint Venture chip — translucent on navy with subtle border */
.theme-eddi.featured-card .featured-badge,
.theme-eddi.featured-card .badge {
    background: rgba(255,255,255,0.06);
    color: var(--pt-ink);
    border-color: rgba(255,255,255,0.22);
    font-family: var(--pt-body-font);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}
.theme-eddi.featured-card .status-pilot,
.theme-eddi.featured-card .badge.status-pilot {
    color: var(--pt-accent);
    border-color: var(--pt-accent);
    background: rgba(192, 200, 214, 0.08);
}

/* MODULES sub-projects strip — silver border-top, silver chips on translucent fill */
.theme-eddi.featured-card .subprojects {
    border-top: 1px dashed var(--pt-rule);
}
.theme-eddi.featured-card .subprojects-label {
    color: var(--pt-ink-dim);
    font-family: var(--pt-body-font);
    letter-spacing: 0.14em;
}
.theme-eddi.featured-card .subproject-chip {
    color: var(--pt-accent);
    border-color: var(--pt-accent);
    background: rgba(192, 200, 214, 0.08);
    font-family: var(--pt-body-font);
    letter-spacing: 0.08em;
    font-weight: 600;
}
.theme-eddi.featured-card .subproject-chip:hover {
    background: var(--pt-accent);
    color: var(--pt-bg-deep);
}

/* ============================================================================
   Product page (body.theme-eddi) — switches to the IN-APP dialect:
   Inter body, Space Grotesk for data, app's specific dark bg + brighter gold.
   ============================================================================ */
body.theme-eddi {
    /* Re-bind tokens for app feel — silver dialect */
    --pt-bg: #1a2030;            /* app --bg */
    --pt-surface: #232a3c;
    --pt-surface-2: #2c3447;
    --pt-accent: #d0d6df;        /* bright luminous silver (was app gold #d4a03a) */
    --pt-accent-2: #e2e6ec;      /* brighter silver hover */
    --pt-rule: rgba(208, 214, 223, 0.32);
    --pt-body-font: 'Inter', system-ui, -apple-system, sans-serif;
    --pt-mono-font: 'JetBrains Mono', ui-monospace, monospace;
    background: var(--pt-bg);
    background-image:
        linear-gradient(180deg, rgba(208,214,223,0.04), transparent 40%),
        radial-gradient(circle at 90% 0%, rgba(208,214,223,0.06), transparent 50%);
    font-family: var(--pt-body-font);
}
body.theme-eddi h1,
body.theme-eddi h2,
body.theme-eddi h3,
body.theme-eddi h4 {
    /* Display headlines stay Cormorant Garamond on the product page —
       the marketing serif anchors the "executive-facing" identity even
       when body switches to the app's Inter. */
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: var(--pt-ink);
    font-weight: 500;
}
body.theme-eddi p,
body.theme-eddi li,
body.theme-eddi blockquote {
    font-family: var(--pt-body-font);
    color: var(--pt-ink-dim);
}
/* Data fields (numbers, frameworks, stats) get Space Grotesk per app */
body.theme-eddi .tech-item,
body.theme-eddi .stat-number,
body.theme-eddi .bio-stat-value {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-feature-settings: 'tnum' on, 'lnum' on;
}
body.theme-eddi .product-hero {
    background: linear-gradient(180deg, var(--pt-bg) 0%, var(--pt-surface) 100%);
    border-bottom: 1px solid var(--pt-rule);
}
body.theme-eddi .product-hero h1,
body.theme-eddi .section-title {
    color: var(--pt-accent);
}
body.theme-eddi .section-title::after {
    background-image: linear-gradient(90deg, var(--pt-accent), transparent);
    height: 2px;
    width: 140px;
}
body.theme-eddi .feature-card,
body.theme-eddi .ps-card,
body.theme-eddi .featured-card {
    background: var(--pt-surface);
    border-color: var(--pt-rule);
    border-left-color: var(--pt-accent);
}
body.theme-eddi .badge { color: var(--pt-accent); border-color: var(--pt-accent); }
body.theme-eddi .btn-primary {
    background: var(--pt-accent);
    color: #0b0f17;
    border-color: var(--pt-accent);
    font-family: var(--pt-body-font);
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0.01em;
}
body.theme-eddi .btn-primary:hover {
    background: var(--pt-accent-2);
    border-color: var(--pt-accent-2);
    color: #0b0f17;
}

/* ============================================================================
   THEME 02 — Ostraq
   Aligned to live brand (ostraq.com marketing + votesecured/marketing-site-new):
   Light theme, lavender-tinted bg, indigo primary + teal secondary + amber
   highlight, Plus Jakarta Sans throughout, JetBrains Mono for data.
   The card becomes a bright island on threattape.com's dark homepage —
   that visually communicates "this product has its own SaaS identity."
   ============================================================================ */
.theme-ostraq {
    --pt-bg: #f3f2f8;            /* warm purple-gray / lavender (ostraq --bg-primary) */
    --pt-bg-deep: #eae8f2;
    --pt-surface: rgba(255,255,255,0.92);  /* glass-bg from source */
    --pt-surface-2: #dddbe8;
    --pt-ink: #0f172a;           /* slate-900 (--text-primary) */
    --pt-ink-dim: #334155;       /* slate-700 (--text-secondary) */
    --pt-ink-muted: #475569;     /* slate-600 (--text-muted) */
    --pt-accent: #4f46e5;        /* indigo-600 — primary brand */
    --pt-accent-2: #0d9488;      /* teal-600 — secondary */
    --pt-accent-3: #b45309;      /* amber-700 — CTA-safe deep highlight */
    --pt-accent-amber: #f59e0b;  /* amber-500 — accent chips */
    --pt-success: #10b981;       /* mint — verified */
    --pt-rule: rgba(79, 70, 229, 0.22);   /* indigo-tinted border */
    --pt-display-font: 'Plus Jakarta Sans', system-ui, sans-serif;
    --pt-body-font: 'Plus Jakarta Sans', system-ui, sans-serif;
    --pt-mono-font: 'JetBrains Mono', ui-monospace, monospace;
}
.theme-ostraq h1, .theme-ostraq h2, .theme-ostraq h3, .theme-ostraq h4 {
    font-family: var(--pt-display-font);
    color: var(--pt-ink);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.theme-ostraq p, .theme-ostraq li, .theme-ostraq blockquote {
    font-family: var(--pt-body-font);
    color: var(--pt-ink-dim);
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
}

/* ============================================================================
   Homepage card — bright lavender slice that previews ostraq.com hero
   ============================================================================ */
.theme-ostraq.featured-card {
    background: var(--pt-bg);
    background-image:
        radial-gradient(circle at 100% 0%, rgba(79,70,229,0.10), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(13,148,136,0.06), transparent 55%);
    border: 1px solid var(--pt-rule);
    border-top: 3px solid var(--pt-accent);
    color: var(--pt-ink);
    position: relative;
}
.theme-ostraq.featured-card::before {
    /* Subtle bottom rule in indigo→teal→amber so the brand's tri-accent shows */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--pt-accent), var(--pt-accent-2) 60%, var(--pt-accent-amber));
}
.theme-ostraq.featured-card h3 {
    font-family: var(--pt-display-font);
    color: var(--pt-ink);
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: -0.025em;
}

/* ============================================================================
   OSTRAQ wordmark — matches the live ostraq.com navbar wordmark exactly:
   pill with indigo→teal→indigo shimmer gradient bg, white "OSTRA" with the
   "Q" in indigo-200 for the brand's signature letter-contrast moment.
   ============================================================================ */
@keyframes ostraq-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.ostraq-wordmark {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    background: linear-gradient(110deg, #4f46e5 0%, #4f46e5 40%, #0d9488 50%, #4f46e5 60%, #4f46e5 100%);
    background-size: 200% 100%;
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    animation: ostraq-shimmer 12s ease-in-out infinite;
}
.ostraq-wordmark .q-accent { color: #c7d2fe; }
.ostraq-wordmark--xl { font-size: 4rem; padding: 0.5rem 1.25rem; border-radius: 12px; }
.ostraq-wordmark--lg { font-size: 2.6rem; padding: 0.4rem 1rem; border-radius: 10px; }
.ostraq-wordmark--md { font-size: 1.6rem; padding: 0.3rem 0.8rem; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
    .ostraq-wordmark { animation: none; background-position: 0% 50%; }
}
.theme-ostraq.featured-card .featured-short {
    font-family: var(--pt-body-font);
    color: var(--pt-ink-dim);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.55;
}
.theme-ostraq.featured-card .featured-points li {
    font-family: var(--pt-body-font);
    color: var(--pt-ink-dim);
    font-weight: 400;
    font-size: 0.95rem;
}
.theme-ostraq.featured-card .featured-points li::before { color: var(--pt-accent); }

/* CTAs: outlined neutral primary + filled indigo secondary, mirrors ostraq.com */
.theme-ostraq.featured-card .featured-link.product {
    font-family: var(--pt-body-font);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 0.9rem;
}
.theme-ostraq.featured-card .featured-link.product:first-of-type {
    background: var(--pt-accent);
    color: #ffffff;
    border-color: var(--pt-accent);
}
.theme-ostraq.featured-card .featured-link.product:first-of-type:hover {
    background: #4338ca;
    border-color: #4338ca;
    color: #ffffff;
}
.theme-ostraq.featured-card .featured-link.product:last-of-type {
    background: rgba(255,255,255,0.6);
    color: var(--pt-ink);
    border-color: var(--pt-ink-muted);
}
.theme-ostraq.featured-card .featured-link.product:last-of-type:hover {
    background: var(--pt-ink);
    color: var(--pt-bg);
    border-color: var(--pt-ink);
}

/* Status / JV chips — white pills on lavender */
.theme-ostraq.featured-card .featured-badge,
.theme-ostraq.featured-card .badge {
    background: rgba(255,255,255,0.7);
    color: var(--pt-ink);
    border-color: var(--pt-rule);
    font-family: var(--pt-body-font);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 0.68rem;
}
.theme-ostraq.featured-card .status-pilot,
.theme-ostraq.featured-card .badge.status-pilot {
    color: #ffffff;
    border-color: var(--pt-success);
    background: var(--pt-success);
}
.theme-ostraq.featured-card .badge-jv {
    color: var(--pt-accent);
    border-color: var(--pt-accent);
    background: rgba(79, 70, 229, 0.08);
}

/* ============================================================================
   Product page — extends the light lavender treatment into the body,
   while the global ThreatTape nav + footer stay dark (intentional contrast).
   ============================================================================ */
body.theme-ostraq {
    background: var(--pt-bg);
    background-image:
        radial-gradient(circle at 90% 0%, rgba(79, 70, 229, 0.08), transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(13, 148, 136, 0.06), transparent 50%);
    color: var(--pt-ink);
    font-family: var(--pt-body-font);

    /* Remap legacy variables that inline `style="color: var(--text-light)"`
       references would otherwise pull from the parent dark theme. */
    --text-light: var(--pt-ink-dim);
    --text-secondary: var(--pt-ink-dim);
    --text-muted: var(--pt-ink-muted);
    --primary-color: var(--pt-accent);
    --border-color: var(--pt-rule);
    --card-bg: var(--pt-surface);
}
body.theme-ostraq .product-hero {
    background: linear-gradient(180deg, var(--pt-bg) 0%, var(--pt-bg-deep) 100%);
    color: var(--pt-ink);
}
body.theme-ostraq .product-hero h1 {
    color: var(--pt-ink);
    font-weight: 800;
    font-size: clamp(2.4rem, 5vw, 4rem);
    letter-spacing: -0.03em;
}
body.theme-ostraq .product-tagline {
    color: var(--pt-accent);
    font-style: normal;
    font-weight: 600;
}
body.theme-ostraq .section-title {
    color: var(--pt-ink);
    font-family: var(--pt-display-font);
    font-weight: 800;
}
body.theme-ostraq .section-title::after {
    background-image: linear-gradient(90deg, var(--pt-accent), var(--pt-accent-2));
    height: 3px;
    width: 80px;
}
body.theme-ostraq .feature-card,
body.theme-ostraq .ps-card {
    background: var(--pt-surface);
    color: var(--pt-ink-dim);
    border: 1px solid var(--pt-rule);
    border-left: 4px solid var(--pt-accent);
}
body.theme-ostraq .feature-card h3,
body.theme-ostraq .ps-card h3 {
    color: var(--pt-ink);
}
body.theme-ostraq .feature-card p,
body.theme-ostraq .feature-card li,
body.theme-ostraq .ps-card p,
body.theme-ostraq .ps-card li {
    color: var(--pt-ink-dim);
}
body.theme-ostraq .feature-card li::before,
body.theme-ostraq .ps-card li::before {
    color: var(--pt-accent);
}
body.theme-ostraq .badge {
    background: rgba(255,255,255,0.7);
    color: var(--pt-ink);
    border-color: var(--pt-rule);
    font-family: var(--pt-body-font);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
body.theme-ostraq .badge-status {
    color: #ffffff;
    border-color: var(--pt-success);
    background: var(--pt-success);
}
body.theme-ostraq .badge-tech {
    color: var(--pt-accent);
    border-color: var(--pt-accent);
    background: rgba(79, 70, 229, 0.08);
}
body.theme-ostraq .btn-primary {
    background: var(--pt-accent);
    color: #ffffff;
    border-color: var(--pt-accent);
    font-family: var(--pt-body-font);
    text-transform: none;
    font-weight: 600;
}
body.theme-ostraq .btn-primary:hover {
    background: #4338ca;
    border-color: #4338ca;
    color: #ffffff;
}
body.theme-ostraq .btn-secondary {
    background: rgba(255,255,255,0.6);
    color: var(--pt-ink);
    border-color: var(--pt-ink-muted);
    font-family: var(--pt-body-font);
    text-transform: none;
    font-weight: 600;
}
body.theme-ostraq .btn-secondary:hover {
    background: var(--pt-ink);
    color: var(--pt-bg);
    border-color: var(--pt-ink);
}
/* Voting methods chips — use indigo/teal split per Ostraq palette */
body.theme-ostraq .vm-chip {
    background: rgba(255,255,255,0.7);
    border: 1px solid var(--pt-rule);
    border-left: 3px solid var(--pt-accent);
    color: var(--pt-ink-dim);
}
body.theme-ostraq .vm-chip strong {
    color: var(--pt-accent);
}
/* Use-case cards on light bg */
body.theme-ostraq .use-case {
    background: var(--pt-surface);
    border: 1px solid var(--pt-rule);
    color: var(--pt-ink-dim);
}
body.theme-ostraq .use-case-title { color: var(--pt-ink); }
body.theme-ostraq .problem-solution { background: var(--pt-bg-deep); }
body.theme-ostraq .content-section a:not(.btn):not(.featured-link) { color: var(--pt-accent); }
body.theme-ostraq code, body.theme-ostraq pre {
    background: var(--pt-surface-2);
    color: var(--pt-ink);
    font-family: var(--pt-mono-font);
}

/* ============================================================================
   THEME 03 — eTrax + eCombine — combined athletic-management JV
   The JV card shows BOTH brands together (split treatment); each product
   page has its own theme that mirrors its live site.

   Live sites inspected 2026-05-12:
   - etrax.app:   bg #111827, primary #3b82f6 (blue), accent #f59e0b
   - ecombine.app: bg #0a0f0a, primary #16a34a (green), accent #facc15

   Wordmark recipes (recovered from DOM):
   - ETrax: <e>E</e><span>Trax</span> — white "E" + blue "Trax", 900 weight, -0.04em
   - eCombine: SVG at /assets/images/products/ecombine-logo.svg (staged)
   ============================================================================ */

/* ETrax wordmark — CSS replica of the etrax.app navbar mark */
.etrax-wordmark {
    display: inline-flex;
    align-items: baseline;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #ffffff;
}
.etrax-wordmark .etrax-e {
    color: #ffffff;
}
.etrax-wordmark .etrax-trax {
    color: #3b82f6;
}
.etrax-wordmark--xl { font-size: 4.5rem; }
.etrax-wordmark--lg { font-size: 3rem; }
.etrax-wordmark--md { font-size: 1.6rem; }

/* eCombine wordmark — the SVG file ships as the wordmark; provides constraints */
.ecombine-wordmark {
    display: inline-block;
    max-width: 100%;
    height: auto;
}
.ecombine-wordmark--xl { width: 360px; }
.ecombine-wordmark--lg { width: 260px; }
.ecombine-wordmark--md { width: 160px; }

/* ============================================================================
   .theme-athletics — JV CARD ONLY (split presentation of both brands)
   Background is a diagonal split: slate-900 (eTrax) → dark-green (eCombine).
   Title row hosts BOTH wordmarks side by side. Each CTA uses its product's
   primary color.
   ============================================================================ */
.theme-athletics {
    --pt-etrax-bg: #111827;
    --pt-etrax-blue: #3b82f6;
    --pt-etrax-amber: #f59e0b;
    --pt-ecombine-bg: #0a0f0a;
    --pt-ecombine-green: #16a34a;
    --pt-ecombine-yellow: #facc15;
    --pt-ink: #f1efe7;
    --pt-ink-dim: rgba(241, 239, 231, 0.78);
    --pt-rule: rgba(255, 255, 255, 0.12);
    --pt-display-font: 'Inter', system-ui, -apple-system, sans-serif;
    --pt-body-font: 'Inter', system-ui, -apple-system, sans-serif;
    --pt-mono-font: 'JetBrains Mono', ui-monospace, monospace;
    /* Generic --pt-accent used by shared selectors — yellow works on both halves */
    --pt-accent: var(--pt-ecombine-yellow);
    --pt-bg: var(--pt-etrax-bg);
}

.theme-athletics.featured-card {
    background:
        linear-gradient(135deg,
            var(--pt-etrax-bg) 0%,
            var(--pt-etrax-bg) 45%,
            var(--pt-ecombine-bg) 55%,
            var(--pt-ecombine-bg) 100%
        );
    border: 1px solid var(--pt-rule);
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--pt-etrax-blue) 0%, var(--pt-etrax-blue) 45%, var(--pt-ecombine-green) 55%, var(--pt-ecombine-green) 100%) 1;
    color: var(--pt-ink);
    position: relative;
}
/* Subtle diagonal seam between the two brand zones */
.theme-athletics.featured-card::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.06) 30%, rgba(255,255,255,0.06) 70%, transparent);
    transform: translateX(-50%) rotate(8deg);
    transform-origin: center;
    pointer-events: none;
}
.theme-athletics.featured-card h3 {
    font-family: var(--pt-display-font);
    font-weight: 900;
    color: var(--pt-ink);
    letter-spacing: -0.02em;
    font-size: 1.4rem;
}
.theme-athletics.featured-card .featured-short,
.theme-athletics.featured-card .featured-points li {
    font-family: var(--pt-body-font);
    color: var(--pt-ink-dim);
    font-weight: 400;
    font-size: 0.95rem;
}
.theme-athletics.featured-card .featured-points li::before { color: var(--pt-ecombine-yellow); }

/* Split CTAs: eTrax (left) in blue, eCombine (right) in green */
.theme-athletics.featured-card .featured-link.product {
    font-family: var(--pt-body-font);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 0.9rem;
    background: transparent;
    color: var(--pt-ink);
}
.theme-athletics.featured-card .featured-link.product:first-of-type {
    background: var(--pt-etrax-blue);
    border-color: var(--pt-etrax-blue);
    color: #ffffff;
}
.theme-athletics.featured-card .featured-link.product:first-of-type:hover {
    background: #2563eb;
    border-color: #2563eb;
}
.theme-athletics.featured-card .featured-link.product:last-of-type {
    background: var(--pt-ecombine-green);
    border-color: var(--pt-ecombine-green);
    color: #ffffff;
}
.theme-athletics.featured-card .featured-link.product:last-of-type:hover {
    background: #15803d;
    border-color: #15803d;
}

/* Status pills — amber sits between the two brand halves and works on both */
.theme-athletics.featured-card .featured-badge,
.theme-athletics.featured-card .badge {
    background: rgba(255,255,255,0.06);
    color: var(--pt-ink);
    border-color: var(--pt-rule);
    font-family: var(--pt-body-font);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    font-size: 0.68rem;
}
.theme-athletics.featured-card .status-formation,
.theme-athletics.featured-card .badge.status-formation {
    color: var(--pt-etrax-amber);
    border-color: var(--pt-etrax-amber);
    background: rgba(245, 158, 11, 0.08);
}
.theme-athletics.featured-card .badge-jv {
    color: var(--pt-ink);
    border-color: var(--pt-rule);
    background: rgba(255,255,255,0.05);
}

/* ============================================================================
   .theme-etrax — etrax.app dialect (product page)
   ============================================================================ */
.theme-etrax {
    --pt-bg: #111827;            /* slate-900 */
    --pt-bg-deep: #0b1220;
    --pt-surface: #1f2937;       /* slate-800 */
    --pt-surface-2: #374151;     /* slate-700 */
    --pt-ink: #f9fafb;
    --pt-ink-dim: #d1d5db;
    --pt-ink-muted: #9ca3af;
    --pt-accent: #3b82f6;        /* etrax blue (--primary) */
    --pt-accent-2: #2563eb;      /* blue-600 hover */
    --pt-accent-3: #f59e0b;      /* amber (--accent) */
    --pt-rule: rgba(59, 130, 246, 0.3);
    --pt-display-font: 'Inter', system-ui, -apple-system, sans-serif;
    --pt-body-font: 'Inter', system-ui, -apple-system, sans-serif;
    --pt-mono-font: 'JetBrains Mono', ui-monospace, monospace;
}
body.theme-etrax {
    background: var(--pt-bg);
    background-image: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.08), transparent 50%);
    color: var(--pt-ink);
    font-family: var(--pt-body-font);
    --text-light: var(--pt-ink-dim);
    --text-secondary: var(--pt-ink-dim);
    --text-muted: var(--pt-ink-muted);
    --primary-color: var(--pt-accent);
    --border-color: var(--pt-rule);
    --card-bg: var(--pt-surface);
}
body.theme-etrax h1, body.theme-etrax h2, body.theme-etrax h3, body.theme-etrax h4 {
    font-family: var(--pt-display-font);
    font-weight: 800;
    color: var(--pt-ink);
    letter-spacing: -0.02em;
}
body.theme-etrax p, body.theme-etrax li, body.theme-etrax blockquote {
    font-family: var(--pt-body-font);
    color: var(--pt-ink-dim);
}
body.theme-etrax .product-hero { background: linear-gradient(180deg, var(--pt-bg) 0%, var(--pt-surface) 100%); }
body.theme-etrax .product-hero h1 { color: var(--pt-ink); }
body.theme-etrax .product-tagline { color: var(--pt-accent); font-weight: 600; }
body.theme-etrax .section-title { color: var(--pt-ink); }
body.theme-etrax .section-title::after { background: var(--pt-accent); height: 3px; width: 80px; }
body.theme-etrax .feature-card,
body.theme-etrax .ps-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-rule);
    border-left: 4px solid var(--pt-accent);
    color: var(--pt-ink-dim);
}
body.theme-etrax .feature-card h3, body.theme-etrax .ps-card h3 { color: var(--pt-ink); }
body.theme-etrax .badge {
    color: var(--pt-accent);
    border-color: var(--pt-accent);
    background: rgba(59, 130, 246, 0.1);
    font-family: var(--pt-body-font);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
body.theme-etrax .badge-status { color: var(--pt-accent-3); border-color: var(--pt-accent-3); background: rgba(245, 158, 11, 0.1); }
body.theme-etrax .btn-primary {
    background: var(--pt-accent); color: #ffffff; border-color: var(--pt-accent);
    font-family: var(--pt-body-font); font-weight: 600; text-transform: none;
}
body.theme-etrax .btn-primary:hover { background: var(--pt-accent-2); border-color: var(--pt-accent-2); }
body.theme-etrax .btn-secondary {
    background: transparent; color: var(--pt-ink); border-color: var(--pt-rule);
    font-family: var(--pt-body-font); font-weight: 600; text-transform: none;
}
body.theme-etrax .btn-secondary:hover { background: var(--pt-surface-2); border-color: var(--pt-ink-muted); }

/* ============================================================================
   .theme-ecombine — ecombine.app dialect (product page)
   ============================================================================ */
.theme-ecombine {
    --pt-bg: #0a0f0a;            /* near-black with green undertone */
    --pt-bg-deep: #050805;
    --pt-surface: #0f1a0f;
    --pt-surface-2: #16241a;
    --pt-ink: #e7f5e7;           /* mint-tinted white */
    --pt-ink-dim: #c4d8c4;
    --pt-ink-muted: #94ad94;
    --pt-accent: #16a34a;        /* ecombine green (--primary) */
    --pt-accent-2: #15803d;      /* green-700 hover */
    --pt-accent-3: #facc15;      /* yellow-400 (--accent) */
    --pt-rule: rgba(22, 163, 74, 0.3);
    --pt-display-font: 'Inter', system-ui, -apple-system, sans-serif;
    --pt-body-font: 'Inter', system-ui, -apple-system, sans-serif;
    --pt-mono-font: 'JetBrains Mono', ui-monospace, monospace;
}
body.theme-ecombine {
    background: var(--pt-bg);
    background-image: radial-gradient(circle at 50% 0%, rgba(22, 163, 74, 0.10), transparent 50%);
    color: var(--pt-ink);
    font-family: var(--pt-body-font);
    --text-light: var(--pt-ink-dim);
    --text-secondary: var(--pt-ink-dim);
    --text-muted: var(--pt-ink-muted);
    --primary-color: var(--pt-accent);
    --border-color: var(--pt-rule);
    --card-bg: var(--pt-surface);
}
body.theme-ecombine h1, body.theme-ecombine h2, body.theme-ecombine h3, body.theme-ecombine h4 {
    font-family: var(--pt-display-font);
    font-weight: 800;
    color: var(--pt-ink);
    letter-spacing: -0.02em;
}
body.theme-ecombine p, body.theme-ecombine li, body.theme-ecombine blockquote {
    font-family: var(--pt-body-font);
    color: var(--pt-ink-dim);
}
body.theme-ecombine .product-hero { background: linear-gradient(180deg, var(--pt-bg) 0%, var(--pt-surface) 100%); }
body.theme-ecombine .product-hero h1 { color: var(--pt-ink); }
body.theme-ecombine .product-tagline { color: var(--pt-accent); font-weight: 600; }
body.theme-ecombine .section-title { color: var(--pt-ink); }
body.theme-ecombine .section-title::after { background: linear-gradient(90deg, var(--pt-accent), var(--pt-accent-3)); height: 3px; width: 80px; }
body.theme-ecombine .feature-card,
body.theme-ecombine .ps-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-rule);
    border-left: 4px solid var(--pt-accent);
    color: var(--pt-ink-dim);
}
body.theme-ecombine .feature-card h3, body.theme-ecombine .ps-card h3 { color: var(--pt-ink); }
body.theme-ecombine .badge {
    color: var(--pt-accent); border-color: var(--pt-accent);
    background: rgba(22, 163, 74, 0.1);
    font-family: var(--pt-body-font);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
body.theme-ecombine .badge-status { color: var(--pt-accent-3); border-color: var(--pt-accent-3); background: rgba(250, 204, 21, 0.1); }
body.theme-ecombine .btn-primary {
    background: var(--pt-accent); color: #ffffff; border-color: var(--pt-accent);
    font-family: var(--pt-body-font); font-weight: 600; text-transform: none;
}
body.theme-ecombine .btn-primary:hover { background: var(--pt-accent-2); border-color: var(--pt-accent-2); }
body.theme-ecombine .btn-secondary {
    background: transparent; color: var(--pt-ink); border-color: var(--pt-rule);
    font-family: var(--pt-body-font); font-weight: 600; text-transform: none;
}
body.theme-ecombine .btn-secondary:hover { background: var(--pt-surface-2); border-color: var(--pt-ink-muted); }

/* ============================================================================
   THEME 04 — SourceIQ
   Aligned to live brand (sourceiq.info marketing source):
     --bg: #0a0e17 (deep navy-tinted),  --bg-card: #111827,  --border: #1f2937
     --primary: #00ff88 (phosphor green) — signature
     --accent: #3b82f6 (blue-500),  --text: #e5e7eb
     Trust bands: verified #22c55e / credible #84cc16 / caution #eab308 /
                  suspicious #f97316 / threat #ef4444
     Font: Inter
   Wordmark: "Source<span class="iq-accent">IQ</span>" — ink + green IQ
   ============================================================================ */
.theme-sourceiq {
    --pt-bg: #0a0e17;
    --pt-surface: #111827;
    --pt-surface-2: #1a2332;
    --pt-ink: #e5e7eb;
    --pt-ink-dim: #9ca3af;
    --pt-ink-muted: #6b7280;
    --pt-accent: #00ff88;
    --pt-accent-2: #3b82f6;
    --pt-accent-3: #00cc6a;
    --pt-glow: rgba(0, 255, 136, 0.15);
    --pt-rule: #1f2937;
    --pt-rule-hover: #374151;
    --pt-verified: #22c55e;
    --pt-credible: #84cc16;
    --pt-caution: #eab308;
    --pt-suspicious: #f97316;
    --pt-threat-band: #ef4444;
    --pt-display-font: 'Inter', system-ui, -apple-system, sans-serif;
    --pt-body-font: 'Inter', system-ui, -apple-system, sans-serif;
    --pt-mono-font: 'JetBrains Mono', ui-monospace, monospace;
}

/* SourceIQ wordmark — matches the live nav: "Source" ink + "IQ" phosphor */
.sourceiq-wordmark {
    display: inline-flex;
    align-items: baseline;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #e5e7eb;
}
.sourceiq-wordmark .iq-accent { color: #00ff88; }
.sourceiq-wordmark--xl { font-size: 4.5rem; }
.sourceiq-wordmark--lg { font-size: 3rem; }
.sourceiq-wordmark--md { font-size: 1.7rem; }

.theme-sourceiq h1, .theme-sourceiq h2, .theme-sourceiq h3, .theme-sourceiq h4 {
    font-family: var(--pt-display-font);
    color: var(--pt-ink);
    font-weight: 800;
    letter-spacing: -0.02em;
}
.theme-sourceiq p, .theme-sourceiq li {
    font-family: var(--pt-body-font);
    color: var(--pt-ink-dim);
    font-weight: 400;
}

/* Homepage card */
.theme-sourceiq.featured-card {
    background: linear-gradient(180deg, var(--pt-bg) 0%, var(--pt-surface) 100%);
    border: 1px solid var(--pt-rule);
    border-top: 3px solid var(--pt-accent);
    color: var(--pt-ink);
}
.theme-sourceiq.featured-card h3 {
    font-family: var(--pt-display-font);
    color: var(--pt-ink);
    font-weight: 800;
    font-size: 1.9rem;
    letter-spacing: -0.025em;
}
.theme-sourceiq.featured-card .featured-short {
    font-family: var(--pt-body-font);
    color: var(--pt-ink-dim);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.6;
}
.theme-sourceiq.featured-card .featured-points li {
    font-family: var(--pt-body-font);
    color: var(--pt-ink-dim);
    font-weight: 400;
    font-size: 0.95rem;
}
.theme-sourceiq.featured-card .featured-points li::before { color: var(--pt-accent); }

.theme-sourceiq.featured-card .featured-link.product {
    font-family: var(--pt-body-font);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 0.9rem;
}
.theme-sourceiq.featured-card .featured-link.product:first-of-type {
    background: var(--pt-accent);
    color: var(--pt-bg);
    border-color: var(--pt-accent);
}
.theme-sourceiq.featured-card .featured-link.product:first-of-type:hover {
    background: var(--pt-accent-3);
    border-color: var(--pt-accent-3);
    box-shadow: 0 0 0 4px var(--pt-glow);
}
.theme-sourceiq.featured-card .featured-link.product:last-of-type {
    background: transparent;
    color: var(--pt-ink);
    border-color: var(--pt-rule-hover);
}
.theme-sourceiq.featured-card .featured-link.product:last-of-type:hover {
    background: var(--pt-surface-2);
    border-color: var(--pt-accent);
    color: var(--pt-accent);
}

.theme-sourceiq.featured-card .featured-badge,
.theme-sourceiq.featured-card .badge {
    background: rgba(255,255,255,0.04);
    color: var(--pt-ink-dim);
    border-color: var(--pt-rule);
    font-family: var(--pt-body-font);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    font-size: 0.68rem;
}
.theme-sourceiq.featured-card .status-dev,
.theme-sourceiq.featured-card .badge.status-dev {
    color: var(--pt-accent);
    border-color: var(--pt-accent);
    background: rgba(0, 255, 136, 0.08);
}

/* Product page */
body.theme-sourceiq {
    background: var(--pt-bg);
    background-image:
        radial-gradient(circle at 50% 0%, rgba(0, 255, 136, 0.06), transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(59, 130, 246, 0.04), transparent 40%);
    color: var(--pt-ink);
    font-family: var(--pt-body-font);
    --text-light: var(--pt-ink-dim);
    --text-secondary: var(--pt-ink-dim);
    --text-muted: var(--pt-ink-muted);
    --primary-color: var(--pt-accent);
    --border-color: var(--pt-rule);
    --card-bg: var(--pt-surface);
}
body.theme-sourceiq h1, body.theme-sourceiq h2, body.theme-sourceiq h3, body.theme-sourceiq h4 {
    font-family: var(--pt-display-font);
    font-weight: 800;
    color: var(--pt-ink);
    letter-spacing: -0.025em;
}
body.theme-sourceiq p, body.theme-sourceiq li, body.theme-sourceiq blockquote {
    font-family: var(--pt-body-font);
    color: var(--pt-ink-dim);
}
body.theme-sourceiq .product-hero { background: linear-gradient(180deg, var(--pt-bg) 0%, var(--pt-surface) 100%); }
body.theme-sourceiq .product-hero h1 { color: var(--pt-ink); }
body.theme-sourceiq .product-tagline { color: var(--pt-accent); font-weight: 600; }
body.theme-sourceiq .section-title { color: var(--pt-ink); }
body.theme-sourceiq .section-title::after {
    background: var(--pt-accent);
    height: 3px;
    width: 80px;
    box-shadow: 0 0 12px var(--pt-glow);
}
body.theme-sourceiq .feature-card,
body.theme-sourceiq .ps-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-rule);
    border-left: 4px solid var(--pt-accent);
    color: var(--pt-ink-dim);
}
body.theme-sourceiq .feature-card h3,
body.theme-sourceiq .ps-card h3 { color: var(--pt-ink); }
body.theme-sourceiq .feature-card li::before,
body.theme-sourceiq .ps-card li::before { color: var(--pt-accent); }
body.theme-sourceiq .badge {
    color: var(--pt-accent);
    border-color: var(--pt-accent);
    background: rgba(0, 255, 136, 0.08);
    font-family: var(--pt-body-font);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
body.theme-sourceiq .badge-tech {
    color: var(--pt-accent-2);
    border-color: var(--pt-accent-2);
    background: rgba(59, 130, 246, 0.08);
}
body.theme-sourceiq .btn-primary {
    background: var(--pt-accent);
    color: var(--pt-bg);
    border-color: var(--pt-accent);
    font-family: var(--pt-body-font);
    font-weight: 600;
    text-transform: none;
}
body.theme-sourceiq .btn-primary:hover {
    background: var(--pt-accent-3);
    border-color: var(--pt-accent-3);
    box-shadow: 0 0 0 4px var(--pt-glow);
}
body.theme-sourceiq .btn-secondary {
    background: transparent;
    color: var(--pt-ink);
    border-color: var(--pt-rule-hover);
    font-family: var(--pt-body-font);
    font-weight: 600;
    text-transform: none;
}
body.theme-sourceiq .btn-secondary:hover {
    background: var(--pt-surface-2);
    border-color: var(--pt-accent);
    color: var(--pt-accent);
}

/* Trust score table — real brand band colors */
body.theme-sourceiq .band-verified   { background: rgba(34, 197, 94, 0.15);  color: var(--pt-verified); border: 1px solid var(--pt-verified); }
body.theme-sourceiq .band-credible   { background: rgba(132, 204, 22, 0.15); color: var(--pt-credible); border: 1px solid var(--pt-credible); }
body.theme-sourceiq .band-caution    { background: rgba(234, 179, 8, 0.15);  color: var(--pt-caution); border: 1px solid var(--pt-caution); }
body.theme-sourceiq .band-suspicious { background: rgba(249, 115, 22, 0.15); color: var(--pt-suspicious); border: 1px solid var(--pt-suspicious); }
body.theme-sourceiq .band-threat     { background: rgba(239, 68, 68, 0.15);  color: var(--pt-threat-band); border: 1px solid var(--pt-threat-band); }
body.theme-sourceiq .trust-score-table th { color: var(--pt-ink); }
body.theme-sourceiq .trust-score-table td { color: var(--pt-ink-dim); }
body.theme-sourceiq .trust-score-table th,
body.theme-sourceiq .trust-score-table td { border-bottom-color: var(--pt-rule); }

/* ============================================================================
   THEME 05 — IQualify
   Vibe: honest interview × editorial spread
   ============================================================================ */
.theme-iqualify {
    --pt-bg: #191c1f;
    --pt-surface: #232729;
    --pt-surface-2: #2b3134;
    --pt-ink: #f7f4ee;            /* paper white */
    --pt-ink-dim: #b6b3ad;
    --pt-accent: #2c8b8f;         /* confident teal — slightly punched */
    --pt-accent-2: #e57862;       /* signal coral */
    --pt-rule: rgba(44, 139, 143, 0.4);
    --pt-display-font: 'Yeseva One', Georgia, serif;
    --pt-body-font: 'Onest', system-ui, sans-serif;
    --pt-mono-font: 'JetBrains Mono', ui-monospace, monospace;
}
.theme-iqualify h1, .theme-iqualify h2, .theme-iqualify h3, .theme-iqualify h4 {
    font-family: var(--pt-display-font);
    color: var(--pt-ink);
    font-weight: 400;
    letter-spacing: -0.015em;
}
.theme-iqualify p, .theme-iqualify li { font-family: var(--pt-body-font); color: var(--pt-ink); }
body.theme-iqualify {
    background: var(--pt-bg);
    background-image:
        linear-gradient(135deg, rgba(44,139,143,0.04) 0%, transparent 40%),
        linear-gradient(225deg, rgba(229,120,98,0.04) 0%, transparent 40%);
}
body.theme-iqualify .product-hero { background: linear-gradient(135deg, var(--pt-bg), var(--pt-surface)); }
body.theme-iqualify .product-hero h1,
body.theme-iqualify .section-title { color: var(--pt-accent); }
body.theme-iqualify .section-title::after {
    background: var(--pt-accent-2);
    height: 3px;
    width: 64px;
}
body.theme-iqualify .feature-card,
body.theme-iqualify .ps-card,
body.theme-iqualify .featured-card {
    background: var(--pt-surface);
    border-color: var(--pt-rule);
    border-left: 4px solid var(--pt-accent);
}
body.theme-iqualify .badge { color: var(--pt-accent); border-color: var(--pt-accent); }
body.theme-iqualify .btn-primary { background: var(--pt-accent); color: var(--pt-ink); border-color: var(--pt-accent); }
body.theme-iqualify .btn-primary:hover { background: var(--pt-accent-2); border-color: var(--pt-accent-2); color: var(--pt-bg); }
.theme-iqualify.featured-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-rule);
    border-left: 4px solid var(--pt-accent-2);
}
.theme-iqualify.featured-card h3 { font-family: var(--pt-display-font); color: var(--pt-accent); font-weight: 400; }
.theme-iqualify.featured-card p, .theme-iqualify.featured-card li { font-family: var(--pt-body-font); color: var(--pt-ink); }

/* ============================================================================
   THEME 06 — ThreatTape Recon
   Vibe: pure operator's console — harder CRT than the main site
   ============================================================================ */
.theme-recon {
    --pt-bg: #020402;
    --pt-surface: #07120a;
    --pt-surface-2: #0e1c12;
    --pt-ink: #d4ffe5;
    --pt-ink-dim: #6abd83;
    --pt-accent: #00ff66;         /* phosphor */
    --pt-accent-2: #a865ff;       /* TOR violet */
    --pt-accent-3: #ff3344;       /* alert red */
    --pt-accent-4: #facc15;       /* recovery amber */
    --pt-rule: rgba(0, 255, 102, 0.3);
    --pt-display-font: 'VT323', ui-monospace, monospace;
    --pt-body-font: 'Space Mono', ui-monospace, monospace;
    --pt-mono-font: 'VT323', ui-monospace, monospace;
}
.theme-recon h1, .theme-recon h2, .theme-recon h3, .theme-recon h4 {
    font-family: var(--pt-display-font);
    color: var(--pt-accent);
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: 0.03em;
    text-shadow: 0 0 12px rgba(0,255,102,0.4);
}
.theme-recon h1 { font-size: clamp(3rem, 7vw, 5.5rem); line-height: 0.9; }
.theme-recon p, .theme-recon li {
    font-family: var(--pt-body-font);
    color: var(--pt-ink);
    font-size: 0.95rem;
}
body.theme-recon {
    background: var(--pt-bg);
    background-image:
        repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,255,102,0.025) 2px 3px),
        radial-gradient(circle at 50% 50%, rgba(0,255,102,0.04), transparent 60%);
}
body.theme-recon .product-hero {
    background: linear-gradient(180deg, var(--pt-bg) 0%, var(--pt-surface) 100%);
}
body.theme-recon .section-title { color: var(--pt-accent); }
body.theme-recon .section-title::after {
    background: var(--pt-accent);
    height: 2px;
    width: 64px;
    box-shadow: 0 0 8px var(--pt-accent);
}
body.theme-recon .feature-card,
body.theme-recon .ps-card,
body.theme-recon .featured-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-rule);
    border-left: 4px solid var(--pt-accent);
}
body.theme-recon .badge { color: var(--pt-accent-4); border-color: var(--pt-accent-4); font-family: var(--pt-display-font); font-size: 1rem; letter-spacing: 0.1em; }
body.theme-recon .btn-primary { background: var(--pt-accent); color: var(--pt-bg); border-color: var(--pt-accent); font-family: var(--pt-display-font); font-size: 1.2rem; }
body.theme-recon .btn-primary:hover { background: var(--pt-accent-2); border-color: var(--pt-accent-2); color: var(--pt-ink); }
.theme-recon.featured-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-rule);
    border-left: 4px solid var(--pt-accent);
    font-family: var(--pt-body-font);
}
.theme-recon.featured-card h3 { font-family: var(--pt-display-font); color: var(--pt-accent); text-transform: lowercase; text-shadow: 0 0 8px rgba(0,255,102,0.4); }
.theme-recon.featured-card p, .theme-recon.featured-card li { font-family: var(--pt-body-font); color: var(--pt-ink); font-size: 0.9rem; }

/* ============================================================================
   THEME 07 — ConManagement
   Vibe: vintage cinema marquee × ticket stub
   ============================================================================ */
.theme-conmgmt {
    --pt-bg: #2a0e2a;             /* velvet curtain */
    --pt-surface: #3a1638;
    --pt-surface-2: #4a1f47;
    --pt-ink: #f5e9d3;            /* program cream */
    --pt-ink-dim: #d4c4a8;
    --pt-accent: #f7c948;         /* stage-light yellow */
    --pt-accent-2: #c8302e;       /* marquee red */
    --pt-accent-3: #b08b3b;       /* foil gold */
    --pt-rule: rgba(247, 201, 72, 0.5);
    --pt-display-font: 'Bungee', sans-serif;
    --pt-body-font: 'Zilla Slab', Georgia, serif;
    --pt-mono-font: 'JetBrains Mono', ui-monospace, monospace;
}
.theme-conmgmt h1, .theme-conmgmt h2, .theme-conmgmt h3 {
    font-family: var(--pt-display-font);
    color: var(--pt-accent);
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
.theme-conmgmt p, .theme-conmgmt li { font-family: var(--pt-body-font); color: var(--pt-ink); }
body.theme-conmgmt {
    background: var(--pt-bg);
    background-image: radial-gradient(ellipse at 50% 0%, rgba(247,201,72,0.10), transparent 60%);
}
body.theme-conmgmt .product-hero { background: linear-gradient(180deg, #2a0e2a, #3a1638); }
body.theme-conmgmt .product-hero h1 { color: var(--pt-accent); }
body.theme-conmgmt .section-title { color: var(--pt-accent); }
body.theme-conmgmt .section-title::after {
    background: repeating-linear-gradient(90deg, var(--pt-accent) 0 16px, var(--pt-accent-2) 16px 32px);
    height: 6px;
    width: 160px;
}
body.theme-conmgmt .feature-card,
body.theme-conmgmt .ps-card,
body.theme-conmgmt .featured-card {
    background: var(--pt-surface);
    border: 2px solid var(--pt-accent);
    border-radius: 4px;
}
body.theme-conmgmt .badge { background: var(--pt-accent); color: var(--pt-bg); border-color: var(--pt-accent); font-family: var(--pt-display-font); font-size: 0.7rem; }
body.theme-conmgmt .btn-primary { background: var(--pt-accent-2); color: var(--pt-ink); border-color: var(--pt-accent-2); }
body.theme-conmgmt .btn-primary:hover { background: var(--pt-accent); color: var(--pt-bg); border-color: var(--pt-accent); }
.theme-conmgmt.featured-card {
    background: var(--pt-surface);
    border: 2px solid var(--pt-accent);
    border-radius: 4px;
    position: relative;
}
.theme-conmgmt.featured-card::before {
    content: '★ ★ ★';
    position: absolute;
    top: 0.4rem;
    right: 0.6rem;
    color: var(--pt-accent);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
}
.theme-conmgmt.featured-card h3 { font-family: var(--pt-display-font); color: var(--pt-accent); text-transform: uppercase; }
.theme-conmgmt.featured-card p, .theme-conmgmt.featured-card li { font-family: var(--pt-body-font); color: var(--pt-ink); }

/* ============================================================================
   THEME 08 — Roc
   Vibe: card-game-night at a vintage parlor
   ============================================================================ */
.theme-roc {
    --pt-bg: #0e3b29;             /* card felt */
    --pt-surface: #144030;
    --pt-surface-2: #1d4d3a;
    --pt-ink: #f1eada;            /* cream card */
    --pt-ink-dim: #c5bda8;
    --pt-accent: #c69a4a;         /* gold trim */
    --pt-accent-2: #a23344;       /* ruby suit */
    --pt-accent-3: #0a0a0a;       /* classic bird-black */
    --pt-rule: rgba(198, 154, 74, 0.4);
    --pt-display-font: 'Cormorant Infant', Georgia, serif;
    --pt-body-font: 'EB Garamond', Georgia, serif;
    --pt-mono-font: 'JetBrains Mono', ui-monospace, monospace;
}
.theme-roc h1, .theme-roc h2, .theme-roc h3 {
    font-family: var(--pt-display-font);
    color: var(--pt-ink);
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.01em;
}
.theme-roc p, .theme-roc li { font-family: var(--pt-body-font); color: var(--pt-ink); }
body.theme-roc {
    background: var(--pt-bg);
    background-image:
        radial-gradient(circle at 25% 25%, rgba(198,154,74,0.06), transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(162,51,68,0.05), transparent 50%);
}
body.theme-roc .product-hero { background: linear-gradient(135deg, var(--pt-bg), var(--pt-surface)); }
body.theme-roc .product-hero h1 { color: var(--pt-accent); }
body.theme-roc .section-title { color: var(--pt-accent); }
body.theme-roc .section-title::after {
    background: linear-gradient(90deg, transparent, var(--pt-accent), transparent);
    height: 1px;
    width: 200px;
}
body.theme-roc .feature-card,
body.theme-roc .ps-card,
body.theme-roc .featured-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-rule);
    border-radius: 6px;
    border-left: 4px solid var(--pt-accent);
}
body.theme-roc .badge { color: var(--pt-accent); border-color: var(--pt-accent); }
body.theme-roc .btn-primary { background: var(--pt-accent); color: var(--pt-bg); border-color: var(--pt-accent); }
body.theme-roc .btn-primary:hover { background: var(--pt-accent-2); color: var(--pt-ink); border-color: var(--pt-accent-2); }
.theme-roc.featured-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-rule);
    border-radius: 6px;
}
.theme-roc.featured-card h3 { font-family: var(--pt-display-font); font-style: italic; color: var(--pt-accent); }
.theme-roc.featured-card p, .theme-roc.featured-card li { font-family: var(--pt-body-font); color: var(--pt-ink); }

/* ============================================================================
   THEME 09 — Drifter: Edge of the Black
   Vibe: ship's HUD × frontier saloon
   ============================================================================ */
.theme-drifter {
    --pt-bg: #050810;
    --pt-surface: #0a0f1a;
    --pt-surface-2: #121826;
    --pt-ink: #e6e9f0;
    --pt-ink-dim: #98a0b0;
    --pt-accent: #5fc1ff;         /* drifter cyan */
    --pt-accent-2: #ff5e9a;       /* ion magenta */
    --pt-accent-3: #ffb347;       /* hull amber */
    --pt-rule: rgba(95, 193, 255, 0.3);
    --pt-display-font: 'Major Mono Display', ui-monospace, monospace;
    --pt-body-font: 'Sora', system-ui, sans-serif;
    --pt-mono-font: 'Space Mono', ui-monospace, monospace;
}
.theme-drifter h1, .theme-drifter h2, .theme-drifter h3 {
    font-family: var(--pt-display-font);
    color: var(--pt-accent);
    letter-spacing: 0.05em;
    text-transform: lowercase;
}
.theme-drifter p, .theme-drifter li { font-family: var(--pt-body-font); color: var(--pt-ink); }
body.theme-drifter {
    background: var(--pt-bg);
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.4), transparent 50%),
        radial-gradient(1px 1px at 65% 55%, rgba(255,255,255,0.3), transparent 50%),
        radial-gradient(2px 2px at 85% 25%, rgba(255,255,255,0.3), transparent 50%),
        radial-gradient(1px 1px at 35% 75%, rgba(255,255,255,0.4), transparent 50%),
        radial-gradient(1px 1px at 70% 85%, rgba(255,255,255,0.3), transparent 50%),
        radial-gradient(circle at 50% 0%, rgba(95,193,255,0.08), transparent 50%);
    background-size: 800px 600px, 1200px 800px, 1000px 700px, 900px 700px, 1100px 900px, cover;
}
body.theme-drifter .product-hero {
    background: linear-gradient(180deg, var(--pt-bg) 0%, var(--pt-surface) 100%);
}
body.theme-drifter .product-hero h1 { color: var(--pt-accent); letter-spacing: 0.1em; text-shadow: 0 0 24px rgba(95,193,255,0.4); }
body.theme-drifter .section-title { color: var(--pt-accent); }
body.theme-drifter .section-title::after {
    background: var(--pt-accent);
    height: 1px;
    width: 100px;
    box-shadow: 0 0 8px var(--pt-accent);
}
body.theme-drifter .feature-card,
body.theme-drifter .ps-card,
body.theme-drifter .featured-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-rule);
    border-left: 4px solid var(--pt-accent);
    box-shadow: inset 0 1px 0 rgba(95,193,255,0.1);
}
body.theme-drifter .badge { color: var(--pt-accent-3); border-color: var(--pt-accent-3); font-family: var(--pt-display-font); font-size: 0.7rem; }
body.theme-drifter .btn-primary { background: var(--pt-accent); color: var(--pt-bg); border-color: var(--pt-accent); font-family: var(--pt-display-font); }
body.theme-drifter .btn-primary:hover { background: var(--pt-accent-2); color: var(--pt-ink); border-color: var(--pt-accent-2); }
.theme-drifter.featured-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-rule);
    border-left: 4px solid var(--pt-accent);
}
.theme-drifter.featured-card h3 { font-family: var(--pt-display-font); color: var(--pt-accent); letter-spacing: 0.05em; text-transform: lowercase; }
.theme-drifter.featured-card p, .theme-drifter.featured-card li { font-family: var(--pt-body-font); color: var(--pt-ink); }

/* ============================================================================
   THEME 10 — Trench Defense
   Vibe: WWI propaganda poster × indie devlog
   ============================================================================ */
.theme-trench {
    --pt-bg: #3e3b2e;             /* trench mud */
    --pt-surface: #4a4736;
    --pt-surface-2: #565341;
    --pt-ink: #ecdfbf;            /* comm paper */
    --pt-ink-dim: #b8ad8a;
    --pt-accent: #e2723a;         /* flare orange */
    --pt-accent-2: #c4ad7b;       /* sandbag tan */
    --pt-accent-3: #5a5d51;       /* helmet steel */
    --pt-rule: rgba(226, 114, 58, 0.4);
    --pt-display-font: 'Special Elite', 'Courier Prime', ui-monospace, monospace;
    --pt-body-font: 'Public Sans', system-ui, sans-serif;
    --pt-mono-font: 'Special Elite', ui-monospace, monospace;
}
.theme-trench h1, .theme-trench h2, .theme-trench h3 {
    font-family: var(--pt-display-font);
    color: var(--pt-ink);
    letter-spacing: 0;
}
.theme-trench p, .theme-trench li { font-family: var(--pt-body-font); color: var(--pt-ink); }
body.theme-trench {
    background: var(--pt-bg);
    background-image:
        radial-gradient(ellipse at 30% 30%, rgba(226,114,58,0.06), transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(0,0,0,0.2), transparent 50%);
}
body.theme-trench .product-hero { background: linear-gradient(180deg, var(--pt-bg) 0%, var(--pt-surface) 100%); }
body.theme-trench .product-hero h1 { color: var(--pt-accent); }
body.theme-trench .section-title { color: var(--pt-accent-2); }
body.theme-trench .section-title::after {
    background: var(--pt-accent);
    height: 2px;
    width: 80px;
}
body.theme-trench .feature-card,
body.theme-trench .ps-card,
body.theme-trench .featured-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-rule);
    border-left: 4px solid var(--pt-accent);
}
body.theme-trench .badge { color: var(--pt-accent); border-color: var(--pt-accent); font-family: var(--pt-display-font); letter-spacing: 0.1em; }
body.theme-trench .btn-primary { background: var(--pt-accent); color: var(--pt-bg); border-color: var(--pt-accent); }
body.theme-trench .btn-primary:hover { background: var(--pt-accent-2); border-color: var(--pt-accent-2); color: var(--pt-bg); }
.theme-trench.featured-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-rule);
    border-left: 4px solid var(--pt-accent);
}
.theme-trench.featured-card h3 { font-family: var(--pt-display-font); color: var(--pt-accent); }
.theme-trench.featured-card p, .theme-trench.featured-card li { font-family: var(--pt-body-font); color: var(--pt-ink); }

/* ============================================================================
   THEME 11 — D20 Craps
   Vibe: art-deco casino × tabletop dice
   ============================================================================ */
.theme-d20craps {
    --pt-bg: #0c0913;             /* deep velvet */
    --pt-surface: #131a14;        /* casino felt undertone */
    --pt-surface-2: #1a2419;
    --pt-ink: #cfd2d6;            /* chrome shaker */
    --pt-ink-dim: #969a9f;
    --pt-accent: #ffd700;         /* neon gold */
    --pt-accent-2: #c8102e;       /* ruby red */
    --pt-accent-3: #0c4a2e;       /* casino felt green */
    --pt-rule: rgba(255, 215, 0, 0.45);
    --pt-display-font: 'Limelight', 'Cinzel Decorative', Georgia, serif;
    --pt-body-font: 'Geist', system-ui, sans-serif;
    --pt-mono-font: 'JetBrains Mono', ui-monospace, monospace;
}
.theme-d20craps h1, .theme-d20craps h2, .theme-d20craps h3 {
    font-family: var(--pt-display-font);
    color: var(--pt-accent);
    letter-spacing: 0.02em;
}
.theme-d20craps p, .theme-d20craps li { font-family: var(--pt-body-font); color: var(--pt-ink); }
body.theme-d20craps {
    background: var(--pt-bg);
    background-image:
        repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg 8deg, rgba(255,215,0,0.012) 8deg 16deg),
        radial-gradient(circle at 50% 50%, rgba(12,74,46,0.25), transparent 60%);
}
body.theme-d20craps .product-hero { background: linear-gradient(180deg, var(--pt-bg) 0%, var(--pt-surface) 100%); }
body.theme-d20craps .product-hero h1 { color: var(--pt-accent); text-shadow: 0 0 24px rgba(255,215,0,0.3); }
body.theme-d20craps .section-title { color: var(--pt-accent); }
body.theme-d20craps .section-title::after {
    background: linear-gradient(90deg, var(--pt-accent), var(--pt-accent-2));
    height: 3px;
    width: 100px;
}
body.theme-d20craps .feature-card,
body.theme-d20craps .ps-card,
body.theme-d20craps .featured-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-rule);
    border-top: 3px solid var(--pt-accent);
    border-left: none;
}
body.theme-d20craps .badge { color: var(--pt-accent); border-color: var(--pt-accent); }
body.theme-d20craps .btn-primary { background: var(--pt-accent); color: var(--pt-bg); border-color: var(--pt-accent); }
body.theme-d20craps .btn-primary:hover { background: var(--pt-accent-2); color: var(--pt-ink); border-color: var(--pt-accent-2); }
.theme-d20craps.featured-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-rule);
    border-top: 3px solid var(--pt-accent);
}
.theme-d20craps.featured-card h3 { font-family: var(--pt-display-font); color: var(--pt-accent); }
.theme-d20craps.featured-card p, .theme-d20craps.featured-card li { font-family: var(--pt-body-font); color: var(--pt-ink); }

/* ============================================================================
   THEME 12 — EDGAR (EDDi sub-module)
   Vibe: industrial diagnostic panel inside EDDi
   ============================================================================ */
.theme-edgar {
    --pt-bg: #0e1726;             /* inherit EDDi navy */
    --pt-surface: #182335;
    --pt-surface-2: #1f2c42;
    --pt-ink: #f4eddc;
    --pt-ink-dim: #c4b89a;
    --pt-accent: #ffa835;         /* sodium-vapor amber */
    --pt-accent-2: #00ff84;       /* oscilloscope green */
    --pt-accent-3: #62d4dc;       /* instrument cyan */
    --pt-rule: rgba(255, 168, 53, 0.3);
    --pt-display-font: 'Cormorant Garamond', Georgia, serif;
    --pt-body-font: 'IBM Plex Sans', system-ui, sans-serif;
    --pt-mono-font: 'Major Mono Display', ui-monospace, monospace;
}
.theme-edgar h1, .theme-edgar h2, .theme-edgar h3 {
    font-family: var(--pt-display-font);
    color: var(--pt-accent);
    font-weight: 500;
}
.theme-edgar p, .theme-edgar li { font-family: var(--pt-body-font); color: var(--pt-ink); }
body.theme-edgar {
    background: var(--pt-bg);
    background-image:
        repeating-linear-gradient(0deg, transparent 0 20px, rgba(255,168,53,0.02) 20px 21px),
        radial-gradient(circle at 50% 0%, rgba(255,168,53,0.06), transparent 50%);
}
body.theme-edgar .product-hero { background: linear-gradient(180deg, var(--pt-bg), var(--pt-surface)); }
body.theme-edgar .product-hero h1 { color: var(--pt-accent); }
body.theme-edgar .section-title { color: var(--pt-accent); }
body.theme-edgar .section-title::after {
    background: repeating-linear-gradient(90deg, var(--pt-accent-2) 0 8px, transparent 8px 16px);
    height: 2px;
    width: 160px;
}
body.theme-edgar .feature-card,
body.theme-edgar .ps-card,
body.theme-edgar .featured-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-rule);
    border-left: 4px solid var(--pt-accent);
}
body.theme-edgar .badge { color: var(--pt-accent-3); border-color: var(--pt-accent-3); font-family: var(--pt-mono-font); }
body.theme-edgar .btn-primary { background: var(--pt-accent); color: var(--pt-bg); border-color: var(--pt-accent); }
body.theme-edgar .btn-primary:hover { background: var(--pt-accent-2); border-color: var(--pt-accent-2); color: var(--pt-bg); }
.theme-edgar.featured-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-rule);
    border-left: 4px solid var(--pt-accent);
}
.theme-edgar.featured-card h3 { font-family: var(--pt-display-font); color: var(--pt-accent); }
.theme-edgar.featured-card p, .theme-edgar.featured-card li { font-family: var(--pt-body-font); color: var(--pt-ink); }

/* ============================================================================
   THEME 13 — CGAP (EDDi sub-module)
   Vibe: judicial bench memo × executive briefing
   ============================================================================ */
.theme-cgap {
    --pt-bg: #0e1726;             /* inherit EDDi navy */
    --pt-surface: #1c1410;        /* mahogany undertone */
    --pt-surface-2: #2a1d17;
    --pt-ink: #fbe89a;            /* legal-pad highlight */
    --pt-ink-2: #f4eddc;
    --pt-ink-dim: #c4b89a;
    --pt-accent: #fbe89a;         /* legal-pad yellow */
    --pt-accent-2: #5e1d20;       /* court mahogany */
    --pt-accent-3: #c8a35a;       /* brass continuity with EDDi */
    --pt-rule: rgba(251, 232, 154, 0.3);
    --pt-display-font: 'Cormorant Garamond', Georgia, serif;
    --pt-body-font: 'EB Garamond', Georgia, serif;
    --pt-mono-font: 'JetBrains Mono', ui-monospace, monospace;
}
.theme-cgap h1, .theme-cgap h2, .theme-cgap h3 {
    font-family: var(--pt-display-font);
    color: var(--pt-ink);
    font-weight: 600;
    font-style: italic;
}
.theme-cgap p, .theme-cgap li { font-family: var(--pt-body-font); color: var(--pt-ink-2); }
body.theme-cgap {
    background: var(--pt-bg);
    background-image:
        linear-gradient(180deg, rgba(251,232,154,0.04), transparent 30%);
}
body.theme-cgap .product-hero { background: linear-gradient(180deg, var(--pt-bg), var(--pt-surface)); }
body.theme-cgap .product-hero h1 { color: var(--pt-ink); font-style: italic; }
body.theme-cgap .section-title { color: var(--pt-accent-3); font-style: italic; }
body.theme-cgap .section-title::after {
    background: var(--pt-accent-3);
    height: 1px;
    width: 200px;
    box-shadow: 0 4px 0 var(--pt-accent-3);
}
body.theme-cgap .feature-card,
body.theme-cgap .ps-card,
body.theme-cgap .featured-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-rule);
    border-left: 4px solid var(--pt-accent-3);
}
body.theme-cgap .badge { color: var(--pt-accent); border-color: var(--pt-accent); }
body.theme-cgap .btn-primary { background: var(--pt-accent-3); color: var(--pt-bg); border-color: var(--pt-accent-3); }
body.theme-cgap .btn-primary:hover { background: var(--pt-accent-2); color: var(--pt-ink); border-color: var(--pt-accent-2); }
.theme-cgap.featured-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-rule);
    border-left: 4px solid var(--pt-accent-3);
}
.theme-cgap.featured-card h3 { font-family: var(--pt-display-font); color: var(--pt-ink); font-style: italic; font-weight: 600; }
.theme-cgap.featured-card p, .theme-cgap.featured-card li { font-family: var(--pt-body-font); color: var(--pt-ink-2); }

/* ============================================================================
   Card hover override — keep the threat-tape stripe but tint to local accent
   so each themed card hover-feedback ties to its own brand
   ============================================================================ */
.theme-eddi.featured-card:hover,
.theme-ostraq.featured-card:hover,
.theme-athletics.featured-card:hover,
.theme-sourceiq.featured-card:hover,
.theme-iqualify.featured-card:hover,
.theme-recon.featured-card:hover,
.theme-conmgmt.featured-card:hover,
.theme-roc.featured-card:hover,
.theme-drifter.featured-card:hover,
.theme-trench.featured-card:hover,
.theme-d20craps.featured-card:hover,
.theme-edgar.featured-card:hover,
.theme-cgap.featured-card:hover {
    border-color: var(--pt-accent);
    box-shadow: 0 14px 40px rgba(0,0,0,0.45), 0 0 0 1px var(--pt-rule);
}

/* ============================================================================
   FULL CARD-INTERNAL THEMING — every element inside a themed card uses its
   theme's accent palette: status badges, JV badge, modules chips, Details
   button. Specificity beats the global aesthetics.css defaults.
   ============================================================================ */

/* All status badges + JV chip in a themed card use --pt-accent */
[class*="theme-"] .featured-badge,
[class*="theme-"] .badge {
    color: var(--pt-accent);
    border-color: var(--pt-accent);
    background: transparent;
}

/* Subproject chips (e.g., EDDi's MODULES: EDGAR + CGAP row) take --pt-accent-3 if set, else --pt-accent */
[class*="theme-"] .subproject-chip {
    color: var(--pt-accent);
    border-color: var(--pt-accent);
    background: transparent;
}
[class*="theme-"] .subproject-chip:hover {
    background: var(--pt-accent);
    color: var(--pt-bg);
}
[class*="theme-"] .subprojects-label {
    color: var(--pt-ink-dim);
}
[class*="theme-"] .subprojects {
    border-top-color: var(--pt-rule);
}

/* The Details button (.featured-link.product on the homepage cards) */
[class*="theme-"] .featured-link.product,
[class*="theme-"] .featured-link.architecture {
    color: var(--pt-accent);
    border-color: var(--pt-accent);
    background: transparent;
}
[class*="theme-"] .featured-link.product:hover,
[class*="theme-"] .featured-link.architecture:hover {
    background: var(--pt-accent);
    color: var(--pt-bg);
}

/* Featured-points list — the "›" bullet color follows theme */
[class*="theme-"] .featured-points li::before {
    color: var(--pt-accent);
}
[class*="theme-"] .featured-points li {
    color: var(--pt-ink);
}

/* Card short description text uses theme ink */
[class*="theme-"] .featured-short {
    color: var(--pt-ink);
}

/* ============================================================================
   PER-THEME OVERRIDES — handle edge cases where the generic rule above
   doesn't land the desired hierarchy (e.g., Ostraq uses gold for primary
   but magenta for secondary accent — let badges use the gold).
   ============================================================================ */

/* Ostraq — JV chip in tidewater so it pairs against the gold status */
.theme-ostraq .badge-jv,
body.theme-ostraq .badge-jv {
    color: var(--pt-accent-2);
    border-color: var(--pt-accent-2);
}

/* Athletics — keep the "In Formation" blue legible (it's a status, not the accent) */
.theme-athletics .status-formation,
body.theme-athletics .status-formation {
    color: #6ec5ff;
    border-color: #6ec5ff;
}
.theme-athletics .badge-jv,
body.theme-athletics .badge-jv {
    color: var(--pt-ink);
    border-color: var(--pt-rule);
}

/* Recon — all-mono CRT badges, slightly bigger font for VT323 legibility */
.theme-recon .featured-badge,
.theme-recon .badge,
body.theme-recon .featured-badge,
body.theme-recon .badge {
    font-family: var(--pt-display-font);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    color: var(--pt-accent-4);
    border-color: var(--pt-accent-4);
}
.theme-recon .featured-link.product,
body.theme-recon .featured-link.product {
    font-family: var(--pt-display-font);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
}

/* ConManagement — yellow on velvet works, but make the Details button
   ruby-red to match the marquee aesthetic */
.theme-conmgmt .featured-link.product,
body.theme-conmgmt .featured-link.product {
    color: var(--pt-accent);
    border-color: var(--pt-accent);
}
.theme-conmgmt .featured-link.product:hover,
body.theme-conmgmt .featured-link.product:hover {
    background: var(--pt-accent-2);
    border-color: var(--pt-accent-2);
    color: var(--pt-ink);
}

/* Drifter — Details button + badges in cyan, but In Development reads in amber */
.theme-drifter .status-dev,
.theme-drifter .status-formation,
body.theme-drifter .status-dev,
body.theme-drifter .status-formation {
    color: var(--pt-accent-3);
    border-color: var(--pt-accent-3);
}

/* D20 Craps — keep gold accent everywhere, ruby on hover */
.theme-d20craps .featured-link.product:hover,
body.theme-d20craps .featured-link.product:hover {
    background: var(--pt-accent-2);
    color: var(--pt-ink);
    border-color: var(--pt-accent-2);
}

/* CGAP — uses italic accent treatment, so make the badges italic-friendly */
.theme-cgap .featured-badge,
.theme-cgap .badge,
body.theme-cgap .featured-badge,
body.theme-cgap .badge {
    color: var(--pt-accent);
    border-color: var(--pt-accent-3);
}

/* EDGAR — its accent is amber (sodium-vapor) and accent-2 is oscilloscope-green;
   show JV / Module status in green to signal "instrument reading" */
.theme-edgar .badge-jv,
body.theme-edgar .badge-jv {
    color: var(--pt-accent-2);
    border-color: var(--pt-accent-2);
}

/* ============================================================================
   THEMED CARD-HOVER STRIPE — replace the global threat-tape yellow stripe
   on the card top with the theme's own accent so hover feedback ties to
   product identity (was already done; this re-asserts after card-internal
   styles).
   ============================================================================ */
[class*="theme-"].featured-card:hover {
    border-color: var(--pt-accent);
}
[class*="theme-"].featured-card::after {
    background-image: repeating-linear-gradient(
        -45deg,
        var(--pt-accent) 0, var(--pt-accent) 8px,
        var(--pt-bg) 8px, var(--pt-bg) 16px
    );
}

/* Reduced motion + mobile already inherited from aesthetics.css */