.df, .df * { box-sizing: border-box; }
.df { --df-blue: #1e507b; --df-ink: #344354; margin: 3rem 0 11rem; padding: 5rem 0; color: var(--df-ink); text-align: left; }
.df__outer { max-width: 112rem; }
.df__panel { scroll-margin-top: 12rem; padding: clamp(3rem, 5vw, 6rem); border-radius: 1.2rem; background: var(--df-blue); box-shadow: 0 1.2rem 3.4rem rgb(28 70 108 / 10%); color: #fff; }
.df__intro { margin: 0 0 3.6rem; text-align: center; }
.df__eyebrow { margin: 0 0 1.2rem; font-size: 1.3rem; letter-spacing: .12em; }
.df__intro h2 { margin: 0; font-size: clamp(2.6rem, 3vw, 3.8rem); font-weight: 400; line-height: 1.45; letter-spacing: .05em; }
.df__lead { margin: 1.4rem 0 0; color: #e6edf3; font-size: 1.4rem; line-height: 1.8; }
.df__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 1.6rem; }
.df__field { min-width: 0; }
.df__field label { display: block; margin-bottom: .8rem; font-size: 1.4rem; font-weight: 500; }
.df__field select, .df__field input { display: block; width: 100%; height: 5.6rem; min-height: 4.4rem; margin: 0; padding: 0 1.6rem; border: 1px solid #d5dfe7; border-radius: .5rem; outline: none; background: #fff; color: var(--df-ink); font: inherit; font-size: 1.5rem; line-height: 1.4; }
.df__field select { padding-right: 4.4rem; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%231e507b' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.6rem center; cursor: pointer; }
.df__field input::placeholder { color: #798693; opacity: 1; }
.df__field :is(select, input):focus-visible { outline: 3px solid #a9d5f4; outline-offset: 2px; }
.df__concerns { min-width: 0; margin: 3.2rem 0 0; padding: 0; border: 0; }
.df__concerns legend { width: 100%; margin: 0 0 1.5rem; padding: 0; color: #fff; font-size: 1.8rem; font-weight: 500; text-align: center; }
.df__concerns legend span { color: #e6edf3; font-size: 1.3rem; font-weight: 400; }
.df__concern-panel { padding: 2.5rem; border-radius: .6rem; background: #fcfcfa; }
.df__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.df__chip { position: relative; display: inline-block; cursor: pointer; }
.df__chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.df__chip span { display: flex; align-items: center; justify-content: center; min-height: 4.4rem; padding: .7rem 1.8rem; border: 1px solid #a7b7c5; border-radius: 999px; background: #fff; color: var(--df-ink); font-size: 1.4rem; line-height: 1.4; transition: background-color .2s, border-color .2s, color .2s; }
.df__chip input:checked + span { border-color: var(--df-blue); background: var(--df-blue); color: #fff; }
.df__chip input:focus-visible + span { outline: 3px solid var(--df-blue); outline-offset: 3px; }
.df__submit { display: flex; align-items: center; justify-content: center; gap: 2.6rem; min-width: 25rem; min-height: 5.6rem; margin: 3.4rem auto 0; padding: 1rem 2.4rem; border: 1px solid #fff; border-radius: 999px; background: #fff; color: var(--df-blue); font: inherit; font-size: 1.7rem; font-weight: 500; cursor: pointer; transition: background-color .2s, color .2s; }
.df__submit span { font-size: 2rem; font-weight: 300; }
.df__submit:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.df__results { scroll-margin-top: 12rem; margin-top: 2.4rem; padding: clamp(2.2rem, 4vw, 4rem); border: 1px solid #dce5eb; border-radius: 1.2rem; background: #fff; }
.df__results-kicker { margin: 0 0 1rem; color: var(--df-blue); font-size: 1.2rem; letter-spacing: .14em; }
.df__results h3 { margin: 0; color: var(--df-blue); font-size: 2.4rem; font-weight: 500; line-height: 1.5; }
.df__results-count { margin: .8rem 0 2.4rem; color: #65727d; font-size: 1.4rem; }
.df__cards { display: grid; gap: 1.4rem; margin: 0; padding: 0; list-style: none; }
.df__card { display: grid; grid-template-columns: 32% minmax(0, 1fr); gap: 2rem; min-height: 18rem; padding: 1.4rem; border: 1px solid #e0e7ed; border-radius: .8rem; color: var(--df-ink); text-decoration: none; }
.df__card-image { overflow: hidden; border-radius: .4rem; background: #f3f6f8; }
.df__card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.df__card-text { align-self: center; min-width: 0; }
.df__card-kicker { margin: 0 0 .7rem; color: var(--df-blue); font-size: 1.1rem; letter-spacing: .08em; }
.df__card-copy { margin: 0 0 .7rem; font-size: 1.4rem; line-height: 1.6; }
.df__card h4 { margin: 0; color: var(--df-blue); font-size: 2rem; font-weight: 500; }
.df__card-clinic { margin: .7rem 0 0; color: #65727d; font-size: 1.3rem; }
.df__card-link { margin: 1.4rem 0 0; color: var(--df-blue); font-size: 1.3rem; }
.df__card-link span { margin-left: .6rem; }
.df__empty { margin: 0; padding: 2rem; border-radius: .5rem; background: #f7f9fa; font-size: 1.4rem; line-height: 1.8; }
@media (hover: hover) { .df__chip:hover span { border-color: var(--df-blue); } .df__submit:hover { background: #eaf0f5; } .df__card:hover { border-color: var(--df-blue); box-shadow: 0 .7rem 2rem rgb(28 70 108 / 9%); } }
@media (max-width: 900px) { .df { margin: 2rem 0 8rem; padding: 4rem 0; } .df__results, .df__panel { scroll-margin-top: 2rem; } }
@media (max-width: 700px) { .df__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .df__field--keyword { grid-column: 1 / -1; } }
@media (max-width: 600px) { .df { padding: 3rem 0; } .df__panel { padding: 3rem 1.8rem; } .df__intro { margin-bottom: 2.6rem; } .df__fields { grid-template-columns: 1fr; gap: 1.4rem; } .df__field--keyword { grid-column: auto; } .df__concern-panel { padding: 1.8rem 1.2rem; } .df__chips { gap: .8rem; } .df__chip span { padding-inline: 1.3rem; font-size: 1.3rem; } .df__submit { width: 100%; min-width: 0; } .df__card { grid-template-columns: 10rem minmax(0, 1fr); gap: 1.2rem; min-height: 14rem; } .df__card h4 { font-size: 1.8rem; } }
@media (max-width: 374px) { .df__card { grid-template-columns: 1fr; } .df__card-image { height: 16rem; } }
@media (prefers-reduced-motion: reduce) { .df__chip span, .df__submit { transition: none; } }