/* Long-form traffic guides: shared visual system for calculators and diagnostic tools. */
.guide-traffic-page { background: #fff; }
.guide-traffic-page .guide-article-layout { grid-template-columns: minmax(210px, 250px) minmax(0, 780px); width: min(100% - 40px, 1130px); }
.guide-traffic-page .guide-article-body > section[id] { scroll-margin-top: 128px; }

.guide-traffic-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(460px, .97fr);
    min-height: 640px;
    color: #fff;
    background: #061326;
}
.guide-traffic-hero-copy { display: flex; align-items: center; padding: 70px clamp(30px, 5vw, 82px); }
.guide-traffic-hero-copy-inner { width: min(100%, 720px); margin-left: auto; }
.guide-traffic-hero .guide-breadcrumbs { color: #a9bad1; }
.guide-traffic-hero .guide-breadcrumbs a { color: #dbeafe; }
.guide-traffic-hero .guide-breadcrumbs li + li::before { color: #7f94ae; }
.guide-traffic-hero .guide-section-kicker { margin: 34px 0 0; color: #7fb0ff; }
.guide-traffic-hero h1 {
    max-width: 760px;
    margin: 13px 0 0;
    color: #fff;
    font-size: clamp(43px, 5.2vw, 76px);
    font-weight: 950;
    letter-spacing: -.045em;
    line-height: .98;
}
.guide-traffic-hero-lead { max-width: 690px; margin: 23px 0 0; color: #dbe5f3; font-size: 19px; line-height: 1.7; }
.guide-traffic-hero .guide-article-meta { margin-top: 21px; color: #a9bad1; }
.guide-traffic-hero-figure { min-width: 0; margin: 0; overflow: hidden; background: #0a1930; }
.guide-traffic-hero-figure img { width: 100%; height: 100%; min-height: 640px; object-fit: cover; object-position: 72% center; }

.guide-traffic-summary { border-bottom: 1px solid #dbe4ef; background: #f5f8fc; }
.guide-traffic-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guide-traffic-summary-item { min-height: 132px; padding: 29px 30px 26px; border-left: 1px solid #dbe4ef; }
.guide-traffic-summary-item:last-child { border-right: 1px solid #dbe4ef; }
.guide-traffic-summary-item span { display: block; color: #2563eb; font-size: 11px; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.guide-traffic-summary-item strong { display: block; margin-top: 9px; color: #071126; font-size: 18px; line-height: 1.3; }

.guide-traffic-intro { padding-bottom: 7px; border-bottom: 1px solid #dbe4ef; }
.guide-traffic-intro > p:first-child { color: #071126; font-size: 21px; font-weight: 760; line-height: 1.62; }
.guide-traffic-section-label { margin: 0 0 -40px !important; color: #2563eb !important; font-size: 11px !important; font-weight: 950; letter-spacing: .15em; text-transform: uppercase; }

.guide-traffic-key-grid,
.guide-traffic-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 27px 0 31px; }
.guide-traffic-key-card,
.guide-traffic-card { padding: 20px; border: 1px solid #d7e0ec; border-radius: 8px; background: #fff; }
.guide-traffic-key-card strong,
.guide-traffic-card h3 { display: block; margin: 0; color: #071126; font-size: 18px; line-height: 1.25; }
.guide-traffic-key-card p,
.guide-traffic-card p { margin: 9px 0 0; color: #526176; font-size: 14px; line-height: 1.62; }
.guide-traffic-card--wide { grid-column: 1 / -1; }

.guide-traffic-formula {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin: 29px 0;
    padding: 24px;
    border: 1px solid #bfd4f4;
    border-radius: 8px;
    background: #f3f7fd;
}
.guide-traffic-formula-item { padding: 15px; background: #fff; text-align: center; }
.guide-traffic-formula-item strong { display: block; font-size: 16px; }
.guide-traffic-formula-item span { display: block; margin-top: 6px; color: #64748b; font-size: 12px; line-height: 1.45; }
.guide-traffic-formula-sign { color: #2563eb; font-size: 27px; font-weight: 900; }

.guide-traffic-tool { margin: 38px 0; overflow: hidden; border: 1px solid #b9cbe4; border-radius: 10px; background: #fff; box-shadow: 0 18px 45px rgba(7, 17, 38, .08); }
.guide-traffic-tool-head { padding: 26px 28px 24px; color: #fff; background: #0a1a33; }
.guide-traffic-tool-head .guide-section-kicker { margin: 0; color: #83b4ff; }
.guide-traffic-tool-head h2,
.guide-traffic-tool-head h3 { margin: 9px 0 0; color: #fff; font-size: clamp(25px, 4vw, 34px); line-height: 1.08; }
.guide-traffic-tool-head p { margin: 11px 0 0; color: #cbd8e8; font-size: 14px; line-height: 1.65; }
.guide-traffic-tool-body { padding: 27px 28px 29px; }
.guide-traffic-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.guide-traffic-field { display: grid; gap: 7px; }
.guide-traffic-field label { color: #071126; font-size: 13px; font-weight: 900; line-height: 1.4; }
.guide-traffic-field small { color: #64748b; font-size: 11px; line-height: 1.4; }
.guide-traffic-field input,
.guide-traffic-field select {
    min-height: 49px;
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #b8c5d6;
    border-radius: 6px;
    color: #071126;
    background: #fff;
    font: inherit;
}
.guide-traffic-field input:focus-visible,
.guide-traffic-field select:focus-visible { outline: 3px solid rgba(37, 99, 235, .22); border-color: #2563eb; }
.guide-traffic-form-actions { display: flex; grid-column: 1 / -1; align-items: center; flex-wrap: wrap; gap: 12px 18px; padding-top: 3px; }
.guide-traffic-form-message { color: #9a3412; font-size: 13px; font-weight: 800; }
.guide-traffic-form-message:empty { display: none; }

.guide-traffic-results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 22px; }
.guide-traffic-results[hidden] { display: none; }
.guide-traffic-result-card { min-height: 112px; padding: 17px 15px; border: 1px solid #bfdbfe; background: #f4f8ff; }
.guide-traffic-result-card span { display: block; color: #56667c; font-size: 11px; font-weight: 800; line-height: 1.35; }
.guide-traffic-result-card strong { display: block; margin-top: 8px; color: #071126; font-size: 23px; line-height: 1.1; }
.guide-traffic-result-card--primary { color: #fff; border-color: #1d4ed8; background: #1d4ed8; }
.guide-traffic-result-card--primary span,
.guide-traffic-result-card--primary strong { color: #fff; }
.guide-traffic-result-note { grid-column: 1 / -1; margin: 3px 0 0 !important; color: #526176 !important; font-size: 12px !important; line-height: 1.55 !important; }

.guide-traffic-bars { display: grid; gap: 13px; margin: 25px 0 32px; padding: 23px; border: 1px solid #d7e0ec; background: #fff; }
.guide-traffic-bar-row { display: grid; grid-template-columns: 142px minmax(0, 1fr); gap: 14px; align-items: center; }
.guide-traffic-bar-row strong { color: #071126; font-size: 13px; }
.guide-traffic-bar { position: relative; height: 12px; overflow: hidden; background: #e7edf5; }
.guide-traffic-bar span { display: block; height: 100%; background: #2563eb; }
.guide-traffic-bar-row:nth-child(2) .guide-traffic-bar span { background: #4f7fd8; }
.guide-traffic-bar-row:nth-child(3) .guide-traffic-bar span { background: #8ca8d6; }

.guide-traffic-steps { display: grid; gap: 0; margin: 29px 0; border-top: 1px solid #d7e0ec; }
.guide-traffic-step { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 17px; padding: 21px 0; border-bottom: 1px solid #d7e0ec; }
.guide-traffic-step-number { color: #2563eb; font-size: 13px; font-weight: 950; letter-spacing: .08em; }
.guide-traffic-step h3 { margin: 0; font-size: 19px; }
.guide-traffic-step p { margin: 7px 0 0; font-size: 15px; line-height: 1.65; }

.guide-symptom-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.guide-symptom-option {
    min-height: 60px;
    padding: 13px 15px;
    border: 1px solid #b8c5d6;
    border-radius: 6px;
    color: #17243a;
    background: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.35;
    text-align: left;
}
.guide-symptom-option:hover,
.guide-symptom-option:focus-visible { border-color: #2563eb; background: #eff6ff; }
.guide-symptom-option[aria-pressed="true"] { color: #fff; border-color: #1d4ed8; background: #1d4ed8; }
.guide-symptom-result { margin-top: 18px; padding: 21px; border-left: 4px solid #2563eb; background: #f3f7fd; }
.guide-symptom-result[hidden] { display: none; }
.guide-symptom-result h3 { margin: 0; font-size: 21px; }
.guide-symptom-result p { margin: 9px 0 0; font-size: 14px; line-height: 1.6; }
.guide-symptom-result ol { margin-bottom: 10px; }
.guide-symptom-result-note { color: #1e3a5f !important; font-weight: 850; }

.guide-traffic-safety { margin: 31px 0; padding: 23px 24px; border: 1px solid #f1c27d; border-left: 5px solid #c77714; background: #fffaf2; }
.guide-traffic-safety strong { display: block; color: #7c3d09; font-size: 17px; }
.guide-traffic-safety p { margin: 7px 0 0; color: #633a19; font-size: 14px; line-height: 1.65; }
.guide-traffic-safety ul { margin-bottom: 0; color: #633a19; font-size: 14px; }

.guide-traffic-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 23px 0; }
.guide-traffic-check { display: grid; grid-template-columns: 35px minmax(0, 1fr); gap: 12px; padding: 17px; border: 1px solid #d7e0ec; background: #fff; }
.guide-traffic-check span { display: grid; width: 32px; height: 32px; place-items: center; color: #1d4ed8; border: 1px solid #93b7ef; border-radius: 50%; font-size: 12px; font-weight: 950; }
.guide-traffic-check strong { display: block; font-size: 15px; }
.guide-traffic-check p { margin: 5px 0 0; font-size: 13px; line-height: 1.55; }

.guide-event-breakdown { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 27px 0; }
.guide-event-breakdown-card { min-height: 162px; padding: 21px; border: 1px solid #d7e0ec; background: #fff; }
.guide-event-breakdown-card span { color: #2563eb; font-size: 11px; font-weight: 950; letter-spacing: .12em; }
.guide-event-breakdown-card strong { display: block; margin-top: 9px; font-size: 18px; }
.guide-event-breakdown-card p { margin: 8px 0 0; font-size: 13px; line-height: 1.58; }

.guide-traffic-source-list { margin-top: 17px !important; padding: 20px 24px 20px 43px !important; border: 1px solid #d7e0ec; background: #f8fafc; font-size: 13px; line-height: 1.6; }
.guide-traffic-source-list a { overflow-wrap: anywhere; }
.guide-traffic-related { padding-top: 16px; }

/* Air vs water cooling guide */
.guide-cooling-flow-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:28px 0; }
.guide-cooling-flow-card { padding:24px; border:1px solid #cbd9ea; border-radius:8px; background:#f7faff; }
.guide-cooling-flow-card > span { display:grid; width:42px; height:42px; place-items:center; margin-bottom:14px; border-radius:50%; color:#fff; background:#1d4ed8; font-size:23px; font-weight:900; }
.guide-cooling-flow-card strong { display:block; font-size:19px; }
.guide-cooling-flow-card p { margin:8px 0 0; color:#526176; font-size:14px; line-height:1.6; }
.guide-comparison-scroll { margin:26px 0; overflow-x:auto; border:1px solid #d7e0ec; }
.guide-comparison-scroll:focus-visible { outline:3px solid rgba(37,99,235,.25); outline-offset:3px; }
.guide-cooling-table { width:100%; min-width:720px; border-collapse:collapse; background:#fff; font-size:14px; line-height:1.5; }
.guide-cooling-table th,.guide-cooling-table td { padding:16px 18px; border-bottom:1px solid #e2e8f0; text-align:left; vertical-align:top; }
.guide-cooling-table thead th { color:#fff; background:#0a1a33; font-size:13px; }
.guide-cooling-table tbody th { width:27%; color:#071126; background:#f8fafc; }
.guide-unit-input { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; }
.guide-unit-input input { border-radius:6px 0 0 6px; }
.guide-unit-input span { display:flex; align-items:center; padding:0 12px; border:1px solid #b8c5d6; border-left:0; border-radius:0 6px 6px 0; color:#526176; background:#f8fafc; font-size:12px; font-weight:800; white-space:nowrap; }
.guide-cooling-results { grid-template-columns:repeat(3,minmax(0,1fr)); }
.guide-example-box,.guide-install-box { margin:26px 0; padding:23px 24px; border:1px solid #bfd4f4; border-left:5px solid #2563eb; background:#f3f7fd; }
.guide-example-box > strong,.guide-install-box h3 { display:block; margin:0; color:#12345b; font-size:18px; }
.guide-example-box p,.guide-install-box p { margin:8px 0 0; color:#40546e; font-size:14px; line-height:1.65; }
.guide-install-box a { display:inline-block; margin-top:13px; font-weight:850; }
.guide-temperature-chain { display:grid; gap:8px; margin:27px 0; padding:22px; border:1px solid #d7e0ec; background:#f8fafc; text-align:center; }
.guide-temperature-chain span { padding:13px 16px; color:#071126; background:#fff; font-weight:850; }
.guide-temperature-chain b { color:#2563eb; font-size:22px; }
.guide-install-check-form { display:grid; gap:12px; }
.guide-install-check-form fieldset { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; margin:0; padding:16px; border:1px solid #d7e0ec; }
.guide-install-check-form legend { float:left; width:auto; padding:0; color:#071126; font-size:14px; font-weight:850; }
.guide-install-check-form label { display:flex; align-items:center; gap:6px; min-height:44px; padding:6px 9px; border:1px solid #cbd5e1; border-radius:6px; cursor:pointer; font-size:13px; font-weight:750; }
.guide-install-check-form input { width:18px; height:18px; accent-color:#1d4ed8; }
.guide-traffic-faq { margin-top:24px; border-top:1px solid #d7e0ec; }
.guide-traffic-faq details { border-bottom:1px solid #d7e0ec; }
.guide-traffic-faq summary { position:relative; padding:20px 48px 20px 0; color:#071126; cursor:pointer; font-size:17px; font-weight:900; line-height:1.4; list-style:none; }
.guide-traffic-faq summary::-webkit-details-marker { display:none; }
.guide-traffic-faq summary::after { content:'+'; position:absolute; top:17px; right:8px; color:#2563eb; font-size:25px; }
.guide-traffic-faq details[open] summary::after { content:'−'; }
.guide-traffic-faq summary:focus-visible { outline:3px solid rgba(37,99,235,.22); outline-offset:3px; }
.guide-traffic-faq details p { margin:0; padding:0 42px 20px 0; color:#526176; font-size:15px; line-height:1.7; }
.guide-final-actions { display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin-top:22px; }

/* Water filtration guide */
.guide-water-flow { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); gap:10px; align-items:center; margin:30px 0 44px; padding:18px; border:1px solid #d7e0ec; background:#f8fafc; }
.guide-water-flow div { min-height:126px; padding:17px; background:#fff; }
.guide-water-flow span,.guide-card-index,.guide-card-eyebrow,.guide-dual-water-flow span { display:block; color:#2563eb; font-size:11px; font-weight:950; letter-spacing:.1em; text-transform:uppercase; }
.guide-water-flow strong { display:block; margin-top:8px; font-size:15px; }
.guide-water-flow small { display:block; margin-top:7px; color:#64748b; font-size:12px; line-height:1.45; }
.guide-water-flow > b { color:#2563eb; font-size:22px; }
.guide-filter-tech-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; margin:26px 0; }
.guide-brita-grid,.guide-venue-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; margin:26px 0; }
.guide-card-index { margin-bottom:16px; }
.guide-card-eyebrow { margin:0 0 12px !important; }
.guide-dual-water-flow { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:26px 0; }
.guide-dual-water-flow > div { padding:23px; border:1px solid #cbd9ea; background:#f7faff; }
.guide-dual-water-flow strong { display:block; margin-top:10px; color:#071126; font-size:16px; line-height:1.55; }
.guide-dual-water-flow p { margin:8px 0 0; color:#526176; font-size:13px; line-height:1.55; }

@media (max-width: 1050px) {
    .guide-traffic-hero { grid-template-columns: 1fr 42%; min-height: 570px; }
    .guide-traffic-hero-copy { padding: 58px 34px; }
    .guide-traffic-hero h1 { font-size: clamp(41px, 6.2vw, 62px); }
    .guide-traffic-hero-figure img { min-height: 570px; }
    .guide-traffic-page .guide-article-layout { grid-template-columns: minmax(0, 780px); justify-content: center; }
}

@media (max-width: 760px) {
    .guide-traffic-hero { grid-template-columns: 1fr; min-height: 0; }
    .guide-traffic-hero-copy { padding: 44px 22px 41px; }
    .guide-traffic-hero-copy-inner { margin: 0; }
    .guide-traffic-hero h1 { font-size: clamp(39px, 11vw, 56px); }
    .guide-traffic-hero-lead { font-size: 17px; }
    .guide-traffic-hero-figure { order: 2; }
    .guide-traffic-hero-figure img { height: auto; min-height: 290px; max-height: 390px; object-position: 71% center; }
    .guide-traffic-summary-grid { grid-template-columns: 1fr; }
    .guide-traffic-summary-item { min-height: 0; padding: 21px 22px; border-right: 1px solid #dbe4ef; border-bottom: 1px solid #dbe4ef; }
    .guide-traffic-summary-item:last-child { border-bottom: 0; }
    .guide-traffic-page .guide-article-layout { width: min(100% - 28px, 780px); }
    .guide-traffic-key-grid,
    .guide-traffic-card-grid,
    .guide-traffic-form,
    .guide-symptom-options,
    .guide-traffic-check-grid { grid-template-columns: 1fr; }
    .guide-traffic-card--wide { grid-column: auto; }
    .guide-traffic-tool-head,
    .guide-traffic-tool-body { padding: 22px 18px; }
    .guide-traffic-form-actions { grid-column: auto; align-items: stretch; flex-direction: column; }
    .guide-traffic-form-actions .guide-button { width: 100%; }
    .guide-traffic-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .guide-traffic-formula { grid-template-columns: 1fr; }
    .guide-traffic-formula-sign { text-align: center; transform: rotate(90deg); }
    .guide-event-breakdown { grid-template-columns: 1fr; }
    .guide-cooling-flow-grid,.guide-cooling-results { grid-template-columns:1fr; }
    .guide-water-flow { grid-template-columns:1fr; }
    .guide-water-flow > b { text-align:center; transform:rotate(90deg); }
    .guide-filter-tech-grid,.guide-brita-grid,.guide-venue-grid,.guide-dual-water-flow { grid-template-columns:1fr; }
    .guide-install-check-form fieldset { grid-template-columns:1fr 1fr; }
    .guide-install-check-form legend { grid-column:1/-1; margin-bottom:4px; }
    .guide-final-actions { align-items:stretch; flex-direction:column; }
    .guide-final-actions .guide-button { width:100%; }
}

@media (max-width: 480px) {
    .guide-traffic-results { grid-template-columns: 1fr; }
    .guide-traffic-result-card { min-height: 0; }
    .guide-traffic-bar-row { grid-template-columns: 1fr; gap: 6px; }
    .guide-traffic-step { grid-template-columns: 42px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .guide-symptom-option { transition: none; }
}