/* ===== self-hosted fonts (SIL OFL, assets/fonts/LICENSE.txt) ===== */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-500.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-600.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-700.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:800 900;font-display:swap;src:url(fonts/barlow-800.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url(fonts/plex-sans-var.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:100 700;font-display:swap;src:url(fonts/plex-sans-italic-var.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:100 400;font-display:swap;src:url(fonts/plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plex-mono-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600 900;font-display:swap;src:url(fonts/plex-mono-600.woff2) format("woff2")}
html,body{font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
button,input,select,textarea,optgroup{font-family:inherit}
code,kbd,pre,samp{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* additions to the mockup CSS for the live static site */
h2.oo-h3{font-size:22px;font-weight:600}
.cfg .step h2.oo-h3{font-size:18px;display:flex;gap:10px;align-items:center}
.cfg .step h2.oo-h3 em{font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-size:13px}
.zone h2.oo-h3{font-size:20px}
.pnkey .simple h2.oo-h3{font-size:18px}
.oo-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.oo-status{grid-column:1/-1;font-size:14px;min-height:0}
.oo-status:empty{display:none}
.oo-status.ok{color:#7fd18b}
.oo-status.err{color:#ff8a80}

/* ===== 2026-10-10 header: logo, menus, dropdowns (oo-nav) ===== */
/* logo: fixed height, natural width, never shrinks or squashes */
header.main .logo{flex:0 0 auto;display:flex;align-items:center;min-width:max-content}
header.main .logo img{height:30px!important;width:auto!important;max-width:none!important;flex:0 0 auto;object-fit:contain;aspect-ratio:auto;filter:none}
footer .cols img[alt="One Optics"]{height:28px!important;width:auto!important;max-width:none!important;object-fit:contain}
/* menus: Title Case as written, no forced capitals */
nav.top{text-transform:none!important;letter-spacing:.2px;font-size:15.5px}
.mcols h5{text-transform:none!important;letter-spacing:.3px;font:600 13px "Barlow",sans-serif;color:#8d949e}
footer h4{text-transform:none!important;letter-spacing:.3px}
/* desktop dropdowns: anchored to the header bottom, full-height triggers so the pointer never crosses a gap */
header.main{position:sticky}
header.main>.wrap{position:static}
nav.top{align-self:stretch;align-items:stretch!important;min-width:0}
nav.top .ni{position:static!important;display:flex;align-items:center}
nav.top .ni>a{display:flex;align-items:center;height:100%;white-space:nowrap}
nav.top .ddtog{display:inline-flex;align-items:center;background:none;border:0;padding:0 0 0 5px;margin:0;color:inherit;font-size:11px;cursor:pointer;line-height:1}
.ni.hasmega.open>.ddtog{transform:rotate(180deg)}
.mega{position:absolute!important;left:0;right:0;top:100%!important;margin-top:0!important;max-height:calc(100vh - 120px);overflow:auto;z-index:50}
header.main .mega .wrap.mcols{display:grid!important;height:auto!important;align-items:start;gap:28px;padding:24px 32px 28px;flex-wrap:nowrap}
.mcols.m5{grid-template-columns:repeat(5,minmax(0,1fr))!important}
.mcols.m3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.mcols a{line-height:1.3}
.mcols a:focus-visible,nav.top a:focus-visible,nav.top .ddtog:focus-visible{outline:2px solid #4c8dff;outline-offset:2px}
html.oo-nav .ni.hasmega:hover .mega{display:none}
html.oo-nav .ni.hasmega.open .mega{display:block}
.ni.hasmega.open>a,.ni.hasmega:hover>a{color:#fff}
/* crowded widths: collapse to the menu button before anything squeezes the logo */
@media (max-width:1180px){
  header.main .wrap{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:10px;gap:12px}
  .search{display:none!important}
  header.main .btn.acc{margin-left:auto}
  .mtog{display:inline-block!important}
  nav.top{display:none!important;order:3;flex-basis:100%}
  body.navopen nav.top{display:flex!important;flex-direction:column;align-items:stretch!important;gap:0;padding:6px 0 12px;overflow:visible}
  body.navopen nav.top .ni{display:flex;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line)}
  body.navopen nav.top .ni>a{padding:12px 0;height:auto;flex:1}
  nav.top .ddtog{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:0;color:#c3c8cf;font-size:16px;cursor:pointer}
  .ni.hasmega.open .ddtog{transform:rotate(180deg)}
  .mega,.ni.hasmega:hover .mega,html.oo-nav .ni.hasmega:hover .mega{display:none!important}
  html.oo-nav body.navopen .ni.hasmega.open .mega{display:block!important;position:static!important;flex-basis:100%;box-shadow:none;border:0;background:transparent;max-height:none}
  header.main .mega .wrap.mcols{grid-template-columns:1fr 1fr!important;padding:4px 0 14px!important;gap:14px 24px}
}
@media (max-width:900px){ header.main .btn.acc{display:none} .mtog{margin-left:auto} }
@media (max-width:560px){ header.main .mega .wrap.mcols{grid-template-columns:1fr!important} }
/* home: hero stack image */
.hero img.hero-stack{max-height:520px;width:auto;height:auto}
/* configurator preview: per-position image layers (stage) or a pending state, never a stand-in image */
.cfgout .pv{position:relative}
.cfgout .pv .stage{position:absolute;inset:6%;margin:0}
.cfgout .pv .stage svg{display:block;width:100%;height:100%}
.cfgout .pv .stage.loading{border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.08),rgba(255,255,255,.03));background-size:200% 100%;animation:oo-shimmer 1.2s linear infinite}
@keyframes oo-shimmer{to{background-position:-200% 0}}
.cfgout .pv .pvpending{display:flex;align-items:center;justify-content:center;min-height:220px;padding:24px;text-align:center;font-size:14px;color:var(--ink2,#9aa4b2);border:1px dashed var(--line,#2a3340);border-radius:6px}
.cfgout .pv [hidden]{display:none!important}
.ftrow{align-items:center;flex-wrap:wrap}
.ftrow .ftl{font-size:13px;color:var(--ink2,#9aa4b2);margin-right:6px}
.stkrow{margin:12px 0;font-size:14px;color:var(--ink)}
.stkrow input{width:64px;margin-left:8px;padding:5px;background:var(--bg3);color:var(--ink);border:1px solid var(--line);border-radius:4px}
.stkrow #stkinfo{margin-left:8px;color:var(--ink2,#9aa4b2)}
/* home hero stats: one-line labels, wrap as whole items, clear the overlapping pillar cards */
.hero .stats{flex-wrap:wrap;gap:14px 40px}
.hero .stats>div{flex:0 0 auto}
.hero .stats small{display:block;white-space:nowrap}
@media(min-width:901px){.hero .wrap{padding-bottom:84px}}
@media(max-width:900px){.hero .stats{gap:14px 28px}.hero .wrap{padding-bottom:70px}}