:root{--ink:#202a39;--paper:#fff;--pearl:#edf0f5;--line:#cbd2df;--violet:#493681;--deep:#27233f;--muted:#536071;--signal:#c1eadf}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:#dbe0e9;font-family:Tahoma,Verdana,sans-serif}
.clean-page{width:min(1240px,calc(100% - 32px));margin:24px auto;background:var(--paper);border:1px solid #48536a;box-shadow:0 18px 48px #172a3a30}
a{color:var(--violet);text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid #7759bf;outline-offset:4px}
.hierarchy-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 30px;background:var(--pearl);border-bottom:1px solid var(--line);font-size:14px}
.hierarchy-nav a{display:inline-flex;align-items:center;min-height:44px}
.hero-grid{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;background:var(--deep);color:#fff}
.hero-copy{padding:36px}
h1{margin:0 0 26px;font:normal clamp(44px,5.8vw,76px)/1.02 Georgia,serif;letter-spacing:-.045em}
.deck{font:22px/1.55 Georgia,serif;max-width:28ch}
.hardware-line{margin-top:26px;color:var(--signal);font-size:14px;line-height:1.8;max-width:30ch}
figure{margin:0}
figure img{display:block;width:100%;height:auto}
figcaption{padding:12px 18px;font:13px/1.6 Tahoma,Verdana,sans-serif;background:var(--pearl);color:var(--muted)}
.reading{padding:0 clamp(22px,5vw,64px) 24px}
.reading section{padding:40px 0;border-bottom:1px solid var(--line)}
.reading section:last-child{border-bottom:0}
h2{margin:0 0 22px;font:normal clamp(27px,3vw,35px)/1.2 Georgia,serif;letter-spacing:-.02em}
h3{margin:0 0 12px;font:700 17px/1.5 Tahoma,Verdana,sans-serif}
p{margin:0 0 20px;font:18px/1.8 Georgia,serif;max-width:82ch}
p:last-child{margin-bottom:0}
.premise{display:grid;grid-template-columns:.5fr 1.5fr;gap:40px}
.sequence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin:28px 0;padding:24px 0 24px 26px;border-block:1px solid var(--line)}
.sequence li{padding-left:4px;padding-right:16px}
.sequence li::marker{font:700 17px Tahoma,Verdana,sans-serif;color:var(--violet)}
.sequence p,.hardware p{font:16px/1.8 Tahoma,Verdana,sans-serif}
.annotation{font:14px/1.8 Tahoma,Verdana,sans-serif;color:var(--muted);max-width:95ch}
.hardware{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-bottom:24px}
.formulation{margin:28px 0;background:#f1f3f8;border-block:1px solid var(--line);padding:24px}
table{width:100%;border-collapse:collapse;text-align:left;font-size:15px;line-height:1.65}
caption{text-align:left;font-weight:700;color:var(--violet);padding-bottom:18px}
th,td{padding:12px 14px 12px 0;vertical-align:top;border-bottom:1px solid var(--line)}
thead th{font-size:14px;color:var(--muted)}
tbody th{font-weight:400}
td:nth-child(2){font-variant-numeric:tabular-nums;white-space:nowrap}
tfoot th,tfoot td{border:0;font-weight:700}
.formula-status{margin-top:18px;font:14px/1.8 Tahoma,Verdana,sans-serif;color:var(--muted)}
details{border-block:1px solid var(--line);margin-top:26px}
summary{cursor:pointer;padding:16px 0;min-height:44px;color:var(--violet);font:700 16px/1.6 Tahoma,Verdana,sans-serif}
.detail-copy{padding:8px 0 24px}
.detail-copy p{font:16px/1.8 Tahoma,Verdana,sans-serif}
@media(max-width:850px){.hero-grid{grid-template-columns:1fr}.hero-copy{padding:36px 28px}.deck{max-width:44ch}.hardware-line{max-width:none}.premise{grid-template-columns:1fr;gap:0}.sequence{grid-template-columns:1fr;gap:22px}.sequence li{padding-right:0}.hardware{gap:25px}}
@media(max-width:540px){.clean-page{width:100%;margin:0;border-inline:0}.hierarchy-nav{padding:8px 20px;gap:10px}.hardware{grid-template-columns:1fr}.formulation{padding:16px 10px}table{font-size:14px}th,td{padding:10px 8px 10px 0}h1{font-size:48px}.reading section{padding:32px 0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}
@media(forced-colors:active){.clean-page,.reading section,.formulation,details{border-color:CanvasText}a,summary{color:LinkText}}

.use-guide,.spray-view{margin:24px 0 30px;border:1px solid var(--line);background:var(--pearl)}
.image-link{display:block}
.use-guide img,.spray-view img{width:100%;height:auto;object-fit:contain}
.use-guide figcaption a{display:inline-flex;align-items:center;min-height:44px}
@media(min-width:851px) and (max-width:1080px){.sequence{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Washing is the main activity; equipment and research support it. */
.hero{background:var(--paper);color:var(--ink)}
.hero>.hero-copy{display:flex;align-items:baseline;gap:34px;padding:30px clamp(22px,5vw,64px)}
.hero h1{font-size:clamp(38px,4.5vw,58px);margin:0;white-space:nowrap}
.hero .deck{max-width:34ch;margin:0;font-size:22px;line-height:1.45}
.sink-overview{margin:0}
.sink-overview img{max-height:620px;object-fit:contain;background:#eceeed}
.reading>section:first-child>p{max-width:86ch}
.feedback-view{display:grid;grid-template-columns:1fr 1.1fr;gap:34px;align-items:center}
.feedback-view p{font-size:17px}
.feedback-view figure{border:1px solid var(--line)}
@media(max-width:850px){.hero>.hero-copy{display:block}.hero h1{margin-bottom:14px}.feedback-view{grid-template-columns:1fr}.sink-overview img{max-height:none}}

.hero .opening-guide{margin:0;border-inline:0}
.hero .opening-guide img{max-height:640px;object-fit:contain;background:#fff}