/* Reception Cover Decision Tool
   Scoped to the refreshed diagnostic page only. */

.decision-tool-refresh {
    --dt-surface: rgba(255, 252, 247, 0.96);
    --dt-surface-soft: rgba(255, 252, 247, 0.78);
    --dt-line: rgba(18, 37, 56, 0.10);
    --dt-line-strong: rgba(18, 37, 56, 0.16);
    --dt-shadow: 0 18px 40px rgba(18, 37, 56, 0.08);
    --dt-shadow-strong: 0 28px 60px rgba(18, 37, 56, 0.10);
    --dt-teal-wash: rgba(15, 118, 110, 0.08);
    --dt-warm-wash: rgba(222, 200, 172, 0.16);
}

.decision-tool-refresh .dt-hero {
    position: relative;
    overflow: hidden;
}

.decision-tool-refresh .dt-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 16% 16%, rgba(222, 200, 172, 0.42), transparent 24%),
        radial-gradient(circle at 84% 18%, rgba(15, 118, 110, 0.11), transparent 20%),
        linear-gradient(180deg, rgba(255, 253, 249, 0.96) 0%, rgba(247, 243, 238, 0.84) 100%);
    z-index: -1;
}

.decision-tool-refresh .dt-hero__shell {
    display: grid;
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.decision-tool-refresh .dt-hero__shell .hero__subhead {
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
}

.decision-tool-refresh .dt-chip-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.decision-tool-refresh .dt-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--dt-line);
    background: var(--dt-surface-soft);
    color: var(--pub-text);
    font-size: 0.94rem;
    line-height: 1.2;
    box-shadow: 0 10px 22px rgba(18, 37, 56, 0.04);
}

.decision-tool-refresh .dt-panel,
.decision-tool-refresh .dt-card,
.decision-tool-refresh .dt-result-card,
.decision-tool-refresh .dt-note {
    background: var(--dt-surface);
    border: 1px solid var(--dt-line);
    border-radius: 28px;
    box-shadow: var(--dt-shadow);
}

.decision-tool-refresh .dt-card,
.decision-tool-refresh .dt-result-card,
.decision-tool-refresh .dt-note,
.decision-tool-refresh .dt-panel {
    padding: clamp(22px, 3vw, 30px);
}

.decision-tool-refresh .dt-card-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.decision-tool-refresh .dt-card h3,
.decision-tool-refresh .dt-result-card h3,
.decision-tool-refresh .dt-panel h3,
.decision-tool-refresh .dt-cta__title,
.decision-tool-refresh .dt-note h2 {
    margin: 0 0 10px;
    font-family: var(--pub-font-display);
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    line-height: 1.1;
    color: var(--pub-text);
    letter-spacing: -0.02em;
}

.decision-tool-refresh .dt-card p,
.decision-tool-refresh .dt-result-card p,
.decision-tool-refresh .dt-panel p,
.decision-tool-refresh .dt-note p {
    margin: 0;
    color: var(--pub-muted);
    line-height: 1.65;
}

.decision-tool-refresh .dt-intro {
    max-width: 62rem;
    margin: 10px auto 0;
    text-align: center;
    color: var(--pub-muted);
    line-height: 1.68;
}

.decision-tool-refresh .dt-tool__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 24px;
    align-items: start;
}

.decision-tool-refresh .dt-tool__groups {
    display: grid;
    gap: 18px;
}

.decision-tool-refresh .dt-tool__group {
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.92) 0%, rgba(248, 244, 239, 0.88) 100%);
    border: 1px solid var(--dt-line);
}

.decision-tool-refresh .dt-tool__group h3 {
    margin-bottom: 8px;
}

.decision-tool-refresh .dt-tool__group p {
    margin-bottom: 14px;
}

.decision-tool-refresh .dt-tool__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.decision-tool-refresh .dt-tool__actions .btn {
    min-width: 230px;
}

.decision-tool-refresh .dt-results {
    display: grid;
    gap: 18px;
}

.decision-tool-refresh .dt-tool__empty {
    min-height: 100%;
    display: grid;
    align-content: start;
    gap: 8px;
}

.decision-tool-refresh .dt-result-card {
    position: relative;
    overflow: hidden;
}

.decision-tool-refresh .dt-result-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(180deg, #0f766e 0%, #2ca48c 100%);
}

.decision-tool-refresh .dt-result-card h3,
.decision-tool-refresh .dt-result-card p {
    margin-left: 8px;
}

.decision-tool-refresh .dt-cta {
    display: grid;
    gap: 16px;
    padding: clamp(28px, 4vw, 40px);
    border-radius: 32px;
    background:
        linear-gradient(180deg, rgba(19, 48, 71, 0.98) 0%, rgba(17, 44, 65, 0.98) 100%);
    color: #f8f6f2;
    box-shadow: var(--dt-shadow-strong);
}

.decision-tool-refresh .dt-cta .eyebrow,
.decision-tool-refresh .dt-cta__title,
.decision-tool-refresh .dt-cta__text {
    color: inherit;
}

.decision-tool-refresh .dt-cta__text {
    max-width: 58rem;
    opacity: 0.86;
    line-height: 1.68;
}

.decision-tool-refresh .dt-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.decision-tool-refresh .dt-note {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.decision-tool-refresh .dt-note .eyebrow {
    margin-bottom: 10px;
}

.decision-tool-refresh .dt-note p:last-child {
    max-width: 62rem;
    margin: 0 auto;
}

@media (max-width: 1100px) {
    .decision-tool-refresh .dt-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .decision-tool-refresh .dt-tool__layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .decision-tool-refresh .dt-card-grid {
        grid-template-columns: 1fr;
    }

    .decision-tool-refresh .dt-tool__actions,
    .decision-tool-refresh .dt-cta__actions {
        flex-direction: column;
    }

    .decision-tool-refresh .dt-tool__actions .btn,
    .decision-tool-refresh .dt-cta__actions .btn {
        width: 100%;
        min-width: 0;
    }

    .decision-tool-refresh .dt-panel,
    .decision-tool-refresh .dt-card,
    .decision-tool-refresh .dt-result-card,
    .decision-tool-refresh .dt-note,
    .decision-tool-refresh .dt-cta {
        border-radius: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .decision-tool-refresh .dt-result-card,
    .decision-tool-refresh .dt-card,
    .decision-tool-refresh .dt-panel,
    .decision-tool-refresh .dt-cta,
    .decision-tool-refresh .dt-chip {
        transition: none !important;
    }
}