/* ============================================
   Whitepaper Landing Page Styles
   ============================================ */

/* Distraction-free Header: nur Logo, kein Menü */
body.page-whitepaper .main-nav,
body.page-whitepaper .liquid-glass-test-menu,
body.page-whitepaper .header-social,
body.page-whitepaper .mobile-menu-toggle {
    display: none !important;
}

/* ============================================
   Hero: Background Image + Right-aligned Text
   ============================================ */
.whitepaper-hero {
    background-image: url('../assets/images/infographics/white-paper-erste-100-tage.webp');
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    background-color: var(--color-primary);
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.whitepaper-hero .page-hero-inner {
    flex-direction: row;
    justify-content: flex-end;
}

.whitepaper-hero .page-hero-text {
    max-width: 520px;
    margin-left: auto;
    text-align: left;
    align-items: flex-start;
}

@media (min-width: 1024px) {
    .whitepaper-hero .page-hero-text {
        max-width: 560px;
        flex: none;
    }
}

@media (min-width: 1280px) {
    .whitepaper-hero .page-hero-text {
        max-width: 600px;
    }
}

@media (max-width: 767px) {
    .whitepaper-hero {
        background-position: 20% center;
        min-height: auto;
        padding-top: var(--spacing-2xl);
        padding-bottom: var(--spacing-2xl);
    }

    .whitepaper-hero .page-hero-inner {
        flex-direction: column;
    }

    .whitepaper-hero .page-hero-text {
        max-width: 100%;
        text-align: center;
        align-items: center;
        background: linear-gradient(
            135deg,
            color-mix(in srgb, var(--color-primary) 88%, transparent),
            color-mix(in srgb, var(--color-primary) 92%, transparent)
        );
        border-radius: var(--radius-xl);
        padding: var(--spacing-lg);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .whitepaper-hero .page-hero-text {
        max-width: 480px;
    }
}

/* ============================================
   Hero Meta (Format, Umfang, Autor)
   ============================================ */
.whitepaper-hero-meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

.whitepaper-meta-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: color-mix(in srgb, var(--color-white) 85%, transparent);
}

.whitepaper-meta-icon {
    flex-shrink: 0;
    color: var(--color-secondary);
}

/* Hero CTA Button */
.whitepaper-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--color-secondary);
    color: var(--color-white);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    border-radius: 999px;
    min-height: var(--touch-target-min);
    transition: transform var(--transition-base),
                background-color var(--transition-base),
                box-shadow var(--transition-base);
}

.whitepaper-hero-cta:hover {
    transform: translateY(-2px);
    background-color: var(--color-hover);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-secondary) 30%, transparent);
}

.whitepaper-hero-cta:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* Hero Visual: Whitepaper Cover Card */
.whitepaper-hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.whitepaper-cover-card {
    position: relative;
    width: 280px;
    aspect-ratio: 210 / 297;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--color-primary) 90%, var(--color-secondary)),
        var(--color-primary));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    padding: var(--spacing-xl);
    justify-content: space-between;
}

.whitepaper-cover-tag {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-secondary) 40%, transparent);
    color: var(--color-secondary);
}

.whitepaper-cover-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    line-height: 1.25;
    margin: 0;
}

.whitepaper-cover-subtitle {
    font-size: var(--font-size-sm);
    color: color-mix(in srgb, var(--color-white) 60%, transparent);
    margin: 0;
    line-height: 1.5;
}

.whitepaper-cover-footer {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.whitepaper-cover-logo {
    height: 24px;
    width: auto;
    opacity: 0.6;
}

@media (min-width: 768px) {
    .whitepaper-hero-meta {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--spacing-md);
    }

    .whitepaper-cover-card {
        width: 320px;
        padding: var(--spacing-2xl);
    }

    .whitepaper-cover-title {
        font-size: var(--font-size-xl);
    }
}

@media (min-width: 1024px) {
    .whitepaper-cover-card {
        width: 360px;
    }
}

/* ============================================
   Section Titles (shared)
   ============================================ */
.whitepaper-section-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 var(--spacing-sm);
}

.whitepaper-section-lead {
    font-size: var(--font-size-base);
    line-height: 1.75;
    max-width: 70ch;
    margin: 0;
    opacity: 0.9;
}

@media (min-width: 768px) {
    .whitepaper-section-title {
        font-size: var(--font-size-2xl);
    }

    .whitepaper-section-lead {
        font-size: var(--font-size-lg);
    }
}

/* ============================================
   Table of Contents / What to Expect
   ============================================ */
.whitepaper-toc-section {
    padding: var(--spacing-3xl) 0;
}

.whitepaper-toc-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.whitepaper-toc-header .whitepaper-section-lead {
    margin-left: auto;
    margin-right: auto;
}

.whitepaper-toc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    counter-reset: toc;
}

.whitepaper-toc-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background-color: var(--color-white);
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 8%, transparent);
    transition: transform var(--transition-base),
                box-shadow var(--transition-base),
                border-color var(--transition-base);
}

.whitepaper-toc-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--color-primary) 8%, transparent);
    border-color: color-mix(in srgb, var(--color-secondary) 30%, transparent);
}

.whitepaper-toc-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--color-secondary), color-mix(in srgb, var(--color-secondary) 70%, var(--color-primary)));
    color: var(--color-white);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.whitepaper-toc-content {
    flex: 1;
}

.whitepaper-toc-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin: 0 0 var(--spacing-2xs);
    line-height: 1.3;
}

.whitepaper-toc-text {
    font-size: var(--font-size-sm);
    line-height: 1.7;
    color: color-mix(in srgb, var(--color-text-dark) 75%, transparent);
    margin: 0;
}

@media (min-width: 768px) {
    .whitepaper-toc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   Key Takeaways / Topics
   ============================================ */
.whitepaper-topics-section {
    padding: var(--spacing-3xl) 0;
}

.whitepaper-topics-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.whitepaper-topics-header .whitepaper-section-lead {
    margin-left: auto;
    margin-right: auto;
}

.whitepaper-topics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

.whitepaper-topic-card {
    position: relative;
    padding: var(--spacing-lg);
    background-color: var(--color-white);
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 8%, transparent);
    transition: transform var(--transition-base),
                box-shadow var(--transition-base);
}

.whitepaper-topic-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.whitepaper-topic-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background-color: color-mix(in srgb, var(--color-secondary) 12%, transparent);
    color: var(--color-secondary);
    margin-bottom: var(--spacing-sm);
}

.whitepaper-topic-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin: 0 0 var(--spacing-xs);
    line-height: 1.3;
}

.whitepaper-topic-text {
    font-size: var(--font-size-sm);
    line-height: 1.7;
    color: color-mix(in srgb, var(--color-text-dark) 80%, transparent);
    margin: 0;
}

@media (min-width: 768px) {
    .whitepaper-topics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   Stats / KPI Section
   ============================================ */
.whitepaper-stats-section {
    padding: var(--spacing-3xl) 0;
}

.whitepaper-stats-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.whitepaper-stats-header .whitepaper-section-lead {
    margin-left: auto;
    margin-right: auto;
}

.whitepaper-stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    max-width: 960px;
    margin: 0 auto;
}

.whitepaper-stat-card {
    text-align: center;
    padding: var(--spacing-xl);
    background-color: var(--color-white);
    border: 1px solid color-mix(in srgb, var(--color-primary) 8%, transparent);
    border-radius: 20px;
    transition: border-color var(--transition-base),
                transform var(--transition-base),
                box-shadow var(--transition-base);
}

.whitepaper-stat-card:hover {
    border-color: color-mix(in srgb, var(--color-secondary) 30%, transparent);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.whitepaper-stat-number {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary);
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

.whitepaper-stat-text {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: color-mix(in srgb, var(--color-text-dark) 75%, transparent);
    margin: 0;
}

@media (min-width: 768px) {
    .whitepaper-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   Framework / Orientierungsrahmen
   ============================================ */
.whitepaper-framework-section {
    padding: var(--spacing-3xl) 0;
}

.whitepaper-framework-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.whitepaper-framework-header .whitepaper-section-lead {
    margin-left: auto;
    margin-right: auto;
}

.whitepaper-framework-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    max-width: 900px;
    margin: 0 auto;
}

.whitepaper-framework-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background-color: color-mix(in srgb, var(--color-white) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-white) 10%, transparent);
    border-radius: 16px;
    transition: border-color var(--transition-base),
                transform var(--transition-base);
}

.whitepaper-framework-item:hover {
    border-color: color-mix(in srgb, var(--color-secondary) 30%, transparent);
    transform: translateY(-2px);
}

.whitepaper-framework-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background-color: color-mix(in srgb, var(--color-secondary) 15%, transparent);
    color: var(--color-secondary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
}

.whitepaper-framework-content {
    flex: 1;
}

.whitepaper-framework-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    margin: 0 0 var(--spacing-2xs);
    line-height: 1.3;
}

.whitepaper-framework-text {
    font-size: var(--font-size-sm);
    line-height: 1.7;
    color: color-mix(in srgb, var(--color-white) 75%, transparent);
    margin: 0;
}

@media (min-width: 768px) {
    .whitepaper-framework-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   Approach / Gameplan Steps
   ============================================ */
.whitepaper-approach-section {
    padding: var(--spacing-3xl) 0;
}

.whitepaper-approach-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.whitepaper-approach-header .whitepaper-section-lead {
    margin-left: auto;
    margin-right: auto;
}

.whitepaper-approach-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    max-width: 800px;
    margin: 0 auto;
}

.whitepaper-step {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background-color: var(--color-white);
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.whitepaper-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--color-secondary) 12%, transparent);
    color: var(--color-secondary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.whitepaper-step-content {
    flex: 1;
}

.whitepaper-step-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin: 0 0 var(--spacing-2xs);
    line-height: 1.3;
}

.whitepaper-step-text {
    font-size: var(--font-size-sm);
    line-height: 1.7;
    color: color-mix(in srgb, var(--color-text-dark) 80%, transparent);
    margin: 0;
}

/* ============================================
   Author / CTA Section (Service-Page Style)
   ============================================ */
.whitepaper-cta-section {
    width: 100%;
    padding: calc(var(--spacing-3xl) * 1.5) 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary) 80%, color-mix(in srgb, var(--color-secondary) 20%, var(--color-primary)) 100%);
}

@media (min-width: 768px) {
    .whitepaper-cta-section {
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary) 70%, color-mix(in srgb, var(--color-secondary) 50%, var(--color-primary)) 100%);
    }
}

.whitepaper-cta-container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
}

@media (min-width: 768px) {
    .whitepaper-cta-container {
        padding-left: var(--container-padding-tablet);
        padding-right: var(--container-padding-tablet);
    }
}

@media (min-width: 1024px) {
    .whitepaper-cta-container {
        padding-left: var(--container-padding-desktop);
        padding-right: var(--container-padding-desktop);
    }
}

.whitepaper-cta-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

@media (min-width: 1024px) {
    .whitepaper-cta-wrapper {
        flex-direction: row;
        gap: var(--spacing-3xl);
        align-items: center;
    }
}

/* Left Column - Person Image */
.whitepaper-cta-person-column {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
}

@media (min-width: 1024px) {
    .whitepaper-cta-person-column {
        width: 350px;
    }
}

.whitepaper-cta-person-image {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-blue-text) 25%, transparent);
}

@media (min-width: 1024px) {
    .whitepaper-cta-person-image {
        max-width: 100%;
        aspect-ratio: 3 / 4;
    }
}

.whitepaper-cta-person-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Right Column - Text Content */
.whitepaper-cta-text-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.whitepaper-cta-quote {
    font-size: var(--font-size-lg);
    font-style: italic;
    font-weight: var(--font-weight-normal);
    color: var(--color-text);
    line-height: 1.6;
    margin: 0;
}

@media (min-width: 768px) {
    .whitepaper-cta-quote {
        font-size: var(--font-size-xl);
    }
}

.whitepaper-cta-attribution {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-sm);
    font-style: italic;
    color: color-mix(in srgb, var(--color-text) 88%, transparent);
}

.whitepaper-cta-bio {
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: 1.7;
    margin: 0;
    opacity: 0.85;
}

@media (min-width: 768px) {
    .whitepaper-cta-bio {
        font-size: var(--font-size-lg);
    }
}

.whitepaper-author-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--color-secondary);
    color: var(--color-white);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    border-radius: 999px;
    min-height: var(--touch-target-min);
    transition: transform var(--transition-base),
                background-color var(--transition-base),
                box-shadow var(--transition-base);
}

.whitepaper-author-cta:hover {
    transform: translateY(-2px);
    background-color: var(--color-hover);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-secondary) 30%, transparent);
}

.whitepaper-author-cta:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* ============================================
   Download / Registration Section
   ============================================ */
.whitepaper-download-section {
    padding: var(--spacing-3xl) 0;
}

.whitepaper-download-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.whitepaper-download-header .whitepaper-section-lead {
    margin-left: auto;
    margin-right: auto;
}

.whitepaper-download-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
}

.whitepaper-download-form {
    background-color: var(--color-white);
    border-radius: 20px;
    padding: var(--spacing-lg);
    border: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
}

/* Reuse webinar form classes for consistent styling */
.whitepaper-custom-form label {
    display: block;
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-2xs);
    line-height: 1.5;
}

.whitepaper-form-required {
    color: var(--color-highlight);
    font-weight: var(--font-weight-bold);
}

.whitepaper-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

.whitepaper-form-field {
    margin-bottom: var(--spacing-md);
}

.whitepaper-custom-form input[type="text"],
.whitepaper-custom-form input[type="email"],
.whitepaper-custom-form select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.6;
    color: var(--color-text-dark);
    background-color: var(--color-white);
    border: 1px solid color-mix(in srgb, var(--color-blue) 20%, transparent);
    border-radius: 12px;
    min-height: var(--touch-target-min);
    transition: border-color var(--transition-base),
                box-shadow var(--transition-base);
    appearance: none;
    -webkit-appearance: none;
}

.whitepaper-custom-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23001833' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
    cursor: pointer;
}

.whitepaper-custom-form select:invalid,
.whitepaper-custom-form select option[value=""][disabled] {
    color: color-mix(in srgb, var(--color-text-dark) 40%, transparent);
}

.whitepaper-custom-form input[type="text"]::placeholder,
.whitepaper-custom-form input[type="email"]::placeholder {
    color: color-mix(in srgb, var(--color-text-dark) 40%, transparent);
    font-family: var(--font-family-base);
}

.whitepaper-custom-form input[type="text"]:hover:not(:focus),
.whitepaper-custom-form input[type="email"]:hover:not(:focus),
.whitepaper-custom-form select:hover:not(:focus) {
    border-color: color-mix(in srgb, var(--color-blue) 40%, transparent);
}

.whitepaper-custom-form input[type="text"]:focus,
.whitepaper-custom-form input[type="email"]:focus,
.whitepaper-custom-form select:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-blue) 12%, transparent);
}

.whitepaper-form-field--error input,
.whitepaper-form-field--error input[type="text"],
.whitepaper-form-field--error input[type="email"],
.whitepaper-form-field--error select {
    border-color: var(--color-highlight);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-highlight) 12%, transparent);
}

.whitepaper-form-error {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xs);
    color: var(--color-highlight);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

/* GDPR Consent section */
.whitepaper-form-consent {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-md);
    border-top: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.whitepaper-form-consent-hint {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xs);
    color: color-mix(in srgb, var(--color-text-dark) 60%, transparent);
    line-height: 1.5;
    margin: 0 0 var(--spacing-sm);
}

.whitepaper-form-consent-item {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.whitepaper-form-consent-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--color-blue);
}

.whitepaper-form-consent-item label {
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-dark);
    line-height: 1.6;
    cursor: pointer;
}

.whitepaper-form-consent-item .whitepaper-form-error {
    grid-column: 1 / -1;
}

.whitepaper-form-consent-item a {
    color: var(--color-blue);
    text-decoration: underline;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-base);
}

.whitepaper-form-consent-item a:hover {
    color: var(--color-secondary);
}

.whitepaper-form-consent-footer {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xs);
    line-height: 1.7;
    color: color-mix(in srgb, var(--color-text-dark) 60%, transparent);
    margin: var(--spacing-sm) 0 0;
    padding-top: var(--spacing-sm);
    border-top: 1px solid color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.whitepaper-form-consent-footer a {
    color: var(--color-blue);
    text-decoration: underline;
}

.whitepaper-form-consent-footer a:hover {
    color: var(--color-secondary);
}

.whitepaper-form-submit {
    margin-top: var(--spacing-lg);
}

/* Submit button */
.whitepaper-form-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--color-secondary);
    color: var(--color-white);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    border: none;
    border-radius: 999px;
    min-height: var(--touch-target-min);
    cursor: pointer;
    transition: transform var(--transition-base),
                background-color var(--transition-base),
                box-shadow var(--transition-base);
}

.whitepaper-form-button:hover:not(:disabled) {
    transform: translateY(-2px);
    background-color: var(--color-hover);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-secondary) 30%, transparent);
}

.whitepaper-form-button:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.whitepaper-form-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.whitepaper-form-button-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Messages (success / error) */
.whitepaper-form-message {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    border-radius: 12px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.6;
    text-align: center;
}

.whitepaper-form-message--success {
    background-color: color-mix(in srgb, var(--color-secondary) 10%, transparent);
    border: 2px solid var(--color-secondary);
    color: var(--color-secondary);
}

.whitepaper-form-message--error {
    background-color: color-mix(in srgb, var(--color-highlight) 10%, transparent);
    border: 2px solid var(--color-highlight);
    color: var(--color-highlight);
}

/* Info sidebar */
.whitepaper-download-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.whitepaper-download-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
    background-color: color-mix(in srgb, var(--color-white) 50%, transparent);
}

.whitepaper-detail-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-dark);
    line-height: 1.6;
}

.whitepaper-detail-icon {
    flex-shrink: 0;
    color: var(--color-secondary);
}

.whitepaper-download-benefits {
    padding: var(--spacing-lg);
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
    background-color: color-mix(in srgb, var(--color-white) 50%, transparent);
}

.whitepaper-download-benefits h3 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin: 0 0 var(--spacing-sm);
}

.whitepaper-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.whitepaper-benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: color-mix(in srgb, var(--color-text-dark) 80%, transparent);
}

.whitepaper-benefits-list li::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='10' fill='%2300b4d8' fill-opacity='0.12'/%3E%3Cpath d='M6 10l3 3 5-6' stroke='%2300b4d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

@media (min-width: 768px) {
    .whitepaper-download-inner {
        grid-template-columns: 3fr 2fr;
        align-items: start;
    }

    .whitepaper-form-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .whitepaper-download-inner {
        grid-template-columns: 2fr 1fr;
        align-items: start;
    }

    .whitepaper-download-form {
        padding: var(--spacing-xl);
    }
}

/* ============================================
   Target Audience Section
   ============================================ */
.whitepaper-audience-section {
    padding: var(--spacing-3xl) 0;
}

.whitepaper-audience-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.whitepaper-audience-header .whitepaper-section-lead {
    margin-left: auto;
    margin-right: auto;
}

.whitepaper-audience-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    max-width: 640px;
    margin: 0 auto;
}

.whitepaper-audience-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: color-mix(in srgb, var(--color-white) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-white) 10%, transparent);
    border-radius: 16px;
    transition: border-color var(--transition-base);
}

.whitepaper-audience-item:hover {
    border-color: color-mix(in srgb, var(--color-secondary) 30%, transparent);
}

.whitepaper-audience-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background-color: color-mix(in srgb, var(--color-secondary) 15%, transparent);
    color: var(--color-secondary);
}

.whitepaper-audience-text {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    margin: 0;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .whitepaper-audience-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 800px;
    }
}

/* ============================================
   Mobile Optimizations
   ============================================ */
@media (max-width: 767px) {
    /* Reduce section padding on mobile */
    .whitepaper-stats-section,
    .whitepaper-toc-section,
    .whitepaper-topics-section,
    .whitepaper-framework-section,
    .whitepaper-approach-section,
    .whitepaper-audience-section,
    .whitepaper-download-section {
        padding: var(--spacing-2xl) 0;
    }

    .whitepaper-cta-section {
        padding: var(--spacing-2xl) 0;
    }

    /* Hero CTA: full-width on mobile */
    .whitepaper-hero-cta {
        width: 100%;
        text-align: center;
    }

    /* Section headers: less bottom spacing */
    .whitepaper-stats-header,
    .whitepaper-toc-header,
    .whitepaper-topics-header,
    .whitepaper-framework-header,
    .whitepaper-approach-header,
    .whitepaper-audience-header,
    .whitepaper-download-header {
        margin-bottom: var(--spacing-lg);
    }

    .whitepaper-toc-item {
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
    }

    .whitepaper-toc-number {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: var(--font-size-base);
        border-radius: 12px;
    }

    /* Topic cards: tighter padding */
    .whitepaper-topic-card {
        padding: var(--spacing-md);
    }

    .whitepaper-topic-icon {
        width: 48px;
        height: 48px;
    }

    /* Framework items: tighter padding */
    .whitepaper-framework-item {
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
    }

    .whitepaper-framework-number {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: var(--font-size-sm);
    }

    /* Steps: tighter padding */
    .whitepaper-step {
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
    }

    .whitepaper-step-number {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: var(--font-size-base);
    }

    /* CTA section: center text on mobile */
    .whitepaper-cta-text-column {
        text-align: center;
        align-items: center;
    }

    .whitepaper-author-cta {
        align-self: center;
        width: 100%;
    }

    .whitepaper-cta-quote {
        font-size: var(--font-size-base);
    }

    /* Download form: tighter padding */
    .whitepaper-download-form {
        padding: var(--spacing-md);
    }

    /* Download info: reorder - show benefits before details */
    .whitepaper-download-info {
        gap: var(--spacing-md);
    }

    /* Audience items: tighter */
    .whitepaper-audience-item {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .whitepaper-audience-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 10px;
    }

    .whitepaper-audience-text {
        font-size: var(--font-size-sm);
    }
}