/* Hallmark · illustrated editorial guide · inherits existing site brand
 * pre-emit critique: P5 H5 E4 S5 R5 V4 */
.series-nav { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: .5rem; padding-block: 1rem; }
.series-nav a { display:flex; align-items:center; justify-content:center; gap:.75rem; padding:.65rem .4rem; border:1px solid var(--color-guide-line); text-decoration:none; white-space:nowrap; font-size:.85rem; color:var(--color-teal-dark); }
.series-nav a span { font-size:.72rem; }
.series-nav a[aria-current=page] { color:var(--color-accent-ink); background:var(--color-teal-dark); border-color:var(--color-teal-dark); }
.series-nav a:hover { text-decoration:underline; }
.extra-body>section+section { margin-top:3.5rem; padding-top:3.5rem; border-top:1px solid var(--color-guide-line); }
.extra-body p { line-height:2; }
.extra-body h3 { font-size:1.2rem; line-height:1.7; color:var(--color-teal-dark); }
.extra-body figure { margin:0; min-width:0; background:var(--color-figure); padding:1rem; }
.extra-body figcaption { padding-top:.8rem; font-size:.8rem; color:var(--color-muted); text-align:center; }
.source-note { font-size:.78rem; color:var(--color-muted); margin-top:1rem; }
.text-product { display:grid; grid-template-columns:minmax(0,1fr) 10rem; gap:3rem; align-items:center; }
.text-product>img { width:100%; max-height:12rem; object-fit:contain; }
.text-product h3 { margin-bottom:1rem; }
.minor-heading { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:2rem; }
.minor-heading span { font-size:.8rem; white-space:nowrap; }
.cost-comparison { margin-top:2rem; padding:2rem; border:1px solid var(--color-guide-line); background:var(--color-paper); }
.cost-row { display:grid; grid-template-columns:8rem minmax(0,1fr); align-items:center; gap:1rem; margin-top:1rem; font-size:.9rem; }
.cost-row>span { font-weight:700; }
.bar-track { background:var(--color-paper-2); }
.cost-bar { padding:.8rem 1rem; text-align:center; }
.cost-bar strong { white-space:nowrap; font-size:1.2rem; }
.cost-bar strong span { font-size:.8rem; }
.conventional { width:100%; background:var(--color-paper-3); }
.efficient { width:86.4253%; background:var(--color-teal); color:var(--color-accent-ink); }
.cost-result { text-align:right; margin:1.8rem 0 0; color:var(--color-teal-dark); }
.cost-result strong { font-size:1.65rem; }
.eco-benefits { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3rem; margin-top:3rem; }
.eco-benefits>section { border-top:2px solid var(--color-teal); padding-top:1.5rem; }
.feature-value { display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem; color:var(--color-teal); font-size:.9rem; }
.feature-value strong { font-size:2.8rem; line-height:1.5; }
.feature-value strong span { font-size:1rem; margin-left:.25rem; }
.explain-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.5rem; align-items:start; }
.explain-split figure img { width:100%; }
.solar-illustration { display:flex; align-items:flex-end; }
.explain-split .solar-illustration img:first-child { width:37%; }
.explain-split .solar-illustration img:last-child { width:63%; }
.simple-spec { margin:1.5rem 0; }
.simple-spec>div { display:flex; flex-wrap:wrap; gap:.5rem 1rem; justify-content:space-between; border-bottom:1px solid var(--color-guide-line); padding:.7rem 0; }
.simple-spec dt { font-size:.9rem; }
.simple-spec dd { margin:0; font-weight:700; }
.reading-copy { max-width:50rem; }
.switch-features { margin-top:2.5rem; }
.switch-feature { display:grid; grid-template-columns:11rem minmax(0,1fr); gap:2rem; align-items:center; padding:2rem 0; border-top:1px solid var(--color-guide-line); }
.switch-art { background:var(--color-figure); padding:.8rem; }
.switch-art img { width:100%; }
.switch-feature p:last-child { margin-bottom:0; }
.water-saving { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.7fr); gap:3rem; align-items:center; }
.saving-total { padding:2rem; text-align:center; background:var(--color-aqua-soft); color:var(--color-teal-dark); }
.saving-total>span { font-size:.9rem; }
.saving-total strong { display:block; font-size:4rem; line-height:1.6; }
.saving-total strong span { font-size:1.3rem; }
.saving-total p { margin:0; font-size:.9rem; }
.combined-saving { margin-top:2.5rem; padding:2rem; background:var(--color-paper); border:1px solid var(--color-guide-line); }
.saving-equation { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:1.5rem; }
.saving-equation>div { display:flex; flex-direction:column; gap:.65rem; }
.saving-equation span { font-size:.8rem; }
.saving-equation strong { font-size:clamp(1rem,2.1vw,1.75rem); color:var(--color-teal-dark); white-space:nowrap; }
.saving-equation small { font-size:.75rem; }
.saving-equation>b { color:var(--color-teal); }
.equation-total { border-bottom:2px solid var(--color-teal); padding-bottom:.4rem; }
.household { border-top:1px solid var(--color-guide-line); margin-top:2.5rem; padding-top:2rem; }
.household-head { display:grid; grid-template-columns:8rem minmax(0,1fr); gap:2rem; align-items:center; }
.capacity-badge { display:flex; flex-direction:column; justify-content:center; align-items:center; width:8rem; height:8rem; border-radius:50%; background:var(--color-aqua-soft); color:var(--color-teal-dark); }
.capacity-badge strong { font-size:2rem; line-height:1.4; }
.capacity-badge strong span { font-size:.9rem; }
.capacity-badge>span { font-size:.85rem; }
.household-head p { margin:0; }
.household-example { display:grid; grid-template-columns:8rem minmax(0,1fr); gap:2rem; align-items:center; margin-top:2rem; }
.household-example>img { width:100%; max-height:10rem; object-fit:contain; }
.capacity-table table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:.88rem; }
.capacity-table caption { text-align:left; margin-bottom:.8rem; font-weight:700; }
.capacity-table caption span { display:inline-block; margin-left:.5rem; font-size:.75rem; font-weight:400; }
.capacity-table th,.capacity-table td { padding:.8rem .4rem; border-bottom:1px solid var(--color-guide-line); text-align:center; }
.capacity-table thead { background:var(--color-aqua-soft); }
.capacity-table td:last-child { color:var(--color-teal-dark); font-weight:700; background:var(--color-paper); }
.pressure-scale { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; padding:1rem; background:var(--color-aqua-soft); color:var(--color-teal-dark); margin-block:2rem; }
.pressure-scale span { font-size:.9rem; }
.pressure-types { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.pressure-types h3 { min-height:3.5rem; font-size:1.1rem; }
.pressure-types h3 span { display:block; font-size:.8rem; }
.pressure-types img { width:100%; margin-bottom:1.2rem; border-radius:.6rem; }
.pressure-types p { font-size:.9rem; }
.source-reference { border-top:1px solid var(--color-guide-line); margin-top:3rem; padding-top:1.5rem; color:var(--color-muted); font-size:.8rem; }
.source-reference p { margin-top:.5rem; margin-bottom:0; }
.bath-type-summary { display:flex; flex-wrap:wrap; gap:1rem 3rem; padding:1.5rem; background:var(--color-paper); }
.bath-type-summary>div { display:flex; flex-wrap:wrap; gap:.5rem 1rem; }
.bath-type-summary strong { color:var(--color-teal-dark); }
.bath-group-label { color:var(--color-muted); font-size:.85rem; }
.bath-steps { display:flex; gap:1.2rem; list-style:none; padding:0; margin:2rem 0 1rem; }
.bath-steps>li { flex:1; min-width:0; position:relative; }
.bath-steps>li+li::before { content:'→'; position:absolute; left:-1rem; top:3rem; color:var(--color-teal); }
.step-art { height:8rem; background:var(--color-paper); display:flex; justify-content:center; align-items:center; padding:.6rem; }
.step-art img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
.step-no { display:block; color:var(--color-teal); font-size:.75rem; margin:.8rem 0 .3rem; }
.bath-steps h4,.bath-features h4,.auto-cases h4 { font-size:.95rem; margin:0 0 .6rem; line-height:1.6; }
.bath-steps p { font-size:.85rem; margin:0; line-height:1.8; }
.bath-notice { margin-top:1.5rem; padding:1.5rem; border:1px solid var(--color-guide-line); background:var(--color-paper); }
.bath-notice h3 { font-size:1rem; }
.bath-notice p,.bath-notice li { font-size:.9rem; line-height:1.9; }
.bath-notice p:last-child { margin-bottom:0; }
.bath-notice ul { padding-left:1.2rem; margin-bottom:0; }
.bath-notice li+li { margin-top:.75rem; }
.bath-feature-heading { margin-top:2rem; }
.bath-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; margin-block:1.5rem; }
.bath-features img { height:7rem; width:100%; object-fit:contain; background:var(--color-paper); margin-bottom:1rem; }
.bath-features p { font-size:.85rem; }
.bath-features .source-note { font-size:.75rem; }
.comfort-inline { margin-top:1.5rem; font-size:.9rem; }
.comfort-inline strong { display:block; color:var(--color-teal-dark); }
.auto-comparison { margin-top:1.5rem; }
.auto-comparison table { width:100%; border-collapse:collapse; table-layout:fixed; }
.auto-comparison caption { text-align:left; font-size:.85rem; margin-bottom:.75rem; color:var(--color-muted); }
.auto-comparison th,.auto-comparison td { padding:1rem; border-bottom:1px solid var(--color-guide-line); }
.auto-comparison th { text-align:left; font-size:.95rem; }
.auto-comparison thead { background:var(--color-aqua-soft); color:var(--color-teal-dark); }
.auto-comparison thead th:not(:first-child) { text-align:center; }
.auto-comparison td { text-align:center; font-size:.85rem; }
.auto-comparison th small,.auto-comparison td span,.auto-comparison thead span { display:block; }
.auto-comparison th small { font-size:.73rem; font-weight:400; margin:.25rem 0; }
.auto-comparison td .yes,.auto-comparison td .no { font-size:1.9rem; color:var(--color-teal); line-height:1.5; }
.auto-comparison td:nth-child(2) { background:var(--color-paper); }
.auto-cases { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; }
.auto-cases>section { display:grid; grid-template-columns:7rem minmax(0,1fr); gap:1rem; align-items:start; }
.auto-cases img { width:100%; }
.auto-cases p { font-size:.85rem; }
@media(max-width:52rem) {
 .series-nav { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .household-example { grid-template-columns:5rem minmax(0,1fr); gap:1rem; }
 .saving-equation { flex-wrap:wrap; }
 .saving-equation strong { font-size:1.3rem; }
 .bath-steps { flex-wrap:wrap; }
 .bath-steps>li { flex:1 1 calc(33.333% - 1.2rem); }
 .auto-cases>section { grid-template-columns:minmax(0,1fr); }
 .auto-cases img { max-width:9rem; }
}
@media(max-width:40rem) {
 .series-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .series-nav a { font-size:.8rem; gap:.5rem; min-height:44px; }
 .text-product { grid-template-columns:minmax(0,1fr); gap:1rem; }
 .text-product>img { width:8rem; margin:auto; }
 .extra-body>section+section { margin-top:2.5rem; padding-top:2.5rem; }
 .minor-heading { display:block; margin-bottom:1.25rem; }
 .cost-comparison,.combined-saving { padding:1.1rem; }
 .cost-row { grid-template-columns:minmax(0,1fr); gap:.4rem; }
 .cost-bar { padding:.7rem .3rem; }
 .cost-bar strong { font-size:1rem; }
 .cost-result { text-align:left; }
 .cost-result strong { font-size:1.4rem; }
 .eco-benefits,.explain-split,.water-saving,.pressure-types { grid-template-columns:minmax(0,1fr); gap:2rem; }
 .switch-feature { grid-template-columns:minmax(0,1fr); gap:1rem; }
 .switch-art { width:11rem; margin:auto; }
 .saving-equation { display:grid; grid-template-columns:minmax(0,1fr); text-align:center; }
 .saving-equation strong { font-size:1.6rem; }
 .household-head { grid-template-columns:minmax(0,1fr); gap:1.3rem; }
 .capacity-badge { width:6.5rem; height:6.5rem; }
 .household-example { grid-template-columns:minmax(0,1fr); gap:1rem; }
 .household-example>img { width:5rem; margin:auto; }
 .capacity-table table { font-size:.72rem; }
 .capacity-table th,.capacity-table td { padding:.75rem .2rem; }
 .capacity-table thead th { font-size:.64rem; }
 .pressure-types h3 { min-height:0; margin-bottom:1rem; }
 .pressure-types img { max-width:25rem; }
 .bath-steps { display:grid; grid-template-columns:minmax(0,1fr); gap:1.4rem; }
 .bath-steps>li { display:grid; grid-template-columns:7rem minmax(0,1fr); gap:0 1rem; padding-bottom:1rem; border-bottom:1px solid var(--color-guide-line); }
 .bath-steps>li+li::before { display:none; }
 .step-art { grid-row:1 / 4; height:6rem; align-self:center; }
 .step-no { margin:0 0 .2rem; }
 .bath-steps h4 { font-size:.9rem; }
 .bath-steps p { grid-column:2; font-size:.83rem; }
 .bath-features,.auto-cases { grid-template-columns:minmax(0,1fr); }
 .bath-features img { max-width:12rem; }
 .bath-notice { padding:1rem; }
 .auto-comparison th,.auto-comparison td { padding:.7rem .35rem; font-size:.78rem; overflow-wrap:anywhere; }
 .auto-comparison th small { font-size:.65rem; }
 .auto-comparison th:first-child { width:38%; }
 .auto-cases>section { grid-template-columns:6rem minmax(0,1fr); }
}