
/* Layout: navy masthead + silver laboratory-plate pages; journal-style figures, data tables and numbered references */
:root{
  --navy-950:#071226; --navy-900:#0B1B36; --navy-800:#112A52; --navy-700:#1A3C70; --navy-600:#2A5596;
  --silver-100:#F2F4F7; --silver-200:#E3E7ED; --silver-300:#C9D0DA; --silver-400:#A7B1BF; --silver-500:#7E8A9C;
  --bg:#F2F4F7; --surface:#FFFFFF; --surface-2:#E9EDF2; --fg:#0D1A2D; --muted:#46546B; --line:#CBD2DC;
  --link:#1D4E91; --accent:#1A3C70; --chip:#E1E7F0; --chip-fg:#16325E; --warn-bg:#EEF2F8; --plate:#FFFFFF;
  --mast:#0B1B36; --mast-fg:#E8ECF2; --mast-muted:#A7B1BF;
  --f-display:"IBM Plex Serif", Georgia, "Times New Roman", serif;
  --f-body:"IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#08111F; --surface:#0F1C33; --surface-2:#13233F; --fg:#E7ECF3; --muted:#A9B5C6; --line:#24375A;
  --link:#9DB9E6; --accent:#C9D0DA; --chip:#1A2E50; --chip-fg:#D4DCE8; --warn-bg:#12223D; --plate:#F7F8FA;
  --mast:#050D1C; --mast-fg:#E8ECF2; --mast-muted:#A7B1BF; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#08111F; --surface:#0F1C33; --surface-2:#13233F; --fg:#E7ECF3; --muted:#A9B5C6; --line:#24375A;
  --link:#9DB9E6; --accent:#C9D0DA; --chip:#1A2E50; --chip-fg:#D4DCE8; --warn-bg:#12223D; --plate:#F7F8FA;
  --mast:#050D1C; --mast-fg:#E8ECF2; --mast-muted:#A7B1BF; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--mast)}
a{color:var(--link)} a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--navy-600);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:500;line-height:1.2;text-wrap:balance;margin:0}
h1{font-size:clamp(2rem,4.2vw,3.1rem);letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:8px}
h3{font-size:1.25rem}
p{margin:0}
.prose{max-width:none;display:grid;gap:14px}
.eyebrow{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mono{font-family:var(--f-mono)}
.tm{font-size:.6em;vertical-align:super;font-family:var(--f-body)}

/* masthead */
header.mast{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--mast);color:var(--mast-fg);border-bottom:1px solid #22355a}
.mast .bar{display:flex;align-items:center;gap:20px;min-height:68px}
.logo{display:flex;flex-direction:column;line-height:1;text-decoration:none;color:var(--mast-fg);flex:none}
.logo b{font-family:var(--f-display);font-weight:500;font-size:1.45rem;letter-spacing:.2em;background:linear-gradient(180deg,#FFFFFF 0%,#C9D0DA 55%,#8E99AA 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo span{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.32em;color:var(--mast-muted);margin-top:5px}
nav.main{display:flex;gap:4px;margin-left:40px;flex:1;justify-content:space-between;align-items:center}
.nav-item{position:relative;flex:none}
.nav-item>a,.nav-item>button{white-space:nowrap}
.nav-item>a,.nav-item>button{display:block;padding:10px 12px;color:var(--mast-fg);text-decoration:none;font-size:.9rem;font-weight:500;background:none;border:0;cursor:pointer;font-family:var(--f-body);border-radius:4px}
.nav-item>a:hover,.nav-item>button:hover,.nav-item.on>a,.nav-item.on>button{background:#16305a}
.drop{position:absolute;top:100%;left:0;min-width:250px;background:#0E2246;border:1px solid #2A4372;border-radius:6px;padding:6px;display:none;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.nav-item:hover .drop,.nav-item:focus-within .drop{display:block}
.drop a{display:block;padding:8px 10px;color:#DCE3EC;text-decoration:none;font-size:.88rem;border-radius:4px}
.drop a:hover{background:#1A3866;color:#fff}
.drop .grp{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#8E9BB0;padding:8px 10px 2px}
.shop-btn{margin-left:0;padding:9px 16px!important;border:1px solid #9AA6B8!important;background:linear-gradient(180deg,#E9EDF2,#AEB8C6)!important;color:#0B1B36!important;font-weight:600!important}
.menu-toggle{display:none;margin-left:auto;background:none;border:1px solid #3A527D;color:var(--mast-fg);padding:8px 12px;border-radius:4px;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em}
@media (max-width:1260px){
  .menu-toggle{display:block}
  nav.main{display:none;margin-left:0;justify-content:flex-start;position:absolute;left:0;right:0;top:100%;background:var(--mast);flex-direction:column;align-items:stretch;padding:8px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px));max-height:calc(100vh - 80px);overflow:auto;border-bottom:1px solid #22355a}
  nav.main.open{display:flex}
  .drop{position:static;display:block;box-shadow:none;border:0;background:transparent;padding:0 0 6px 12px}
  .shop-btn{margin:8px 0 0}
}

/* page frame */
main{min-height:60vh}
.page[hidden]{display:none}
.hero{background:radial-gradient(1200px 400px at 85% -10%,#1E427B 0%,transparent 60%),linear-gradient(180deg,var(--navy-900),var(--navy-950));color:#E8ECF2;border-bottom:1px solid #2A4372}
.hero .wrap{padding-block:56px 48px;display:grid;gap:18px}
.hero h1{color:#F4F6F9}
.hero .lede{color:#C3CCD8;font-size:1.12rem;max-width:none}
.hero .eyebrow{color:#9FB0C8}
.crumb{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;color:#8FA0B9}
.crumb a{color:#BFCBDB;text-decoration:none}
section.blk{padding-block:56px;border-bottom:1px solid var(--line)}
section.blk.alt{background:var(--surface-2)}
.blk-head{display:grid;gap:8px;margin-bottom:26px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:860px){.grid2,.grid3{grid-template-columns:minmax(0,1fr)}.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grid2>*,.grid3>*,.grid4>*{min-width:0}

/* figures as journal plates */
figure.plate{margin:0;background:var(--plate);border:1px solid var(--line);border-radius:4px;padding:12px;display:grid;gap:10px}
figure.plate img{display:block;margin:0 auto;max-width:100%;height:auto}
figure.plate figcaption{font-size:.84rem;color:#3D4A5E;line-height:1.5;border-top:1px solid #E1E5EB;padding-top:8px}
figure.plate figcaption b{font-family:var(--f-mono);font-weight:500;color:#0B1B36;margin-right:6px}
.plates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:700px){.plates{grid-template-columns:minmax(0,1fr)}}

/* data */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:4px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--surface-2);font-weight:500}
tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums;font-family:var(--f-mono);white-space:nowrap}
.spec{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);border:1px solid var(--line);border-radius:4px;background:var(--surface);font-size:.92rem}
.spec dt{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:11px 12px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.spec dd{margin:0;padding:11px 12px;border-bottom:1px solid var(--line)}
.spec dt:last-of-type,.spec dd:last-of-type{border-bottom:0}
@media (max-width:560px){.spec{grid-template-columns:minmax(0,1fr)}.spec dt{border-bottom:0}}
.stat{border-top:2px solid var(--accent);padding-top:12px;display:grid;gap:4px}
.stat b{font-family:var(--f-display);font-weight:500;font-size:2.1rem;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:.88rem;color:var(--muted)}
.hero .stat{border-top-color:#AEB8C6}.hero .stat span{color:#AFBBCB}.hero .stat b{color:#F4F6F9}
.chip{justify-self:start;display:inline-block;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;padding:3px 8px;border-radius:3px;background:var(--chip);color:var(--chip-fg)}
.chip.lab{background:#E7EDF7;color:#1D3F74}
.chip.clin{background:#E3EFEA;color:#1D5A44}
:root[data-theme="dark"] .chip.lab{background:#1A2E50;color:#C9D7EE}
:root[data-theme="dark"] .chip.clin{background:#173A30;color:#BFE3D3}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chip.lab{background:#1A2E50;color:#C9D7EE}:root:not([data-theme="light"]) .chip.clin{background:#173A30;color:#BFE3D3}}

/* cards & lists */
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px;display:grid;gap:10px;align-content:start}
a.card{text-decoration:none;color:inherit}
a.card:hover{border-color:var(--navy-600)}
.card .go{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;color:var(--link);text-transform:uppercase}
ul.ticks{margin:0;padding:0;list-style:none;display:grid;gap:8px}
ul.ticks li{padding-left:22px;position:relative}
ul.ticks li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border:1.5px solid var(--accent);transform:rotate(45deg)}
ol.refs{margin:0;padding-left:22px;display:grid;gap:6px;font-size:.84rem;color:var(--muted)}
ol.refs li{padding-left:4px}
.note{background:var(--warn-bg);border:1px solid var(--line);border-left:3px solid var(--navy-600);padding:12px 14px;font-size:.85rem;color:var(--muted);border-radius:3px}
.steps{display:grid;gap:0;counter-reset:s}
.steps>div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px dashed var(--line)}
.steps>div::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--f-mono);color:var(--muted);font-size:.85rem;padding-top:2px}
.tl{display:grid;gap:0;border-left:1px solid var(--line);margin-left:6px}
.tl div{padding:0 0 18px 20px;position:relative}
.tl div::before{content:"";position:absolute;left:-5px;top:7px;width:9px;height:9px;background:var(--bg);border:2px solid var(--accent);border-radius:50%}
.tl b{font-family:var(--f-mono);font-weight:500;font-size:.85rem;color:var(--muted);display:block}
.subnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.subnav a{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.05em;padding:6px 10px;border:1px solid #3A5482;border-radius:3px;color:#D6DEE9;text-decoration:none}
.subnav a:hover,.subnav a.on{background:#E3E7ED;color:#0B1B36;border-color:#E3E7ED}
.prod{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:28px;align-items:start;padding-block:30px;border-bottom:1px solid var(--line)}
.prod:last-child{border-bottom:0}
.prod .shot{background:linear-gradient(180deg,#F7F8FA,#DDE2E9);border:1px solid var(--line);border-radius:6px;padding:14px;display:flex;justify-content:center}
.prod .shot img{max-height:260px;width:auto;max-width:100%;height:auto;object-fit:contain}
@media (max-width:700px){.prod{grid-template-columns:minmax(0,1fr)}}
details.faq{border-bottom:1px solid var(--line);padding:16px 0}
details.faq summary{cursor:pointer;font-family:var(--f-display);font-size:1.12rem;font-weight:600;list-style:none;display:flex;gap:12px}
details.faq summary::before{content:"Q";font-family:var(--f-mono);color:var(--muted);font-size:.9rem;padding-top:3px}
details.faq[open] summary{margin-bottom:10px}
details.faq .prose{padding-left:24px}
form.qa{display:grid;gap:14px;max-width:640px}
form.qa label{display:grid;gap:6px;font-size:.88rem;font-weight:500}
form.qa input,form.qa textarea,form.qa select{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--fg)}
.btn{display:inline-block;font:inherit;font-weight:600;padding:11px 18px;border-radius:4px;border:1px solid var(--navy-700);background:var(--navy-800);color:#F2F4F7;cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.hero .btn.ghost{color:#E8ECF2;border-color:#4A6290}
.btn.silver{background:linear-gradient(180deg,#F2F4F7,#B5BFCC);color:#0B1B36;border-color:#9AA6B8}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

.article{max-width:none}
.article>.spec,.article>.tbl{margin:0 0 18px}
.article>.eyebrow,.article>.chip{display:block;margin-bottom:8px;width:max-content}
.article>h2{margin:0 0 12px}
.article>ul.ticks{margin:0 0 14px}
.article .plates.fig-r,.article .plates.fig-l{display:grid;gap:8px}
.article .plates.fig-w{margin:8px 0 22px}
.article>p{margin:0 0 14px;max-width:none}
.article>h3{margin:22px 0 10px}
.article .fig-r{clear:both;float:right;width:46%;margin:4px 0 16px 28px}
.article .fig-l{clear:both;float:left;width:42%;margin:4px 28px 16px 0}
.article .fig-r img,.article .fig-l img{width:100%}
.article .fig-w{margin:6px 0 22px;clear:both}
@media (max-width:700px){.article .fig-r,.article .fig-l{float:none;width:auto!important;margin:6px 0 18px}}
.tbl-compact th{padding:7px 12px}.tbl-compact td{padding:7px 12px}
@media (max-width:700px){.tbl-compact,#p-fmlt dl.spec,dl.spec-compact{width:100%!important}}
.combo{width:min(100%,820px);margin:10px auto 20px;display:grid;gap:10px}
.combo-row{display:flex;gap:16px;align-items:stretch}
.combo-img{height:auto;width:150px;object-fit:cover;border:1px solid var(--line);border-radius:4px;flex:none;align-self:center}
.combo-tbl{flex:1;min-width:0}
.combo-tbl th,.combo-tbl td{padding:7px 12px}
.combo-credit{font-size:.72rem;color:var(--muted);margin:0}
@media (max-width:600px){.combo-row{flex-direction:column}.combo-img{width:160px}}
.drop-grouped{min-width:290px}
.drop .grp-h{font-family:var(--f-display);font-size:1.02rem;font-weight:600;color:#fff;padding:9px 10px 5px;letter-spacing:.01em}
.drop .grp-i{font-size:.8rem;padding:5px 10px 5px 22px;color:#C3CCD8}
.drop .grp-sep{height:1px;background:#2A4372;margin:6px 8px}
/* footer */
footer.foot{background:var(--mast);color:#C3CCD8;padding-block:44px 34px;font-size:.88rem}
footer.foot a{color:#DDE4EE}
.foot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
@media (max-width:860px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.foot-grid>*{min-width:0}
.foot h4{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#8E9BB0;font-weight:500;margin-bottom:10px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot ul a{text-decoration:none}
.legal{border-top:1px solid #22355a;margin-top:30px;padding-top:20px;font-size:.78rem;color:#97A4B8;display:grid;gap:8px;max-width:none}
@media (prefers-reduced-motion:no-preference){.page:not([hidden]) .hero .wrap>*{animation:rise .5s ease both}.page:not([hidden]) .hero .wrap>*:nth-child(2){animation-delay:.06s}.page:not([hidden]) .hero .wrap>*:nth-child(3){animation-delay:.12s}}
@keyframes rise{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:640px){.fig-row{flex-direction:column}.fig-row>figure{flex:none!important;width:100%}.fig-pair{float:none!important;justify-content:center;margin:4px 0 16px!important}}
/* multi-page build */
[id]{scroll-margin-top:88px}

/* operator info, privacy policy, consent */
.biz{border-top:1px solid #22355a;margin-top:30px;padding-top:20px;display:grid;gap:6px;font-size:.84rem;color:#C3CCD8;line-height:1.6}
.biz b{color:#E8ECF2;font-weight:600}
.biz a.pp{color:#DDE4EE;font-weight:inherit;text-decoration:underline;text-underline-offset:3px}
.biz .ext{color:#97A4B8}
.policy{max-width:880px;margin:0 auto;display:grid;gap:14px}
.policy h2{font-size:1.35rem;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.policy h2:first-of-type{border-top:0;margin-top:0;padding-top:0}
.policy ul,.policy ol{margin:0;padding-left:22px;display:grid;gap:6px}
.policy .tbl{margin:4px 0}
.policy .lang{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.policy .sep{height:1px;background:var(--line);margin:40px 0 10px}
.consent{border:1px solid var(--line);border-radius:4px;background:var(--surface);padding:12px 14px;font-size:.84rem;color:var(--muted);display:grid;gap:8px}
.consent ul{margin:0;padding-left:18px;display:grid;gap:2px}
form.qa label.chk{display:flex;gap:10px;align-items:flex-start;font-weight:500;color:var(--fg)}
form.qa label.chk input{margin-top:4px;width:auto}

/* image logo */
.logo img{display:block;height:50px;width:auto}
footer .logo img{height:56px}
@media (max-width:480px){header .logo img{height:42px}}

/* language selector */
.nav-item.lang{display:flex;align-items:center;gap:6px;color:var(--mast-fg)}
.nav-item.lang .globe{flex:none;opacity:.85}
.lang-sel{background:#0E2246;color:#E8ECF2;border:1px solid #3A527D;border-radius:4px;padding:7px 8px;font:inherit;font-size:.82rem;cursor:pointer;max-width:150px}
.lang-sel:focus-visible{outline:2px solid #9DB9E6;outline-offset:2px}
@media (max-width:1260px){.nav-item.lang{padding:10px 12px 4px}}
/* hide Google Translate chrome */
iframe.skiptranslate,.goog-te-banner-frame,#goog-gt-tt,.goog-te-balloon-frame,.goog-tooltip,.goog-te-spinner-pos{display:none!important}
body{top:0!important}
font[style]{background:transparent!important;box-shadow:none!important}
@media (min-width:1261px){nav.main{margin-left:24px}.nav-item>a,.nav-item>button{padding:10px 8px}.lang-sel{max-width:112px;padding:6px 6px}}

.foot .social{margin-top:14px}
.foot a.insta{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#DDE4EE;border:1px solid #2E4470;border-radius:999px;padding:6px 14px 6px 10px;font-size:.84rem;transition:border-color .2s,color .2s}
.foot a.insta:hover{color:#fff;border-color:#8E9BB0}

/* footer legal text: justified to available width */
.biz p,.legal p{width:100%;max-width:none;text-align:left;word-break:keep-all;overflow-wrap:anywhere}
@media (min-width:700px){.biz p.ext,.legal p{text-align:justify;text-justify:inter-word;hyphens:auto}}
