.detail-page {
    background: #fff;
    color: #0b1641;
    padding: 1.5rem 0 4rem;
}

.detail-page a {
    color: #0d6efd;
}

.detail-breadcrumb {
    font-size: .85rem;
    margin-bottom: 2rem;
}

.detail-breadcrumb a {
    text-decoration: none;
}

.detail-hero {
    padding-bottom: 1.75rem;
    border-bottom: 1px solid #e4edf6;
}

.detail-eyebrow {
    color: #0d6efd;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.detail-title {
    font-size: clamp(2.6rem, 4vw, 3.6rem);
    font-weight: 750;
    letter-spacing: -.04em;
    line-height: 1.06;
    margin: .4rem 0;
}

.detail-lead {
    color: #4e628d;
    font-size: 1.4rem;
    line-height: 1.3;
}

.detail-copy {
    color: #50638c;
    line-height: 1.6;
}

.detail-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.detail-product-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.detail-product-logo {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1767d5;
    color: #fff;
    border-radius: 10px;
    font-size: 2rem;
    font-weight: 700;
}

.detail-product-logo-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
}

.detail-product-heading .detail-title {
    margin: 0;
}

.detail-share {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
    border: 1px solid #dce6f2;
    border-radius: 6px;
    padding: .55rem .8rem;
    background: #fff;
    color: #0d6efd;
    font-size: .875rem;
    font-weight: 600;
}

.detail-share:hover {
    background: #f1f8fe;
    border-color: #b8d4ff;
}

.detail-share svg {
    width: 17px;
    height: 17px;
}

.detail-share-status {
    color: #52658e;
    font-size: .8rem;
    margin-top: .35rem;
    text-align: right;
}

.detail-share-copy-field {
    position: fixed;
    opacity: 0;
}

.detail-section {
    margin-top: 1.8rem;
}

.detail-section-header {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    margin-bottom: 1rem;
}

.detail-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: #e8f5ff;
    color: #0d6efd;
    font-weight: 700;
    font-size: 1.2rem;
}

.detail-section-title {
    font-size: 1.5rem;
    font-weight: 750;
    letter-spacing: -.025em;
    margin: 0 0 .2rem;
}

.detail-section-subtitle {
    color: #52658e;
    margin: 0;
}

.detail-section-body {
    margin-left: 58px;
}

.detail-feature {
    height: 100%;
    padding: 0 1rem;
    border-right: 1px solid #e3eaf3;
}

.detail-feature:last-child {
    border-right: 0;
}

.detail-feature-icon {
    font-size: 1.7rem;
    color: #0d6efd;
    margin-bottom: .5rem;
}

.detail-feature.problem .detail-feature-icon {
    color: #0d6efd;
}

.detail-feature h3 {
    font-size: .95rem;
    line-height: 1.35;
    font-weight: 700;
    margin-bottom: .5rem;
}

.detail-feature p {
    color: #52658e;
    font-size: .9rem;
    line-height: 1.5;
    margin-bottom: 0;
}

.detail-fit {
    border-radius: 7px;
    padding: 1.3rem 1.5rem;
    height: 100%;
}

.detail-fit.yes {
    background: #f0faf5;
}

.detail-fit.no {
    background: #fff2f4;
}

.detail-fit-heading {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-weight: 700;
    margin-bottom: .75rem;
}

.detail-fit-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #00a66a;
    color: #fff;
    font-size: 1.2rem;
}

.detail-fit.no .detail-fit-icon {
    background: #ef3b4c;
}

.detail-fit.yes .detail-fit-heading {
    color: #008d5b;
}

.detail-fit.no .detail-fit-heading {
    color: #0b1641;
}

.detail-fit ul {
    list-style: none;
    padding: 0 0 0 2.7rem;
    margin: 0;
}

.detail-fit li {
    position: relative;
    color: #50638c;
    margin: .45rem 0;
    line-height: 1.45;
}

.detail-fit.yes li::before {
    content: '✓';
    position: absolute;
    left: -1.8rem;
    color: #009a64;
    font-weight: 700;
}

.detail-fit.no li::before {
    content: '−';
    position: absolute;
    left: -1.8rem;
    color: #ef3b4c;
    font-weight: 700;
}

.detail-step {
    display: grid;
    grid-template-columns: 42px 42px minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
    padding: .8rem 0;
    border-bottom: 1px solid #e3edf7;
}

.detail-step:last-child {
    border-bottom: 0;
}

.detail-step-number {
    color: #8392aa;
    font-size: .85rem;
    letter-spacing: .04em;
    font-weight: 600;
    line-height: 38px;
    text-align: center;
}

.detail-step-icon {
    color: #0d6efd;
    font-size: 1.6rem;
    line-height: 38px;
    text-align: center;
}

.detail-step strong {
    display: block;
    font-size: .95rem;
}

.detail-step p {
    color: #52658e;
    font-size: .9rem;
    margin: 0;
}

.detail-next {
    margin-top: 2rem;
    padding: 1.5rem 2rem;
    background: #edf7ff;
    border-radius: 7px;
}

.detail-next h2 {
    font-size: 1.65rem;
    font-weight: 750;
    letter-spacing: -.025em;
}

.detail-next .btn {
    min-height: 48px;
    padding: .7rem 1.5rem;
}

.detail-page .detail-next a.btn-primary,
.detail-page .detail-next a.btn-primary:hover,
.detail-page .detail-next a.btn-primary:focus {
    color: #fff;
}

/* Keep section content aligned with the subtitles on desktop. */
@media (min-width: 992px) {
    .detail-section[aria-labelledby="problem-title"] .detail-section-body > :first-child,
    .detail-section[aria-labelledby="consider-title"] .detail-section-body > :first-child,
    .detail-section[aria-labelledby="fit-title"] .detail-section-body > :first-child {
        padding-left: 0;
    }

    .detail-section[aria-labelledby="problem-title"] .detail-section-body > :first-child .detail-feature,
    .detail-section[aria-labelledby="consider-title"] .detail-section-body > :first-child .detail-feature {
        padding-left: 0;
    }

    .detail-section[aria-labelledby="workflow-title"] .detail-step-number {
        text-align: left;
    }
}

@media (max-width: 991.98px) {
    .detail-section-body {
        margin-left: 0;
    }

    .detail-feature {
        border-right: 0;
        border-bottom: 1px solid #e3eaf3;
        padding: 1rem 0;
    }

    .detail-feature:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 767.98px) {
    .detail-hero-top {
        flex-direction: column;
        gap: 1rem;
    }

    .detail-product-logo {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
        font-size: 1.6rem;
    }

    .detail-share-status {
        text-align: left;
    }

    .detail-page {
        padding-top: 1rem;
    }

    .detail-lead {
        font-size: 1.2rem;
    }

    .detail-section-header {
        gap: .8rem;
    }

    .detail-section-title {
        font-size: 1.3rem;
    }

    .detail-next {
        padding: 1.5rem;
    }

    .detail-fit ul {
        padding-left: 2rem;
    }
}

/* Product question form */
.detail-question {
    margin-top: 2rem;
    padding: 1.5rem;
    border-radius: 16px;
    background: #eef7fd;
    scroll-margin-top: 1.5rem;
}

.detail-question-title {
    color: #0b1641;
    font-size: clamp(1.5rem, 2vw, 1.8rem);
    font-weight: 600;
    line-height: 1.4;
}

.detail-question-intro {
    color: #66769a;
    font-size: 1.2rem;
    line-height: 1.65;
}

.detail-question-benefits {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

.detail-question-benefit {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: #0b1641;
    font-weight: 500;
}

.detail-question-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 2px solid #0d6efd;
    border-radius: 50%;
    color: #0d6efd;
    font-size: .75rem;
    font-weight: 700;
}

.detail-question-panel {
    background: #fff;
    border-radius: 16px;
    padding: 1.25rem;
}

.detail-question-panel .form-label {
    color: #0b1641;
    font-weight: 600;
}

.detail-question-panel .form-control {
    border-color: #d8d8d8;
    border-radius: 999px;
    padding: .65rem 1rem;
}

.detail-question-panel textarea.form-control {
    min-height: 130px;
    border-radius: 10px;
    resize: vertical;
}

.detail-question-panel .form-control::placeholder {
    color: #888;
}

.detail-question-panel .input-validation-error {
    border-color: #dc3545;
}

.detail-question-panel .validation-summary-errors {
    margin-bottom: 1rem;
}

.detail-question-submit {
    min-height: 56px;
    border-radius: 10px;
    font-size: 1.125rem;
    font-weight: 600;
}

.detail-question-confirmation {
    padding: 1.5rem;
}

.detail-question-confirmation-icon {
    margin-bottom: 1.25rem;
    color: #0d6efd;
    font-size: 1.5rem;
    line-height: 1;
}

@media (max-width: 767.98px) {
    .detail-question-intro {
        font-size: 1.05rem;
    }
}