/* Photographs in the existing flow; original product artwork remains intact. */
:root{--dna-purple:#77668d;--dna-pale:#f4eff9;--dna-line:#ddd2e8;--flora-green:#4b846b}
#flow .step,#flow .step:nth-child(n){padding:20px 18px 24px;background:#fff}
#flow .step .step-count{font-size:11px;margin:0;line-height:1.7}
.flow-photo{position:relative;height:168px;margin:14px -18px 28px;background:#eff8fc}
.flow-photo>img{display:block;box-sizing:border-box;width:100%;height:100%;object-fit:cover;object-position:center}
.flow-photo-kit>img{object-fit:contain;padding:13px 21px;filter:drop-shadow(0 4px 5px #234e3910)}
.flow-photo-sampling{background:#fff}
.flow-photo-sampling>img{object-fit:contain;padding:4px}
.flow-photo-report{background:#edf6e6}
.flow-photo-consultation{background:#e5f6f1}
.flow-photo>.wb-diagram{position:absolute;left:16px;bottom:-17px;box-sizing:border-box;width:42px;height:42px;padding:8px;border-radius:50%;background:#fff;box-shadow:0 3px 12px #284d3e15;color:#398eac}
.flow-photo-sampling>.wb-diagram{color:#c58a1c}
.flow-photo-report>.wb-diagram{color:#6c9d44}
.flow-photo-consultation>.wb-diagram{color:#278b75}
#flow .step h3{margin:0 0 10px;line-height:1.5}
#flow .step p{margin-bottom:0}
/* The two comparison header rows use the actual kits rather than symbols. */
.compare-kit-photo{height:108px;width:146px;max-width:100%;padding:7px;box-sizing:border-box;border-radius:14px;background:#fff;margin:0 auto 12px}
.compare-kit-photo>img{display:block;width:100%;height:100%;object-fit:contain}
.compare-table thead th:nth-child(2){background:var(--dna-purple)}
.compare-table thead th:nth-child(3){background:var(--flora-green)}
.compare-table tbody td:nth-child(2){background:#f8f5fc}
.compare-table tbody tr:nth-child(even) td:nth-child(2){background:#f0eaf6}
.result-column-title{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 28px;background:var(--dna-purple)}
.result-column-title.flora-title{background:var(--flora-green)}
.result-title-copy{flex:1;min-width:0}
.result-kit-photo{width:142px;height:114px;flex:none;border-radius:14px;background:#fff;box-sizing:border-box;padding:7px}
.result-kit-photo>img{display:block;width:100%;height:100%;object-fit:contain}
/* DNA colors match the purple in the result sample comparison. */
.banner-insights p:first-child{background:#f7f2fcf2;border-color:var(--dna-line)}
.banner-insights p:first-child .wb-diagram{color:var(--dna-purple)}
.banner-insights p:first-child span,.banner-insights p:first-child strong{color:#6d5884}
#sets #set-dna14 .popular{background:#ebe3f3;color:#6d5884}
#sets #set-dna14 .product-header{background:linear-gradient(180deg,#f4eef9,#fff 70%)}
#sets #set-dna14 .kit-shot{background:radial-gradient(ellipse at center,#fff 32%,#efe6f7)}
@media(min-width:701px) and (max-width:1000px){
 .result-column-title{gap:12px;padding:22px}
 .result-kit-photo{width:112px;height:98px}
}
@media(max-width:700px){
 .flow-photo{height:auto;aspect-ratio:16/9}
 .flow-photo-kit>img{padding:16px 32px}
 .compare-kit-photo{width:100px;height:82px;padding:5px;margin-bottom:10px;border-radius:10px}
 .result-column-title{padding:20px;gap:14px;font-size:21px}
 .result-column-title span{font-size:12px;line-height:1.7}
 .result-kit-photo{width:110px;height:100px;border-radius:12px}
}
@media(max-width:350px){
 .result-column-title{padding:18px 14px;gap:10px;font-size:19px}
 .result-kit-photo{width:90px;height:90px}
 .compare-kit-photo{width:78px;height:69px;padding:4px}
}