/* ============================================================================
   GOOGLE FONTS @import — MUST be at the top of the stylesheet.
   CSS spec requires @import rules to precede all other rules (except
   @charset / @layer). When placed lower, browsers silently ignore them
   and the display fonts fall back to system serif/sans-serif.
   ============================================================================ */

/* ---- Display fonts for product themes ---------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;700;900&family=Big+Shoulders+Stencil+Display:wght@400;700;900&family=Bungee&family=Cinzel:wght@400;600;800&family=Cinzel+Decorative:wght@400;700;900&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Cormorant+Infant:ital,wght@0,400;0,500;0,700;1,400&family=Forum&family=Italiana&family=Limelight&family=Major+Mono+Display&family=Marcellus&family=Old+Standard+TT:ital@0;1&family=Smokum&family=Special+Elite&family=UnifrakturMaguntia&family=Yeseva+One&display=swap');

/* ---- Body / pairing fonts diversified across themes -------------------- */
@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=Fraunces:ital,opsz,wght,SOFT@0,9..144,400..900,0..100;1,9..144,400..900,0..100&family=Geist:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Onest:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&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 for badge/mono text -------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* Vector Death body font (Audiowide is supplied as flattened SVG wordmark; not loaded as a webfont). */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap');

/* ============================================================================
   TITLE SIZE NORMALIZATION + 3D EXTRUSION
   ----------------------------------------------------------------------------
   Different display fonts read at different visual weights at the same
   font-size (VT323 is small, Cinzel Decorative is large, Major Mono is
   wide). These per-theme overrides keep ALL card titles at roughly the
   same perceived height so no one product looks tiny next to another.

   Every title gets the same 3D extrusion stack — three stacked 1px shadows
   (the "extrude") plus a soft drop shadow underneath. This gives the
   wordmarks dimensional presence on flat card surfaces.
   ============================================================================ */
.featured-card h3,
.featured-card .iqualify-wordmark,
.featured-card .sourceiq-wordmark,
.featured-card .ostraq-wordmark,
.featured-card .etrax-wordmark {
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.55),
        0 2px 0 rgba(0, 0, 0, 0.45),
        0 3px 0 rgba(0, 0, 0, 0.35),
        0 4px 6px rgba(0, 0, 0, 0.45),
        0 8px 14px rgba(0, 0, 0, 0.35);
}

/* Per-font visual-size calibration. Reference = 2rem visual height. */
.theme-eddi.featured-card h3              { font-size: 2rem !important; }
.theme-ostraq.featured-card h3            { font-size: 2rem !important; }
.theme-ostraq.featured-card .ostraq-wordmark { font-size: 2rem !important; }
.theme-athletics.featured-card h3         { font-size: 2rem !important; }
.theme-sourceiq.featured-card h3          { font-size: 2rem !important; }
.theme-sourceiq.featured-card .sourceiq-wordmark { font-size: 2rem !important; }
.theme-iqualify.featured-card h3          { font-size: 2rem !important; }
.theme-iqualify.featured-card .iqualify-wordmark { font-size: 2rem !important; }
.theme-recon.featured-card h3             { font-size: 2.5rem !important; line-height: 1.05; } /* VT323 is small per em — bump */
.theme-conmgmt.featured-card h3           { font-size: 2.1rem !important; }
.theme-roc.featured-card h3               { font-size: 1.9rem !important; } /* Cinzel Decorative reads large */
.theme-drifter.featured-card h3           { font-size: 1.7rem !important; line-height: 1.1; } /* Major Mono is wide */
.theme-trench.featured-card h3            { font-size: 1.85rem !important; } /* Big Shoulders Stencil 900 — heavy */
.theme-d20craps.featured-card h3          { font-size: 1.85rem !important; } /* Limelight stretches */
.theme-edgar.featured-card h3             { font-size: 2rem !important; }
.theme-cgap.featured-card h3              { font-size: 2rem !important; }

/* Uniform line-height + spacing so card heights stay regular.
   No flex here — flex turns each split-text .char span into a flex item,
   which prevents whitespace text nodes from carrying real word-wrap. */
.featured-card h3 {
    line-height: 1.1;
    min-height: 2.4rem;
    margin-bottom: 0.75rem;
}

/* ============================================================================
   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.
   ============================================================================ */

/* ============================================================================
   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: 'Hanken Grotesk', 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: 'Hanken Grotesk', system-ui, 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: 'Bricolage Grotesque', system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
    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);
    /* Generic body/display for the JV chrome. The individual wordmarks
       on each half pull their own product fonts (see .etrax-wordmark and
       .ecombine-wordmark rules) so the split reads as two distinct
       brands, not a single shared one. */
    --pt-display-font: 'Bricolage Grotesque', system-ui, sans-serif;
    --pt-body-font: 'IBM Plex Sans', system-ui, 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);
    /* Bricolage Grotesque (variable, geometric-with-personality) reads
       "modern equipment-roster / district utility ledger" — far from the
       generic Inter sans the spec used to call for. IBM Plex Sans body
       carries the same precision feel without crossing into AI-converged
       sans territory. */
    --pt-display-font: 'Bricolage Grotesque', 'Albert Sans', system-ui, sans-serif;
    --pt-body-font: 'IBM Plex Sans', system-ui, 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);
    /* Bungee = chunky 3D athletic signage; reads "combine scoreboard /
       stadium poster." Geist body keeps the data-readout clean without
       leaning on the AI-converged sans set. Deliberately different from
       eTrax so the two athletics products read as distinct sister brands
       on the JV card. */
    --pt-display-font: 'Bungee', 'Big Shoulders Display', system-ui, sans-serif;
    --pt-body-font: 'Geist', system-ui, 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;
    /* Per portfolio-design-system: IBM Plex Mono headlines read "stamped /
       telex header"; IBM Plex Serif body reads "printed intelligence
       report"; JetBrains Mono for annotations + stamps + telex labels. */
    --pt-display-font: 'IBM Plex Mono', ui-monospace, monospace;
    --pt-body-font: 'IBM Plex Serif', Georgia, 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: 'IBM Plex Mono', ui-monospace, monospace;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    color: #e5e7eb;
    text-transform: uppercase;
}
.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
   Established here as the canonical brand (project is pre-implementation;
   when it ships the app will inherit these tokens).

   Vibe: Honest interview × editorial spread (HBR / The Atlantic / Atavist).
   Light cream paper with charcoal ink and a single committed terracotta
   accent. Visually adjacent to the IQ family (Source-IQ / IQualify): the
   wordmark highlights "IQ" in the accent color.

   Becomes a bright cream island on threattape.com's dark homepage — the
   same intentional contrast Ostraq has, so cards never sit "inside" the
   parent dark brand. Distinct read: warm, editorial, honest.
   ============================================================================ */
.theme-iqualify {
    --pt-bg: #f5efe0;            /* warm cream paper */
    --pt-bg-deep: #ece4d2;
    --pt-surface: #fffaf0;       /* near-white panel */
    --pt-surface-2: #f8f0dc;
    --pt-ink: #1c1917;           /* charcoal (stone-900) */
    --pt-ink-dim: #57534e;       /* stone-600 */
    --pt-ink-muted: #78716c;     /* stone-500 */
    --pt-accent: #9a3412;        /* deep terracotta (orange-800) */
    --pt-accent-2: #b45309;      /* burnt amber (amber-700) — secondary */
    --pt-accent-3: #1c1917;      /* charcoal for secondary CTAs */
    --pt-rule: rgba(154, 52, 18, 0.22);
    --pt-display-font: 'Fraunces', 'Newsreader', Georgia, serif;
    /* Onest body per style guide — replaces Times New Roman fallback */
    /* Body deliberately set to the stereotypical resume document fonts —
       Times New Roman first (classic resume), Aptos second (modern resume,
       Microsoft Office default since 2024), then system serif/sans fallbacks.
       Reinforces IQualify's "honest resume" positioning. */
    --pt-body-font: 'Onest', system-ui, sans-serif;
    --pt-mono-font: 'JetBrains Mono', ui-monospace, monospace;
}

/* IQualify wordmark — accent "IQ" + ink "ualify". Visual rhyme with SourceIQ.
   Fraunces with variable opsz pushed wide and SOFT toggled for editorial warmth. */
.iqualify-wordmark {
    display: inline-flex;
    align-items: baseline;
    font-family: 'Fraunces', 'Newsreader', Georgia, serif;
    font-weight: 700;
    font-variation-settings: "opsz" 144, "SOFT" 50;
    letter-spacing: -0.025em;
    line-height: 1;
    color: #1c1917;
}
.iqualify-wordmark .iq-accent {
    color: #9a3412;
    font-weight: 800;
}
.iqualify-wordmark--xl { font-size: 5rem; }
.iqualify-wordmark--lg { font-size: 3.25rem; }
.iqualify-wordmark--md { font-size: 1.9rem; }

.theme-iqualify h1, .theme-iqualify h2, .theme-iqualify h3, .theme-iqualify h4 {
    font-family: var(--pt-display-font);
    color: var(--pt-ink);
    font-weight: 600;
    font-variation-settings: "opsz" 144, "SOFT" 50;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.theme-iqualify p, .theme-iqualify li, .theme-iqualify blockquote {
    font-family: var(--pt-body-font);
    color: var(--pt-ink-dim);
    font-weight: 400;
    line-height: 1.65;
}

/* ============================================================================
   Homepage card — bright cream slice. Distinct island on dark page.
   ============================================================================ */
.theme-iqualify.featured-card {
    background: var(--pt-bg);
    background-image:
        radial-gradient(circle at 100% 0%, rgba(154, 52, 18, 0.06), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(180, 83, 9, 0.04), transparent 55%);
    border: 1px solid var(--pt-rule);
    border-top: 3px solid var(--pt-accent);
    color: var(--pt-ink);
}
.theme-iqualify.featured-card h3 {
    font-family: var(--pt-display-font);
    color: var(--pt-ink);
    font-weight: 700;
    font-variation-settings: "opsz" 144, "SOFT" 50;
    font-size: 2rem;
    letter-spacing: -0.025em;
}
.theme-iqualify.featured-card .featured-short {
    font-family: var(--pt-body-font);
    color: var(--pt-ink-dim);
    font-size: 1rem;
    line-height: 1.6;
}
.theme-iqualify.featured-card .featured-points li {
    font-family: var(--pt-body-font);
    color: var(--pt-ink-dim);
    font-size: 0.95rem;
}
.theme-iqualify.featured-card .featured-points li::before { color: var(--pt-accent); }

.theme-iqualify.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-iqualify.featured-card .featured-link.product:first-of-type {
    background: var(--pt-accent);
    color: var(--pt-surface);
    border-color: var(--pt-accent);
}
.theme-iqualify.featured-card .featured-link.product:first-of-type:hover {
    background: #7c2d12;
    border-color: #7c2d12;
}
.theme-iqualify.featured-card .featured-link.product:last-of-type,
.theme-iqualify.featured-card .featured-link.product:only-of-type {
    background: transparent;
    color: var(--pt-ink);
    border-color: var(--pt-ink-muted);
}
.theme-iqualify.featured-card .featured-link.product:only-of-type {
    background: var(--pt-accent);
    color: var(--pt-surface);
    border-color: var(--pt-accent);
}
.theme-iqualify.featured-card .featured-link.product:last-of-type:hover {
    background: var(--pt-ink);
    color: var(--pt-surface);
    border-color: var(--pt-ink);
}

.theme-iqualify.featured-card .featured-badge,
.theme-iqualify.featured-card .badge {
    background: rgba(28, 25, 23, 0.06);
    color: var(--pt-ink);
    border-color: rgba(28, 25, 23, 0.18);
    font-family: var(--pt-body-font);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    font-size: 0.68rem;
}
.theme-iqualify.featured-card .status-dev {
    color: var(--pt-accent);
    border-color: var(--pt-accent);
    background: rgba(154, 52, 18, 0.08);
}

/* ============================================================================
   Product page — same cream world, larger editorial scale
   ============================================================================ */
body.theme-iqualify {
    background: var(--pt-bg);
    background-image:
        radial-gradient(circle at 100% 0%, rgba(154, 52, 18, 0.08), transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(180, 83, 9, 0.05), 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);
    --secondary-color: var(--pt-accent-2);
    --border-color: var(--pt-rule);
    --card-bg: var(--pt-surface);
    --dark-bg: var(--pt-bg);
    --darker-bg: var(--pt-bg-deep);
    --darkest-bg: var(--pt-bg-deep);
    --bg-color: var(--pt-bg);
    --success-color: #166534;   /* deep forest, reads on cream */
    --warning-color: #b45309;   /* burnt amber, reads on cream */
}
body.theme-iqualify h1, body.theme-iqualify h2, body.theme-iqualify h3, body.theme-iqualify h4 {
    font-family: var(--pt-display-font);
    font-weight: 600;
    font-variation-settings: "opsz" 144, "SOFT" 50;
    color: var(--pt-ink);
    letter-spacing: -0.025em;
}
body.theme-iqualify p, body.theme-iqualify li, body.theme-iqualify blockquote {
    font-family: var(--pt-body-font);
    color: var(--pt-ink-dim);
}
body.theme-iqualify .product-hero { background: linear-gradient(180deg, var(--pt-bg) 0%, var(--pt-bg-deep) 100%); }
body.theme-iqualify .product-hero h1 { color: var(--pt-ink); }
body.theme-iqualify .product-tagline { color: var(--pt-accent); font-weight: 600; font-style: italic; }
body.theme-iqualify .section-title { color: var(--pt-ink); }
body.theme-iqualify .section-title::after { background: var(--pt-accent); height: 3px; width: 80px; }
body.theme-iqualify .feature-card,
body.theme-iqualify .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-iqualify .feature-card h3,
body.theme-iqualify .ps-card h3 { color: var(--pt-ink); }
body.theme-iqualify .feature-card li::before,
body.theme-iqualify .ps-card li::before { color: var(--pt-accent); }
body.theme-iqualify .badge {
    color: var(--pt-ink);
    border-color: var(--pt-rule);
    background: rgba(28, 25, 23, 0.04);
    font-family: var(--pt-body-font);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
body.theme-iqualify .badge-tech { color: var(--pt-accent); border-color: var(--pt-accent); background: rgba(154, 52, 18, 0.08); }
body.theme-iqualify .btn-primary {
    background: var(--pt-accent);
    color: var(--pt-surface);
    border-color: var(--pt-accent);
    font-family: var(--pt-body-font);
    font-weight: 600;
    text-transform: none;
}
body.theme-iqualify .btn-primary:hover { background: #7c2d12; border-color: #7c2d12; }
body.theme-iqualify .btn-secondary {
    background: transparent;
    color: var(--pt-ink);
    border-color: var(--pt-ink-muted);
    font-family: var(--pt-body-font);
    font-weight: 600;
    text-transform: none;
}
body.theme-iqualify .btn-secondary:hover { background: var(--pt-ink); color: var(--pt-surface); border-color: var(--pt-ink); }

/* Screenshot placeholder panel — replace the legacy phosphor-green gradient
   with a cream/terracotta-tinted treatment that fits the editorial theme. */
body.theme-iqualify .screenshot-placeholder {
    border: 2px dashed var(--pt-accent);
    background: linear-gradient(135deg, rgba(154, 52, 18, 0.06), rgba(180, 83, 9, 0.03));
    color: var(--pt-ink-muted);
}
body.theme-iqualify .screenshot-placeholder .label { color: var(--pt-accent); }

/* ============================================================================
   THEME 06 — ThreatTape Recon
   Vibe: pure operator's console — harder CRT than the main site
   ============================================================================ */
.theme-recon {
    --pt-bg: #020402;
    --pt-surface: #102018;        /* lifted from #07120a — readable on #0d1117 page bg */
    --pt-surface-2: #16291f;
    --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.5);
    --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: none;
    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: none; 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: Mardi Gras carnival — royal purple velvet, second-line emerald, and
   king-cake gold. Wordmark uses Forum (Albertus-adjacent Roman caps) for the
   chiseled brass-engraving feel of a French Quarter program cover.
   ============================================================================ */
.theme-conmgmt {
    --pt-bg: #2d0e3d;             /* royal purple velvet */
    --pt-surface: #3d1854;
    --pt-surface-2: #4d2168;
    --pt-ink: #fff6d8;            /* program cream */
    --pt-ink-dim: #e7d9a8;
    --pt-accent: #ffd700;         /* king-cake gold */
    --pt-accent-2: #1f9c3d;       /* second-line emerald */
    --pt-accent-3: #6a1b9a;       /* deep mardi gras purple */
    --pt-accent-4: #c8302e;       /* king-cake red (sparingly) */
    --pt-rule: rgba(255, 215, 0, 0.45);
    /* Forum = the chiseled-Roman Albertus stand-in per portfolio-design-system.
       Fallbacks Cinzel → Marcellus → Georgia keep the carved-stone feel if
       Forum doesn't load. */
    --pt-display-font: 'Forum', 'Cinzel', 'Marcellus', Georgia, 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: none;
    letter-spacing: 0.005em;
    font-weight: 400;
}
.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(255,215,0,0.10), transparent 60%),
        radial-gradient(circle at 100% 100%, rgba(31,156,61,0.08), transparent 55%);
    --text-light: var(--pt-ink);
    --text-secondary: var(--pt-ink-dim);
    --text-muted: var(--pt-ink-dim);
    --primary-color: var(--pt-accent);
    --secondary-color: var(--pt-accent-2);
    --border-color: var(--pt-rule);
    --card-bg: var(--pt-surface);
    --darker-bg: #220a2e;
    --dark-bg: var(--pt-bg);
    --darkest-bg: #180720;
    --bg-color: var(--pt-bg);
    --success-color: var(--pt-accent-2);
    --warning-color: var(--pt-accent);
}
body.theme-conmgmt .product-hero { background: linear-gradient(180deg, #2d0e3d, #3d1854); }
body.theme-conmgmt .product-hero h1 { color: var(--pt-accent); text-shadow: 0 2px 0 rgba(0,0,0,0.4); }
body.theme-conmgmt .section-title { color: var(--pt-accent); }
/* Tricolor underline rule — purple / green / gold in carnival ribbon order */
body.theme-conmgmt .section-title::after {
    background: linear-gradient(90deg,
        var(--pt-accent-3) 0%,
        var(--pt-accent-3) 33%,
        var(--pt-accent-2) 33%,
        var(--pt-accent-2) 66%,
        var(--pt-accent) 66%,
        var(--pt-accent) 100%);
    height: 4px;
    width: 180px;
    border-radius: 2px;
}
body.theme-conmgmt .feature-card,
body.theme-conmgmt .ps-card,
body.theme-conmgmt .featured-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-rule);
    border-left: 4px solid var(--pt-accent-2);
    border-radius: 4px;
}
body.theme-conmgmt .feature-card h3,
body.theme-conmgmt .ps-card h3 { color: var(--pt-accent); }
body.theme-conmgmt .feature-icon { color: var(--pt-accent-2); }
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:
        linear-gradient(180deg, rgba(31, 156, 61, 0.08), transparent 35%),
        var(--pt-surface);
    border: 1px solid var(--pt-rule);
    border-left: 4px solid var(--pt-accent-2);  /* emerald spine */
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
/* Mardi Gras tricolor ribbon — purple / green / gold across the top edge.
   Ordered emerald-gold-purple to evoke a parade flag rather than a stripe. */
.theme-conmgmt.featured-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg,
        var(--pt-accent-3) 0%,
        var(--pt-accent-3) 33%,
        var(--pt-accent-2) 33%,
        var(--pt-accent-2) 66%,
        var(--pt-accent) 66%,
        var(--pt-accent) 100%);
    z-index: 5;
    pointer-events: none;
}
.theme-conmgmt.featured-card::after { display: none; }
.theme-conmgmt.featured-card h3 {
    font-family: var(--pt-display-font);
    color: var(--pt-accent);
    text-transform: none;
    letter-spacing: 0.005em;
    font-weight: 400;
}
.theme-conmgmt.featured-card p, .theme-conmgmt.featured-card li { font-family: var(--pt-body-font); color: var(--pt-ink); }
.theme-conmgmt.featured-card .featured-badge,
.theme-conmgmt.featured-card .badge {
    font-family: var(--pt-display-font);
    color: var(--pt-accent-2);
    border-color: var(--pt-accent-2);
    background: rgba(31, 156, 61, 0.08);
    letter-spacing: 0.1em;
}
.theme-conmgmt.featured-card .featured-link.product {
    font-family: var(--pt-display-font);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: var(--pt-accent);
    color: var(--pt-bg);
    border-color: var(--pt-accent);
}
.theme-conmgmt.featured-card .featured-link.product:hover {
    background: var(--pt-accent-2);
    color: var(--pt-ink);
    border-color: var(--pt-accent-2);
}
.theme-conmgmt.featured-card .featured-points li::before { color: var(--pt-accent-2); }

/* ============================================================================
   THEME 08 — Roc
   Vibe: dark gothic — violet velvet, blood red, obsidian black. The
   wordmark is set in Cinzel Decorative (Victorian gothic capitals); body
   copy in EB Garamond italic for an Edgar Allan Poe broadside feel.
   ============================================================================ */
.theme-roc {
    --pt-bg: #0d0612;             /* obsidian + violet undertone */
    --pt-surface: #2a1240;        /* lifted from #1a0d22, more vibrant violet */
    --pt-surface-2: #3a1858;
    --pt-ink: #efe5d8;            /* bone parchment */
    --pt-ink-dim: #c9b8c8;
    --pt-accent: #a855f7;         /* vibrant purple (lifted from #7c3aed) */
    --pt-accent-2: #c91432;       /* blood red, slightly punchier */
    --pt-accent-3: #050306;       /* true obsidian */
    --pt-accent-4: #d8b4fe;       /* moonlight pale violet (brighter) */
    --pt-rule: rgba(168, 85, 247, 0.55);
    --pt-display-font: 'Cinzel Decorative', 'UnifrakturMaguntia', 'Cormorant Garamond', 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-accent-4);
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 0 rgba(0,0,0,0.6), 0 0 22px rgba(124, 58, 237, 0.3);
}
.theme-roc p, .theme-roc li {
    font-family: var(--pt-body-font);
    color: var(--pt-ink);
    font-style: italic;
}
body.theme-roc {
    background: var(--pt-bg);
    background-image:
        radial-gradient(circle at 25% 15%, rgba(124, 58, 237, 0.18), transparent 55%),
        radial-gradient(circle at 80% 85%, rgba(160, 24, 40, 0.16), transparent 55%),
        radial-gradient(circle at 50% 50%, rgba(0,0,0,0.55), transparent 75%);
    --text-light: var(--pt-ink);
    --text-secondary: var(--pt-ink-dim);
    --text-muted: var(--pt-ink-dim);
    --primary-color: var(--pt-accent);
    --secondary-color: var(--pt-accent-2);
    --border-color: var(--pt-rule);
    --card-bg: var(--pt-surface);
    --darker-bg: #060309;
    --dark-bg: var(--pt-bg);
    --darkest-bg: #020104;
    --bg-color: var(--pt-bg);
    --success-color: var(--pt-accent);
    --warning-color: var(--pt-accent-2);
}
body.theme-roc .product-hero { background: linear-gradient(180deg, var(--pt-bg), var(--pt-surface)); }
body.theme-roc .product-hero h1 { color: var(--pt-accent-4); }
body.theme-roc .section-title { color: var(--pt-accent-4); }
body.theme-roc .section-title::after {
    background: linear-gradient(90deg, transparent, var(--pt-accent-2), var(--pt-accent), transparent);
    height: 1px;
    width: 200px;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.4);
}
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: 2px;
    border-left: 4px solid var(--pt-accent-2);
}
body.theme-roc .badge { color: var(--pt-accent-4); border-color: var(--pt-accent); font-family: var(--pt-display-font); letter-spacing: 0.12em; }
body.theme-roc .btn-primary { background: var(--pt-accent-2); color: var(--pt-ink); border-color: var(--pt-accent-2); font-family: var(--pt-display-font); letter-spacing: 0.08em; }
body.theme-roc .btn-primary:hover { background: var(--pt-accent); color: var(--pt-ink); border-color: var(--pt-accent); }
.theme-roc.featured-card {
    background:
        linear-gradient(180deg, rgba(124,58,237,0.10), transparent 40%),
        var(--pt-surface);
    border: 1px solid var(--pt-rule);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
/* Gothic blood-trim ribbon — thin blood-red top edge with violet glow */
.theme-roc.featured-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--pt-accent-3), var(--pt-accent-2) 45%, var(--pt-accent) 55%, var(--pt-accent-3));
    box-shadow: 0 0 12px rgba(160, 24, 40, 0.6);
    z-index: 5;
    pointer-events: none;
}
.theme-roc.featured-card::after { display: none; }
.theme-roc.featured-card h3 {
    font-family: var(--pt-display-font);
    color: var(--pt-accent-4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(0,0,0,0.6), 0 0 18px rgba(124, 58, 237, 0.35);
}
.theme-roc.featured-card p, .theme-roc.featured-card li { font-family: var(--pt-body-font); font-style: italic; color: var(--pt-ink); }
.theme-roc.featured-card .featured-badge,
.theme-roc.featured-card .badge {
    color: var(--pt-accent-4);
    border-color: var(--pt-accent);
    background: rgba(124, 58, 237, 0.10);
    font-family: var(--pt-display-font);
    letter-spacing: 0.12em;
}
.theme-roc.featured-card .featured-link.product {
    font-family: var(--pt-display-font);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: var(--pt-accent-2);
    color: var(--pt-ink);
    border-color: var(--pt-accent-2);
}
.theme-roc.featured-card .featured-link.product:hover {
    background: var(--pt-accent);
    border-color: var(--pt-accent);
}
.theme-roc.featured-card .featured-points li::before { color: var(--pt-accent-2); }

/* ============================================================================
   THEME 09 — Drifter: Edge of the Black
   Vibe: ship's HUD × frontier saloon
   ============================================================================ */
.theme-drifter {
    --pt-bg: #050810;
    --pt-surface: #131e36;        /* lifted from #0a0f1a — readable on dark page */
    --pt-surface-2: #1c2845;
    --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.55);
    --pt-display-font: 'Major Mono Display', ui-monospace, monospace;
    /* Space Mono body — keeps the whole card reading as ship's-console / HUD
       printout. Sora was technically correct sans-serif but read too "modern
       app" against Major Mono's frontier-monitor display. */
    --pt-body-font: 'Space Mono', ui-monospace, monospace;
    --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;
    /* Major Mono Display ships at 400 only; stroke + glow bulks it up while
       keeping the HUD typeface intact. Per portfolio-design-system. */
    -webkit-text-stroke: 1.25px currentColor;
    text-stroke: 1.25px currentColor;
    paint-order: stroke fill;
    text-shadow: 0 0 18px rgba(95, 193, 255, 0.45);
}
.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;
    -webkit-text-stroke: 1.5px currentColor;
    paint-order: stroke fill;
    text-shadow: 0 0 28px rgba(95,193,255,0.55);
}
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;
    -webkit-text-stroke: 1px currentColor;
    paint-order: stroke fill;
    text-shadow: 0 0 14px rgba(95, 193, 255, 0.45);
}
.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 Army field kit — olive drab + khaki canvas + helmet steel, with
   stencil display type (Big Shoulders Stencil Display) as the wordmark and
   Special Elite typewriter for notes / orders.
   ============================================================================ */
.theme-trench {
    --pt-bg: #2c3115;             /* deep olive drab */
    --pt-surface: #3d4520;        /* lighter olive */
    --pt-surface-2: #4b552a;
    --pt-ink: #ede1c2;            /* canvas / field paper */
    --pt-ink-dim: #b5a674;
    --pt-accent: #b8a378;         /* khaki */
    --pt-accent-2: #6d7a3a;       /* olive secondary */
    --pt-accent-3: #3a3a32;       /* helmet steel */
    --pt-accent-4: #e2723a;       /* flare orange (sparingly) */
    --pt-rule: rgba(184, 163, 120, 0.45);
    --pt-display-font: 'Big Shoulders Stencil Display', 'Stardos Stencil', 'Special Elite', ui-monospace, monospace;
    /* Special Elite typewriter as body — matches the "field-orders / dispatch"
       vibe the stencil display promises. Reads like a WW I trench note. */
    --pt-body-font: 'Special Elite', 'Courier Prime', 'Courier New', ui-monospace, monospace;
    --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);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.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 50% 0%, rgba(184, 163, 120, 0.08), transparent 55%),
        radial-gradient(ellipse at 80% 80%, rgba(0,0,0,0.25), transparent 60%);
    --text-light: var(--pt-ink);
    --text-secondary: var(--pt-ink-dim);
    --text-muted: var(--pt-ink-dim);
    --primary-color: var(--pt-accent);
    --secondary-color: var(--pt-accent-2);
    --border-color: var(--pt-rule);
    --card-bg: var(--pt-surface);
    --darker-bg: #20240e;
    --dark-bg: var(--pt-bg);
    --darkest-bg: #16190a;
    --bg-color: var(--pt-bg);
    --success-color: var(--pt-accent-2);
    --warning-color: var(--pt-accent-4);
}
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-ink); font-weight: 900; }
body.theme-trench .section-title { color: var(--pt-accent); font-weight: 900; }
body.theme-trench .section-title::after {
    /* Stenciled khaki rule — three-tick segmented like crate markings. */
    background: repeating-linear-gradient(90deg,
        var(--pt-accent) 0 24px,
        transparent 24px 30px);
    height: 4px;
    width: 120px;
}
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-2);
}
body.theme-trench .badge { color: var(--pt-bg); background: var(--pt-accent); border-color: var(--pt-accent); font-family: var(--pt-display-font); letter-spacing: 0.12em; font-weight: 900; }
body.theme-trench .btn-primary { background: var(--pt-accent-2); color: var(--pt-ink); border-color: var(--pt-accent-2); font-family: var(--pt-display-font); letter-spacing: 0.08em; }
body.theme-trench .btn-primary:hover { background: var(--pt-accent); color: var(--pt-bg); border-color: var(--pt-accent); }
.theme-trench.featured-card {
    background:
        linear-gradient(180deg, rgba(0,0,0,0.18) 0 6px, transparent 6px),
        var(--pt-surface);
    border: 1px solid var(--pt-rule);
    border-left: 4px solid var(--pt-accent-2);
    position: relative;
    overflow: hidden;
}
/* Stencil crate-marking rule across the top — khaki blocks with negative gaps,
   echoes the "CRATE 04 / OD-GREEN" stencil look. */
.theme-trench.featured-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: repeating-linear-gradient(90deg,
        var(--pt-accent) 0 28px,
        var(--pt-accent-3) 28px 34px);
    z-index: 5;
    pointer-events: none;
}
.theme-trench.featured-card::after { display: none; }
.theme-trench.featured-card h3 {
    font-family: var(--pt-display-font);
    color: var(--pt-ink);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 900;
}
.theme-trench.featured-card p, .theme-trench.featured-card li { font-family: var(--pt-body-font); color: var(--pt-ink); }
.theme-trench.featured-card .featured-badge,
.theme-trench.featured-card .badge {
    background: var(--pt-accent);
    color: var(--pt-bg);
    border-color: var(--pt-accent);
    font-family: var(--pt-display-font);
    letter-spacing: 0.12em;
    font-weight: 900;
}
.theme-trench.featured-card .featured-link.product {
    font-family: var(--pt-display-font);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: var(--pt-accent-2);
    color: var(--pt-ink);
    border-color: var(--pt-accent-2);
    font-weight: 900;
}
.theme-trench.featured-card .featured-link.product:hover {
    background: var(--pt-accent);
    color: var(--pt-bg);
    border-color: var(--pt-accent);
}
.theme-trench.featured-card .featured-points li::before { color: var(--pt-accent); }

/* ============================================================================
   THEME 11 — D20 Craps
   Vibe: art-deco casino × tabletop dice
   ============================================================================ */
.theme-d20craps {
    --pt-bg: #0c0913;             /* deep velvet */
    --pt-surface: #1f2a1c;        /* lifted felt-green undertone, readable on dark page */
    --pt-surface-2: #29371f;
    --pt-ink: #f2e9c6;            /* warm chrome/cream — better contrast on green felt */
    --pt-ink-dim: #c2b58a;
    --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.55);
    --pt-display-font: 'Limelight', 'Cinzel Decorative', Georgia, serif;
    /* Cormorant Infant — body-friendly cut of the Cormorant family. Italic
       reads "casino menu / baccarat program" against Limelight's marquee.
       Distinct from EDD-i's Cormorant Garamond by being the Infant variant. */
    --pt-body-font: 'Cormorant Infant', 'Cormorant Garamond', Georgia, 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;
    /* Limelight is single-weight; stroke bulks it for the casino-marquee feel. */
    -webkit-text-stroke: 1.25px currentColor;
    text-stroke: 1.25px currentColor;
    paint-order: stroke fill;
}
.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);
    -webkit-text-stroke: 1.75px currentColor;
    paint-order: stroke fill;
    text-shadow: 0 0 32px rgba(255,215,0,0.45);
}
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);
    -webkit-text-stroke: 1px currentColor;
    paint-order: stroke fill;
    text-shadow: 0 0 16px rgba(255, 215, 0, 0.35);
}
.theme-d20craps.featured-card p, .theme-d20craps.featured-card li { font-family: var(--pt-body-font); font-style: italic; color: var(--pt-ink); font-size: 1.05rem; line-height: 1.5; }

/* ============================================================================
   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 */

/* ============================================================================
   CAPTAIN'S BOARD — wanted-poster mosaic replacing the AI-grid look
   ----------------------------------------------------------------------------
   Kevin 2026-05-13: "the card format (3 per row, etc) looks VERY 'My AI
   generated this'. Let's come up with a better method of presentation,
   using animations and visual tricks. We're looking to advertise and
   dazzle."

   The .captains-board class is layered onto the existing .products-grid
   so the existing markup keeps working. Each card is re-skinned as a
   wanted poster pinned to a corkboard wall:

   - Corkboard texture (layered gradients + threat-tape watermark) as bg
   - Per-card rotation -2.5° to +2.1° (non-uniform via 8n+N nth-child)
   - Push-pin SVG anchor at the top center, color rotated per card
   - Non-uniform fade-in stagger (delays calibrated by card position,
     NOT a uniform 80ms-step — that's the "AI-generated" signal we're
     escaping)
   - Hover: card lifts off the board (z-translate + scale + rotate-to-0)

   All effects respect `prefers-reduced-motion: reduce`.
   ============================================================================ */

.captains-board {
    /* The corkboard wall — light parchment-tan corkboard. Original was
       espresso-brown, which left dark-themed cards (Drifter, D20Craps,
       Trench Defense) reading as dark-on-dark. Lightening the cork to
       a warm tan/khaki gives every card meaningful contrast while still
       reading as authentic corkboard material.

       Single-column layout (2026-05-23): one card per row, centered with
       a max-width so each poster gets its full read. Overrides the
       multi-column .products-grid template the JV section still uses. */
    grid-template-columns: minmax(0, 720px) !important;
    justify-content: center;
    row-gap: 2.5rem;
    position: relative;
    padding: 4.5rem 1.5rem 5rem;
    margin-top: 2rem;
    border-radius: 8px;
    background:
        /* subtle dark spots — flecks of cork material */
        radial-gradient(ellipse 200px 80px at 18% 22%, rgba(70, 45, 20, 0.18), transparent 70%),
        radial-gradient(ellipse 240px 100px at 67% 64%, rgba(70, 45, 20, 0.22), transparent 70%),
        radial-gradient(ellipse 180px 70px at 84% 18%, rgba(70, 45, 20, 0.14), transparent 70%),
        radial-gradient(ellipse 220px 90px at 33% 78%, rgba(70, 45, 20, 0.16), transparent 70%),
        radial-gradient(ellipse 160px 60px at 92% 88%, rgba(70, 45, 20, 0.10), transparent 70%),
        /* fine cork-grain noise — darker spots on light material */
        radial-gradient(circle at 12% 14%, rgba(70, 45, 20, 0.20) 1px, transparent 1px),
        radial-gradient(circle at 28% 67%, rgba(70, 45, 20, 0.15) 1px, transparent 1px),
        radial-gradient(circle at 73% 31%, rgba(70, 45, 20, 0.18) 1px, transparent 1px),
        /* faint threat-tape watermark — parent brand thread, darker on lighter cork */
        repeating-linear-gradient(45deg,
            transparent 0 70px,
            rgba(70, 45, 20, 0.05) 70px 110px),
        /* base PARCHMENT TAN cork tones — light warm khaki */
        linear-gradient(135deg, #c6a771 0%, #d8b888 50%, #c6a771 100%);
    background-size:
        100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
        90px 90px, 110px 110px, 130px 130px,
        100% 100%, 100% 100%;
    box-shadow:
        inset 0 3px 12px rgba(70, 45, 20, 0.25),
        inset 0 -3px 12px rgba(70, 45, 20, 0.20),
        0 0 60px rgba(0, 0, 0, 0.55);
    border: 1px solid #7a5a30;
}

/* Each card becomes a poster pinned to the cork */
.captains-board .featured-card {
    position: relative;
    transform-origin: 50% 0%;
    transition:
        transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.42s ease,
        z-index 0s 0.42s;
    will-change: transform;
    margin-top: 0.5rem;
    box-shadow:
        0 12px 22px rgba(0, 0, 0, 0.45),
        0 4px 8px rgba(0, 0, 0, 0.35);
}

/* Non-uniform rotation — 8 distinct angles cycled by nth-child(8n+N).
   The variation reads as "human pinned these up at slightly different
   angles," not "JS gave each a random rotation" (which always reads
   off because the angles distribute too evenly). */
.captains-board .featured-card:nth-child(8n+1) { transform: rotate(-2.2deg); }
.captains-board .featured-card:nth-child(8n+2) { transform: rotate(1.4deg);  }
.captains-board .featured-card:nth-child(8n+3) { transform: rotate(-0.9deg); }
.captains-board .featured-card:nth-child(8n+4) { transform: rotate(2.1deg);  }
.captains-board .featured-card:nth-child(8n+5) { transform: rotate(-1.7deg); }
.captains-board .featured-card:nth-child(8n+6) { transform: rotate(0.8deg);  }
.captains-board .featured-card:nth-child(8n+7) { transform: rotate(-2.5deg); }
.captains-board .featured-card:nth-child(8n+8) { transform: rotate(1.1deg);  }

/* Hover: peel off the board. Restore to 0° rotation + lift + scale. */
.captains-board .featured-card:hover {
    transform: rotate(0deg) translateY(-10px) scale(1.04) !important;
    z-index: 12;
    box-shadow:
        0 30px 50px rgba(0, 0, 0, 0.65),
        0 12px 18px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(250, 198, 56, 0.25);
    transition:
        transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2),
        box-shadow 0.32s ease;
}

/* Push-pin SVG anchor at top center of each card.
   Four pin colors rotate via nth-child for natural variation — the
   pins read as a real assortment, not a single sterile pattern. */
.captains-board .featured-card::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 26px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 15;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55));
    pointer-events: none;
}

/* Red pin */
.captains-board .featured-card:nth-child(4n+1)::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='7' fill='%23d5414e'/%3E%3Cellipse cx='9.5' cy='7' rx='2.5' ry='1.8' fill='%23ff9aa1' opacity='0.65'/%3E%3Ccircle cx='12' cy='9' r='7' fill='none' stroke='%237a1820' stroke-width='0.8'/%3E%3Cpath d='M11.2 16 L12 23 L12.8 16 Z' fill='%23404040'/%3E%3C/svg%3E");
}
/* Brass pin */
.captains-board .featured-card:nth-child(4n+2)::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='7' fill='%23b5895a'/%3E%3Cellipse cx='9.5' cy='7' rx='2.5' ry='1.8' fill='%23e9c89a' opacity='0.65'/%3E%3Ccircle cx='12' cy='9' r='7' fill='none' stroke='%235a3f24' stroke-width='0.8'/%3E%3Cpath d='M11.2 16 L12 23 L12.8 16 Z' fill='%23404040'/%3E%3C/svg%3E");
}
/* Yellow caution pin (parent-brand thread) */
.captains-board .featured-card:nth-child(4n+3)::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='7' fill='%23fac638'/%3E%3Cellipse cx='9.5' cy='7' rx='2.5' ry='1.8' fill='%23fff3ad' opacity='0.65'/%3E%3Ccircle cx='12' cy='9' r='7' fill='none' stroke='%237a5810' stroke-width='0.8'/%3E%3Cpath d='M11.2 16 L12 23 L12.8 16 Z' fill='%23404040'/%3E%3C/svg%3E");
}
/* Ivory bone pin */
.captains-board .featured-card:nth-child(4n+4)::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='7' fill='%23f2e9d8'/%3E%3Cellipse cx='9.5' cy='7' rx='2.5' ry='1.8' fill='%23ffffff' opacity='0.65'/%3E%3Ccircle cx='12' cy='9' r='7' fill='none' stroke='%238a7a5a' stroke-width='0.8'/%3E%3Cpath d='M11.2 16 L12 23 L12.8 16 Z' fill='%23404040'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------------------
   NON-UNIFORM FADE-IN STAGGER
   ----------------------------------------------------------------------------
   Override the global .products-grid stagger from aesthetics.css with a
   deliberately non-arithmetic sequence — each card pins to the board at
   its own irregular delay so the eye doesn't catch a "wave."
   ---------------------------------------------------------------------------- */
@keyframes board-pin {
    0%   { opacity: 0; transform: rotate(0deg) translateY(-30px) scale(0.92); }
    65%  { opacity: 1; }
    /* Final state inherits per-card rotation from the static :nth-child rules */
    100% { opacity: 1; }
}

.captains-board .featured-card {
    animation: board-pin 0.7s cubic-bezier(0.18, 0.7, 0.25, 1.05) backwards;
}

/* Irregular per-card delays — these are calibrated NOT to be linear. */
.captains-board .featured-card:nth-child(1)  { animation-delay: 0.08s; }
.captains-board .featured-card:nth-child(2)  { animation-delay: 0.42s; }
.captains-board .featured-card:nth-child(3)  { animation-delay: 0.19s; }
.captains-board .featured-card:nth-child(4)  { animation-delay: 0.61s; }
.captains-board .featured-card:nth-child(5)  { animation-delay: 0.27s; }
.captains-board .featured-card:nth-child(6)  { animation-delay: 0.78s; }
.captains-board .featured-card:nth-child(7)  { animation-delay: 0.36s; }
.captains-board .featured-card:nth-child(8)  { animation-delay: 0.93s; }
.captains-board .featured-card:nth-child(9)  { animation-delay: 0.55s; }
.captains-board .featured-card:nth-child(10) { animation-delay: 1.08s; }
.captains-board .featured-card:nth-child(11) { animation-delay: 0.71s; }
.captains-board .featured-card:nth-child(12) { animation-delay: 1.22s; }

/* Mobile: keep the corkboard aesthetic but drop rotation + use single
   column so cards don't overlap. */
@media (max-width: 768px) {
    .captains-board {
        padding: 2rem 0.75rem 2.5rem;
    }
    .captains-board .featured-card,
    .captains-board .featured-card:nth-child(8n+1),
    .captains-board .featured-card:nth-child(8n+2),
    .captains-board .featured-card:nth-child(8n+3),
    .captains-board .featured-card:nth-child(8n+4),
    .captains-board .featured-card:nth-child(8n+5),
    .captains-board .featured-card:nth-child(8n+6),
    .captains-board .featured-card:nth-child(8n+7),
    .captains-board .featured-card:nth-child(8n+8) {
        transform: rotate(0deg);
    }
    .captains-board .featured-card:hover {
        transform: rotate(0deg) translateY(-4px) scale(1.01) !important;
    }
}

/* Reduced-motion: skip the pin animation + zero rotation */
@media (prefers-reduced-motion: reduce) {
    .captains-board .featured-card,
    .captains-board .featured-card:nth-child(8n+1),
    .captains-board .featured-card:nth-child(8n+2),
    .captains-board .featured-card:nth-child(8n+3),
    .captains-board .featured-card:nth-child(8n+4),
    .captains-board .featured-card:nth-child(8n+5),
    .captains-board .featured-card:nth-child(8n+6),
    .captains-board .featured-card:nth-child(8n+7),
    .captains-board .featured-card:nth-child(8n+8) {
        animation: none !important;
        transform: none !important;
    }
}

/* ============================================================================
   CAPTAIN'S LOG — auto-pulled GitHub commit marquee
   ----------------------------------------------------------------------------
   Strip mounted above the captain's-board section. Shows the most recent
   meaningful commit per Threat Tape product repo, scrolling horizontally
   in an infinite loop. Data baked at deploy time by
   scripts/fetch-commits.py — visitors make zero outbound API calls.
   ============================================================================ */

.captains-log {
    position: relative;
    margin: 1.5rem 0 0;
    padding: 0.85rem 0;
    background: linear-gradient(90deg,
        rgba(10, 9, 8, 0.95),
        rgba(31, 27, 22, 0.88) 50%,
        rgba(10, 9, 8, 0.95));
    border-top: 1px solid rgba(250, 198, 56, 0.25);
    border-bottom: 1px solid rgba(250, 198, 56, 0.25);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 2px 12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    user-select: none;
}

/* Eyebrow label on the left edge — visually anchors the marquee */
.captains-log::before {
    content: 'CAPTAIN\27S LOG';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 3;
    padding: 0.4rem 1.1rem 0.4rem 1.4rem;
    background:
        linear-gradient(90deg, var(--tt-ink-0), var(--tt-ink-1) 75%, transparent);
    color: var(--tt-caution, #fac638);
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    border-right: 1px solid rgba(250, 198, 56, 0.3);
    pointer-events: none;
}

/* Right-edge fade removed 2026-05-24 with the marquee — the aggregate
   readout is static and centered, no entries scroll off to clip. */

/* Aggregate readout — centered, static, no marquee.
   The previous per-commit scrolling track was replaced 2026-05-24 with
   a sanitized aggregate so embargoed names and commit-message text
   cannot surface here. The eyebrow + chrome + right-edge fade are
   retained on the wrapper for visual consistency with the previous
   design; the track itself is now a single centered line. */
.captains-log__track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 0 1.5rem 0 11rem;  /* left padding clears the "CAPTAIN'S LOG" eyebrow */
    min-height: 1.4rem;
}

.captains-log__aggregate {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.85rem;
    color: var(--tt-bone-0, #f2e9d8);
    white-space: nowrap;
}

.captains-log__value {
    font-weight: 700;
    color: var(--tt-caution, #fac638);
    letter-spacing: 0.02em;
}

.captains-log__sep {
    opacity: 0.5;
}

.captains-log__window {
    color: rgba(247, 233, 200, 0.6);
    font-size: 0.78rem;
    font-style: italic;
}

.captains-log--empty {
    display: none;
}

/* Mobile: tighter padding, smaller eyebrow + aggregate text */
@media (max-width: 768px) {
    .captains-log::before {
        font-size: 0.65rem;
        padding: 0.35rem 0.75rem;
    }
    .captains-log__track {
        padding-left: 7rem;
        gap: 0.5rem;
    }
    .captains-log__aggregate {
        font-size: 0.78rem;
        gap: 0.4rem;
    }
    .captains-log__window {
        font-size: 0.7rem;
    }
}

/* Reduced motion: the aggregate is already static; nothing to gate. */

/* ============================================================================
   FEATURED SPOTLIGHT — stacked rotating card deck
   ----------------------------------------------------------------------------
   Above the captain's-log marquee. Shows one large product card at a
   time; the others stage behind it offset + scaled down. Auto-advances
   every 8s; dots + prev/next buttons jump. Each card carries its full
   theme treatment (palette, font, motifs), so the spotlight reads as
   a curated reel of distinct identities rather than a uniform carousel.
   ============================================================================ */

.spotlight {
    position: relative;
    margin: 1rem auto 0;
    padding: 1rem 0 2rem;
    perspective: 1800px;
}

.spotlight__deck {
    position: relative;
    min-height: 480px;
    margin: 0 auto;
    max-width: 980px;
}

.spotlight__card {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    max-width: 880px;
    transform: translateX(-50%);
    padding: 2.5rem 3rem;
    border-radius: 10px;
    background: var(--pt-surface, #1a1a1a);
    border: 1px solid var(--pt-rule, rgba(255,255,255,0.1));
    border-left: 5px solid var(--pt-accent, #fac638);
    color: var(--pt-ink, #f2e9d8);
    opacity: 0;
    pointer-events: none;
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.55),
        0 12px 24px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(0, 0, 0, 0.3);
    transition:
        opacity 0.65s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.65s ease;
    will-change: opacity, transform;
    transform-origin: center center;
}

/* The active card — fully visible, center stage */
.spotlight__card.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateZ(0) scale(1);
    z-index: 5;
}

/* .is-next / .is-next-2 are staged but invisible — the dots + counter
   already telegraph "more to see," and the previously-attempted stacked
   peek introduced layout noise without much payoff. The transitions
   (slide-in from right / slide-out to left) carry the deck feel. */
.spotlight__card.is-next,
.spotlight__card.is-next-2 {
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

/* Force the active card to paint opaquely on top of the stack, even for
   themes whose --pt-surface is semi-transparent (Ostraq glass, etc.). */
.spotlight__card.is-active {
    background-color: var(--pt-surface, #1a1a1a);
    background-image: none;
}

/* Card sliding OFF to the left (exiting) */
.spotlight__card.is-exiting {
    opacity: 0;
    transform: translateX(-180%) translateZ(0) scale(0.92) rotate(-6deg);
    z-index: 4;
    pointer-events: none;
}

/* Card sliding IN from the right (entering) */
.spotlight__card.is-entering {
    opacity: 0;
    transform: translateX(80%) translateZ(0) scale(0.92) rotate(6deg);
}

/* ----------------------------------------------------------------------------
   Card content typography — large/legible variant of the cards on the wall
   ---------------------------------------------------------------------------- */

.spotlight__eyebrow {
    display: inline-block;
    font-family: var(--tt-font-mono), 'Space Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pt-accent, #fac638);
    padding: 0.35rem 0.8rem;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 3px;
    margin-bottom: 1.2rem;
}

.spotlight__card h3 {
    font-family: var(--pt-display-font, serif);
    color: var(--pt-ink, #f2e9d8);
    font-size: clamp(2.5rem, 5vw, 3.6rem);
    line-height: 1;
    margin: 0 0 1rem;
    text-shadow:
        0 1px 0 rgba(0,0,0,0.6),
        0 2px 0 rgba(0,0,0,0.5),
        0 3px 0 rgba(0,0,0,0.4),
        0 5px 12px rgba(0,0,0,0.5);
}

/* Re-apply per-theme wordmark sizes at the larger lg variant where used */
.spotlight__card .sourceiq-wordmark--lg,
.spotlight__card .iqualify-wordmark--lg {
    font-size: clamp(2.5rem, 5vw, 3.6rem);
}

.spotlight__tagline {
    font-family: var(--pt-display-font, serif);
    font-size: 1.25rem;
    font-style: italic;
    color: var(--pt-accent, #fac638);
    margin: 0 0 1rem;
    line-height: 1.3;
}

.spotlight__body {
    font-family: var(--pt-body-font, sans-serif);
    color: var(--pt-ink-dim, #c7b89c);
    line-height: 1.6;
    margin: 0 0 1.4rem;
    font-size: 1rem;
    max-width: 60ch;
}

.spotlight__points {
    list-style: none;
    padding: 0;
    margin: 0 0 1.6rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 1.5rem;
}

.spotlight__points li {
    position: relative;
    padding-left: 1.2rem;
    font-family: var(--pt-body-font, sans-serif);
    font-size: 0.95rem;
    color: var(--pt-ink, #f2e9d8);
    line-height: 1.5;
}

.spotlight__points li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--pt-accent, #fac638);
    font-weight: 700;
}

.spotlight__cta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.spotlight__btn {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    border-radius: 4px;
    text-decoration: none;
    font-family: var(--pt-display-font, sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: 1px solid var(--pt-accent, #fac638);
    color: var(--pt-accent, #fac638);
    background: transparent;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.spotlight__btn:hover {
    transform: translateY(-2px);
    background: rgba(250, 198, 56, 0.1);
}

.spotlight__btn--primary {
    background: var(--pt-accent, #fac638);
    color: var(--pt-bg, #0a0908);
}

.spotlight__btn--primary:hover {
    background: var(--pt-accent-2, var(--pt-accent, #fac638));
    color: var(--pt-bg, #0a0908);
}

/* ----------------------------------------------------------------------------
   Navigation: prev/next chevrons + theme-colored dots
   ---------------------------------------------------------------------------- */

.spotlight__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    margin-top: 1.8rem;
    padding: 0.65rem 1.25rem;
    background: rgba(15, 12, 8, 0.55);
    border-radius: 999px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(250, 198, 56, 0.25);
}

.spotlight__nav-prev,
.spotlight__nav-next,
.spotlight__nav-toggle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(31, 27, 22, 0.95);
    border: 1.5px solid var(--tt-caution, #fac638);
    color: var(--tt-caution, #fac638);
    font-size: 1.6rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.spotlight__nav-prev:hover,
.spotlight__nav-next:hover,
.spotlight__nav-toggle:hover {
    background: var(--tt-caution, #fac638);
    color: var(--tt-ink-0, #0a0908);
    transform: scale(1.08);
}

.spotlight__nav-toggle {
    font-size: 1rem;
    line-height: 1;
}

/* Pause / play SVG icons — visibility toggled by aria-pressed state */
.spotlight__nav-toggle-icon {
    display: none;
    width: 18px;
    height: 18px;
}
.spotlight__nav-toggle[aria-pressed="false"] .spotlight__nav-toggle-icon--pause { display: inline-block; }
.spotlight__nav-toggle[aria-pressed="true"]  .spotlight__nav-toggle-icon--play  { display: inline-block; }

.spotlight__dots {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    padding: 0 0.4rem;
}

.spotlight__dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(247, 233, 200, 0.3);
    border: 1px solid rgba(247, 233, 200, 0.15);
    cursor: pointer;
    padding: 0;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.spotlight__dot:hover {
    background: rgba(247, 233, 200, 0.6);
    transform: scale(1.3);
}

.spotlight__dot.is-active {
    background: var(--dot-accent, #fac638);
    border-color: var(--dot-accent, #fac638);
    transform: scale(1.5);
    box-shadow: 0 0 12px var(--dot-accent, #fac638), 0 0 4px var(--dot-accent, #fac638);
}

.spotlight__counter {
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.82rem;
    color: var(--tt-bone-1, #c7b89c);
    letter-spacing: 0.08em;
    min-width: 4.2em;
    text-align: center;
    padding: 0 0.3rem;
    border-left: 1px solid rgba(250, 198, 56, 0.2);
    border-right: 1px solid rgba(250, 198, 56, 0.2);
}

/* ----------------------------------------------------------------------------
   Mobile: deck collapses, points stack single-column
   ---------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .spotlight__deck {
        height: auto;
        min-height: 540px;
    }
    .spotlight__card {
        position: relative;
        max-width: 100%;
        padding: 1.5rem 1.25rem;
    }
    .spotlight__card.is-active,
    .spotlight__card.is-next,
    .spotlight__card.is-next-2,
    .spotlight__card.is-exiting,
    .spotlight__card.is-entering {
        transform: none;
    }
    .spotlight__card.is-next,
    .spotlight__card.is-next-2,
    .spotlight__card.is-exiting,
    .spotlight__card.is-entering {
        display: none;
    }
    .spotlight__points {
        grid-template-columns: 1fr;
    }
    .spotlight__card h3 {
        font-size: 2.1rem;
    }
}

/* Reduced motion: cross-fade only, no slide/scale/rotate */
@media (prefers-reduced-motion: reduce) {
    .spotlight__card {
        transition: opacity 0.3s ease;
    }
    .spotlight__card.is-next,
    .spotlight__card.is-next-2,
    .spotlight__card.is-exiting,
    .spotlight__card.is-entering {
        transform: translateX(-50%) !important;
    }
}

/* ============================================================================
   NEW "STUFF THAT SHIPS" PRODUCTS — 2026-06-22
   Lightweight theme kits (palette + product display font) so the dossier
   cards/modal render these names in their own type, not the stencil fallback.
   Fonts are already loaded site-wide. Provisional palettes — tune on review.
   ============================================================================ */
.theme-draftiq {
    --pt-bg: #12121f;
    --pt-surface: #1a1a2e;
    --pt-ink: #e9e9f2;
    --pt-ink-dim: rgba(233, 233, 242, 0.82);
    --pt-accent: #4cc9f0;
    --pt-accent-2: #4895ef;
    --pt-display-font: 'Space Grotesk', system-ui, sans-serif;
    --pt-body-font: 'Hanken Grotesk', system-ui, sans-serif;
    --pt-mono-font: 'IBM Plex Mono', ui-monospace, monospace;
}
.theme-promenade {
    --pt-bg: #0b2536;
    --pt-surface: #0e2c40;
    --pt-ink: #f6ede1;
    --pt-ink-dim: rgba(246, 237, 225, 0.84);
    --pt-accent: #f4a261;
    --pt-accent-2: #e76f51;
    --pt-display-font: 'Fraunces', 'Newsreader', Georgia, serif;
    --pt-body-font: 'Hanken Grotesk', system-ui, sans-serif;
    --pt-mono-font: 'IBM Plex Mono', ui-monospace, monospace;
}
.theme-myathlete {
    --pt-bg: #0f2233;
    --pt-surface: #13283b;
    --pt-ink: #f2f4f6;
    --pt-ink-dim: rgba(242, 244, 246, 0.82);
    --pt-accent: #ffb703;
    --pt-accent-2: #fb8500;
    --pt-display-font: 'Bricolage Grotesque', system-ui, sans-serif;
    --pt-body-font: 'Hanken Grotesk', system-ui, sans-serif;
    --pt-mono-font: 'IBM Plex Mono', ui-monospace, monospace;
}
.theme-humangrove {
    /* "Town charter / public-records office" — seal-green on a dark green-tinted card.
       Accent brightened from the app's #1c6b57 for legibility on the dossier page. */
    --pt-bg: #1b2620;
    --pt-surface: #243029;
    --pt-ink: #f1ece0;
    --pt-ink-dim: rgba(241, 236, 224, 0.84);
    --pt-accent: #34a085;
    --pt-accent-2: #b08537;
    --pt-display-font: 'Bricolage Grotesque', system-ui, sans-serif;
    --pt-body-font: 'Hanken Grotesk', system-ui, sans-serif;
    --pt-mono-font: 'JetBrains Mono', ui-monospace, monospace;
}