/* ---------- self-hosted typefaces (no third-party requests) ---------- */
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-var.woff2) format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/assets/fonts/plexsans-400.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/assets/fonts/plexsans-500.woff2) format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/assets/fonts/plexsans-600.woff2) format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/plexmono-400.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/plexmono-500.woff2) format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/plexmono-600.woff2) format("woff2");
  font-weight:600;font-style:normal;font-display:swap}

/* ============================================================
   Swiss Terahertz — design system
   Three typographic roles:
     Newsreader   display serif   narrative headings
     Inter        grotesque       interface, body, labels
     IBM Plex Mono                every measured quantity
   ============================================================ */

:root{
  /* --- surfaces: warm paper, not clinical white --- */
  --paper:#FBFAF8; --surface:#FFFFFF; --surface-2:#F5F2ED; --surface-3:#EFEBE4;
  --line:#E7E2DA; --line-strong:#D0C8BD; --hair:#EFEBE4;
  --ink:#14120F; --ink-2:#4C453D; --muted:#837A70;
  --accent:#A8151C; --accent-deep:#7E0F14; --accent-wash:#FBF0EF;
  --beam:#0E6A85; --beam-wash:#EDF4F6;
  --on-accent:#FFFFFF; --ticker-accent:#F2837C; --photo-bg:#FFFFFF;

  --shadow-1:0 1px 2px rgba(20,18,15,.04);
  --shadow-2:0 2px 4px rgba(20,18,15,.05), 0 12px 32px -20px rgba(20,18,15,.30);
  --shadow-3:0 4px 8px rgba(20,18,15,.06), 0 24px 56px -28px rgba(20,18,15,.38);

  --r:3px; --r-lg:5px;
  --maxw:1240px; --measure:68ch;

  /* --- type scale --- */
  --t-display:clamp(38px, 5.6vw, 68px);
  --t-h1:clamp(30px, 4.1vw, 48px);
  --t-h2:clamp(23px, 2.7vw, 33px);
  --t-h3:18px;
  --t-body:16px;
  --t-small:13.5px;
  --t-micro:11px;

  /* --- vertical rhythm --- */
  --sec:clamp(56px, 7vw, 96px);

  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:light;
}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#100F0E; --surface:#181716; --surface-2:#211F1D; --surface-3:#2A2725;
  --line:#312D2A; --line-strong:#48423E; --hair:#262322;
  --ink:#F5F2EE; --ink-2:#D3CCC5; --muted:#9E958C;
  --accent:#FF6159; --accent-deep:#FF8880; --accent-wash:#2B1917;
  --beam:#5FC2DC; --beam-wash:#142527;
  --on-accent:#1A0705; --ticker-accent:#FF6159; --photo-bg:#FFFFFF;
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 2px 4px rgba(0,0,0,.5), 0 12px 32px -20px rgba(0,0,0,.9);
  --shadow-3:0 4px 8px rgba(0,0,0,.55), 0 24px 56px -28px rgba(0,0,0,.95);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#100F0E; --surface:#181716; --surface-2:#211F1D; --surface-3:#2A2725;
  --line:#312D2A; --line-strong:#48423E; --hair:#262322;
  --ink:#F5F2EE; --ink-2:#D3CCC5; --muted:#9E958C;
  --accent:#FF6159; --accent-deep:#FF8880; --accent-wash:#2B1917;
  --beam:#5FC2DC; --beam-wash:#142527;
  --on-accent:#1A0705; --ticker-accent:#FF6159; --photo-bg:#FFFFFF;
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 2px 4px rgba(0,0,0,.5), 0 12px 32px -20px rgba(0,0,0,.9);
  --shadow-3:0 4px 8px rgba(0,0,0,.55), 0 24px 56px -28px rgba(0,0,0,.95);
  color-scheme:dark;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--t-body);line-height:1.65;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv05" 1,"ss01" 1}

h1,h2,h3,h4{margin:0;text-wrap:balance}
h1,h2{font-family:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700}
h1{font-size:var(--t-h1);line-height:1.04;letter-spacing:-.032em;font-weight:800}
h2{font-size:var(--t-h2);line-height:1.12;letter-spacing:-.024em;font-weight:700}
h3,h4{font-family:"IBM Plex Sans",sans-serif;letter-spacing:-.012em}
h3{font-size:var(--t-h3);font-weight:600;line-height:1.35}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:24px}
@media(max-width:560px){.wrap{padding-inline:18px}}

.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:var(--t-micro);letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);font-weight:500}
.lead{font-size:clamp(17px,1.5vw,19.5px);line-height:1.55;color:var(--ink-2);max-width:60ch;letter-spacing:-.011em}
.small{font-size:var(--t-small);color:var(--muted);line-height:1.55}
.prose{max-width:var(--measure);color:var(--ink-2);font-size:16px;line-height:1.7}
.prose p+p{margin-top:15px}

/* ---------- ticker ---------- */
.tickerbar{background:#0C0B0A;color:rgba(245,242,238,.86);font-size:12.5px;
  border-bottom:1px solid rgba(255,255,255,.07);letter-spacing:-.003em}
.tickerbar .wrap{display:flex;gap:16px;align-items:center;min-height:34px;padding-block:6px;min-width:0}
.tickerbar b{color:var(--ticker-accent);font-weight:600;letter-spacing:.01em}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:60;background:rgba(13,12,11,.94);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.10)}
header.site .bar{color:#F5F2EE}
header.site nav.main a{color:rgba(245,242,238,.74)}
header.site nav.main a:hover{background:rgba(255,255,255,.08);color:#fff}
header.site nav.main a.on{color:#fff}
header.site nav.main a.on::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;
  height:1.5px;background:var(--ticker-accent)}
header.site .searchbox{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
header.site .searchbox input{color:#F5F2EE}
header.site .searchbox input::placeholder{color:rgba(245,242,238,.45)}
header.site .iconbtn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#F5F2EE}
header.site .iconbtn:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.10)}
header.site .qcount{background:var(--ticker-accent);color:#1A0705}
header.site .proto{border-color:rgba(255,255,255,.24);color:rgba(245,242,238,.55)}

.bar{display:flex;align-items:center;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brandname{font-family:Archivo,sans-serif;font-weight:700;font-size:19px;letter-spacing:-.018em;white-space:nowrap}
.logoimg{height:26px;width:auto;display:block;flex:none}
.footlogo{filter:invert(1) hue-rotate(180deg)}
:root[data-theme="dark"] .footlogo{filter:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .footlogo{filter:none}}
@media(max-width:520px){.logoimg{height:21px}}

nav.main{display:flex;gap:1px;margin-left:10px}
nav.main a{position:relative;padding:9px 11px;font-size:14px;font-weight:450;border-radius:var(--r);
  transition:background .16s var(--ease),color .16s var(--ease)}
.spacer{flex:1}
.searchbox{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:var(--r);
  padding:6px 10px;background:var(--paper);min-width:180px;transition:border-color .16s var(--ease)}
.searchbox:focus-within{border-color:rgba(255,255,255,.4)}
.searchbox input{border:0;background:transparent;font:inherit;font-size:13.5px;color:inherit;width:100%;outline:none}
.iconbtn{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);padding:7px 11px;
  cursor:pointer;font-size:13px;display:inline-flex;align-items:center;gap:6px;
  transition:border-color .16s var(--ease),background .16s var(--ease)}
.qcount{background:var(--accent);color:var(--on-accent);border-radius:999px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;padding:1px 5px;min-width:17px;text-align:center}
.burger{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:var(--r);
  font-weight:550;font-size:14.5px;letter-spacing:-.008em;border:1px solid transparent;cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-1)}
.btn-primary:hover{background:var(--accent-deep);color:var(--on-accent);transform:translateY(-1px);box-shadow:var(--shadow-2)}
.btn-ghost{border-color:var(--line-strong);background:var(--surface);color:var(--ink)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--ink-2);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

/* ---------- section scaffolding ---------- */
.sec{padding-block:var(--sec)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:36px;flex-wrap:wrap}
.sec-head .eyebrow{margin-bottom:10px;display:block}
.rule{height:1px;background:var(--line);border:0;margin:0}
.grid{display:grid;gap:20px}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- hero ---------- */
.hero{padding-block:clamp(44px,5.5vw,76px) clamp(38px,4.5vw,60px);
  border-bottom:1px solid var(--line);background:var(--surface)}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(32px,4.5vw,64px);align-items:center}
.hero-grid>*{min-width:0}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr;gap:30px}}
.hero h1{font-size:var(--t-display);line-height:1.02;letter-spacing:-.028em;margin-top:14px}
.hero .lead{margin-top:18px}
.hero-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:28px}
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px);margin-top:34px;
  padding-top:22px;border-top:1px solid var(--line)}
@media(max-width:620px){.statrow{grid-template-columns:1fr 1fr;row-gap:20px}}
.stat .v{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:20px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;display:block}
.stat .k{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:3px;display:block}
.bandcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 12px}
.heroshot{background:var(--photo-bg);border:1px solid var(--line);border-radius:var(--r-lg);
  position:relative;overflow:hidden;margin:0;box-shadow:var(--shadow-2)}
.heroshot img{display:block;width:100%;aspect-ratio:16/10;object-fit:contain;padding:20px 20px 52px}
.heroshot figcaption{position:absolute;left:0;bottom:0;right:0;background:var(--surface);
  border-top:1px solid var(--line);color:var(--ink);padding:12px 18px;
  font-size:12.5px;display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.heroshot figcaption b{font-family:Archivo,sans-serif;font-weight:700;font-size:17px;letter-spacing:-.012em}
.heroshot figcaption .mono{color:var(--muted)}

/* ---------- product cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
a.card:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:var(--shadow-2)}
a.card:hover .arrow{transform:translateX(3px)}
.fig{aspect-ratio:16/10;background:var(--photo-bg);display:grid;place-items:center;
  border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.fig img{width:100%;height:100%;object-fit:contain;padding:14px;
  transition:transform .4s var(--ease)}
a.card:hover .fig img{transform:scale(1.03)}
.fig .tag{position:absolute;top:10px;left:10px;font-family:"IBM Plex Mono",monospace;font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:#5A534D;background:rgba(255,255,255,.92);
  padding:3px 7px;border-radius:2px;backdrop-filter:blur(4px)}
.card-body{padding:17px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-body h3{font-size:16.5px}
.card-body .sub{font-size:13.5px;color:var(--muted);line-height:1.45}
.card-foot{margin-top:auto;padding-top:14px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.price{font-family:"IBM Plex Mono",monospace;font-size:13.5px;font-weight:500;font-variant-numeric:tabular-nums}
.arrow{color:var(--accent);font-size:13px;font-weight:600;transition:transform .2s var(--ease);display:inline-block}

/* at-a-glance specs on a card */
.cardspecs{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-top:10px;padding-top:11px;
  border-top:1px solid var(--hair)}
.cardspecs div{display:flex;flex-direction:column;gap:2px;min-width:0}
.cardspecs .k{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.cardspecs .v{font-family:"IBM Plex Mono",monospace;font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink-2)}

/* ---------- breadcrumbs + product layout ---------- */
.crumbs{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted);
  padding-block:20px 0;display:flex;gap:8px;flex-wrap:wrap;letter-spacing:.02em}
.crumbs a{transition:color .15s var(--ease)}
.crumbs a:hover{color:var(--accent)}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,52px);
  align-items:start;padding-block:28px 10px}
.pgrid>*{min-width:0}
.pgrid.alt{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
@media(max-width:880px){.pgrid,.pgrid.alt{grid-template-columns:1fr;gap:26px}}
.pfig{background:var(--photo-bg);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-1)}
.pfig img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;padding:22px;cursor:zoom-in}
.thumbs{display:flex;gap:9px;margin-top:10px;flex-wrap:wrap}
.thumbs button{width:70px;height:55px;background:var(--photo-bg);border:1px solid var(--line);
  border-radius:2px;padding:4px;cursor:pointer;overflow:hidden;transition:border-color .16s var(--ease)}
.thumbs button:hover{border-color:var(--line-strong)}
.thumbs button[aria-current="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.thumbs img{width:100%;height:100%;object-fit:contain}

.badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}
.badge{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.04em;
  border:1px solid var(--line-strong);color:var(--ink-2);padding:5px 10px;border-radius:2px;
  background:var(--surface);white-space:nowrap}
.badge.hot{border-color:var(--accent);color:var(--accent);background:var(--accent-wash)}

/* ---------- KEY SPECS strip — the "specs in no time" block ---------- */
.keyspecs{margin-top:24px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media(max-width:1040px){.keyspecs{grid-template-columns:1fr 1fr}}
.keyspecs .ks{padding:14px 18px 15px 0;border-right:1px solid var(--hair)}
.keyspecs .ks:last-child{border-right:0}
.keyspecs .ks+.ks{padding-left:18px}
.keyspecs .k{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:5px}
.keyspecs .v{font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:500;line-height:1.35;
  font-variant-numeric:tabular-nums;color:var(--ink);display:block}
@media(max-width:560px){
  .keyspecs{grid-template-columns:1fr 1fr}
  .keyspecs .ks{padding:12px 12px 12px 0}
  .keyspecs .ks+.ks{padding-left:0}
  .keyspecs .ks:nth-child(even){padding-left:12px;border-right:0}
  .keyspecs .ks:nth-child(odd){border-right:1px solid var(--hair)}
}

/* ---------- sticky in-page section nav ---------- */
.jumpnav{position:sticky;top:68px;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--line);margin-top:28px}
.jumpnav .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding-block:0}
.jumpnav .wrap::-webkit-scrollbar{display:none}
.jumpnav a{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);padding:13px 14px;white-space:nowrap;border-bottom:2px solid transparent;
  transition:color .16s var(--ease),border-color .16s var(--ease)}
.jumpnav a:hover{color:var(--ink)}
.jumpnav a.on{color:var(--ink);border-bottom-color:var(--accent)}
.anchor{scroll-margin-top:130px}

/* ---------- spec tables ---------- */
.speclist{width:100%;border-collapse:collapse;font-size:14px;margin-top:14px}
.speclist th,.speclist td{text-align:left;padding:11px 14px 11px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.speclist tr:first-child th,.speclist tr:first-child td{border-top:1px solid var(--line)}
.speclist th{font-weight:450;color:var(--muted);width:44%;font-size:13.5px}
.speclist td{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:13.5px}
.tablewrap{overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--shadow-1)}
table.models{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
table.models th{text-align:left;padding:12px 14px;background:var(--surface-2);font-weight:600;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--line)}
table.models td{padding:11px 14px;border-bottom:1px solid var(--hair);
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
table.models tbody tr{transition:background .14s var(--ease)}
table.models tbody tr:hover{background:var(--surface-2)}
table.models td:first-child{font-weight:500;font-family:"IBM Plex Sans",sans-serif}
table.models tr.series td{background:var(--surface-3);font-family:"IBM Plex Sans",sans-serif;font-weight:600;
  color:var(--ink);font-size:12px;letter-spacing:.04em}
table.models tr.series:hover td{background:var(--surface-3)}
table.models tr:last-child td{border-bottom:0}

/* ---------- buy box ---------- */
.buybox{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:20px;
  display:flex;flex-direction:column;gap:14px;margin-top:22px;box-shadow:var(--shadow-1)}
.bignum{font-family:Archivo,sans-serif;font-weight:700;font-size:30px;letter-spacing:-.022em;line-height:1.1}

ul.ticks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;font-size:15px;line-height:1.5}
ul.ticks li{display:flex;gap:11px;align-items:flex-start}
ul.ticks li::before{content:"";width:5px;height:5px;margin-top:9px;background:var(--accent);flex:none;border-radius:50%}
ul.plain{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:15px;color:var(--ink-2)}

/* ---------- figures ---------- */
figure.plate{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--photo-bg);display:flex;flex-direction:column;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
figure.plate:hover{border-color:var(--line-strong);box-shadow:var(--shadow-2)}
figure.plate img{display:block;width:100%;object-fit:contain;background:var(--photo-bg);cursor:zoom-in}
figure.plate figcaption{background:var(--surface);border-top:1px solid var(--line);padding:11px 14px;
  font-size:12.5px;color:var(--muted);margin-top:auto;line-height:1.5}
.gal{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.gal>*{min-width:0}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gal{grid-template-columns:1fr}}
.gal figure.plate img{aspect-ratio:4/3}
#lightbox{position:fixed;inset:0;background:rgba(10,9,8,.93);display:none;place-items:center;z-index:200;
  padding:28px;cursor:zoom-out;backdrop-filter:blur(6px)}
#lightbox.on{display:grid}
#lightbox img{max-width:100%;max-height:90vh;object-fit:contain;background:#fff;border-radius:3px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}

/* ---------- application + resource cards ---------- */
.appcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:19px;
  display:flex;flex-direction:column;gap:8px;transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
a.appcard:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.appcard .n{font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:16px;letter-spacing:-.012em}
.reslist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);overflow:hidden;box-shadow:var(--shadow-1)}
.resrow{display:grid;grid-template-columns:118px 1fr auto;gap:16px;padding:15px 18px;
  border-bottom:1px solid var(--hair);align-items:center;transition:background .14s var(--ease)}
a.resrow:hover{background:var(--surface-2)}
.resrow:last-child{border-bottom:0}
@media(max-width:640px){.resrow{grid-template-columns:1fr;gap:6px}}
.resrow .k{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.resrow .t{font-weight:500;letter-spacing:-.01em}
.resrow .go{font-size:12.5px;color:var(--accent);font-weight:600;white-space:nowrap}

/* ---------- calculators + forms ---------- */
.calc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;
  display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-1)}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.field input,.field select,textarea{font-family:"IBM Plex Mono",monospace;font-size:14px;padding:10px 12px;
  border:1px solid var(--line-strong);border-radius:var(--r);background:var(--paper);color:var(--ink);width:100%;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.field input:focus,.field select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-wash)}
textarea{font-family:"IBM Plex Sans",sans-serif;min-height:120px;resize:vertical;line-height:1.6}
.outgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.out{background:var(--surface-2);padding:12px 14px}
.out .k{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.out .v{font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:500;font-variant-numeric:tabular-nums;margin-top:2px}

.qrow{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:14px 16px;
  border-bottom:1px solid var(--hair)}
.qrow:last-child{border-bottom:0}
.linkbtn{background:none;border:0;color:var(--accent);cursor:pointer;font-size:12.5px;font-weight:600;padding:0}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.formgrid{grid-template-columns:1fr}}
.formgrid .full{grid-column:1/-1}
.notice{background:var(--beam-wash);border:1px solid var(--beam);color:var(--ink);border-radius:var(--r);
  padding:13px 15px;font-size:14px;line-height:1.6}
.valuecard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;
  transition:border-color .2s var(--ease)}
.valuecard:hover{border-color:var(--line-strong)}
.valuecard .n{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:8px;display:block}

/* ---------- footer ---------- */
footer.site{background:var(--surface);border-top:1px solid var(--line);margin-top:28px;
  padding-block:clamp(40px,5vw,60px) 30px}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px}
.fgrid>*{min-width:0}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fgrid{grid-template-columns:1fr}}
.fcol h4{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin-bottom:13px}
.fcol ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;font-size:13.5px}
.fcol a{transition:color .15s var(--ease)}
.fcol a:hover{color:var(--accent)}
.fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:34px;padding-top:20px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}

/* ---------- mega menu ---------- */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--surface);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-3);display:none}
.mega.open{display:block}
.mega .wrap{padding-block:30px;display:grid;grid-template-columns:repeat(4,1fr) 1fr;gap:28px}
.mega .wrap>*{min-width:0}
@media(max-width:900px){.mega .wrap{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mega .wrap{grid-template-columns:1fr}}
.mega h4{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin-bottom:12px}
.mega ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px;font-size:14px}
.mega li .t2{display:block;font-size:11px;color:var(--muted);font-family:"IBM Plex Mono",monospace;
  letter-spacing:.04em;margin-top:1px}
.mega a{transition:color .15s var(--ease)}
.mega a:hover{color:var(--accent)}
.megapromo{background:var(--accent-wash);border:1px solid var(--accent);border-radius:var(--r-lg);padding:16px}
.megapromo img{width:100%;aspect-ratio:16/10;object-fit:contain;background:var(--photo-bg);border-radius:2px}

/* ---------- responsive nav ---------- */
@media(max-width:520px){.qlabel{display:none}}
@media(max-width:820px){
  nav.main{display:none}
  nav.main.show{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:rgba(13,12,11,.98);backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,.12);padding:12px 22px 16px;gap:0;z-index:70}
  nav.main.show a.on::after{display:none}
  .burger{display:inline-flex}
  .searchbox{display:none}
  .jumpnav{top:68px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

/* ---------- utilities ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:12px 16px;z-index:300}
.skip:focus{left:0}
.wa{position:fixed;right:20px;bottom:20px;z-index:90;width:52px;height:52px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.45);transition:transform .2s var(--ease),background .2s var(--ease)}
.wa:hover{background:#1FB055;transform:scale(1.06)}
@media(max-width:520px){.wa{width:46px;height:46px;right:14px;bottom:80px}}
.crumbs script{display:none}
.previewbar{background:#FDF5E6;border-bottom:1px solid #DFBA6C;color:#6B5015;
  font-size:12.5px;text-align:center;padding-block:8px;letter-spacing:-.003em}
.previewbar a{color:#6B5015;text-decoration:underline;font-weight:600}
:root[data-theme="dark"] .previewbar{background:#291F12;color:#E8B765;border-color:#6B5426}
:root[data-theme="dark"] .previewbar a{color:#E8B765}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .previewbar{background:#291F12;color:#E8B765;border-color:#6B5426}
  :root:not([data-theme="light"]) .previewbar a{color:#E8B765}
}

/* ---------- tariff notice: full on desktop, tap-to-expand on small screens ---------- */
@media(max-width:700px){
  .tickerbar .wrap{cursor:pointer;align-items:flex-start}
  .tickerbar .tickertext{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;flex:1;min-width:0}
  .tickerbar.open .tickertext{-webkit-line-clamp:unset;overflow:visible}
  .tickerbar .tickermore{flex:none;font-family:"IBM Plex Mono",monospace;font-size:10px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ticker-accent);
    border:1px solid rgba(255,255,255,.22);border-radius:2px;padding:2px 6px;margin-top:1px}
  .tickerbar.open .tickermore::after{content:"\2212"}
  .tickerbar:not(.open) .tickermore::after{content:"+"}
}
@media(min-width:701px){.tickerbar .tickermore{display:none}}


/* ============================================================
   PHOTOGRAPHY SYSTEM
   Every image on the site is one of two things.

   .cut    a product, cut from its background and mounted on a
           square canvas at a fixed optical size. It stands on
           the page itself, lit from above, with a contact
           shadow. No frame — a frame would turn it back into a
           picture of a product instead of the product.

   .plate  a plot, schematic or scanned table. Mounted on paper
           with a uniform margin and a hairline, so technical
           documents read as an annex and never compete with
           the products.
   ============================================================ */

/* --- cut-outs --- */
.fig.cut, .pfig.cut, .heroshot.cut, figure.plate.cut{
  background:transparent; border-color:transparent; box-shadow:none;
}
.fig.cut{border-bottom:0}
img.cut{
  filter:drop-shadow(0 18px 14px rgba(24,20,16,.13)) drop-shadow(0 3px 4px rgba(24,20,16,.10));
  transition:transform .45s var(--ease);
}
.pfig.cut, .heroshot.cut, .fig.cut{position:relative;overflow:visible}
.pfig.cut::after, .heroshot.cut::after, .fig.cut::after{
  content:"";position:absolute;left:22%;right:22%;bottom:13%;height:18px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(24,20,16,.16), transparent 72%);
  filter:blur(8px);z-index:0;pointer-events:none;
}
.pfig.cut img, .heroshot.cut img, .fig.cut img{position:relative;z-index:1}
.pfig.cut img{padding:26px;aspect-ratio:1/1}
.fig.cut img{padding:18px}
.heroshot.cut img{padding:4px 4px 16px;aspect-ratio:4/3}
a.card:hover .fig.cut img.cut{transform:translateY(-4px) scale(1.025)}
.heroshot.cut figcaption{position:static;background:transparent;border:0;
  border-top:1px solid var(--line-strong);padding:13px 2px 0;color:var(--ink)}
.fig.cut .tag{background:transparent;border:1px solid var(--line);color:var(--muted)}

/* --- plates --- */
.fig.plate, .pfig.plate, .heroshot.plate{background:var(--surface);border:1px solid var(--line)}
.fig.plate img, .pfig.plate img, .heroshot.plate img{padding:0;object-fit:contain}
.pfig.plate img{aspect-ratio:4/3;padding:10px}
figure.plate.plate img{padding:0}
figure.plate{background:var(--surface)}

/* one grid of documentation, every plate the same height */
.gal figure.plate img{aspect-ratio:4/3;object-fit:contain;background:var(--paper)}
.gal figure.plate.cut img{background:transparent;padding:14px}

/* one frame discipline: a plate is inset in its card exactly like a cut-out,
   so a plot and a product occupy the same optical area on the grid */
.fig.plate{background:var(--paper);padding:14px;border-bottom:1px solid var(--line);overflow:hidden}
.fig.plate img{padding:0;width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;background:var(--surface);border:1px solid var(--line);display:block}
.fig .tag{top:12px;left:12px}
.pfig.plate{padding:18px;background:var(--paper)}
.pfig.plate img{border:1px solid var(--line);background:var(--surface);padding:0}

/* ---- one box for every card image, whatever its treatment ---- */
.fig{aspect-ratio:4/3;padding:16px;overflow:hidden;place-items:center}
.fig img{width:100%;height:100%;object-fit:contain;padding:0;max-width:100%;max-height:100%}
.fig.cut{overflow:visible;background:transparent;border-bottom:1px solid var(--line)}
.fig.cut img{padding:0}
.fig.plate{background:var(--paper)}
.fig.plate img{width:auto;height:100%;border:1px solid var(--line);background:var(--surface)}
.fig.cut::after{left:26%;right:26%;bottom:9%;height:14px}

/* Deterministic card image box: the frame owns the geometry, the image is
   centred inside it and can never push the row taller than the ratio. */
.fig{position:relative;display:block;aspect-ratio:4/3;padding:0;overflow:hidden}
.fig img{position:absolute;top:16px;left:16px;right:16px;bottom:16px;margin:auto;
  width:auto;height:auto;max-width:calc(100% - 32px);max-height:calc(100% - 32px);
  object-fit:contain}
.fig.cut{overflow:visible;background:transparent}
.fig.plate{background:var(--paper)}
.fig.plate img{border:1px solid var(--line);background:var(--surface)}
.fig{flex:0 0 auto}
.fig.cut img, .fig.plate img{position:absolute;top:16px;left:16px;right:16px;bottom:16px;
  margin:auto;width:auto;height:auto;max-width:calc(100% - 32px);max-height:calc(100% - 32px);z-index:1}
.fig .tag{z-index:3}

/* ---- one page header, used by every top-level page ---- */
.pagehead{padding-block:34px 30px;max-width:62ch}
.pagetitle{font-size:clamp(32px,4.2vw,50px);letter-spacing:-.035em;line-height:1.02}
.pagehead .lead{margin-top:14px}
.cathead{font-size:clamp(21px,2.1vw,26px);letter-spacing:-.026em}

/* ---- application cards: the lead instrument stands for the application ---- */
.appcard.withfig{padding:0;overflow:hidden}
.appfig{position:relative;aspect-ratio:16/10;background:var(--paper);
  border-bottom:1px solid var(--line);overflow:hidden}
.appfig img{position:absolute;top:14px;left:14px;right:14px;bottom:14px;margin:auto;
  width:auto;height:auto;max-width:calc(100% - 28px);max-height:calc(100% - 28px);object-fit:contain;
  transition:transform .45s var(--ease)}
.appfig.cut img{filter:drop-shadow(0 12px 10px rgba(24,20,16,.12))}
.appfig.plate img{border:1px solid var(--line);background:var(--surface)}
a.appcard:hover .appfig img{transform:scale(1.04)}
.appbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:4px}

/* Documentation keeps its own proportions — a wide plot should not be
   letterboxed inside a square just to make the grid tidy. */
.gal{align-items:start}
.gal figure.plate img{aspect-ratio:auto;height:auto;width:100%;padding:10px;
  background:var(--surface)}
.gal figure.plate.cut img{padding:18px;background:transparent}
.gal figure.plate{background:var(--paper)}
/* a square cut-out would be far taller than a wide plot beside it */
.gal figure.plate.cut img{aspect-ratio:3/2;object-fit:contain}

/* ============================================================
   DOCUMENTATION GRID
   A datasheet is portrait, a spectrum is landscape and a product
   is square. Left to themselves they make a ragged wall with
   holes in it. So every figure gets an identical cell, the image
   is centred inside it, and the caption is pinned to the bottom
   so the captions line up across the row. Full size is one click
   away in the lightbox.
   ============================================================ */
.gal{align-items:stretch}
.gal figure.plate{display:flex;flex-direction:column;height:100%;background:var(--surface)}
.gal figure.plate img,
.gal figure.plate.cut img,
.gal figure.plate.plate img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;
  padding:14px;background:var(--paper);border-bottom:1px solid var(--line);
  transition:transform .35s var(--ease)}
.gal figure.plate.cut img{background:var(--surface);padding:22px}
.gal figure.plate:hover img{transform:scale(1.02)}
.gal figure.plate figcaption{margin-top:auto;border-top:0;background:var(--surface);
  display:flex;align-items:flex-start;gap:8px;min-height:58px}
.gal figure.plate figcaption::after{content:"⤢";margin-left:auto;color:var(--muted);
  font-size:13px;flex:none;opacity:.7}
/* inside a bordered cell the contact shadow reads as dirt, not lighting */
.gal figure.plate.cut img{filter:none}

/* ============================================================
   LIVE DATA TABLES
   Real markup, not a screenshot: sortable, filterable, copyable,
   readable by a search engine and by a phone.
   ============================================================ */
.dtable{margin-top:6px}
.dtable-top{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:11px}
.dtable-tools{display:flex;align-items:center;gap:8px}
.tfilter{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  border-radius:var(--r);padding:5px 10px;background:var(--surface);color:var(--muted);
  transition:border-color .16s var(--ease)}
.tfilter:focus-within{border-color:var(--ink-2);color:var(--ink-2)}
.tfilter input{border:0;background:transparent;outline:none;font:inherit;font-size:13px;
  color:var(--ink);width:150px}
.tfilter input::-webkit-search-cancel-button{cursor:pointer}
.tcsv{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  border-radius:var(--r);padding:7px 11px;cursor:pointer;
  transition:border-color .16s var(--ease),color .16s var(--ease)}
.tcsv:hover{border-color:var(--ink-2);color:var(--ink)}
.dtable-count{margin-top:9px}
.tablenote{margin-top:9px;max-width:70ch}

/* sortable headers */
table.models th{padding:0;background:var(--surface-2)}
.sortbtn{display:flex;align-items:center;gap:7px;width:100%;padding:12px 14px;
  background:none;border:0;cursor:pointer;text-align:left;
  font-family:"IBM Plex Sans",sans-serif;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);transition:color .15s var(--ease)}
.sortbtn:hover{color:var(--ink)}
.sortmark{flex:none;margin-left:auto;fill:var(--line-strong);transition:fill .15s var(--ease)}
.sortbtn:hover .sortmark{fill:var(--muted)}
.sortbtn.asc .sortmark path:first-child,
.sortbtn.desc .sortmark path:last-child{fill:var(--accent)}
.sortbtn.asc .sortmark path:last-child,
.sortbtn.desc .sortmark path:first-child{fill:var(--line-strong)}

table.models thead th{position:sticky;top:0;z-index:2;box-shadow:inset 0 -1px 0 var(--line)}
.dtable .tablewrap{max-height:none}
.dtable.is-empty .tablewrap::after{content:"No rows match that filter.";display:block;
  padding:22px 14px;color:var(--muted);font-size:14px}

/* on a phone a wide table becomes one card per row, label on the left */
@media(max-width:700px){
  .dtable .tablewrap{border:0;box-shadow:none;background:transparent;overflow:visible}
  .dtable table.models{min-width:0;display:block}
  .dtable table.models thead{display:none}
  .dtable table.models tbody{display:block}
  .dtable table.models tr{display:block;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r);margin-bottom:9px;padding:4px 0}
  .dtable table.models tr.series{background:transparent;border:0;padding:0;margin:20px 0 8px}
  .dtable table.models tr.series td{padding:0;font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--accent);border:0}
  .dtable table.models td{display:flex;gap:14px;justify-content:space-between;align-items:baseline;
    border:0;border-bottom:1px solid var(--hair);padding:9px 14px;text-align:right}
  .dtable table.models tr td:last-child{border-bottom:0}
  .dtable table.models td::before{content:attr(data-label);font-family:"IBM Plex Sans",sans-serif;
    font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
    text-align:left;flex:none;max-width:48%}
  .dtable table.models td:first-child{font-weight:600;background:var(--surface-2)}
  .tfilter input{width:110px}
}

/* ============================================================
   PRICE CONFIGURATOR
   ============================================================ */
.cfg{border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--surface);
  margin-bottom:34px;overflow:hidden;box-shadow:var(--shadow-1)}
.cfg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:18px 22px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.cfg-hint{margin-top:5px;max-width:60ch}
.cfg-reset{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--muted);border-radius:var(--r);padding:6px 11px;cursor:pointer;flex:none}
.cfg-reset:hover{color:var(--ink);border-color:var(--ink-2)}
.cfg-body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
@media(max-width:820px){.cfg-body{grid-template-columns:1fr}}

.cfg-controls{padding:20px 22px 22px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;align-content:start}
.cfg-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.cfg-field label{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.cfg-field select{font-family:"IBM Plex Mono",monospace;font-size:14px;padding:10px 12px;
  border:1px solid var(--line-strong);border-radius:var(--r);background:var(--paper);
  color:var(--ink);width:100%;cursor:pointer;transition:border-color .16s var(--ease)}
.cfg-field select:hover{border-color:var(--ink-2)}
.cfg-field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}

.cfg-result{padding:20px 22px 22px;border-left:1px solid var(--line);background:var(--paper);
  display:flex;flex-direction:column;gap:14px;justify-content:center}
@media(max-width:820px){.cfg-result{border-left:0;border-top:1px solid var(--line)}}
.cfg-model{display:flex;flex-direction:column;gap:4px}
.cfg-model strong{font-family:"IBM Plex Mono",monospace;font-size:clamp(19px,2.1vw,25px);
  font-weight:500;letter-spacing:-.01em;word-break:break-word}
.cfg-specs{display:flex;flex-wrap:wrap;gap:6px 22px;padding-top:12px;border-top:1px solid var(--line)}
.cfg-specs div{display:flex;flex-direction:column;gap:1px}
.cfg-specs .k,.cfg-price .k{font-family:"IBM Plex Mono",monospace;font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cfg-specs .v{font-family:"IBM Plex Mono",monospace;font-size:13.5px;color:var(--ink-2)}
.cfg-prices{display:flex;flex-wrap:wrap;gap:8px 28px;padding-top:12px;border-top:1px solid var(--ink)}
.cfg-price{display:flex;flex-direction:column;gap:2px}
.cfg-price .v{font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(24px,2.6vw,32px);
  letter-spacing:-.03em;line-height:1}
.cfg-result .btn{align-self:flex-start;margin-top:4px}
.cfg-count{font-size:16px}
.cfg-count strong{font-family:Archivo,sans-serif;font-weight:800;font-size:24px;letter-spacing:-.03em}
.cfg-none{font-size:14.5px;color:var(--ink-2)}
.cfg-none a{color:var(--accent);font-weight:600;text-decoration:underline}

/* ============================================================
   MEASUREMENT CHARTS
   Drawn in the page as SVG, not embedded as a picture: sharp at
   any zoom, correct in both themes, and readable point by point.
   ============================================================ */
.chartgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:980px){.chartgrid{grid-template-columns:1fr}}

.chart{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);overflow:hidden;box-shadow:var(--shadow-1)}
.chart-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:15px 18px 13px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.chart-panel{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
  color:var(--on-accent);background:var(--accent);width:20px;height:20px;border-radius:2px;
  display:inline-grid;place-items:center;flex:none}
.chart-title{font-weight:600;letter-spacing:-.012em}
.chart-axis{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;
  color:var(--muted);margin-left:auto}
.chart-plot{position:relative;padding:8px 8px 0}
.chart svg{display:block;width:100%;height:auto;overflow:visible}

.chart .pane{fill:var(--paper)}
.chart .band{fill:var(--ink);opacity:.045}
.chart .gl{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}
.chart .tk{font-family:"IBM Plex Mono",monospace;font-size:11px;fill:var(--muted)}
.chart .ax{font-family:"IBM Plex Sans",sans-serif;font-size:12px;fill:var(--ink-2);font-weight:500}
.chart .trace{fill:none;stroke:var(--accent);stroke-width:1.4;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.chart .mk circle{fill:var(--ink);stroke:var(--surface);stroke-width:2}
.chart .mk text{font-family:"IBM Plex Mono",monospace;font-size:11px;fill:var(--ink);
  paint-order:stroke;stroke:var(--paper);stroke-width:3.5px;stroke-linejoin:round}
.chart .cursor line{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;opacity:.5}
.chart .cursor circle{fill:var(--accent);stroke:var(--surface);stroke-width:2}

.chart-readout{position:absolute;top:14px;right:16px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r);padding:7px 11px;
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-variant-numeric:tabular-nums;
  box-shadow:var(--shadow-2);pointer-events:none;white-space:nowrap;line-height:1.5}
.chart-readout b{font-weight:500;color:var(--muted);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;display:block}

.chart-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--ink);margin:14px 18px 0}
@media(max-width:560px){.chart-stats{grid-template-columns:1fr 1fr}}
.chart-stats div{padding:11px 12px 12px 0;border-right:1px solid var(--hair)}
.chart-stats div:last-child{border-right:0}
.chart-stats div+div{padding-left:12px}
.chart-stats .k{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:3px}
.chart-stats .v{font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:500;
  color:var(--ink);display:block}
.chart-note{padding:12px 18px 16px;max-width:none}
/* the HTML hidden attribute does nothing on an SVG element */
.chart .cursor[hidden]{display:none}
.chart .tk{font-size:12px}
.chart .ax{font-size:12.5px}
.chart .mk text{font-size:11.5px}
.chart .bandlabel{font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;fill:var(--muted)}
.chart-dl{color:var(--accent);font-weight:600;text-decoration:underline;white-space:nowrap}

.chart-stats{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.chart-stats:empty{display:none;border:0;margin:0}
.chart-note{padding-top:14px}

/* ------------------------------------------------------------ language --- */
/* The site ships in eight languages. The picker sits beside the search box
   in the dark bar; the menu is a plain list so it works without script if
   the button is ever activated by keyboard alone. */
.langpick{position:relative;flex:0 0 auto;margin-left:10px}
.langpick .iconbtn{display:inline-flex;align-items:center;gap:6px;height:32px;
  padding:0 10px;border:1px solid rgba(255,255,255,.22);border-radius:999px;
  background:transparent;color:#fff;cursor:pointer;line-height:1;
  transition:border-color .18s ease,background .18s ease}
.langpick .iconbtn:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.07)}
.langpick .iconbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.langcode{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;
  font-weight:500}
.langmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:172px;
  margin:0;padding:6px;list-style:none;background:#fff;color:var(--ink);
  border:1px solid rgba(20,18,15,.10);border-radius:12px;
  box-shadow:0 18px 40px rgba(12,11,10,.22)}
.langmenu[hidden]{display:none}
.langmenu li{margin:0}
.langmenu a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;border-radius:8px;font-size:14px;color:var(--ink);text-decoration:none}
.langmenu a:hover{background:rgba(20,18,15,.05)}
.langmenu a.on{font-weight:600}
.langmenu a.on::after{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--accent)}
@media (max-width:860px){
  .langpick{margin-left:6px}
  .langpick .iconbtn{height:30px;padding:0 8px}
}

/* CJK has no glyphs in Archivo or IBM Plex, so those languages fall through
   to the best system face rather than a browser default. */
html[lang="zh"] body,html[lang="ja"] body,html[lang="ko"] body,
html[lang="zh"] h1,html[lang="zh"] h2,html[lang="ja"] h1,html[lang="ja"] h2,
html[lang="ko"] h1,html[lang="ko"] h2,
html[lang="zh"] h3,html[lang="zh"] h4,html[lang="ja"] h3,html[lang="ja"] h4,
html[lang="ko"] h3,html[lang="ko"] h4{
  font-family:"IBM Plex Sans","Noto Sans SC","Noto Sans JP","Noto Sans KR",
    "PingFang SC","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",
    "Apple SD Gothic Neo","Malgun Gothic","Microsoft YaHei","Source Han Sans",
    system-ui,sans-serif}
html[lang="zh"] h1,html[lang="ja"] h1,html[lang="ko"] h1,
html[lang="zh"] h2,html[lang="ja"] h2,html[lang="ko"] h2{
  font-weight:700;letter-spacing:0}
html[lang="ja"] .eyebrow,html[lang="zh"] .eyebrow,html[lang="ko"] .eyebrow{
  letter-spacing:.08em}

/* Uppercasing a Latin acronym inside a CJK label turns "THz" into "THZ",
   and the wide letter-spacing that suits small caps pulls CJK apart. Neither
   convention exists in those scripts, so both are switched off. */
html[lang="zh"] *,html[lang="ja"] *,html[lang="ko"] *{text-transform:none}
html[lang="zh"] .eyebrow,html[lang="ja"] .eyebrow,html[lang="ko"] .eyebrow,
html[lang="zh"] .jumpnav a,html[lang="ja"] .jumpnav a,html[lang="ko"] .jumpnav a,
html[lang="zh"] .fcol h4,html[lang="ja"] .fcol h4,html[lang="ko"] .fcol h4,
html[lang="zh"] .mega h4,html[lang="ja"] .mega h4,html[lang="ko"] .mega h4,
html[lang="zh"] .out .k,html[lang="ja"] .out .k,html[lang="ko"] .out .k,
html[lang="zh"] .field label,html[lang="ja"] .field label,html[lang="ko"] .field label,
html[lang="zh"] .resrow .k,html[lang="ja"] .resrow .k,html[lang="ko"] .resrow .k,
html[lang="zh"] .valuecard .n,html[lang="ja"] .valuecard .n,html[lang="ko"] .valuecard .n{
  letter-spacing:.02em}

/* A long price ("Starting from 38 k Euro") used to wrap and drag the Details
   link onto a second line, so one card in a row sat lower than its
   neighbours. The link keeps its line; the price takes the slack. */
.card-foot{align-items:flex-end}
.card-foot .price{min-width:0}
.card-foot .arrow{white-space:nowrap;flex:0 0 auto}