/* Material concepts: the FERROBEND navy, orange, gold and white card system. */
.material-explorer{background:linear-gradient(135deg,#eef4f8,#f8fafc 65%)}
.mex-controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:25px}
.mex-controls[hidden],.material-explorer [hidden],.material-comparison [hidden]{display:none!important}
.mex-view-button{display:inline-flex;align-items:center;gap:12px;min-height:48px;border:1px solid #bdcddd;border-radius:8px;padding:12px 18px;background:white;color:#0b1f3a;font:600 12px/1.5 Poppins,Arial,sans-serif;transition:border-color .2s,background-color .2s,box-shadow .2s}
.mex-view-button>span{font:11px/1.5 Consolas,monospace;color:#a65020}
.mex-view-button[aria-pressed=true]{background:#0b2d49;color:white;border-color:#0b2d49;box-shadow:inset 0 -3px #ff6a2a}
.mex-view-button[aria-pressed=true]>span{color:#ffad87}
.mex-view-button:hover{border-color:#ff6a2a}
.mex-view-button:focus-visible,.mex-compare-controls select:focus-visible,.material-comparison .text-link:focus-visible{outline:3px solid #dc510d;outline-offset:4px}
.mex-panels{display:grid;gap:24px}
.mex-panel{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:36px;padding:24px;background:white;border:1px solid #d4dfe8;border-radius:14px;box-shadow:0 14px 32px #0b1f3a0b;min-width:0}
.mex-figure{margin:0;min-width:0;overflow:hidden;border:1px solid #45617b;border-radius:11px 11px 11px 4px;background-color:#0b2d49;background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px),radial-gradient(ellipse at 65% 40%,#1f4e7944,transparent 75%);background-size:24px 24px,24px 24px,auto;box-shadow:inset 0 1px 0 #ffffff16}
.mex-figure-top{display:flex;justify-content:space-between;gap:15px;padding:15px 17px;border-bottom:1px solid #ffffff16;color:#bfd1df;font:9px/1.5 Consolas,monospace;letter-spacing:1px}
.mex-figure-top>span:last-child{color:#ffad87}
.mex-figure svg{width:100%;height:auto;display:block}
.mex-figure figcaption{border-top:1px solid #ffffff16;padding:12px 17px;color:#bfd1df;font:10px/1.7 Poppins,Arial,sans-serif}
.mex-node{fill:#173e5c;stroke:#6689a1;stroke-width:1}
.mex-node-accent{fill:#2b4050;stroke:#e3b259;stroke-width:1.3}
.mex-node-title{fill:#f2f6f9;font:500 14px Poppins,Arial,sans-serif}
.mex-node-sub{fill:#b7cfdf;font:10px Poppins,Arial,sans-serif}
.mex-line{fill:none;stroke:#e3b259;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.mex-label{fill:#dbe7ef;font:12px Poppins,Arial,sans-serif}
.mex-kicker{fill:#9fbed2;font:10px Consolas,monospace;letter-spacing:1.1px}
.mex-caption{fill:#a8c3d5;font:10px Poppins,Arial,sans-serif}
.mex-metal{fill:#244b66;stroke:#7697ac;stroke-width:1.2}
.mex-film{stroke:#e3b259;stroke-width:6;stroke-linecap:round;fill:none}
.mex-film-label{fill:#ffcb86;font:11px Poppins,Arial,sans-serif}
.mex-layer{fill:none;stroke:#96b7cb;stroke-width:.8;opacity:.25}
.mex-exposure{fill:none;stroke:#ff975c;stroke-width:1.1;opacity:.8}
.mex-document{fill:#173e5c;stroke:#799bb2;stroke-width:1.1}
.mex-explanation{min-width:0;padding:10px 10px 10px 0}
.mex-explanation>.eyebrow{color:#a65020;margin-bottom:16px}
.mex-explanation h3{font-size:25px;line-height:1.3;letter-spacing:-.6px;color:#0b1f3a}
.mex-explanation>p:not(.eyebrow){margin-top:20px;color:#566779;font:14px/1.9 Poppins,Arial,sans-serif}
.mex-reading-note{display:flex;align-items:start;gap:14px;border-top:1px solid #d4dfe8;margin-top:26px;padding-top:18px}
.mex-reading-note>span{color:#a65020;font-size:22px;line-height:1.3}
.mex-reading-note p{font-size:11px;line-height:1.8;color:#637487}
.mex-status,.mex-compare-status{margin:12px 0 0;font-size:11px;color:#566779;min-height:19px}
.material-comparison{background:linear-gradient(145deg,#e8f0f7,#f8fafc 75%)}
.mex-compare-controls{display:grid;grid-template-columns:1fr 40px 1fr;gap:20px;align-items:end;margin-bottom:24px;padding:22px 26px;border:1px solid #d4dfe8;border-top:3px solid #ff6a2a;background:white;border-radius:10px}
.mex-compare-controls label{display:flex;flex-direction:column;gap:9px;min-width:0;color:#0b1f3a;font-size:12px;font-weight:600}
.mex-compare-controls select{width:100%;min-height:48px;border:1px solid #aebdcb;border-radius:5px;padding:12px;background:#f8fafc;color:#0b1f3a;font:13px/1.5 Poppins,Arial,sans-serif}
.mex-versus{display:flex;align-items:center;justify-content:center;height:48px;color:#a65020;font:24px/1.5 Consolas,monospace}
.mex-compare-results{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.mex-compare-results>div{display:flex;min-width:0}
.mex-compare-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mex-family-card{display:flex;flex-direction:column;min-width:0;flex:1;border:1px solid #d4dfe8;border-radius:14px;padding:28px;background:white;box-shadow:0 12px 30px #0b1f3a08}
.mex-family-heading{display:flex;align-items:center;gap:17px;margin-bottom:20px}
.mex-symbol{display:grid;place-items:center;flex:0 0 58px;min-height:58px;border:1px solid #54738a;border-radius:12px 12px 12px 4px;background:#0b2d49;color:#ffb080;font:600 21px/1.2 Poppins,Arial,sans-serif;box-shadow:inset 0 1px 0 #ffffff24,0 6px 14px #0b1f3a14}
.mex-family-heading .eyebrow{font-size:8px;color:#566779;letter-spacing:1.4px;margin-bottom:5px}
.mex-family-heading h3{font-size:21px;line-height:1.3;color:#0b1f3a}
.mex-family-card>p,.mex-family-detail p{font-size:13px;line-height:1.85;color:#566779}
.mex-family-card>h4,.mex-family-detail h4{font-size:12px;line-height:1.5;color:#0b1f3a;margin:22px 0 12px}
.mex-family-card ul{list-style:none;margin:0;padding:0}
.mex-family-card li{position:relative;padding:12px 0 12px 17px;border-bottom:1px solid #e6edf2;font-size:12px;line-height:1.7;color:#566779}
.mex-family-card li:before{content:'';position:absolute;top:20px;left:0;width:5px;height:5px;background:#ff6a2a}
.mex-family-detail{margin-bottom:20px}
.mex-family-card>.text-link{margin-top:auto;align-self:start;font-size:12px;line-height:1.7}
.mex-comparison-note{border-left:3px solid #ff6a2a;padding:16px 20px;margin-top:20px;background:#dce8f2;border-radius:0 8px 8px 0;color:#566779;font-size:11px;line-height:1.8}
@media(max-width:1050px){.mex-panel{gap:25px;padding:22px}.mex-explanation h3{font-size:22px}.mex-compare-catalog{grid-template-columns:1fr 1fr}.mex-family-card{padding:24px}}
@media(max-width:800px){.mex-panel{grid-template-columns:1fr}.mex-explanation{padding:0 3px 4px}.mex-figure{width:100%;max-width:620px;margin-inline:auto}.mex-compare-controls{gap:15px;padding:20px}.mex-compare-results,.mex-compare-catalog{grid-template-columns:1fr}.mex-family-heading h3{font-size:22px}}
@media(max-width:480px){.mex-controls{gap:8px}.mex-view-button{flex:1 1 auto;padding:11px 13px;gap:9px;font-size:11px}.mex-panel{padding:17px;gap:24px}.mex-explanation h3{font-size:22px}.mex-explanation>p:not(.eyebrow){font-size:13px}.mex-figure-top{padding:12px;letter-spacing:.4px;font-size:8px}.mex-figure figcaption{padding:11px 12px;font-size:9px}.mex-compare-controls{grid-template-columns:1fr;gap:17px}.mex-versus{display:none}.mex-family-card{padding:23px}.mex-family-heading{gap:14px}.mex-family-heading h3{font-size:20px}.mex-symbol{flex-basis:52px;min-height:52px}.mex-reading-note{margin-top:22px}}
@media(prefers-reduced-motion:reduce){.mex-view-button{transition:none}}
@media print{.mex-controls,.mex-compare-controls,.mex-status,.mex-compare-status{display:none!important}.material-explorer .mex-panel[hidden]{display:grid!important}.material-comparison .mex-compare-catalog[hidden]{display:grid!important}.material-comparison .mex-compare-results{display:none!important}.mex-panel,.mex-family-card{break-inside:avoid;box-shadow:none}.mex-figure{print-color-adjust:exact;-webkit-print-color-adjust:exact}}