.component-unified-style {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--db-color-bg-page);

    .dashboard-main {
        width: 100%;
        max-width: 1440px;
        display: flex;
        flex-direction: column;
        gap: 36px;
        padding: var(--site-padding-vertical) 0;
    }

    section {
        padding: 0 var(--site-padding-horizontal);
    }

    .component-carousel {
        padding: 0;

        .carousel-header {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;

            padding-left: var(--site-padding-horizontal);
            padding-right: var(--site-padding-horizontal);

            h2 {
                margin: 0;
            }
        }

        .carousel-container {
            padding: 16px var(--site-padding-horizontal);
            scroll-padding: 0 var(--site-padding-horizontal);
        }
    }

    @media (width <= 1280) {
        .component-carousel {
            .carousel-container {
                width: 100vw;
            }
        }
    }

    .section-title {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--db-color-navy);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 16px;
        font-family: 'IBM Plex Sans', sans-serif;
    }

    .section-title span {
        color: var(--db-color-amber-accent);
    }

    /* SECTION SUBTITLES / HEADINGS */
    .section-header-block {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 20px;
    }

    .section-header-block .section-title {
        margin-bottom: 0;
    }

    .section-subtitle-text {
        font-size: 1.0rem;
        color: var(--db-color-text-muted);
        line-height: 1.45;
    }

    /* CALLOUT INTRO BANNER */
    .sample-intro-banner {
        display: flex;
        align-items: center;
        gap: 12px;
        background-color: #ffffff;
        border: 1px solid var(--db-color-card-border);
        border-radius: var(--db-radius-md);
        padding: 14px 20px;
        margin-bottom: 20px;
        color: var(--db-color-text-muted);
        font-size: 1.0rem;
        box-shadow: var(--db-shadow-sm);
    }

    .sample-intro-banner svg {
        width: 20px;
        height: 20px;
        stroke: var(--db-color-purple);
        stroke-width: 2;
        fill: none;
        flex-shrink: 0;
    }

    .pet-highlight {
        color: var(--db-color-navy);
        font-weight: 700;
    }

    .grid-2col {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .grid-3col {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    @media (max-width: 900px) {
        .grid-3col {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 768px) {
        .grid-2col {
            grid-template-columns: 1fr;
        }
    }

    /* WIDGET CARDS */
    .widget-card {
        background-color: var(--db-color-card-bg);
        border: 1px solid var(--db-color-card-border);
        border-radius: var(--db-radius-md);
        padding: 24px;
        display: flex;
        align-items: center;
        gap: 20px;
        box-shadow: var(--db-shadow-sm);
        transition: var(--db-transition-base);
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        position: relative;
    }

    .widget-card:hover {
        box-shadow: var(--db-shadow-hover);
        border-color: #CBD5E1;
    }

    .widget-card:active {
        background-color: #F8FAFC;
    }

    /* ICON BADGES */
    .icon-badge {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: var(--db-transition-base);
    }

    .icon-badge svg {
        width: 26px;
        height: 26px;
        stroke-width: 2;
        stroke: currentColor;
        fill: none;
    }

    .badge-green  { background-color: #ECFDF5; color: #10B981; }
    .badge-amber  { background-color: #FFFBEB; color: #F59E0B; }
    .badge-purple { background-color: #F5F3FF; color: #8B5CF6; }
    .badge-blue   { background-color: #EFF6FF; color: #3B82F6; }
    .badge-indigo { background-color: #EEF2FF; color: #6366F1; }
    .badge-rose   { background-color: #FFF1F2; color: #F43F5E; }
    .badge-teal   { background-color: #F0FDFA; color: #14B8A6; }
    .badge-orange { background-color: #FFF7ED; color: #EA580C; }
    .badge-cyan   { background-color: #ECFEFF; color: #06B6D4; }

    .widget-body {
        flex-grow: 1;
        padding-right: 8px;
    }

    .widget-badge-tag {
        display: block;
        font-size: 0.9rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--db-color-purple);
        margin-bottom: 2px;
    }

    .widget-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--db-color-navy);
        line-height: 1.3;
    }

    .widget-desc {
        font-size: 1.0rem;
        color: var(--db-color-text-muted);
        line-height: 1.45;
        margin-top: 4px;
    }

    .arrow-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: #F8FAFC;
        border: 1px solid #E2E8F0;
        color: var(--db-color-navy);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: var(--db-transition-base);
        align-self: center;
    }

    .arrow-btn svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        stroke-width: 2.5;
        fill: none;
    }

    .widget-card:hover .arrow-btn {
        background-color: var(--db-color-navy);
        color: #ffffff;
        border-color: var(--db-color-navy);
    }

    /* FEATURE BANNER CARDS */
    .banner-card {
        background-color: #ffffff;
        border: 1px solid var(--db-color-card-border);
        border-radius: var(--db-radius-lg);
        padding: 32px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        box-shadow: var(--db-shadow-sm);
    }

    .banner-card-purple {
        background: linear-gradient(135deg, #F8FAFC 0%, #F5F3FF 100%);
        border: 1px solid #E9E3F5;
    }

    .banner-card-soft {
        background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
        border: 1px solid #Dbeae5;
    }

    .banner-text-content {
        flex: 1 1 320px;
        min-width: 0;
    }

    .banner-actions {
        flex: 1 1 320px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        flex-wrap: wrap;
    }

    .banner-title {
        font-size: 1.35rem;
        font-weight: 800;
        color: var(--db-color-navy);
        margin-bottom: 6px;
    }

    .banner-desc {
        font-size: 1.0rem;
        color: var(--db-color-text-muted);
        line-height: 1.5;
    }

    .banner-action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 24px;
        border-radius: 12px;
        background-color: var(--db-color-navy);
        color: #ffffff;
        font-weight: 700;
        font-size: 0.92rem;
        text-decoration: none;
        transition: var(--db-transition-base);
        flex-shrink: 0;
        border: none;
        cursor: pointer;
        box-shadow: var(--db-shadow-sm);
    }

    .banner-action-btn:hover {
        box-shadow: 0 4px 12px rgba(26, 35, 64, 0.14);
        background-color: #263359;
    }

    .banner-action-btn:active {
        transform: scale(0.98);
    }

    .banner-email-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: var(--db-color-purple);
        font-weight: 700;
        text-decoration: none;
        background-color: #ffffff;
        border: 1px solid #E9E3F5;
        padding: 10px 18px;
        border-radius: 12px;
        transition: var(--db-transition-base);
        box-shadow: var(--db-shadow-sm);
    }

    .banner-email-link:hover {
        background-color: var(--db-color-purple);
        color: #ffffff;
        border-color: var(--db-color-purple);
        box-shadow: 0 4px 12px rgba(124, 105, 172, 0.15);
    }

    .banner-email-link:active {
        transform: scale(0.98);
    }

    @media (max-width: 900px) {
        .banner-actions {
            justify-content: flex-start;
        }
    }

    @media (max-width: 640px) {
        .banner-actions {
            display: grid;
            grid-template-columns: 1fr;
            width: 100%;
            gap: 10px;
        }

        .banner-action-btn,
        .banner-email-link {
            width: 100%;
        }
    }

    /* VIDEO GUIDES & FRAMED DISPLAY PREVIEW CARDS */
    .video-carousel-grid {
        gap: 20px;
    }

    @media (max-width: 900px) {
        .video-carousel-grid {
            grid-template-columns: 1fr;
        }
    }

    .video-card-framed,
    .display-card-framed {
        background-color: #ffffff;
        border: 1px solid var(--db-color-card-border);
        border-radius: var(--db-radius-lg);
        padding: 16px;
        box-shadow: var(--db-shadow-sm);
        display: flex;
        flex-direction: column;
        transition: var(--db-transition-base);
        text-decoration: none;
        color: inherit;
    }

    .video-card-framed:hover {
        box-shadow: var(--db-shadow-hover);
        border-color: #CBD5E1;
    }

    .video-thumb-frame-rounded,
    .display-thumb-frame-rounded {
        position: relative;
        width: 100%;
        aspect-ratio: 16/9;
        background-color: var(--db-color-navy-dark);
        border-radius: 12px;
        overflow: hidden;
    }

    .video-thumb-frame-rounded img,
    .display-thumb-frame-rounded img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 0.4s ease;
    }

    .video-thumb-frame-rounded::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(18, 24, 45, 0.45) 0%, transparent 60%);
        pointer-events: none;
    }

    .video-card-framed:hover .video-thumb-frame-rounded img {
        transform: scale(1.03);
    }

    .video-time-badge {
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 2;
        background: rgba(18, 24, 45, 0.85);
        color: #ffffff;
        font-size: 0.72rem;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 6px;
        backdrop-filter: blur(4px);
    }

    .video-play-center {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        transform: translate(-50%, -50%);
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.95);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--db-color-navy);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: var(--db-transition-base);
    }

    .video-play-center svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
        margin-left: 3px;
    }

    .video-card-framed:hover .video-play-center {
        background: var(--db-color-purple);
        color: #ffffff;
        box-shadow: 0 4px 14px rgba(124, 105, 172, 0.3);
    }

    .video-card-info,
    .display-card-info {
        padding: 16px 4px 4px;
        display: flex;
        flex-direction: column;
    }

    .video-card-h3 {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--db-color-navy);
        line-height: 1.3;
    }

    .video-card-p {
        font-size: 1.0rem;
        color: var(--db-color-text-muted);
        line-height: 1.45;
        margin-top: 4px;
    }

    /* FORM CARD CONTAINER */
    .form-card {
        background-color: var(--db-color-card-bg);
        border: 1px solid var(--db-color-card-border);
        border-radius: var(--db-radius-lg);
        padding: 32px;
        box-shadow: var(--db-shadow-sm);
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .max-limit-banner {
        background: linear-gradient(135deg, #F8FAFC 0%, #F5F3FF 100%);
        border: 1px solid #E9E3F5;
        color: var(--db-color-navy);
        font-size: 0.88rem;
        font-weight: 700;
        padding: 12px 16px;
        border-radius: 10px;
    }

    .form-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .full-width {
        grid-column: 1 / -1;
    }

    @media (max-width: 768px) {
        .form-grid, .grid-3col {
            grid-template-columns: 1fr;
        }
    }

    /* FLOATING LABEL SYSTEM */
    .floating-group {
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .floating-input,
    .floating-select,
    .floating-textarea {
        width: 100%;
        padding: 20px 14px 6px 14px;
        border-radius: 10px;
        border: 1px solid var(--db-color-card-border);
        background-color: #F8FAFC;
        font-family: inherit;
        font-size: 0.95rem;
        color: var(--db-color-text-main);
        outline: none;
        transition: var(--db-transition-base);
        appearance: none;
        -webkit-appearance: none;
    }

    .floating-textarea {
        resize: vertical;
        min-height: 90px;
    }

    .floating-select-wrapper {
        position: relative;
    }

    .floating-select-wrapper::after {
        content: '';
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        height: 6px;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%202C3545' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;
    }

    .floating-input:focus,
    .floating-select:focus,
    .floating-textarea:focus {
        background-color: #ffffff;
        border-color: var(--db-color-purple);
        box-shadow: 0 0 0 3px var(--db-color-purple-tint);
    }

    .floating-label {
        position: absolute;
        left: 14px;
        top: 14px;
        font-size: 0.92rem;
        color: var(--db-color-text-muted);
        pointer-events: none;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: left top;
    }

    .floating-label .req {
        color: var(--db-color-amber-accent);
        font-weight: 700;
    }

    .floating-input:focus ~ .floating-label,
    .floating-input:not(:placeholder-shown) ~ .floating-label,
    .floating-textarea:focus ~ .floating-label,
    .floating-textarea:not(:placeholder-shown) ~ .floating-label,
    .floating-select:focus ~ .floating-label,
    .floating-select:not(:invalid) ~ .floating-label {
        top: 5px;
        font-size: 0.70rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--db-color-navy);
    }

    .input-hint {
        font-size: 0.78rem;
        color: var(--db-color-text-muted);
        margin-top: 4px;
        padding-left: 2px;
    }

    .form-actions-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        border-top: 1px solid var(--db-color-card-border);
        padding-top: 24px;
    }

    .form-footer-note {
        font-size: 0.82rem;
        color: var(--db-color-text-muted);
    }

    /* GETTING STARTED TYPOGRAPHY */
    .tool-card-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--db-color-navy);
        line-height: 1.3;
    }

    .tool-card-desc {
        font-size: 1.0rem;
        color: var(--db-color-text-muted);
        line-height: 1.45;
        margin-top: 4px;
    }

    .copy-box {
        background-color: #F8FAFC;
        border: 1px solid var(--db-color-card-border);
        border-radius: 12px;
        padding: 12px 16px;
        font-family: inherit;
        font-size: 0.95rem;
        color: var(--db-color-navy);
        word-break: break-all;
        font-weight: 600;
        display: flex;
        align-items: center;
        min-height: 48px;
    }

    .copy-box.promo-code-text {
        font-size: 1.15rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .btn-purple-action {
        padding: 12px 20px;
        border-radius: 10px;
        background-color: var(--db-color-purple);
        color: #ffffff;
        font-size: 0.92rem;
        font-weight: 700;
        border: none;
        cursor: pointer;
        transition: var(--db-transition-base);
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        box-shadow: 0 2px 6px rgba(124, 105, 172, 0.12);
    }

    .btn-purple-action:hover {
        background-color: var(--db-color-purple-hover);
        box-shadow: 0 4px 12px rgba(124, 105, 172, 0.25);
    }

    .btn-purple-action:active {
        transform: scale(0.98);
    }

    /* 2-COLUMN SPLIT GRID STYLES */
    .split-tools-grid {
        display: grid;
        grid-template-columns: 1.8fr 1fr;
        gap: 20px;
    }

    .stacked-left-col {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .split-tool-card {
        background-color: var(--db-color-card-bg);
        border: 1px solid var(--db-color-card-border);
        border-radius: var(--db-radius-lg);
        padding: 22px 24px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        box-shadow: var(--db-shadow-sm);
    }

    .split-action-row {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .split-action-row .copy-box {
        flex: 1;
    }

    .qr-card-split {
        background-color: var(--db-color-card-bg);
        border: 1px solid var(--db-color-card-border);
        border-radius: var(--db-radius-lg);
        padding: 24px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 14px;
        box-shadow: var(--db-shadow-sm);
    }

    .qr-card-split .qr-container {
        background-color: #F8FAFC;
        border: 1px solid var(--db-color-card-border);
        border-radius: 12px;
        padding: 12px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto 0;
    }

    .qr-card-split .qr-container img {
        width: 90px;
        height: 90px;
    }

    @media (max-width: 840px) {
        .split-tools-grid {
            grid-template-columns: 1fr;
        }
    }

    /* NEXT STEPS CARDS */
    .step-card {
        background-color: var(--db-color-card-bg);
        border: 1px solid var(--db-color-card-border);
        border-radius: var(--db-radius-lg);
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        box-shadow: var(--db-shadow-sm);
    }

    .step-header {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .step-number-badge {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background-color: #F1F3F9;
        color: var(--db-color-navy);
        font-size: 0.95rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .step-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--db-color-navy);
        line-height: 1.3;
    }

    .step-desc {
        font-size: 1.0rem;
        color: var(--db-color-text-muted);
        line-height: 1.45;
    }

    .step-banner-note {
        background-color: #FFFBEB;
        border: 1px solid #FDE68A;
        border-radius: 10px;
        padding: 12px 14px;
        font-size: 1.0rem;
        color: var(--db-color-text-main);
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .step-banner-note strong {
        color: var(--db-color-navy);
    }

    .btn-step-action {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 16px;
        border-radius: 8px;
        background-color: #F8FAFC;
        border: 1px solid #E2E8F0;
        color: var(--db-color-navy);
        font-size: 0.92rem;
        font-weight: 700;
        text-decoration: none;
        width: fit-content;
        transition: var(--db-transition-base);
        margin-top: auto;
        box-shadow: 0 1px 3px rgba(26, 35, 64, 0.04);
    }

    .btn-step-action:hover {
        background-color: #ffffff;
        border-color: var(--db-color-purple);
        color: var(--db-color-purple);
        box-shadow: 0 4px 12px rgba(124, 105, 172, 0.15);
    }

    .btn-step-action svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        stroke-width: 2.5;
        fill: none;
    }

    /* "ABOUT THE TEST" INTEGRATED STYLES */
    .content-box {
        background-color: var(--db-color-card-bg);
        border: 1px solid var(--db-color-card-border);
        border-radius: var(--db-radius-lg);
        padding: 36px;
        box-shadow: var(--db-shadow-sm);
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .hero-split-grid {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 32px;
        align-items: center;
    }

    @media (max-width: 768px) {
        .hero-split-grid {
            grid-template-columns: 1fr;
        }
    }

    .hero-img-frame {
        width: 100%;
        border-radius: var(--db-radius-md);
        overflow: hidden;
        background-color: var(--db-color-navy-dark);
    }

    .hero-img-frame img {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .hero-text-content {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .hero-desc {
        font-size: 1.0rem;
        color: var(--db-color-text-muted);
        line-height: 1.5;
    }

    .info-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .info-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 1.0rem;
        color: var(--db-color-text-muted);
    }

    .info-item strong {
        color: var(--db-color-navy);
    }

    .info-item svg {
        width: 20px;
        height: 20px;
        stroke: var(--db-color-purple);
        stroke-width: 2.5;
        fill: none;
        flex-shrink: 0;
        margin-top: 3px;
    }

    /* MOBILE OPTIMIZATION (< 640px) */
    @media (max-width: 640px) {
        .dashboard-main {
            gap: 24px;
        }

        .widget-card {
            padding: 14px 16px;
            gap: 12px;
        }

        .icon-badge {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            align-self: flex-start;
        }

        .icon-badge svg {
            width: 20px;
            height: 20px;
        }

        .widget-title,
        .step-title,
        .tool-card-title {
            font-size: 1.05rem;
        }

        .widget-desc,
        .step-desc,
        .tool-card-desc {
            font-size: 0.92rem;
            line-height: 1.4;
        }

        .arrow-btn {
            width: 28px;
            height: 28px;
            align-self: center;
        }

        .arrow-btn svg {
            width: 14px;
            height: 14px;
        }

        .banner-card,
        .sample-intro-banner {
            padding: 16px;
            gap: 12px;
        }

        .sample-intro-banner svg {
            align-self: flex-start;
            margin-top: 2px;
        }

        .banner-title {
            font-size: 1.15rem;
        }

        .banner-desc {
            font-size: 0.95rem;
        }
    }

    .guideline-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .guideline-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 1.0rem;
        color: var(--db-color-text-muted);
    }

    .guideline-item strong {
        color: var(--db-color-navy);
    }

    .guideline-item svg {
        width: 20px;
        height: 20px;
        stroke-width: 2.5;
        fill: none;
        flex-shrink: 0;
        margin-top: 3px;
    }

    .guideline-item.arrow svg { stroke: var(--db-color-amber-accent); }
    .guideline-item.cross svg { stroke: #EF4444; }
    .guideline-item.check svg { stroke: #10B981; }

    .pitch-quote-box {
        background-color: var(--db-color-card-bg);
        border: 1px solid var(--db-color-card-border);
        border-radius: var(--db-radius-lg);
        padding: 32px;
        box-shadow: var(--db-shadow-sm);
        display: flex;
        flex-direction: column;
        gap: 16px;
        position: relative;
    }

    .pitch-quote-box p {
        font-size: 1.05rem;
        color: var(--db-color-text-main);
        line-height: 1.6;
    }

    .pitch-quote-box svg {
        width: 28px;
        height: 28px;
        fill: var(--db-color-purple);
        opacity: 0.35;
        margin-bottom: -8px;
    }


    .faq-widget-card {
        background-color: var(--db-color-card-bg);
        border: 1px solid var(--db-color-card-border);
        border-radius: var(--db-radius-md);
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        box-shadow: var(--db-shadow-sm);
        transition: var(--db-transition-base);
        position: relative;
    }

    .faq-widget-card:hover {
        box-shadow: var(--db-shadow-hover);
        border-color: #CBD5E1;
    }

    .faq-card-header {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .faq-question-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--db-color-navy);
        line-height: 1.3;
    }

    .faq-answer-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
        font-size: 1.0rem;
        color: var(--db-color-text-muted);
        line-height: 1.45;
        padding-left: 68px;
    }

    @media (max-width: 640px) {
        .faq-answer-body {
            padding-left: 0;
        }
    }

    .faq-answer-body p {
        font-size: 1.0rem;
        line-height: 1.45;
        color: var(--db-color-text-main);
    }

    .faq-list-items {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 4px;
    }

    .faq-list-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        color: var(--db-color-navy);
    }

    .faq-list-item svg {
        width: 18px;
        height: 18px;
        fill: var(--db-color-amber-accent);
        flex-shrink: 0;
    }




    .quick-fact-widget {
        background-color: var(--db-color-card-bg);
        border: 1px solid var(--db-color-card-border);
        border-radius: var(--db-radius-md);
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        box-shadow: var(--db-shadow-sm);
    }

    .fact-card-header {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .fact-card-title {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--db-color-navy);
        line-height: 1.3;
    }

    .fact-items-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-left: 4px;
    }

    .fact-item-row {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 0.98rem;
        color: var(--db-color-text-main);
        line-height: 1.45;
    }

    .fact-bullet-dot {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background-color: #F1F3F9;
        color: var(--db-color-purple);
        font-size: 0.8rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .fact-icon-bullet {
        width: 20px;
        height: 20px;
        stroke: var(--db-color-purple);
        stroke-width: 2.5;
        fill: none;
        flex-shrink: 0;
        margin-top: 2px;
    }
}