.hero-copy h1{font-size:clamp(45px,4.5vw,82px);line-height:1.08;letter-spacing:-.055em}
.hero-copy .intro{font-size:16px;line-height:1.8}
.uf-extraction-page{padding:30px 3vw 50px;min-height:80svh;display:flex;align-items:center;scroll-margin-top:86px;border-top:1px solid #b3ebf421}
.uf-annotated-figure{width:100%;max-width:1800px;margin:0 auto}
.uf-index-diagram{display:block;width:100%;height:auto;overflow:visible}
.uf-callout polyline{fill:none;stroke:#ff665e;stroke-width:2.2;stroke-dasharray:7 7;stroke-linecap:round;stroke-linejoin:round}
.uf-callout .anchor{fill:#ff665e}
.uf-callout .index-ring{fill:#06202c;stroke:#ff665e;stroke-width:1}
.uf-callout text{font-family:Arial,Helvetica,sans-serif}
.uf-callout .index-number{fill:#ff665e;font-size:11px;font-weight:700}
.uf-callout .index-title{fill:#f4fbff;font-size:15px;font-weight:700}
.uf-callout .index-description{fill:#bfd4dc;font-size:11px}
@media(max-width:650px){.hero-copy h1{font-size:clamp(40px,11vw,64px)}.hero-copy .intro{font-size:14px;line-height:1.7}.uf-extraction-page{min-height:0;padding:30px 4vw 45px;scroll-margin-top:72px;overflow-x:auto;display:block}.uf-annotated-figure{min-width:1000px}.uf-index-diagram{min-width:1000px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.mote{animation:none!important}}

/* Static container options with dark SEM material background. */
.container-comparison{position:relative;isolation:isolate;background:#041521;color:#f4fbff;padding:65px 7vw 75px;scroll-margin-top:86px}
.container-comparison:before{content:"";position:absolute;inset:0;z-index:-2;background:url('ceramic-membrane-sem-v1.optimized-d78f51ab4c.webp') center/cover no-repeat;opacity:.7}
.container-comparison:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,14,25,.72),rgba(0,17,29,.8) 48%,rgba(0,17,29,.88))}
.container-comparison-inner{max-width:1500px;margin:auto;display:grid;gap:54px}
.container-option{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:6vw;min-height:350px}
.container-model{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.container-model svg{display:block;width:88%;height:285px;overflow:hidden;filter:drop-shadow(0 15px 9px #16354220)}
.container-model-40 svg{width:100%;height:260px}
.container-model>span{font-size:10px;letter-spacing:.15em;color:#a8cdd8;font-weight:700;margin-top:22px}
.container-spec-card{background:rgba(0,19,30,.5);border:1px solid #a7dce438;padding:26px 32px;backdrop-filter:blur(3px)}
.container-spec-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:19px;border-bottom:1px solid #a7dce438}
.container-spec-heading p{font-size:9px;font-weight:700;letter-spacing:.18em;color:#7ce6ec;margin:0 0 9px}
.container-spec-heading h2{font-size:31px;line-height:1.1;letter-spacing:-.04em;margin:0;font-weight:500}
.spec-badge{font-size:12px;color:#7ce6ec;border:1px solid #7ce6ec55;padding:10px 12px;white-space:nowrap}
.container-spec-card dl{margin:10px 0 0}.container-spec-card dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid #a7dce42b;font-size:12px;line-height:1.5}
.container-spec-card dt{color:#bad0d8}.container-spec-card dd{margin:0;text-align:right;color:#edf9fb;font-weight:600;font-variant-numeric:tabular-nums}
.spec-placeholder-note{font-size:9px;letter-spacing:.03em;color:#93b5c3;margin:16px 0 0}
@media(min-width:1800px){.container-option{gap:100px}.container-model svg{height:320px}.container-model-40 svg{height:290px}}
@media(max-width:850px){.container-comparison{padding:50px 5vw}.container-option{gap:28px;grid-template-columns:1fr 1.1fr}.container-model svg{height:235px}.container-model-40 svg{height:205px}.container-spec-card{padding:22px}.container-spec-card dl>div{font-size:11px;gap:12px}.container-spec-heading h2{font-size:26px}}
@media(max-width:650px){.container-comparison{padding:45px 6vw;scroll-margin-top:72px}.container-comparison-inner{gap:45px}.container-option{grid-template-columns:1fr;gap:24px}.container-model svg{width:82%;max-width:360px;height:245px}.container-model-40 svg{width:100%;max-width:430px;height:220px}.container-model>span{font-size:8px;margin-top:10px}.container-spec-card{padding:22px 18px}.container-spec-card dl>div{font-size:10px;gap:12px}.container-spec-heading h2{font-size:27px}.spec-placeholder-note{font-size:8px}}

/* Ceramic product gallery and shared model specifications. */
.container-comparison{padding:85px 7vw 90px}
.ceramic-product-layout{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:65px;align-items:center}
.ceramic-product-gallery{display:flex;flex-direction:column;gap:12px;align-items:center;min-width:0}
.ceramic-container{width:100%;height:300px}.ceramic-container svg{display:block;width:100%;height:100%;filter:drop-shadow(0 18px 15px #0005)}
.ceramic-membrane-products{display:block;width:100%;height:auto;max-height:390px;object-fit:contain;background:none}
.ceramic-product-copy .eyebrow{font-size:10px;letter-spacing:.15em;color:#a8dce4}
.ceramic-product-copy h2{font-size:clamp(36px,3.6vw,62px);line-height:1.05;letter-spacing:-.05em;font-weight:500;margin:22px 0 32px}
.ceramic-product-copy h2 span{color:#65e5ec}
.ceramic-comparison-table{width:100%;border-collapse:collapse;table-layout:fixed;background:rgba(0,19,30,.4);backdrop-filter:blur(5px);font-size:13px;line-height:1.6;color:#edf9fb}
.ceramic-comparison-table th,.ceramic-comparison-table td{padding:20px 14px;text-align:left;border-bottom:1px solid #a7dce438;vertical-align:middle}
.ceramic-comparison-table th:first-child{width:34%}
.ceramic-comparison-table thead th{border-top:1px solid #a7dce438;color:#7ce6ec;font-size:12px;letter-spacing:.04em;font-weight:700}
.ceramic-comparison-table tbody th{font-size:12px;color:#bad0d8;font-weight:400}
.ceramic-comparison-table tbody td{font-weight:600;font-variant-numeric:tabular-nums}
.ceramic-comparison-table td[colspan]{text-align:left;padding-left:14px}
.ceramic-comparison-table small{display:block;color:#8caebd;font-size:10px;margin-top:4px}
.ceramic-resistance{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ceramic-resistance span{font-size:10px;font-weight:600;line-height:1.5;padding:9px 12px;border:1px solid #7ce6ec44;color:#c5e2e8;background:#001b2966}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1100px){.ceramic-product-layout{gap:30px}.ceramic-comparison-table th,.ceramic-comparison-table td{padding:16px 9px;font-size:11px}.ceramic-comparison-table tbody th{font-size:11px}.ceramic-comparison-table thead th{font-size:10px}.ceramic-container{height:260px}.ceramic-resistance span{font-size:9px;padding:7px 9px}}
@media(max-width:850px){.container-comparison{padding:60px 6vw}.ceramic-product-layout{grid-template-columns:1fr;gap:38px}.ceramic-product-gallery{max-width:580px;margin:auto;width:100%}.ceramic-container{height:290px}.ceramic-membrane-products{max-height:360px}.ceramic-product-copy h2{font-size:46px}.ceramic-comparison-table{font-size:13px}.ceramic-comparison-table th,.ceramic-comparison-table td{padding:17px 12px;font-size:12px}}
@media(max-width:480px){.container-comparison{padding:40px 5vw 50px}.ceramic-container{height:220px}.ceramic-membrane-products{max-height:270px}.ceramic-product-copy h2{font-size:36px;margin-bottom:26px}.ceramic-product-copy .eyebrow{font-size:8px}.ceramic-comparison-table th,.ceramic-comparison-table td{padding:14px 7px;font-size:10px;overflow-wrap:anywhere}.ceramic-comparison-table thead th,.ceramic-comparison-table tbody th{font-size:10px}.ceramic-comparison-table th:first-child{width:32%}.ceramic-resistance span{font-size:8px;padding:7px 8px}}

/* Larger membrane products, preserving the original image proportions. */
.ceramic-product-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:45px}
.ceramic-components-large{width:100%;display:grid;grid-template-columns:1.1fr 1fr;gap:0;align-items:center;min-height:650px}
.ceramic-components-large svg{display:block;width:100%;height:650px;overflow:hidden}
.ceramic-product-gallery{width:100%;max-width:none}
@media(max-width:1100px){.ceramic-components-large{min-height:550px}.ceramic-components-large svg{height:550px}}
@media(max-width:850px){.ceramic-product-layout{grid-template-columns:1fr}.ceramic-product-gallery{max-width:660px}.ceramic-components-large{min-height:590px}.ceramic-components-large svg{height:590px}}
@media(max-width:480px){.ceramic-components-large{min-height:420px}.ceramic-components-large svg{height:420px}}

/* Full ceramic membrane technology copy on SCF and CSCF hero sections. */
.hero-copy .ceramic-technology-intro{font-size:14px;line-height:1.8;max-width:620px;margin:22px 0 0}
@media(max-width:1100px){.hero-copy .ceramic-technology-intro{font-size:13px;line-height:1.75}.hero:has(.ceramic-technology-intro){padding-top:135px;padding-bottom:75px;min-height:100svh}}
@media(max-width:650px){.hero-copy .ceramic-technology-intro{font-size:13px;line-height:1.8;max-width:100%}.hero:has(.ceramic-technology-intro){height:auto;min-height:0;padding-top:115px;padding-bottom:45px}.hero:has(.ceramic-technology-intro) .viewer{flex-shrink:0;margin-top:25px}.hero:has(.ceramic-technology-intro) .actions{margin-top:24px}}

/* Containerized system advantages below the hero actions. */
.container-benefits{list-style:none;margin:30px 0 0;padding:0;max-width:660px;display:grid;gap:15px}
.container-benefits li{display:flex;gap:14px;border-top:1px solid #b3ebf42e;padding-top:14px}
.benefit-number{flex-shrink:0;font-size:10px;letter-spacing:.1em;color:#75e8ef;margin-top:3px}
.container-benefits h2{font-size:14px;font-weight:600;line-height:1.4;letter-spacing:0;margin:0 0 5px;color:#edf9fb}
.container-benefits p{font-size:11px;line-height:1.75;margin:0;color:#bfd4dc}
.hero:has(.container-benefits){align-items:start;padding-top:145px;padding-bottom:80px}
.hero:has(.container-benefits) .viewer{position:sticky;top:145px;margin-top:35px;align-self:start}
.hero:has(.container-benefits) .scroll{display:none}
@media(max-width:1100px){.container-benefits p{font-size:11px}.hero:has(.container-benefits){padding-top:125px}.hero:has(.container-benefits) .viewer{top:125px}}
@media(max-width:650px){.hero:has(.container-benefits){padding-top:115px;padding-bottom:40px}.hero:has(.container-benefits) .viewer{position:relative;top:auto;margin-top:25px;align-self:stretch}.container-benefits{margin-top:25px;gap:16px;max-width:none}.container-benefits h2{font-size:14px}.container-benefits p{font-size:12px;line-height:1.8}}

/* Larger benefits copy with the actions following all five advantages. */
.container-benefits h2{font-size:16px}
.container-benefits p{font-size:13px}
.container-benefits + .actions{margin-top:28px}
@media(max-width:1100px){.container-benefits p{font-size:13px}}
@media(max-width:650px){.container-benefits h2{font-size:16px}.container-benefits p{font-size:14px}}

.hero-copy .ceramic-technology-intro{font-size:17px;line-height:1.85;max-width:760px}.container-benefits h2{font-size:19px}.container-benefits p{font-size:16px;line-height:1.8}.container-benefits li>span{font-size:13px}@media(max-width:650px){.hero-copy .ceramic-technology-intro{font-size:16px}.container-benefits h2{font-size:18px}.container-benefits p{font-size:15px}}