/* ═══════════════════════════════════════════════════════════════════════════════
   REPORT OUTPUT CARDS
   Premium fintech-inspired design with subtle depth and texture effects.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   BASE CARD STYLES
   ───────────────────────────────────────────────────────────────────────────── */

.report-output-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* Clean, unified base */
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 1rem;
    /* Layered shadow stack with a faint inset ring for forensic, premium depth */
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.08),
        0 10px 25px -18px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(148, 163, 184, 0.06) inset;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

/* Dark mode: deep, rich backgrounds with sophisticated depth */
[data-theme="dark"] .report-output-card {
    background:
        radial-gradient(circle at 12% -15%, rgba(79, 70, 229, 0.14), transparent 45%),
        radial-gradient(circle at 100% 5%, rgba(30, 41, 59, 0.9), transparent 60%),
        linear-gradient(165deg, #0f172a 0%, #020617 100%);
}

[data-theme="dark"] .report-output-card--hero {
    background:
        radial-gradient(circle at 8% -12%, rgba(99, 102, 241, 0.22), transparent 48%),
        radial-gradient(circle at 95% 8%, rgba(79, 70, 229, 0.15), transparent 62%),
        linear-gradient(155deg, #0f172a 0%, #020617 100%);
}

/* Subtle top accent line for color-coded emphasis */
.report-output-card::before {
    content: "";
    position: absolute;
    left: 1.75rem;
    right: 1.75rem;
    top: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg,
            rgba(148, 163, 184, 0.0),
            rgba(148, 163, 184, 0.22),
            rgba(148, 163, 184, 0.0));
    z-index: 2;
    pointer-events: none;
}

.report-output-card--included::before {
    background: linear-gradient(90deg,
            rgba(79, 70, 229, 0.0),
            rgba(79, 70, 229, 0.45),
            rgba(129, 140, 248, 0.0));
}

.report-output-card--optional::before {
    background: linear-gradient(90deg,
            rgba(100, 116, 139, 0.0),
            rgba(100, 116, 139, 0.4),
            rgba(148, 163, 184, 0.0));
}

.report-output-card--custom::before {
    background: linear-gradient(90deg,
            rgba(124, 58, 237, 0.0),
            rgba(124, 58, 237, 0.5),
            rgba(192, 132, 252, 0.0));
}

/* Refined Shimmer - All Cards (small cards use this; hero deck uses its own) */
.report-output-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(105deg,
            transparent 22%,
            rgba(255, 255, 255, 0.032) 43%,
            rgba(255, 255, 255, 0.0) 68%);
    transform: translateX(-100%);
    pointer-events: none;
    z-index: 10;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    /* Clip shimmer to card bounds (fixes overflow:visible leak on hero) */
    clip-path: inset(0 round 1rem);
}

.report-output-card:hover::after {
    transform: translateX(100%);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Disable card-level shimmer for hero; it will shimmer only on top deck card */
.report-output-card--hero::after {
    display: none;
}

/* Card content z-index */
.report-output-card> :not(.report-output-icon):not(.report-output-glow) {
    position: relative;
    z-index: 5;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BACKGROUND ICON - Pushed deep into background with ambient glow
   ───────────────────────────────────────────────────────────────────────────── */

.report-output-icon {
    position: absolute;
    top: -3.5rem;
    right: -3.75rem;
    width: 16rem;
    height: 16rem;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform: translate3d(0, 0, 0) rotate(10deg) scale(1.01);
    z-index: 1;
    opacity: 0.12;
    filter: blur(0.7px);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.23, 1, 0.32, 1), filter 0.45s ease;
}

.report-output-card:hover .report-output-icon {
    opacity: 0.19;
    filter: blur(0.5px);
}

.report-output-icon-symbol {
    width: 9.5rem;
    height: 9.5rem;
    color: currentColor;
    opacity: 0.85;
    /* Refined, slightly lighter stroke to avoid the "blown-up" icon feel */
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.report-output-icon::before,
.report-output-icon::after {
    content: "";
    position: absolute;
    inset: 22% 18%;
    border-radius: 999px;
    pointer-events: none;
}

.report-output-icon::before {
    border: 1px solid rgba(148, 163, 184, 0.5);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.22) inset,
        0 16px 40px -26px rgba(15, 23, 42, 0.75);
    background: radial-gradient(ellipse at top, rgba(249, 250, 251, 0.9), transparent 62%);
    opacity: 0.9;
}

.report-output-icon::after {
    inset: 26% 20%;
    border-radius: 999px;
    background-image:
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.22), transparent 56%),
        linear-gradient(120deg, rgba(148, 163, 184, 0.45), rgba(148, 163, 184, 0.08)),
        repeating-linear-gradient(135deg,
            rgba(148, 163, 184, 0.65),
            rgba(148, 163, 184, 0.65) 1px,
            transparent 1px,
            transparent 4px),
        repeating-linear-gradient(45deg,
            rgba(148, 163, 184, 0.32),
            rgba(148, 163, 184, 0.32) 1px,
            transparent 1px,
            transparent 6px);
    mix-blend-mode: soft-light;
    opacity: 0.9;
}

.report-output-card--included .report-output-icon::after {
    background-image:
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.24), transparent 56%),
        linear-gradient(120deg, rgba(99, 102, 241, 0.8), rgba(129, 140, 248, 0.18)),
        repeating-linear-gradient(135deg,
            rgba(129, 140, 248, 0.9),
            rgba(129, 140, 248, 0.9) 1px,
            transparent 1px,
            transparent 4px),
        repeating-linear-gradient(45deg,
            rgba(165, 180, 252, 0.45),
            rgba(165, 180, 252, 0.45) 1px,
            transparent 1px,
            transparent 6px);
}

.report-output-card--optional .report-output-icon::after {
    background-image:
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.2), transparent 56%),
        linear-gradient(120deg, rgba(100, 116, 139, 0.8), rgba(148, 163, 184, 0.2)),
        repeating-linear-gradient(135deg,
            rgba(148, 163, 184, 0.85),
            rgba(148, 163, 184, 0.85) 1px,
            transparent 1px,
            transparent 4px),
        repeating-linear-gradient(45deg,
            rgba(148, 163, 184, 0.4),
            rgba(148, 163, 184, 0.4) 1px,
            transparent 1px,
            transparent 6px);
}

.report-output-card--custom .report-output-icon::after {
    background-image:
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.24), transparent 56%),
        linear-gradient(120deg, rgba(124, 58, 237, 0.8), rgba(192, 132, 252, 0.22)),
        repeating-linear-gradient(135deg,
            rgba(192, 132, 252, 0.9),
            rgba(192, 132, 252, 0.9) 1px,
            transparent 1px,
            transparent 4px),
        repeating-linear-gradient(45deg,
            rgba(196, 181, 253, 0.5),
            rgba(196, 181, 253, 0.5) 1px,
            transparent 1px,
            transparent 6px);
}

/* Ambient glow behind icon */
.report-output-glow {
    position: absolute;
    top: -3.25rem;
    right: -3.25rem;
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(32px);
    opacity: 0.22;
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.report-output-card:hover .report-output-glow {
    opacity: 0.3;
    transform: scale(1.04);
}

/* ─────────────────────────────────────────────────────────────────────────────
   INCLUDED CARDS - Premium indigo/violet theme
   ───────────────────────────────────────────────────────────────────────────── */

.report-output-card--included {
    background: linear-gradient(to bottom right, #ffffff, #f6f7ff);
}

.report-output-card--included:hover {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 10px 26px -18px rgba(15, 23, 42, 0.18);
    transform: translateY(-1px);
}

.report-output-card--included .report-output-icon {
    color: #6366f1;
}

.report-output-card--included .report-output-glow {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.38), rgba(139, 92, 246, 0.22), transparent 70%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   OPTIONAL CARDS - Sophisticated slate/silver theme
   ───────────────────────────────────────────────────────────────────────────── */

.report-output-card--optional {
    background: linear-gradient(to bottom right, #ffffff, #f8fafc);
}

.report-output-card--optional:hover {
    border-color: rgba(148, 163, 184, 0.5);
    box-shadow: 0 10px 26px -18px rgba(15, 23, 42, 0.16);
    transform: translateY(-1px);
}

.report-output-card--optional .report-output-icon {
    color: #64748b;
}

.report-output-card--optional .report-output-glow {
    background: radial-gradient(circle, rgba(100, 116, 139, 0.28), rgba(148, 163, 184, 0.18), transparent 70%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CUSTOM CARDS - Exclusive deep purple theme
   ───────────────────────────────────────────────────────────────────────────── */

.report-output-card--custom {
    background: linear-gradient(to bottom right, #ffffff, #f8f3ff);
}

.report-output-card--custom:hover {
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 10px 26px -18px rgba(15, 23, 42, 0.18);
    transform: translateY(-1px);
}

.report-output-card--custom .report-output-icon {
    color: #7c3aed;
}

.report-output-card--custom .report-output-glow {
    background: radial-gradient(circle, rgba(124, 58, 237, 0.38), rgba(192, 132, 252, 0.24), transparent 70%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO CARD - Maximum presence showpiece
   ───────────────────────────────────────────────────────────────────────────── */

.report-output-card--hero {
    /* Calibration variables for hero deck placement; do not change these */
    --hero-deck-top-offset: -7rem;
    --hero-deck-right-offset: -6rem;
    padding-right: 3.5rem;
    padding-bottom: 2.25rem;
    background: linear-gradient(to bottom right, #ffffff, #eff2ff);
    /* Allow deck to overflow the card edge naturally - must override base overflow:hidden */
    overflow: visible !important;
}

.report-output-card--hero:hover {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 10px 26px -18px rgba(15, 23, 42, 0.2);
    transform: translateY(-1px);
}

.report-output-card--hero .report-output-icon {
    top: auto;
    bottom: -4.25rem;
    right: -3.5rem;
    width: 19.5rem;
    height: 19.5rem;
    opacity: 0.06;
}

.report-output-card--hero .report-output-icon-symbol {
    width: 11.5rem;
    height: 11.5rem;
}

.report-output-card--hero .report-output-icon::before,
.report-output-card--hero .report-output-icon::after {
    content: "";
    position: absolute;
    inset: 22% 16%;
    border-radius: 999px;
    pointer-events: none;
}

.report-output-card--hero .report-output-icon::before {
    border: 1px solid rgba(148, 163, 184, 0.55);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.16) inset,
        0 16px 40px -26px rgba(15, 23, 42, 0.85);
    background: radial-gradient(ellipse at top, rgba(249, 250, 251, 0.9), transparent 62%);
    opacity: 0.9;
}

.report-output-card--hero .report-output-icon::after {
    inset: 30% 24%;
    border-radius: 999px;
    background-image:
        linear-gradient(120deg, rgba(148, 163, 184, 0.6), rgba(148, 163, 184, 0.08)),
        repeating-linear-gradient(0deg,
            rgba(148, 163, 184, 0.55),
            rgba(148, 163, 184, 0.55) 1px,
            transparent 1px,
            transparent 3px);
    mix-blend-mode: soft-light;
    opacity: 0.8;
}

.report-output-card--hero .report-output-glow {
    top: auto;
    bottom: -4rem;
    right: -1.75rem;
    width: 17.5rem;
    height: 17.5rem;
}

.hero-report-body {
    margin-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.hero-report-copy {
    position: relative;
    z-index: 5;
    max-width: 320px;
    /* Leave room for the deck on the right on small screens */
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE ADJUSTMENTS
   ───────────────────────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
    .report-output-icon {
        top: -4.25rem;
        right: -4.5rem;
        width: 17.5rem;
        height: 17.5rem;
    }

    .report-output-icon-symbol {
        width: 10.75rem;
        height: 10.75rem;
    }

    .report-output-glow {
        top: -3.75rem;
        right: -3.75rem;
        width: 16rem;
        height: 16rem;
    }

    .report-output-card--hero .report-output-icon {
        top: auto;
        bottom: -5rem;
        right: -5rem;
        width: 24rem;
        height: 24rem;
        opacity: 0.045;
    }

    .report-output-card--hero .report-output-icon-symbol {
        width: 14rem;
        height: 14rem;
    }

    .report-output-card--hero .report-output-glow {
        top: auto;
        bottom: -4.5rem;
        right: -2.75rem;
        width: 21rem;
        height: 21rem;
    }

    .report-output-card--hero {
        padding-bottom: 2.5rem;
        /* Tablet: use gentler deck offsets so it doesn't collide with text */
        --hero-deck-top-offset: -3rem;
        --hero-deck-right-offset: -3rem;
    }

    .hero-report-body {
        flex-direction: row;
        align-items: center;
        gap: 1.75rem;
    }

    .hero-report-copy {
        /* Use character-based measure for more robust wrapping near the deck */
        max-width: 32ch;
        flex: 1 1 auto;
    }

    .hero-profiles-visual {
        flex: 0 0 auto;
    }

}

@media (max-width: 767px) {
    .hero-report-copy {
        max-width: none;
        /* Full width on mobile since deck is below */
    }
}

@media (max-width: 639px) {
    .report-output-icon {
        top: -1.75rem;
        right: -1.35rem;
        width: 7.25rem;
        height: 7.25rem;
        opacity: 0.08;
    }

    .report-output-icon-symbol {
        width: 4.4rem;
        height: 4.4rem;
    }

    .report-output-glow {
        top: -1.4rem;
        right: -0.9rem;
        width: 6.6rem;
        height: 6.6rem;
        filter: blur(24px);
        opacity: 0.2;
    }

    .report-output-card--hero {
        padding-right: 2rem;
    }

    .report-output-card--hero .report-output-icon {
        top: -3.5rem;
        right: -3.25rem;
        width: 9.5rem;
        height: 9.5rem;
    }

    .report-output-card--hero .report-output-icon-symbol {
        width: 6rem;
        height: 6rem;
    }
}

/* Reduced motion handled in consolidated block at end of file */

/* ─────────────────────────────────────────────────────────────────────────────
   DARK MODE - Rich, deep variations
   ───────────────────────────────────────────────────────────────────────────── */

[data-theme="dark"] .report-output-card {
    background:
        radial-gradient(circle at 12% -15%, rgba(79, 70, 229, 0.14), transparent 45%),
        radial-gradient(circle at 100% 5%, rgba(30, 41, 59, 0.9), transparent 60%),
        linear-gradient(165deg, #0f172a 0%, #020617 100%);
    /* Deep, sophisticated slate glass */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(99, 102, 241, 0.2);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 12px 32px -20px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(165, 180, 252, 0.08);
}

[data-theme="dark"] .report-output-card--hero {
    background:
        radial-gradient(circle at 8% -12%, rgba(99, 102, 241, 0.22), transparent 48%),
        radial-gradient(circle at 95% 8%, rgba(79, 70, 229, 0.15), transparent 62%),
        linear-gradient(155deg, #0f172a 0%, #020617 100%);
}

/* Dark mode shimmer adjustment */
[data-theme="dark"] .report-output-card::after {
    background: linear-gradient(105deg,
            transparent 25%,
            rgba(255, 255, 255, 0.02) 44%,
            rgba(255, 255, 255, 0.0) 70%);
}

[data-theme="dark"] .report-output-card:hover {
    border-color: rgba(165, 180, 252, 0.6);
    box-shadow:
        0 0 0 1px rgba(148, 163, 184, 0.4) inset,
        0 18px 44px -28px rgba(15, 23, 42, 0.98);
}

[data-theme="dark"] .report-output-card--included:hover {
    border-color: rgba(129, 140, 248, 0.7);
    box-shadow: 0 18px 44px -28px rgba(15, 23, 42, 0.98);
}

[data-theme="dark"] .report-output-card--optional:hover {
    border-color: rgba(148, 163, 184, 0.7);
    box-shadow: 0 18px 44px -28px rgba(15, 23, 42, 0.98);
}

[data-theme="dark"] .report-output-card--custom:hover {
    border-color: rgba(196, 181, 253, 0.7);
    box-shadow: 0 18px 44px -28px rgba(15, 23, 42, 0.98);
}

[data-theme="dark"] .report-output-card--hero:hover {
    border-color: rgba(129, 140, 248, 0.75);
    box-shadow: 0 20px 52px -30px rgba(15, 23, 42, 0.98);
}

[data-theme="dark"] .report-output-icon {
    opacity: 0.16;
    filter: blur(0.5px);
}

[data-theme="dark"] .report-output-card:hover .report-output-icon {
    opacity: 0.24;
}

/* Dark mode icon pseudo-elements - visible but refined */
[data-theme="dark"] .report-output-icon::before {
    border: 1px solid rgba(99, 102, 241, 0.25);
    box-shadow:
        0 0 0 1px rgba(165, 180, 252, 0.08) inset,
        0 8px 24px -12px rgba(0, 0, 0, 0.6);
    background: radial-gradient(ellipse at top, rgba(30, 41, 59, 0.5), transparent 70%);
    opacity: 0.75;
}

[data-theme="dark"] .report-output-icon::after {
    background-image:
        radial-gradient(circle at 18% 0%, rgba(99, 102, 241, 0.15), transparent 60%),
        linear-gradient(120deg, rgba(79, 70, 229, 0.25), rgba(30, 41, 59, 0.1));
    mix-blend-mode: screen;
    opacity: 0.45;
}

[data-theme="dark"] .report-output-glow {
    opacity: 0.35;
    filter: blur(45px);
}

[data-theme="dark"] .report-output-card:hover .report-output-glow {
    opacity: 0.5;
}

[data-theme="dark"] .report-output-card--included .report-output-icon {
    color: #a5b4fc;
}

[data-theme="dark"] .report-output-card--included .report-output-icon::after {
    background-image:
        radial-gradient(circle at 18% 0%, rgba(129, 140, 248, 0.2), transparent 60%),
        linear-gradient(120deg, rgba(99, 102, 241, 0.35), rgba(79, 70, 229, 0.15));
}

[data-theme="dark"] .report-output-card--included .report-output-glow {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.38), rgba(79, 70, 229, 0.22), transparent 70%);
}

[data-theme="dark"] .report-output-card--optional .report-output-icon {
    color: #cbd5e1;
}

[data-theme="dark"] .report-output-card--optional .report-output-icon::after {
    background-image:
        radial-gradient(circle at 18% 0%, rgba(148, 163, 184, 0.18), transparent 60%),
        linear-gradient(120deg, rgba(100, 116, 139, 0.3), rgba(71, 85, 105, 0.12));
}

[data-theme="dark"] .report-output-card--optional .report-output-glow {
    background: radial-gradient(circle, rgba(100, 116, 139, 0.28), rgba(71, 85, 105, 0.16), transparent 70%);
}

[data-theme="dark"] .report-output-card--custom .report-output-icon {
    color: #c4b5fd;
}

[data-theme="dark"] .report-output-card--custom .report-output-icon::after {
    background-image:
        radial-gradient(circle at 18% 0%, rgba(192, 132, 252, 0.2), transparent 60%),
        linear-gradient(120deg, rgba(139, 92, 246, 0.35), rgba(124, 58, 237, 0.15));
}

[data-theme="dark"] .report-output-card--custom .report-output-glow {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.38), rgba(124, 58, 237, 0.22), transparent 70%);
}

[data-theme="dark"] .report-output-card--hero .report-output-icon {
    color: #a5b4fc;
    opacity: 0.12;
}

[data-theme="dark"] .report-output-card--hero .report-output-glow {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.35), rgba(79, 70, 229, 0.2), transparent 70%);
    opacity: 0.4;
}

/* Capabilities badges (Included / Optional / Custom / Technical) */
.capability-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    /* Glass Pill Base */
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
}

[data-theme="dark"] .capability-pill--included,
[data-theme="dark"] .capability-pill--technical {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .capability-pill--optional {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .capability-pill--custom {
    background: rgba(124, 58, 237, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
    color: #e9d5ff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.1),
        0 4px 12px -2px rgba(124, 58, 237, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PREMIUM TEXTURE SYSTEM - Rich visual depth through paper, grain & patterns
   Creates "WOW" moment through feeling, not words. 2025/2026 design language.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   PAPER TEXTURE - Subtle fiber/grain effect like premium stationery
   ───────────────────────────────────────────────────────────────────────────── */

.report-texture-paper {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    opacity: 0.2;
    mix-blend-mode: soft-light;
    background-image:
        /* Fine paper fibers */
        linear-gradient(145deg,
            rgba(148, 163, 184, 0.14),
            rgba(148, 163, 184, 0.05) 45%,
            rgba(148, 163, 184, 0.0) 80%);
}

.report-output-card--hero .report-texture-paper {
    opacity: 0.22;
}

[data-theme="dark"] .report-texture-paper {
    opacity: 0.1;
    mix-blend-mode: soft-light;
    filter: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   NOISE/GRAIN TEXTURE - Film grain aesthetic for depth
   ───────────────────────────────────────────────────────────────────────────── */

.report-texture-noise {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    opacity: 0.04;
    mix-blend-mode: soft-light;
    background-image: radial-gradient(circle at 30% 0%,
            rgba(148, 163, 184, 0.12),
            transparent 55%);
}

.report-output-card--hero .report-texture-noise {
    opacity: 0.045;
}

[data-theme="dark"] .report-texture-noise {
    opacity: 0.1;
    mix-blend-mode: soft-light;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BLUEPRINT GRID - Precision/engineering aesthetic (hero card only)
   ───────────────────────────────────────────────────────────────────────────── */

.report-texture-grid {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
    background-image:
        /* Major grid lines */
        linear-gradient(rgba(99, 102, 241, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.08) 1px, transparent 1px),
        /* Minor grid lines */
        linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
    background-size: 48px 48px, 48px 48px, 12px 12px, 12px 12px;
    mask-image: linear-gradient(135deg, transparent 20%, rgba(0, 0, 0, 0.5) 50%, transparent 80%);
    -webkit-mask-image: linear-gradient(135deg, transparent 20%, rgba(0, 0, 0, 0.5) 50%, transparent 80%);
}

.report-output-card--hero .report-texture-grid {
    opacity: 0.55;
}

.report-output-card--hero:hover .report-texture-grid {
    opacity: 0.4;
}

[data-theme="dark"] .report-texture-grid {
    background-image:
        linear-gradient(rgba(165, 180, 252, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(165, 180, 252, 0.1) 1px, transparent 1px),
        linear-gradient(rgba(165, 180, 252, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(165, 180, 252, 0.04) 1px, transparent 1px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   EXPANDABLE PROFILE DECK - Apple-style "product shot" in the hero card
   Premium paper texture + smooth reveal animation for "WOW" factor
   ───────────────────────────────────────────────────────────────────────────── */

.hero-profiles-visual {
    position: relative;
    z-index: 12;
    /* Above text and textures */
    display: flex;
    justify-content: center;
}

.profiles-deck {
    position: relative;
    width: 280px;
    height: 210px;
    /* Base spacing between stacked cards (tuned once, reused everywhere) */
    --deck-offset-x: 5px;
    --deck-offset-y: 8px;
    /* Slight rotation for dynamic feel */
    transform: rotate(-2deg);
    transform-origin: center center;
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Ground shadow - makes it feel like it's sitting on a surface */
.profiles-deck::before {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 10%;
    width: 80%;
    height: 20px;
    background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.11) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
    transition: all 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

/* On hover, straighten up and lift */
.report-output-card--hero:hover .profiles-deck {
    transform: rotate(0deg) scale(1.015);
}

.report-output-card--hero:hover .profiles-deck::before {
    bottom: -11px;
    opacity: 0.7;
    transform: scale(1.08);
}

/* Base card with paper texture */
.deck-card {
    position: absolute;
    width: 220px;
    height: 130px;
    border-radius: 12px;
    background:
        repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(148, 163, 184, 0.012) 2px, rgba(148, 163, 184, 0.012) 4px),
        repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(148, 163, 184, 0.008) 2px, rgba(148, 163, 184, 0.008) 4px),
        linear-gradient(165deg, #ffffff, #f8fafc 50%, #f1f5f9);
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: all 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: 20% 100%;
    /* Layer index (0 at the back). Controls both bottom and left via offsets above. */
    --deck-layer-index: 0;
    bottom: calc(var(--deck-layer-index) * var(--deck-offset-y));
    left: calc(var(--deck-layer-index) * var(--deck-offset-x));
}

.deck-card-inner {
    padding: 1rem;
    height: 100%;
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* Back cards - visible edges create depth in the stack */
.deck-card--back {
    background: linear-gradient(165deg, #f8fafc, #f1f5f9 50%, #e2e8f0);
}

/* Stacking from bottom - cards cascade upward with generous visible offsets */
.deck-card--4 {
    z-index: 1;
    --deck-layer-index: 0;
    /* Expanded default - slightly tighter fan for a calmer read */
    transform: translateX(-18px) translateY(40px) rotate(-9deg);
    opacity: 0.35;
}

.deck-card--3 {
    z-index: 2;
    --deck-layer-index: 1;
    transform: translateX(-11px) translateY(28px) rotate(-6deg);
    opacity: 0.5;
}

.deck-card--2 {
    z-index: 3;
    --deck-layer-index: 2;
    transform: translateX(-4px) translateY(16px) rotate(-3deg);
    opacity: 0.65;
}

.deck-card--1 {
    z-index: 4;
    --deck-layer-index: 3;
    transform: translateX(1px) translateY(6px) rotate(-0.5deg);
    opacity: 0.82;
}

/* Peer card */
.deck-card--peer {
    z-index: 5;
    --deck-layer-index: 4;
    border-color: rgba(148, 163, 184, 0.28);
    transform: translateX(8px) translateY(-2px) rotate(0.75deg);
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.deck-card--peer .deck-card-inner {
    opacity: 1;
}

/* Target card - front, always visible */
.deck-card--target {
    z-index: 6;
    --deck-layer-index: 5;
    background:
        repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(99, 102, 241, 0.006) 2px, rgba(99, 102, 241, 0.006) 4px),
        linear-gradient(165deg, #ffffff, #fefefe 40%, #f8fafc);
    border-color: rgba(99, 102, 241, 0.18);
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.14), 0 20px 48px -18px rgba(99, 102, 241, 0.26), inset 0 1px 0 #fff;
    transform: translateX(16px) translateY(-12px) rotate(2.5deg);
    /* Critical: ensure shimmer cannot bleed outside the card shape */
    overflow: hidden;
}

.deck-card--target::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(115deg,
            transparent 28%,
            rgba(148, 163, 184, 0.038) 49%,
            rgba(148, 163, 184, 0.0) 82%);
    /* Start fully off-card to the left and sweep across */
    transform: translateX(-120%);
    opacity: 0;
    transition:
        transform 0.85s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s ease-out;
    /* Ensure shimmer is visually confined to the card's rounded shape */
    clip-path: inset(0 round 12px);
}

.report-output-card--hero:hover .deck-card--target::after {
    opacity: 1;
    transform: translateX(120%);
}

.deck-card--target .deck-card-inner {
    opacity: 1;
}

/* Card content styling */
.deck-card-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.6rem;
}

.deck-avatar {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.18));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6366f1;
}

.deck-avatar--target {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
    box-shadow: 0 3px 8px rgba(99, 102, 241, 0.3);
}

.deck-title {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.deck-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: -0.01em;
}

.deck-tag {
    font-size: 0.55rem;
    font-weight: 700;
    color: #6366f1;
    letter-spacing: 0.08em;
}

.deck-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: #64748b;
}

.deck-bars {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.deck-bar {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #e2e8f0, #cbd5e1);
}

.deck-bar--accent {
    height: 7px;
    background: linear-gradient(90deg, #a5b4fc, #818cf8);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOVER STATE - Collapse the deck back into a tighter stack
   ═══════════════════════════════════════════════════════════════════════════ */

.report-output-card--hero:hover .deck-card--4,
.report-output-card--hero:hover .deck-card--3,
.report-output-card--hero:hover .deck-card--2,
.report-output-card--hero:hover .deck-card--1 {
    transform: none;
    opacity: 1;
}

.report-output-card--hero:hover .deck-card--peer {
    transform: none;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.report-output-card--hero:hover .deck-card--peer .deck-card-inner {
    opacity: 0;
}

.report-output-card--hero:hover .deck-card--target {
    transform: none;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1), 0 12px 32px -16px rgba(99, 102, 241, 0.22), inset 0 1px 0 #fff;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DARK MODE - Deck cards
   ───────────────────────────────────────────────────────────────────────────── */

[data-theme="dark"] .deck-card {
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .deck-card--back {
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
}

[data-theme="dark"] .deck-card--target {
    /* Solid background to prevent bleed-through */
    background: linear-gradient(165deg, #1e1b4b, #0f172a);
    border-color: rgba(129, 140, 248, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 6px 18px -8px rgba(99, 102, 241, 0.25), inset 0 1px 0 rgba(165, 180, 252, 0.06);
}

[data-theme="dark"] .deck-card--target::after {
    background: linear-gradient(115deg,
            transparent 32%,
            rgba(255, 255, 255, 0.026) 51%,
            rgba(255, 255, 255, 0.0) 84%);
}

[data-theme="dark"] .deck-avatar {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(79, 70, 229, 0.32));
    color: #a5b4fc;
}

[data-theme="dark"] .deck-avatar--target {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
}

[data-theme="dark"] .deck-name {
    color: #e2e8f0;
}

[data-theme="dark"] .deck-tag {
    color: #a5b4fc;
}

[data-theme="dark"] .deck-label {
    color: #94a3b8;
}

[data-theme="dark"] .deck-bar {
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.25), rgba(148, 163, 184, 0.15));
}

[data-theme="dark"] .deck-bar--accent {
    background: linear-gradient(90deg, rgba(165, 180, 252, 0.45), rgba(129, 140, 248, 0.35));
}

[data-theme="dark"] .deck-more-label {
    color: #a5b4fc;
}

[data-theme="dark"] .profiles-deck::before {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, transparent 70%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE - Deck cards
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

    /* On mobile, position deck below the text content */
    .hero-profiles-visual {
        margin-top: 1.25rem;
    }

    .profiles-deck {
        width: 230px;
        height: 165px;
        transform: rotate(-2deg);
    }

    .deck-card {
        width: 190px;
        height: 115px;
        border-radius: 8px;
    }

    .deck-card-inner {
        padding: 0.6rem;
    }

    .deck-avatar {
        width: 18px;
        height: 18px;
    }

    .deck-avatar--target {
        width: 22px;
        height: 22px;
    }

    .deck-name {
        font-size: 0.65rem;
    }

    .deck-tag {
        font-size: 0.4rem;
    }

    .deck-bar {
        height: 4px;
    }

    .deck-bar--accent {
        height: 5px;
    }
}

@media (min-width: 1024px) {
    .hero-report-copy {
        /* Slightly wider on desktop, still constrained to avoid colliding with deck */
        max-width: 36ch;
    }

    .report-output-card--hero {
        /* Desktop: preserve the more dramatic deck placement */
        --hero-deck-top-offset: -7rem;
        --hero-deck-right-offset: -6rem;
    }

    .profiles-deck {
        width: 320px;
        height: 240px;
    }

    .deck-card {
        width: 250px;
        height: 148px;
        border-radius: 14px;
    }

    .deck-card-inner {
        padding: 1.15rem;
    }

    .deck-avatar {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .deck-avatar--target {
        width: 42px;
        height: 42px;
    }

    .deck-name {
        font-size: 1.05rem;
    }

    .deck-tag {
        font-size: 0.6rem;
    }

    .deck-label {
        font-size: 0.88rem;
    }

    .deck-bar {
        height: 7px;
        border-radius: 3.5px;
    }

    .deck-bar--accent {
        height: 8px;
    }

    .deck-more-label {
        font-size: 0.78rem;
    }

    /* Slightly increase spacing between layers on large screens in one place */
    .profiles-deck {
        --deck-offset-x: 6px;
        --deck-offset-y: 10px;
    }
}

@media (min-width: 1280px) {
    .hero-profiles-visual {
        position: absolute;
        top: calc(2rem + var(--hero-deck-top-offset));
        right: calc(3rem + var(--hero-deck-right-offset));
        display: block;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ENHANCED CARD TEXTURES - Premium paper feel for all report cards
   ───────────────────────────────────────────────────────────────────────────── */

/* Subtle paper texture + depth for smaller cards */
.report-output-card:not(.report-output-card--hero) {
    background: linear-gradient(175deg, #ffffff 0%, #f9fafb 55%, #edf2f7 100%);
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.06),
        0 8px 20px -15px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 rgba(148, 163, 184, 0.08);
}

[data-theme="dark"] .report-output-card:not(.report-output-card--hero) {
    background: linear-gradient(165deg, #0f172a 0%, #020617 100%);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.4),
        0 8px 20px -12px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(165, 180, 252, 0.03),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   PREMIUM EMBOSS EFFECT - Letterpress-inspired depth on card headings
   ───────────────────────────────────────────────────────────────────────────── */

.report-output-card h3 {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .report-output-card h3 {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ─────────────────────────────────────────────────────────────────────────────
   WATERMARK ACCENT - Subtle corner detail suggesting premium documents
   ───────────────────────────────────────────────────────────────────────────── */

.report-output-card--hero::before {
    /* Override the existing top accent line for hero */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 1rem 1rem 0 0;
    background: linear-gradient(90deg,
            rgba(99, 102, 241, 0.0) 0%,
            rgba(99, 102, 241, 0.5) 20%,
            rgba(129, 140, 248, 0.7) 50%,
            rgba(99, 102, 241, 0.5) 80%,
            rgba(99, 102, 241, 0.0) 100%);
    z-index: 2;
}

[data-theme="dark"] .report-output-card--hero::before {
    background: linear-gradient(90deg,
            rgba(129, 140, 248, 0.0) 0%,
            rgba(129, 140, 248, 0.4) 20%,
            rgba(165, 180, 252, 0.6) 50%,
            rgba(129, 140, 248, 0.4) 80%,
            rgba(129, 140, 248, 0.0) 100%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CORNER FOLD EFFECT - Paper corner dog-ear for tactile feel
   ───────────────────────────────────────────────────────────────────────────── */

.report-output-card:not(.report-output-card--hero) {
    /* Corner fold via clip-path and pseudo-element */
    position: relative;
}

/* Note: .report-output-card:not(.report-output-card--hero)::before 
   is styled earlier in this file as the top accent line */

/* Corner fold triangle overlay */
.report-output-card--included:not(.report-output-card--hero) .report-output-glow::before,
.report-output-card--optional .report-output-glow::before,
.report-output-card--custom .report-output-glow::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg,
            transparent 50%,
            rgba(241, 245, 249, 0.95) 50%);
    border-bottom-left-radius: 4px;
    box-shadow:
        -1px 1px 2px rgba(15, 23, 42, 0.06),
        inset 1px -1px 0 rgba(148, 163, 184, 0.15);
    z-index: 15;
    pointer-events: none;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.report-output-card:hover .report-output-glow::before {
    opacity: 1;
}

[data-theme="dark"] .report-output-card--included:not(.report-output-card--hero) .report-output-glow::before,
[data-theme="dark"] .report-output-card--optional .report-output-glow::before,
[data-theme="dark"] .report-output-card--custom .report-output-glow::before {
    background: linear-gradient(135deg,
            transparent 50%,
            rgba(30, 41, 59, 0.95) 50%);
    box-shadow:
        -1px 1px 2px rgba(0, 0, 0, 0.3),
        inset 1px -1px 0 rgba(148, 163, 184, 0.1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   DECORATIVE CORNER STAMP - Official document seal feel
   ───────────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────────
   TOPOGRAPHIC CONTOUR LINES - Subtle data visualization aesthetic
   ───────────────────────────────────────────────────────────────────────────── */

.report-output-card--hero .report-texture-paper::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.12;
    background-image:
        radial-gradient(ellipse at 80% 120%,
            rgba(99, 102, 241, 0.06),
            transparent 65%);
    transition: opacity 0.4s ease;
}

.report-output-card--hero:hover .report-texture-paper::before {
    opacity: 0.25;
}

[data-theme="dark"] .report-output-card--hero .report-texture-paper::before {
    background-image:
        radial-gradient(ellipse at 80% 120%,
            rgba(165, 180, 252, 0.1),
            transparent 65%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   REDUCED MOTION PREFERENCES (Consolidated)
   ───────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .report-output-card::after {
        display: none;
    }

    .deck-card--target::after {
        display: none;
    }

    .report-output-card--hero:hover {
        transform: none;
    }

    .deck-card,
    .deck-more-label,
    .profiles-deck,
    .report-output-glow::after,
    .report-output-glow::before {
        transition: none;
    }

    .report-output-card--hero:hover .deck-card,
    .report-output-card--hero:hover .profiles-deck,
    .report-output-card--custom:hover .report-output-glow::after,
    .report-output-card--hero:hover .report-output-glow::after {
        transform: none;
    }
}