/* Original illustration/resources, scoped to the migrated components. */
.ff-water-stage,.ff-install{--ink:#204b39;--ink-2:#4b6455;--fjord:#204b39;--line:#d7dfd5;--mist:#edf2e7;--ease:cubic-bezier(.2,.8,.2,1);--sh-3:0 24px 60px #183b2c18;--f-m:Geist,Arial,sans-serif}
.ff-water-stage{position:relative;min-width:0;height:540px}.ff-water-stage .clar{inset:0}.ff-water-stage .i{width:22px;height:22px;fill:none;stroke:currentColor}.ff-water-stage .clar-cap{left:14px;right:14px;background:#fffdf1ed;color:#204b39!important;padding:7px 10px;border-radius:5px;text-shadow:none;font-size:11px;text-align:center}
.clar{position:absolute;inset:0 0 0 46px;margin:0;border-radius:34px;overflow:hidden;background:linear-gradient(180deg,#F4F9FB,#DCE9EF);box-shadow:var(--sh-3);isolation:isolate;-webkit-clip-path:inset(0 round 34px);clip-path:inset(0 round 34px);animation:reveal 1.4s .1s var(--ease) both;touch-action:pan-y;cursor:ew-resize;-moz-user-select:none;user-select:none;-webkit-user-select:none}
@keyframes reveal{from{-webkit-clip-path:inset(8% 12% 8% 12% round 34px);clip-path:inset(8% 12% 8% 12% round 34px);filter:saturate(.5) brightness(1.12)}}
.clar-gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease}
.clar.live .clar-gl{opacity:1}
.clar-fb{position:absolute;inset:0;transition:opacity .8s}
.clar.live .clar-fb{opacity:0}
.clar-fb svg,.clar-fb canvas{position:absolute;inset:0;width:100%;height:100%}
.clar-fb .fb-a{-webkit-clip-path:inset(0 calc(100% - var(--x)) 0 0);clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.clar-fb .fb-b{-webkit-clip-path:inset(0 0 0 var(--x));clip-path:inset(0 0 0 var(--x))}
.clar-vig{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(130% 95% at 58% 42%,transparent 58%,rgba(4,28,41,.2) 100%),linear-gradient(180deg,rgba(255,255,255,.08),transparent 30%)}
.clar-leak{position:absolute;inset:-30%;z-index:2;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(28% 22% at 64% 18%,rgba(255,236,200,.22),transparent 70%),radial-gradient(18% 40% at 92% 40%,rgba(127,220,243,.14),transparent 70%);animation:leak 11s ease-in-out infinite alternate}
@keyframes leak{from{transform:translate(-4%,2%);opacity:.55}to{transform:translate(5%,-3%);opacity:1}}
.clar-grain{position:absolute;inset:-50%;z-index:2;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.clar-tag{position:absolute;top:18px;z-index:3;font-family:var(--f-m);font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 14px -6px rgba(4,28,41,.3);transition:opacity .35s}
.clar-tag.l{left:18px;color:#8A6D2E}
.clar-tag.r{right:18px;color:var(--fjord)}
.clar-tag.off{opacity:0}
.clar-split{position:absolute;top:0;bottom:0;left:var(--x);width:0;z-index:3;pointer-events:none}
.clar-line{position:absolute;top:0;bottom:0;left:-1px;width:2px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 10%,#fff 90%,rgba(255,255,255,0));box-shadow:0 0 14px rgba(255,255,255,.9),0 0 2px rgba(4,28,41,.25)}
.clar-knob{position:absolute;z-index:6;left:var(--x);top:var(--ky,40%);width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 10px 28px -8px rgba(4,28,41,.45),0 0 0 6px rgba(255,255,255,.35);cursor:ew-resize;transition:transform .2s var(--ease)}
.clar-knob:hover,.clar.drag .clar-knob{transform:scale(1.08)}
.clar-knob .i{width:22px;height:22px;stroke-width:2.2}
.clar-cap{position:absolute;right:20px;bottom:14px;z-index:3;font-size:.66rem;color:rgba(255,255,255,.62);text-shadow:0 1px 6px rgba(0,0,0,.35)}
.clar:not(.live):not(.still) .clar-cap{color:rgba(10,34,48,.55);text-shadow:none}
.clar-hint{position:absolute;left:var(--x);top:var(--ky,40%);z-index:5;transform:translate(36px,-50%);display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:.74rem;font-weight:600;color:var(--ink);background:rgba(255,255,255,.86);padding:6px 12px;border-radius:999px;box-shadow:0 6px 18px -8px rgba(4,28,41,.35);transition:opacity .5s;pointer-events:none}
.clar-hint .i{width:14px;height:14px;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(4px)}}
.clar.hl .clar-hint{transform:translate(calc(-100% - 36px),-50%)}
.clar.hl .clar-hint .i{transform:scaleX(-1);animation-name:nudgeL}
@keyframes nudgeL{50%{transform:scaleX(-1) translateX(4px)}}
.clar.touched .clar-hint{opacity:0}

.ff-install .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:st}
.ff-install .step{display:flex;flex-direction:column;border-radius:26px;background:#fff;border:1px solid var(--line);overflow:hidden}
.ff-install .step-art{position:relative;aspect-ratio:1.6;display:grid;place-items:center;background:linear-gradient(0deg,rgba(255,255,255,.4),rgba(255,255,255,.4)),repeating-linear-gradient(0deg,transparent 0 23px,rgba(10,34,48,.05) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,rgba(10,34,48,.05) 23px 24px),var(--mist)}
.ff-install .step:not(:last-child) .step-art::after{content:"";position:absolute;right:-18px;top:50%;width:18px;border-top:2px dashed var(--fjord);z-index:2}
.ff-install .step-art svg{width:84%;height:auto;overflow:visible}
.ff-install .step-n{position:absolute;left:18px;top:14px;font-family:var(--f-m);font-size:.8rem;font-weight:600;color:var(--fjord)}
.ff-install .step-body{padding:20px 24px 24px;display:grid;gap:6px}
.ff-install .step-body b{font-size:1.12rem;color:var(--ink);font-weight:650}
.ff-install .step-body p{font-size:.93rem;color:var(--ink-2)}
.ff-install .spin{transform-box:fill-box;transform-origin:center;animation:ffInstallspinQ 3.2s var(--ease) infinite}
@keyframes ffInstallspinQ{0%,20%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
.ff-install .push{animation:ffInstallpushIn 3.2s var(--ease) infinite}
@keyframes ffInstallpushIn{0%,15%{transform:translateX(-22px)}55%,100%{transform:translateX(0)}}
.ff-install .click{animation:ffInstallclk 3.2s var(--ease) infinite}
@keyframes ffInstallclk{0%,55%{transform:scale(0);opacity:0}68%{transform:scale(1.2);opacity:1}80%,100%{transform:scale(1);opacity:1}}
.ff-install .pour{transform-box:fill-box;transform-origin:top;animation:ffInstallpour 3.2s ease-in-out infinite}
@keyframes ffInstallpour{0%{transform:scaleY(0)}15%,60%{transform:scaleY(1)}75%,100%{transform:scaleY(0);opacity:0}}
.ff-install .rise{transform-box:fill-box;transform-origin:bottom;animation:ffInstallriseQ 3.2s ease-in-out infinite}
@keyframes ffInstallriseQ{0%,10%{transform:scaleY(.1)}65%,100%{transform:scaleY(1)}}
.ff-install .led{animation:ffInstallled 3.2s steps(1) infinite}
@keyframes ffInstallled{0%,70%{fill:#D1462A}71%,100%{fill:#0E7A56}}
.ff-install .install-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px;font-size:.9rem;color:var(--ink-2)}
.ff-install .install-foot a:not(.btn){color:var(--ink);font-weight:600}


.ff-a-resources{display:grid;grid-template-columns:1.18fr .82fr;gap:.75rem;margin:2rem 0 0}
.ff-a-resources__guide,.ff-a-resources__video{min-width:0;display:flex;align-items:flex-start;gap:1rem;padding:1.15rem 1.25rem;min-height:9rem;border-radius:.9rem;border:1px solid #d2ddcf;background:#f2f6ed;color:#203d30;text-align:left}
.ff-a-resources__video{background:#fff;border-color:#d8ddcf;cursor:pointer;font:inherit;width:100%}
.ff-a-resources__video:hover{border-color:#b2a291;box-shadow:0 12px 25px #19382a13;transform:translateY(-2px)}
.ff-a-resources__icon{display:grid;place-items:center;flex:0 0 2.5rem;width:2.5rem;height:2.5rem;border-radius:.65rem;background:#dcebdd;color:#254e3a;font-size:1.2rem}
.ff-a-resources__video .ff-a-resources__icon{background:#fbe5df;color:#b32b1e}
.ff-a-resources__video .ff-a-resources__icon.ff-a-youtube-icon{flex:0 0 2.7rem;width:2.7rem;height:2.5rem;padding:0;border:0;border-radius:0;background:transparent;color:inherit}
.ff-a-resources__youtube-logo{display:block;width:2.55rem;height:1.85rem}
.ff-a-resources__kicker{display:block;color:#5e735e;font-size:.61rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.4;margin:0 0 .45rem}
.ff-a-resources h2,.ff-a-resources__video strong{display:block;font:600 1.1rem/1.25 Arial,sans-serif;margin:0 0 .4rem;max-width:none}
.ff-a-resources p,.ff-a-resources__video small{display:block;font-size:.72rem;color:#5e6b60;line-height:1.5;margin:0 0 .55rem}
.ff-a-resources__video b{display:block;color:#254e3a;font-size:.74rem}
.ff-a-resources__links{display:flex;flex-wrap:wrap;gap:.4rem .8rem}
.ff-a-resources__links a{font-size:.72rem;font-weight:700}
.ff-a-resources .ff-a-resources__note{grid-column:1/-1;font-size:.66rem;margin:.15rem 0 0}
.ff-a-dialog{width:min(44rem,calc(100vw - 2rem));max-height:88vh;padding:0;border:1px solid #d0d9cd;border-radius:1rem;background:#fcfcf8;color:#254e3a;box-shadow:0 24px 70px #0f2b1f3d}
.ff-a-dialog::backdrop{background:#0d211e99}
.ff-a-dialog__inner{padding:1.5rem}
.ff-a-dialog__top{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ff-a-dialog__top button{border:1px solid #cbd7ca;background:#fff;border-radius:50%;width:2.25rem;height:2.25rem;cursor:pointer;color:#254e3a;font-size:1.4rem}
.ff-a-dialog h2{font:600 clamp(1.65rem,3vw,2.2rem)/1.1 Georgia,serif;margin:.6rem 0}
.ff-a-dialog p{font-size:.78rem;color:#526353;line-height:1.5}
.ff-a-dialog__player{aspect-ratio:16/9;background:#13281d;border-radius:.55rem;overflow:hidden;margin:1rem 0}
.ff-a-dialog__player iframe{width:100%;height:100%;border:0;display:block}
.ff-a-dialog__attribution{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem}
.ff-a-dialog__actions{display:flex;gap:.6rem;border-top:1px solid #d9dfd6;padding-top:1rem}
.ff-a-dialog__actions button{flex:1;min-height:2.8rem;border:1px solid #254e3a;border-radius:.55rem;background:#fff;color:#254e3a;font-size:.78rem;font-weight:700;cursor:pointer}
.ff-a-dialog__actions button:last-child{background:#254e3a;color:#fff}
.ff-install .sec-head{display:flex;gap:30px;align-items:end;margin-bottom:24px}.ff-install .sec-head>div{flex:1}.ff-install h2{font:500 clamp(28px,3.5vw,42px)/1.2 Fraunces,Georgia,serif}.ff-install .sec-sub{max-width:440px;line-height:1.6}.ff-install .eyebrow{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:16px}.ff-install .steps{padding:0;list-style:none}.ff-install .step-body p{line-height:1.65}.ff-install .install-foot a{text-decoration:underline;text-underline-offset:3px}
.ff-a-resources{margin-top:0}.ff-a-resources>h2,.ff-a-resources>.ff-a-resources__youtube{grid-column:1/-1}.ff-a-resources>h2{font:500 30px/1.2 Fraunces,Georgia,serif}.ff-a-resources h3{font-size:18px;line-height:1.4;margin-bottom:10px}.ff-a-resources p,.ff-a-resources__video small{font-size:14px}.ff-a-resources__kicker{font-size:11px}.ff-a-resources__links a{font-size:14px;text-decoration:underline}.ff-a-resources .ff-a-resources__note{font-size:12px}.ff-a-dialog{margin:auto}.ff-a-dialog p{font-size:14px}.ff-a-dialog__top,.ff-a-dialog__actions button{font-size:12px}
@media(max-width:700px){.ff-water-stage{height:400px}.ff-water-stage .clar-tag{font-size:9px;padding:6px}.ff-water-stage .clar-hint{font-size:11px}.ff-install .sec-head{display:block}.ff-install .sec-sub{margin-top:18px}.ff-install .steps{grid-template-columns:1fr}.ff-install .step:not(:last-child) .step-art::after{display:none}.ff-a-resources{display:block}.ff-a-resources>*{margin-bottom:16px}.ff-a-dialog__inner{padding:16px}}
@media(prefers-reduced-motion:reduce){.ff-water-stage *,.ff-install *{animation:none!important;transition:none!important}}

.ff-catalog-controls{display:flex;gap:24px;flex-wrap:wrap;margin:24px 0 16px}.ff-catalog-controls label{display:flex;gap:10px;align-items:center;font-size:14px}.ff-catalog-controls select{max-width:100%;padding:10px;background:white;border:1px solid #839883;border-radius:5px}.ff-card-image{display:block;width:100%}.ff-card-image img{width:100%;height:auto;aspect-ratio:1;-o-object-fit:contain;object-fit:contain}.ff-card-packs{display:flex;gap:6px;flex-wrap:wrap}.ff-card-packs a{font-size:12px;padding:8px;border:1px solid #9aac97;border-radius:5px}.ff-card-packs a[aria-current=true]{background:var(--ff-ink);color:white;border-color:var(--ff-ink)}.ff-card-price{font-size:24px;font-weight:650}.ff-card-details{margin-top:auto;text-decoration:underline;font-size:14px}.ff-catalog-card .ff-fine{margin:0}.ff-anchor{display:block;scroll-margin-top:24px}@media(max-width:600px){.ff-catalog-controls{gap:12px}.ff-catalog-controls label{display:grid;flex:1;min-width:140px}.ff-card-packs a{padding:9px}}

.ff-product-reference>p,.ff-product-reference .ff-a-qa p{line-height:1.7;margin:14px 0}.ff-model-list{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.ff-model-list code{padding:6px 9px;border:1px solid #d7dfd5;border-radius:4px;font-size:13px;background:#f7f9f2}.ff-product-reference input[type=search]{display:block;max-width:100%;width:400px;border:1px solid #839883;padding:12px;border-radius:5px;margin:12px 0;font-size:16px}.ff-product-reference label{display:block;margin-top:24px;font-weight:600}.ff-a-hafex-reference{margin:24px 0;padding:24px;background:#f4f6ee;border-radius:12px}.ff-a-hafex-reference h3{font-size:22px;line-height:1.4}.ff-a-hafex-reference p{margin:16px 0;line-height:1.65}.ff-a-hafex-reference table{width:100%;border-collapse:collapse;margin:20px 0}.ff-a-hafex-reference td,.ff-a-hafex-reference th{padding:12px;text-align:left;border-bottom:1px solid #c9d6c5}.ff-a-hafex-reference ol{padding-left:20px;line-height:1.8}.ff-a-hafex-table-wrap{overflow-x:auto}.ff-a-hafex-reference a,.ff-product-reference>p a{ text-decoration:underline;text-underline-offset:3px}.ff-product-reference .ff-a-qa h2{margin-top:32px}.ff-product-reference .ff-a-qa h3{line-height:1.5}

/* Let long native select options shrink within mobile grid tracks. */
@media(max-width:600px){.ff-catalog-controls label{grid-template-columns:minmax(0,1fr)}.ff-catalog-controls select{min-width:0;width:100%;box-sizing:border-box}}

/* Searchable reference library: shares the audited model browser with product pages. */
.ff-reference-library{margin:3rem auto 0;max-width:1200px;color:var(--ff-ink,#204b39)}
.ff-reference-library header{max-width:780px;margin-bottom:1.5rem}.ff-reference-library h2{font:500 clamp(1.7rem,3vw,2.5rem)/1.15 Fraunces,Georgia,serif;margin:.5rem 0 1rem}.ff-reference-library p{line-height:1.65}
.ff-library-toolbar{display:flex;align-items:end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:1.5rem 0}.ff-library-toolbar label{display:grid;gap:.6rem;max-width:100%;font-weight:600}.ff-library-toolbar select,.ff-library-card input{font:inherit;min-height:44px;max-width:100%;min-width:0;border:1px solid #aec4b4;border-radius:10px;padding:10px 12px;background:#fff;color:#204b39;box-sizing:border-box}
.ff-library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}.ff-library-card{border:1px solid #d7dfd5;border-radius:20px;background:#fff;padding:24px;min-width:0}.ff-library-card[hidden]{display:none!important}.ff-library-card h3{font:500 1.7rem/1.2 Fraunces,Georgia,serif;margin:.5rem 0}.ff-library-card h3 a{text-decoration:none}.ff-library-card details{border-block:1px solid #d7dfd5;margin:1rem 0}.ff-library-card summary{cursor:pointer;min-height:44px;padding:14px 0;font-weight:650}.ff-library-card label{display:block;font-size:.85rem;margin:8px 0}.ff-library-card input{width:100%}.ff-library-card [data-ff-model-count]{font-size:.85rem}.ff-library-card [data-ff-model-list]{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:16px}.ff-library-card code{font-size:.76rem;padding:4px 6px;border-radius:5px;background:#eef2e5;overflow-wrap:anywhere}.ff-library-card button{min-height:44px;margin-bottom:16px;border:1px solid #aec4b4;border-radius:8px;padding:8px 12px;background:#f7f6ef;font:inherit;cursor:pointer}.ff-library-warning{color:#923c29!important;background:#fff4e9;padding:12px;border-radius:10px}.ff-library-product{display:inline-block;line-height:1.5;font-weight:650}.ff-library-help{margin-top:2rem;padding:24px;border-radius:20px;background:#eef2e5}.ff-library-help ol{padding-left:1.25rem;line-height:1.7}.ff-reference-library :is(a,button,input,select,summary):focus-visible{outline:3px solid #315d42;outline-offset:4px}
@media(max-width:700px){.ff-library-grid{grid-template-columns:minmax(0,1fr)}.ff-library-card{padding:18px}.ff-library-toolbar label,.ff-library-toolbar select{width:100%}}