/* Section: dak_diagnose — interactive dak-check (ported from design .diag). */

.dak-diagnose { background: var(--surface); padding-bottom:100px;}
.dak-diagnose .dd-head { max-width: 700px; margin-bottom: 38px; }
.dak-diagnose .dd-head .eyebrow { display: inline-flex;  }
.dak-diagnose .dd-head h2 { margin-bottom: 8px; }
.dak-diagnose .dd-head .lede { margin: 0; }

.diag { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.diag .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.diag .opt {
    text-align: left; background: var(--card); border: 1.5px solid var(--line);
    border-radius: 13px; padding: 15px 16px; cursor: pointer; font: inherit; transition: .18s;
}
.diag .opt:hover { border-color: #bcd2f6; }
.diag .opt.on { border-color: var(--blue); background: var(--blue-l); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.diag .opt .t { display: flex; align-items: center; gap: 9px; font-weight: 600; color: var(--ink); font-size: .95rem; }
.diag .opt .t svg { width: 18px; height: 18px; stroke: var(--blue-d); fill: none; stroke-width: 2; flex: none; }
.diag .opt small { color: var(--muted); font-size: .8rem; display: block; margin-top: 3px; margin-left: 27px; }

.diag .panel {
    background: var(--navy); color: #fff; border-radius: var(--r); padding: 30px;
    min-height: 230px; display: flex; flex-direction: column; justify-content: center;
}
.diag .panel .lbl { font-size: .74rem; letter-spacing: 0; text-transform: uppercase; color:var(--blue); font-weight: 700; margin-bottom: 10px; }
.diag .panel h3 { color: #fff; font-size: 1.35rem; margin-bottom: 10px; }
.diag .panel p { color: #c6d6f0; font-size: .98rem; margin-bottom: 18px; }
.diag .panel .btn { align-self: flex-start; }
@media (max-width: 767px) {.dak-diagnose{padding-bottom: 70px;} }
@media (max-width: 860px) {
    .diag { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 480px) {
    .diag .opts { grid-template-columns: 1fr; }
}