:root{
  --navy:#0a1626; --navy-2:#0e2038; --navy-3:#122a47;
  --blue:#0655a3; --blue-dark:#113163; --blue-600:#054a8c;
  --cyan:#37b6f0; --cyan-bright:#5fd0ff; --teal:#3fd0c4;
  --amber:#f0a637;
  --page:#f4f6f9; --card:#fff;
  --ink:#16202c; --ink-2:#33414f; --muted:#5f6c7b; --muted-2:#657181;
  --focus:#1f7fd4;
  --line:#e1e6ec; --line-2:#eef1f5;
  --soft:#c4d6ee; --soft-2:#8aa6c9;
  --font-h:'Myriad Pro','Segoe UI','Helvetica Neue',Arial,sans-serif;
  --font-b:Arial,'Segoe UI',Helvetica,sans-serif;
  --font-m:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:6px; --r-lg:12px;
  --wrap:1240px;
  --sh:0 1px 2px rgba(16,32,52,.06),0 4px 14px -6px rgba(16,32,52,.10);
  --sh-lg:0 8px 34px -10px rgba(16,32,52,.22);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-b);font-size:16px;line-height:1.62;color:var(--ink);background:var(--page)}
img{max-width:100%;height:auto}
h1,h2,h3,h4,h5{font-family:var(--font-h);margin:0;line-height:1.15;letter-spacing:-.015em;color:var(--blue-dark);font-weight:700}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-n{max-width:960px;margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--blue);padding:10px 16px;z-index:999}
.skip:focus{left:8px;top:8px}

/* ---------- keyboard focus (WCAG 2.4.7 / 1.4.11) ----------
   One ring colour has to read against both the navy header and the light page.
   --cyan manages 7.9:1 on navy but only 2.3:1 on white, and --blue is the mirror
   of that problem, so neither works everywhere. --focus is picked to clear the
   3:1 non-text threshold on all four grounds: 4.16 on white, 3.84 on the page,
   4.37 on navy, 3.93 on navy-2. :focus-visible keeps it off mouse clicks. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,details:focus-visible,
[tabindex]:focus-visible,[role="button"]:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
/* These controls clear the UA outline and colour their border instead. A border
   tint alone is easy to miss, so the ring is restored for keyboard users. */
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible,
.tbl-tools input:focus-visible,.hsearch input:focus-visible{
  outline:3px solid var(--focus);outline-offset:1px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:300;background:var(--navy);
     border-bottom:1px solid rgba(120,170,225,.18);font-family:var(--font-h)}
/* position:relative so the search results overlay can be pinned to the header
   container rather than to the (now left hand, and narrow) search box */
.hdr-in{max-width:var(--wrap);margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:18px;min-width:0;
  position:relative}
.hdr-in>*{min-width:0}
html,body{overflow-x:clip}
/* Bar order: logo, search, nav, account, quote, hamburger. Set with `order`
   rather than by moving markup, so all 108 pages keep the source they have. */
.hdr-logo{display:flex;align-items:center;flex:0 0 auto;order:1}
.hdr-logo img{height:42px;width:auto;display:block}
.nav{margin-left:auto;display:flex;align-items:stretch;height:64px;gap:1px;order:3}
.nav>li{list-style:none;position:relative;display:flex;align-items:center}
.nav>li>a,.nav>li>button{display:flex;align-items:center;gap:5px;height:64px;padding:0 13px;color:#c8d9ef;
  font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
  background:none;border:0;font-family:inherit;cursor:pointer}
.nav>li>a:hover,.nav>li>button:hover,.nav>li[aria-expanded=true]>button{color:#fff;text-decoration:none}
.nav .caret{font-size:.6rem;opacity:.7;transition:transform .15s}
.nav>li:hover .caret{transform:rotate(180deg)}
.drop{position:absolute;top:60px;left:0;min-width:264px;background:#0e2038;border:1px solid rgba(120,170,225,.24);
  border-radius:10px;box-shadow:0 20px 44px -14px rgba(0,0,0,.65);padding:8px;opacity:0;visibility:hidden;
  transform:translateY(6px);transition:opacity .15s,transform .15s,visibility .15s}
.nav>li:hover .drop,.nav>li:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:8px 12px;color:#c4d6ee;font-size:.85rem;font-weight:500;text-transform:none;
  letter-spacing:0;border-radius:6px}
.drop a:hover{background:rgba(55,182,240,.15);color:#fff;text-decoration:none}
.drop .grp{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:#7f97b5;padding:9px 12px 4px;font-weight:700}
.drop hr{border:0;border-top:1px solid rgba(120,170,225,.16);margin:6px 8px}
.hdr-cta{background:linear-gradient(115deg,var(--blue),var(--cyan) 60%,var(--teal));color:#fff;font-weight:700;
  font-size:.82rem;padding:.62em 1.15em;border-radius:var(--r);white-space:nowrap;flex:0 0 auto;order:5}
.hdr-cta:hover{filter:brightness(1.09);text-decoration:none;color:#fff}
.navtoggle{display:none;background:none;border:1px solid rgba(120,170,225,.35);border-radius:6px;
  width:40px;height:38px;cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center;order:6}
.navtoggle span{display:block;width:19px;height:2px;background:#c8d9ef}

/* ---------- header search ----------
   The box sits immediately after the logo (order:2, matching the sister site).
   position:static so .hres below can pin itself to .hdr-in instead. */
.hsearch{position:static;flex:0 0 auto;order:2}
.hs-field{position:relative;display:inline-flex;align-items:center}
.hsearch input{width:186px;background:rgba(255,255,255,.07);border:1px solid rgba(120,170,225,.28);
  border-radius:16px;padding:7px 13px;color:#eaf2fb;font-size:.8rem;font-family:var(--font-b);outline:none}
.hsearch input::placeholder{color:#7f97b5}
.hsearch input:focus{border-color:var(--cyan);background:rgba(255,255,255,.11);width:222px}
.hsearch input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
/* resting state: bright white "Search" plus three waiting dots. The real
   placeholder attribute is a single space, so :placeholder-shown still matches
   an empty field and the overlay fades out the moment anything is typed. */
.ss-ph{position:absolute;left:14px;top:50%;transform:translateY(-50%);display:flex;align-items:center;
  pointer-events:none;font-family:var(--font-h);font-weight:600;font-size:.8rem;letter-spacing:.01em;
  color:#fff;transition:opacity .15s ease}
.hsearch input:not(:placeholder-shown)~.ss-ph{opacity:0}
.ss-dots{display:inline-flex;align-items:center;gap:3px;margin-left:4px}
.ss-dots i{display:block;width:3px;height:3px;border-radius:50%;background:#fff;
  animation:ss-dot 1.3s infinite ease-in-out}
.ss-dots i:nth-child(2){animation-delay:.17s}
.ss-dots i:nth-child(3){animation-delay:.34s}
@keyframes ss-dot{0%,58%,100%{opacity:.3;transform:translateY(0)}29%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.ss-dots i{animation:none;opacity:.9}}

/* results overlay: pinned to the header container, so a six wide grid has the
   full bar width to work with and never runs off either edge */
.hres{position:absolute;top:calc(100% - 8px);left:24px;right:24px;width:auto;max-height:74vh;overflow:auto;
  background:var(--navy-2);border:1px solid rgba(120,170,225,.28);border-radius:12px;
  box-shadow:0 22px 54px -14px rgba(0,0,0,.7);padding:14px;display:none;z-index:400}
.hres.on{display:block}
.hres .none{padding:18px;color:#9fb6d4;font-size:.88rem;text-align:center;line-height:1.6}
/* quarter strength scrim over the page while the overlay is up. z-index sits
   below the sticky header (300) so the bar and the panel both stay lit. */
.ss-dim{position:fixed;inset:0;background:rgba(4,10,20,.25);opacity:0;visibility:hidden;
  transition:opacity .18s ease,visibility .18s;z-index:290}
.ss-dim.on{opacity:1;visibility:visible}

/* six across by three down at full width, stepping down with the viewport */
.ss-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:11px}
@media(max-width:1240px){.ss-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:1080px){.ss-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){.ss-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.ss-grid{grid-template-columns:repeat(2,1fr)}}
/* a tile is an <a>, so middle click and "copy link address" work on results */
.ss-tile{display:flex;flex-direction:column;background:var(--blue-dark);color:inherit;text-decoration:none;
  border:1px solid rgba(120,170,225,.22);border-radius:10px;padding:10px;cursor:pointer;
  overflow:hidden;text-align:left;transition:transform .15s,box-shadow .15s,border-color .15s,background .15s}
.ss-tile:hover{text-decoration:none}
.ss-tile:hover,.ss-tile:focus{transform:translateY(-3px);border-color:var(--cyan);
  background:#16407a;box-shadow:0 0 0 1px rgba(55,182,240,.5),0 14px 30px -10px rgba(55,182,240,.5);
  outline:none}
.ss-th{position:relative;height:74px;border-radius:7px;background:var(--navy);display:flex;align-items:center;
  justify-content:center;overflow:hidden;margin-bottom:8px;flex:0 0 auto}
.ss-th img{width:100%;height:100%;object-fit:cover}
/* timestamp pill on a video chapter result, play glyph on a whole video */
.ss-tm{position:absolute;right:5px;bottom:5px;font-family:var(--font-m);font-size:.6rem;font-weight:700;
  color:#fff;background:rgba(6,12,22,.82);padding:1px 5px;border-radius:4px;letter-spacing:.02em}
.ss-pl{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  background:rgba(6,12,22,.62);border:1px solid rgba(255,255,255,.55)}
.ss-pl::after{content:"";position:absolute;left:10px;top:7px;border-style:solid;
  border-width:6px 0 6px 9px;border-color:transparent transparent transparent #fff}
/* ---------- category badges ----------
   Solid fill, white text. Every pair below clears WCAG AA for text (4.5:1)
   against #fff; the ratio is noted so a future retint can be checked. */
.ss-bd{display:inline-block;align-self:flex-start;font-family:var(--font-h);font-weight:700;
  font-size:.54rem;letter-spacing:.09em;text-transform:uppercase;color:#fff;
  background:#475569;border:0;padding:3px 7px;border-radius:20px;margin-bottom:5px}
.ss-b-datasheet {background:#c2410c}   /* orange  5.18:1 */
.ss-b-video     {background:#6d28d9}   /* purple  7.10:1 */
.ss-b-faq       {background:#15803d}   /* green   5.02:1 */
.ss-b-manual    {background:#1d4ed8}   /* blue    6.70:1 */
.ss-b-application{background:#946a00}  /* gold    4.86:1 */
.ss-b-technote  {background:#be185d}   /* rose    6.04:1 */
.ss-b-whitepaper{background:#4338ca}   /* indigo  7.90:1 */
.ss-b-product   {background:#0f766e}   /* teal    5.47:1 */
.ss-b-other     {background:#475569}   /* slate   7.58:1 */
.ss-ti{font-family:var(--font-h);font-weight:700;font-size:.78rem;line-height:1.22;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px}
.ss-de{font-size:.68rem;line-height:1.32;color:#bcd2ec;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.ss-hint{grid-column:1/-1;text-align:center;font-family:var(--font-h);font-weight:700;
  font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#5f9fe0;margin-top:9px}

@media(max-width:1120px){
  .hdr-in{gap:12px}
  .nav{display:none}
  .navtoggle{display:flex}
  .hdr.open .nav{display:block;position:absolute;top:64px;left:0;right:0;height:auto;background:#0e2038;
    padding:10px;border-bottom:1px solid rgba(120,170,225,.2);max-height:calc(100vh - 64px);overflow:auto}
  .hdr.open .nav>li{display:block;height:auto}
  .hdr.open .nav>li>a,.hdr.open .nav>li>button{height:auto;padding:11px 12px;width:100%;justify-content:space-between}
  .hdr.open .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    background:transparent;padding:0 0 8px 14px;min-width:0}
}
/* Below 780px the logo, search box, quote button and menu toggle no longer fit on
   one row: the header was overflowing the viewport by ~70px and taking the whole
   page with it. Drop the search out of the bar and into the opened menu, where it
   gets full width, and tighten the rest. */
@media(max-width:780px){
  .hdr-in{padding:0 14px;gap:10px}
  .hdr-logo img{height:34px}
  .hdr-cta{font-size:.74rem;padding:.55em .75em;letter-spacing:0}
  .hsearch{display:none;order:99}
  /* inside the opened menu the box goes full width, and the overlay anchors to
     the box again rather than to the (now wrapped) header container */
  .hdr.open .hsearch{display:block;width:100%;padding:0 12px 12px;background:#0e2038;position:relative}
  .hdr.open .hs-field{display:flex;width:100%}
  .hdr.open .hsearch input,.hdr.open .hsearch input:focus{width:100%}
  .hdr.open .hdr-in{flex-wrap:wrap;height:auto;padding-bottom:0}
  .hres{width:calc(100vw - 40px);right:auto;left:0;top:calc(100% + 2px)}
}
@media(max-width:420px){
  .hdr-cta{font-size:0;padding:.6em .7em}
  .hdr-cta::after{content:"Quote";font-size:.78rem}
}

/* ---------- account control (Clerk) ---------- */
.dei-acct{display:flex;align-items:center;gap:11px;flex:0 0 auto;font-family:var(--font-h);order:4}
.dei-welcome{color:#c8d9ef;font-size:.8rem;font-weight:600;white-space:nowrap}
.dei-welcome b{color:#fff;font-weight:700}
.dei-signin{appearance:none;border:1px solid rgba(120,170,225,.45);background:transparent;
  color:#dbe7f6;font-family:var(--font-h);font-weight:600;font-size:.78rem;padding:.5em .95em;
  border-radius:var(--r);cursor:pointer;white-space:nowrap;transition:all .15s}
.dei-signin:hover{background:rgba(55,182,240,.15);border-color:var(--cyan);color:#fff}
.dei-userbtn{display:flex;align-items:center}
@media(max-width:1120px){.dei-welcome{display:none}}
@media(max-width:520px){.dei-signin{padding:.5em .7em;font-size:.72rem}}
.dei-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,14px);z-index:900;
  background:var(--navy-2);color:#e8f1fb;border:1px solid rgba(120,170,225,.3);
  border-radius:var(--r);padding:11px 18px;font-size:.88rem;box-shadow:var(--sh-lg);
  opacity:0;transition:opacity .25s,transform .25s;max-width:min(92vw,460px)}
.dei-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);overflow:hidden;isolation:isolate}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,22,38,.97) 0%,rgba(10,22,38,.86) 42%,rgba(10,22,38,.26) 72%,rgba(10,22,38,.12) 100%)}
.hero-in{max-width:var(--wrap);margin:0 auto;padding:74px 24px 78px;position:relative}
.hero h1{color:#fff;font-size:clamp(2rem,4.4vw,3.25rem);max-width:17ch;margin-bottom:16px}
.hero .kick{display:inline-block;font-family:var(--font-h);font-size:.74rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cyan-bright);margin-bottom:14px}
.hero p{color:#c9daf0;font-size:1.06rem;max-width:56ch;margin:0 0 24px}
.hero .btns{display:flex;gap:12px;flex-wrap:wrap}
.hero-sm .hero-in{padding:46px 24px 48px}
.hero-sm h1{font-size:clamp(1.7rem,3.2vw,2.4rem);max-width:26ch}
.hero-sm p{font-size:1rem;margin-bottom:0}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--font-h);font-weight:700;font-size:.94rem;padding:.7em 1.45em;
  border-radius:var(--r);border:1px solid transparent;cursor:pointer;text-align:center;transition:all .16s}
.btn:hover{text-decoration:none}
.btn-primary{background:linear-gradient(115deg,var(--blue),var(--cyan) 58%,var(--teal));color:#fff;
  box-shadow:0 6px 22px -8px rgba(55,182,240,.65)}
.btn-primary:hover{transform:translateY(-1px);color:#fff;box-shadow:0 10px 28px -8px rgba(55,182,240,.8)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(160,200,238,.5)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan-bright)}
.btn-solid{background:var(--blue);color:#fff}
.btn-solid:hover{background:var(--blue-600);color:#fff}
.btn-line{background:#fff;color:var(--blue);border-color:var(--line)}
.btn-line:hover{border-color:var(--blue);background:#f7fbff}
.btn-sm{font-size:.84rem;padding:.5em 1em}

/* ---------- generic content ---------- */
main{display:block}
.sec{padding:52px 0}
.sec-tight{padding:34px 0}
.sec-head{margin-bottom:26px}
.sec-head h2{font-size:1.72rem;margin-bottom:8px}
.sec-head p{color:var(--muted);margin:0;max-width:74ch}
.eyebrow{font-family:var(--font-h);font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue);margin-bottom:9px;display:block}
.lead{font-size:1.06rem;color:var(--ink-2)}
.bg-white{background:#fff}
.bg-tint{background:linear-gradient(180deg,#eef3f9,#f4f6f9)}

/* breadcrumbs */
.crumbs{font-size:.8rem;color:var(--muted);padding:14px 0 0}
.crumbs a{color:var(--muted)}
.crumbs span{margin:0 7px;color:var(--muted-2)}

/* prose */
.prose{font-size:1rem;color:var(--ink-2)}
.prose h2{font-size:1.42rem;margin:34px 0 12px;padding-top:18px;border-top:2px solid var(--line)}
.prose h3{font-size:1.13rem;margin:26px 0 9px;color:var(--blue-dark)}
.prose h4{font-size:1rem;margin:20px 0 7px;color:var(--blue-dark)}
.prose p{margin:0 0 13px}
.prose ul,.prose ol{margin:0 0 15px;padding-left:24px}
.prose li{margin:5px 0}
.prose li>ul,.prose li>ol{margin:5px 0 3px}
.prose img{border:1px solid var(--line);border-radius:var(--r);margin:14px 0}
.prose table{border-collapse:collapse;width:100%;margin:16px 0;font-size:.9rem}
.prose th,.prose td{border:1px solid var(--line);padding:8px 11px;text-align:left;vertical-align:top}
.prose th{background:var(--blue-dark);color:#fff;font-family:var(--font-h);font-weight:600}
.prose tr:nth-child(even) td{background:#fafbfc}
.prose a{text-decoration:underline;text-underline-offset:2px}
.prose>*:first-child{margin-top:0}

/* ---------- cards ---------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(276px,1fr))}
.g3x{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:940px){.g3x{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.g3x{grid-template-columns:1fr}}
.g4{grid-template-columns:repeat(auto-fit,minmax(216px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s}
.card:hover{box-shadow:var(--sh-lg);transform:translateY(-2px)}
.grid{align-items:stretch}
.card .visual{background:linear-gradient(160deg,#f2f6fa,#e6edf5);display:flex;align-items:center;
  justify-content:center;padding:18px;height:186px;flex:0 0 auto}
.card .visual img{max-height:150px;max-width:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.card .body{padding:17px 19px 19px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:1.06rem;margin-bottom:5px}
.card h3 a{color:var(--blue-dark)}
.card .ff{font-family:var(--font-m);font-size:.76rem;color:var(--blue);background:#eef5fc;display:inline-block;
  padding:2px 7px;border-radius:4px;margin-bottom:8px;align-self:flex-start}
.card p{margin:0 0 12px;font-size:.9rem;color:var(--muted);flex:1}
.card .more{font-family:var(--font-h);font-weight:700;font-size:.85rem;color:var(--blue)}

/* line card (product line entry) */
.linecard{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh)}
.linecard .txt{padding:30px 32px}
.linecard .pic{background:var(--navy-2);position:relative;min-height:230px}
.linecard .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.linecard h3{font-size:1.4rem;margin-bottom:9px}
.linecard .stat{display:flex;gap:22px;margin:14px 0 16px;flex-wrap:wrap}
.linecard .stat div{font-size:.8rem;color:var(--muted)}
.linecard .stat b{display:block;font-family:var(--font-h);font-size:1.24rem;color:var(--blue-dark);line-height:1.2}
@media(max-width:820px){.linecard{grid-template-columns:1fr}.linecard .pic{min-height:170px;order:-1}}

/* ---------- collapsible ---------- */
details.acc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:12px;
  overflow:hidden;box-shadow:var(--sh)}
details.acc>summary{list-style:none;cursor:pointer;padding:15px 20px;display:flex;align-items:center;gap:12px;
  font-family:var(--font-h);font-weight:700;color:var(--blue-dark);font-size:1.02rem;user-select:none}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--blue);
  border-bottom:2px solid var(--blue);transform:rotate(45deg);transition:transform .18s;flex:0 0 auto;margin-top:-4px}
details.acc[open]>summary::after{transform:rotate(-135deg);margin-top:2px}
details.acc>summary:hover{background:#f7fafd}
details.acc>summary .cnt{font-family:var(--font-b);font-weight:400;font-size:.82rem;color:var(--muted);
  background:var(--page);border:1px solid var(--line);border-radius:11px;padding:1px 9px}
details.acc .acc-body{padding:0 20px 20px;border-top:1px solid var(--line-2)}
details.acc .acc-body>*:first-child{margin-top:16px}

/* ---------- spec table (sortable) ---------- */
.tbl-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:16px 0 11px}
.tbl-tools input[type=search]{flex:1 1 230px;min-width:180px;padding:8px 12px;border:1px solid var(--line);
  border-radius:var(--r);font-size:.88rem;font-family:var(--font-b);background:#fff;color:var(--ink)}
.tbl-tools input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(55,182,240,.15)}
.tbl-tools .hint{font-size:.79rem;color:var(--muted)}
.tbl-tools .shown{font-size:.79rem;color:var(--muted);white-space:nowrap}
.disc-toggle{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;color:var(--ink-2);
  cursor:pointer;user-select:none;white-space:nowrap;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:5px 12px 5px 10px;transition:border-color .15s}
.disc-toggle:hover{border-color:var(--blue)}
.disc-toggle input{accent-color:var(--blue);width:15px;height:15px;margin:0;cursor:pointer}
.disc-toggle .n{color:var(--muted-2)}
.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;-webkit-overflow-scrolling:touch}
table.spec{border-collapse:collapse;width:100%;font-size:.86rem;min-width:760px}
table.spec th,table.spec td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top}
table.spec thead th{background:var(--blue-dark);color:#fff;font-family:var(--font-h);font-weight:600;
  font-size:.79rem;letter-spacing:.02em;z-index:2;white-space:nowrap;cursor:pointer;user-select:none}
/* Sticky headers only where the wrapper is not an overflow container: a
   horizontally scrolling ancestor makes position:sticky a no-op. */
@media(min-width:1120px){
  .tbl-scroll{overflow:visible}
  table.spec thead th{position:sticky;top:64px}
}
table.spec thead th:hover{background:#17406f}
table.spec thead th .arr{opacity:.42;margin-left:5px;font-size:.72rem}
table.spec thead th.sorted .arr{opacity:1;color:var(--cyan-bright)}
table.spec thead th.nosort{cursor:default}
table.spec thead th.nosort:hover{background:var(--blue-dark)}
table.spec tbody tr:nth-child(even){background:#fafbfd}
table.spec tbody tr:hover{background:#eff6fd}
table.spec td.model{white-space:nowrap;font-weight:700;font-family:var(--font-h)}
table.spec td.model a{color:var(--blue)}
table.spec td.model .sub{display:block;font-family:var(--font-b);font-weight:400;font-size:.76rem;
  color:var(--muted);max-width:34ch;white-space:normal;margin-top:1px}
table.spec td.nw{white-space:nowrap}
table.spec td.dash{color:var(--muted-2)}
table.spec .tag{display:inline-block;font-size:.68rem;background:#fdf0e2;color:#9a5b06;border-radius:3px;
  padding:1px 5px;margin-left:5px;font-family:var(--font-b);font-weight:600;vertical-align:middle}
.tbl-empty{padding:26px;text-align:center;color:var(--muted);font-size:.9rem}

/* ---------- in-page contents ---------- */
.toc{background:#fff;border:1px solid var(--line);border-left:3px solid var(--cyan);
  border-radius:0 var(--r-lg) var(--r-lg) 0;padding:15px 20px;margin:0 0 26px}
.toc h2{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  margin-bottom:9px;font-weight:700}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:26px}
.toc li{margin:3px 0;font-size:.9rem;break-inside:avoid}
.toc a{color:var(--ink-2)}
.toc a:hover{color:var(--blue)}
@media(max-width:640px){.toc ol{columns:1}}
.prose h2[id],.prose h3[id]{scroll-margin-top:78px}

/* Keep the model column visible while the spec columns scroll sideways. With eight
   columns this is the difference between reading a row and guessing at it. */
table.spec td.model,table.spec thead th:first-child{position:sticky;left:0;z-index:1;
  background:#fff;box-shadow:1px 0 0 var(--line-2)}
table.spec thead th:first-child{z-index:3;background:var(--blue-dark)}
table.spec tbody tr:nth-child(even) td.model{background:#fafbfd}
table.spec tbody tr:hover td.model{background:#eff6fd}
@media(min-width:1120px){
  table.spec td.model,table.spec thead th:first-child{position:static;box-shadow:none}
}

/* ---------- 404 ---------- */
.nf{text-align:center;padding:70px 0 40px}
.nf h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:12px}
.nf p{color:var(--muted);font-size:1.05rem;max-width:56ch;margin:0 auto 24px}
.nf .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* document library: the description column carries the weight, let it breathe */
table.spec.docs{min-width:860px}
table.spec.docs td:nth-child(2){color:var(--ink-2);font-size:.85rem;line-height:1.5;min-width:280px}
table.spec.docs td.model{min-width:190px}
table.spec.docs .btn-line{white-space:nowrap}

/* ---------- doc list ---------- */
.doclist{list-style:none;margin:0;padding:0}
.doclist li{border-bottom:1px solid var(--line-2)}
.doclist li:last-child{border-bottom:0}
.doclist a{display:flex;align-items:center;gap:11px;padding:10px 4px;color:var(--ink);font-size:.91rem}
.doclist a:hover{color:var(--blue);text-decoration:none}
.doclist .ic{flex:0 0 auto;width:26px;height:26px;border-radius:5px;background:#fdeceb;color:#c0392b;
  display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;font-family:var(--font-h)}
.doclist .ic.man{background:#eaf2fd;color:var(--blue)}
.doclist .meta{margin-left:auto;font-size:.76rem;color:var(--muted-2);white-space:nowrap}
.doclist a[data-gate] .ic.man::after{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--blue);position:absolute;transform:translate(9px,-9px)}
.doclist a[data-gate] .ic.man{position:relative}

/* ---------- document gate ----------
   Three surfaces, one job: turn a manual download into a registered account.

   .dgate   opens in place under the link that was clicked, so the ask appears
            where the intent already is rather than over the page
   .dgate-m the product-page prompt, which is the only one that interrupts
   .dg-bar  the strip under the header, which never blocks anything

   Kept to the tokens the rest of the sheet uses so none of this reads as bolted
   on, and every interactive target stays at least 40px tall for touch. */
.dgate{margin:8px 0 12px;padding:14px;border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:var(--r);background:#f7fafd}
.dgate[hidden]{display:none}
.dgate h5{font-family:var(--font-h);color:var(--blue-dark);font-size:.94rem;margin:0 0 4px}
.dgate p{margin:0 0 10px;font-size:.84rem;color:var(--muted);line-height:1.5}
.dgate .acts{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.dgate .acts button{height:40px;padding:0 16px;border:0;border-radius:var(--r);background:var(--blue);
  color:#fff;font-family:var(--font-h);font-weight:700;font-size:.85rem;cursor:pointer}
.dgate .acts button:hover{background:var(--blue-600)}
.dgate .acts .later{background:none;color:var(--muted);font-weight:600;text-decoration:underline;padding:0 6px}
.dgate .acts .later:hover{background:none;color:var(--ink)}
.dgate .ok{margin:0 0 9px;font-size:.85rem;color:var(--ink)}
.dgate .dg-open{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:var(--r);
  background:var(--blue);color:#fff;font-family:var(--font-h);font-weight:700;font-size:.85rem}
.dgate .dg-open:hover{background:var(--blue-600);text-decoration:none;color:#fff}

/* Product-page prompt. Centred, dismissible, and never shown to someone who is
   already signed in. */
.dgate-m{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(10,22,38,.55)}
.dgate-m[hidden]{display:none}
.dgate-m .in{position:relative;width:100%;max-width:420px;background:#fff;border-radius:var(--r-lg);
  padding:26px 24px 22px;box-shadow:0 18px 50px rgba(10,22,38,.3)}
.dgate-m h4{font-size:1.14rem;margin:0 0 8px;color:var(--blue-dark)}
.dgate-m p{margin:0 0 14px;font-size:.88rem;color:var(--muted);line-height:1.55}
.dgate-m .x{position:absolute;top:8px;right:8px;width:34px;height:34px;border:0;background:none;
  color:var(--muted-2);font-size:1.3rem;line-height:1;cursor:pointer;border-radius:var(--r)}
.dgate-m .x:hover{background:var(--line-2);color:var(--ink)}
.dgate-m .btns{display:flex;gap:9px;flex-wrap:wrap}
.dgate-m .btns a,.dgate-m .btns button{height:42px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 17px;border-radius:var(--r);font-family:var(--font-h);font-weight:700;font-size:.86rem;
  cursor:pointer;border:0}
.dgate-m .go{background:var(--blue);color:#fff}
.dgate-m .go:hover{background:var(--blue-600);text-decoration:none}
.dgate-m .later{background:none;color:var(--muted);text-decoration:underline}

/* Header line. Sits next to the account control and is purely a label, so it can
   never take a click away from search, the nav or Request a Quote. */
/* The standing prompt, as a strip under the header rather than a child of it.
   Measured, not assumed: .hdr-in is capped at max-width 1240px and the nav
   alone wants 519px of it, so any sibling added to that bar squeezes the nav
   below its content width and CONTACT collides with whatever sits beside it.
   A wider screen does not help, because the cap means the bar never grows.
   Given the whole width the sentence fits at every size and nothing has to be
   truncated to fit a gap that was never actually there. */
.dg-bar{background:#eaf2fd;border-bottom:1px solid #cfe0f5;font-size:.82rem;color:var(--ink-2)}
.dg-bar[hidden]{display:none}
.dg-bar .in{max-width:1240px;margin:0 auto;padding:9px 24px;display:flex;align-items:center;
  gap:7px;flex-wrap:wrap}
.dg-bar a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.dg-bar a:hover{color:var(--blue-600)}
.dg-bar .x{margin-left:auto;border:0;background:none;color:var(--muted-2);font-size:1.15rem;
  line-height:1;cursor:pointer;padding:2px 7px;border-radius:var(--r)}
.dg-bar .x:hover{background:#dbe8f8;color:var(--ink)}
@media(max-width:560px){.dg-bar .in{padding:9px 16px}}

/* ---------- video panel ---------- */
.vgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}
.vcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh);display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s}
.vcard:hover{box-shadow:var(--sh-lg);transform:translateY(-2px)}
.vthumb{position:relative;aspect-ratio:16/9;background:#0b1a2b;cursor:pointer;border:0;padding:0;width:100%;display:block}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block}
.vthumb::after{content:"";position:absolute;inset:0;background:rgba(6,20,36,.22);transition:background .18s}
.vthumb:hover::after{background:rgba(6,20,36,.06)}
.vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:40px;border-radius:9px;
  background:rgba(6,85,163,.92);display:flex;align-items:center;justify-content:center;z-index:2;transition:background .18s,transform .18s}
.vthumb:hover .vplay{background:#cc0000;transform:translate(-50%,-50%) scale(1.06)}
.vplay::before{content:"";border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent #fff;margin-left:3px}
.vcard .vb{padding:13px 15px 15px}
.vcard h3{font-size:.95rem;line-height:1.35;margin-bottom:5px}
.vcard .vcat{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);font-family:var(--font-h);font-weight:700}
.vcard iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.vfilter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.vfilter button{font-family:var(--font-h);font-weight:600;font-size:.83rem;padding:.45em 1em;border-radius:16px;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer;transition:all .15s}
.vfilter button:hover{border-color:var(--blue);color:var(--blue)}
.vfilter button.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------- Bioz citation badge ----------
   Same widget and slug as the Berkeley Nucleonics DEI page: vendor 13441,
   product family high_power_current_pulsers_supplies_group. Opens in a modal so
   the reader keeps their place; the href stays real for middle-click. */
.bioz-badge{display:inline-flex;align-items:center;gap:10px;background:#fff;
  border:1px solid #d7e0ea;border-left:3px solid var(--blue);border-radius:var(--r);
  padding:9px 15px;text-decoration:none;box-shadow:0 1px 4px rgba(17,49,99,.08);
  transition:box-shadow .16s,transform .16s}
.bioz-badge:hover{text-decoration:none;transform:translateY(-1px);
  box-shadow:0 6px 18px -6px rgba(17,49,99,.28)}
.bioz-badge .bz-mark{font:700 11px var(--font-b);letter-spacing:.12em;color:var(--blue-dark)}
.bioz-badge .bz-txt{font:400 12.5px var(--font-b);color:#33424f}
.bioz-badge .bz-txt b{color:var(--blue)}
.bioz-badge .bz-txt .fam{color:#8b97a8;font-size:11px}
.bioz-badge .bz-arrow{font:700 12px var(--font-b);color:var(--blue)}
.bioz-dark{background:rgba(255,255,255,.96)}
@media(max-width:520px){.bioz-badge .bz-txt .fam{display:none}}
/* ---------- Bioz Micro-Badge: live rating + citation count ---------- */
.bioz-micro{display:inline-block}
.bioz-micro .bioz-micro-slot,.bioz-micro .bioz-micro-pb{display:none}
.bioz-micro.is-live .bioz-micro-slot,.bioz-micro.is-live .bioz-micro-pb{display:block}
.bioz-micro.is-live>a.bioz-badge{display:none !important}
@media print{.bioz-micro .bioz-micro-slot,.bioz-micro .bioz-micro-pb{display:none !important}
  .bioz-micro>a.bioz-badge{display:inline-flex !important}}
/* ---------- Bioz citation panel, above the footer ---------- */
.bioz-cited{background:linear-gradient(180deg,#0a1626 0%,#0e2038 100%);padding:26px 0 30px}
.bioz-cited-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.bioz-cited-mark{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(115deg,#4c1d95 0%,#6d28d9 58%,#7c3aed 100%);color:#fff;
  font:700 10px/1 var(--font-b);letter-spacing:.14em;padding:7px 10px;border-radius:5px;margin-top:2px}
.bioz-cited-head h2{margin:0 0 2px;font:700 17px/1.25 var(--font-h);color:#fff}
.bioz-cited-head p{margin:0;font:400 12px/1.45 var(--font-b);color:#9fb3d0;max-width:78ch}
.bioz-cited-ext{margin-left:auto;align-self:center;font:700 12px var(--font-b);color:#7cc4ff;
  text-decoration:none;white-space:nowrap;border-bottom:1px solid rgba(124,196,255,.35)}
.bioz-cited-frame{position:relative;height:500px;background:#fff;border-radius:12px;
  border:1px solid rgba(124,170,220,.28);overflow:hidden}
.bioz-cited-frame object{display:block;width:100%;height:500px;border:0}
.bioz-cited-ph{display:flex;align-items:center;justify-content:center;height:100%;
  color:#6b7480;font:400 13px var(--font-b)}
@media(max-width:720px){.bioz-cited-frame,.bioz-cited-frame object{height:820px}
  .bioz-cited-ext{margin-left:0}}
.bioz-cited-frame.is-compact{height:auto;background:#fff}
.bioz-cited-frame.is-compact>object{display:none}
.bioz-cited-pb{margin-top:8px}
.bioz-cited-pb a{font:400 11px var(--font-b);color:#7f93b0;text-decoration:none}
.bzc{padding:14px 16px 16px;font:400 13px/1.45 var(--font-b);color:#33424f}
.bzc-top{display:flex;align-items:center;gap:14px;padding-bottom:10px;border-bottom:1px solid #e6edf5}
.bzc-rating{font:700 13px var(--font-b);color:#113163}
.bzc-rating::before{content:"★";color:#f5a623;margin-right:5px;font-size:14px}
.bzc-count{font:700 12.5px var(--font-b);color:#113163;background:#eef3f9;border-radius:4px;padding:3px 9px}
.bzc-ai{position:relative;overflow:hidden;margin:10px 0;border-radius:4px}
.bzc-ai object{display:block;width:100%;height:900px;border:0;pointer-events:none}
.bzc-list{list-style:none;margin:0;padding:0}
.bzc-item{border:1px solid #e6edf5;border-radius:4px;padding:9px 11px;margin-bottom:8px}
.bzc-item:last-child{margin-bottom:0}
.bzc-title{margin:0 0 3px;font:700 13px/1.35 var(--font-b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bzc-title a{color:#113163;text-decoration:none}
.bzc-title a:hover{color:var(--blue);text-decoration:underline}
.bzc-authors{margin:0 0 2px;font-size:12px;color:#8b97a8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bzc-meta{margin:0 0 4px;font-size:12px;color:var(--blue)}
.bzc-meta a{color:var(--blue);text-decoration:none}
.bzc-meta a:hover{text-decoration:underline}
.bzc-sep{color:#c3cede;margin:0 3px}
.bzc-brief::after{content:"✦";margin-left:3px;font-size:10px;color:#6b21a8}
.bzc-snippet{margin:0;font-size:12px;color:#66727f;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bzc-foot{margin:10px 0 0;font-size:11px;color:#8b97a8}
@media print{.bioz-cited{display:none}}
.bzmodal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
  padding:22px;background:rgba(17,49,99,.55);backdrop-filter:blur(3px)}
.bzmodal.open{display:flex}
.bzmodal-box{background:#fff;border-radius:10px;max-width:960px;width:100%;
  height:min(82vh,760px);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
.bzmodal-head{display:flex;align-items:center;gap:10px;background:var(--blue-dark);color:#fff;
  padding:12px 18px;font-family:var(--font-b)}
.bzmodal-head b{letter-spacing:.1em;font:700 13px var(--font-b)}
.bzmodal-head span{font:400 13px var(--font-b)}
.bzmodal-head a{margin-left:auto;color:#9dc2e8;font:400 12px var(--font-b)}
.bzmodal-head button{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;line-height:1}
.bzmodal-body{flex:1 1 auto;overflow:auto;background:#f6f8fb}
.bzmodal-body object{width:100%;height:100%;border:0}

/* ---------- video modal ----------
   Playing inside the 288px tile was uncomfortable. Clicking now opens the video at
   roughly four fifths of the viewport, over the page, so closing it returns the
   reader exactly where they were. */
.vmodal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
  padding:3vh 3vw;background:rgba(6,16,30,.86);backdrop-filter:blur(4px)}
.vmodal.open{display:flex}
.vmodal-box{position:relative;width:80vw;max-width:1400px}
@media(max-width:900px){.vmodal-box{width:94vw}}
.vmodal-frame{position:relative;width:100%;padding-top:56.25%;background:#000;border-radius:10px;
  overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.85)}
.vmodal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vmodal-cap{color:#dbe7f6;font-family:var(--font-h);font-weight:600;font-size:.95rem;
  margin-top:12px;text-align:center;line-height:1.4}
.vmodal-cap a{color:var(--cyan-bright);font-weight:400;font-size:.85rem;margin-left:10px}
.vmodal-x{position:absolute;top:-40px;right:0;background:none;border:0;color:#fff;font-size:2rem;
  line-height:1;cursor:pointer;opacity:.85;padding:0 6px}
.vmodal-x:hover{opacity:1}
@media(max-width:900px){.vmodal-x{top:-36px}}

/* ---------- product page ---------- */
.pdet{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:34px;align-items:start}
@media(max-width:900px){.pdet{grid-template-columns:1fr}}
.pgal{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;text-align:center;box-shadow:var(--sh)}
.pgal img{max-height:300px;width:auto}
.pgal .thumbs{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.pgal .thumbs img{max-height:52px;border:1px solid var(--line);border-radius:4px;padding:3px;cursor:pointer;background:#fff}
.pgal .thumbs img:hover{border-color:var(--blue)}
.pside{position:sticky;top:82px}
.pbox{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:19px;margin-bottom:16px;box-shadow:var(--sh)}
.pbox h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:11px}
.ataglance{width:100%;border-collapse:collapse;font-size:.85rem}
.ataglance th{text-align:left;font-family:var(--font-b);font-weight:400;color:var(--muted);padding:5px 0;
  border-bottom:1px solid var(--line-2);width:52%;vertical-align:top}
.ataglance td{text-align:right;font-weight:700;color:var(--ink);padding:5px 0;border-bottom:1px solid var(--line-2);
  font-family:var(--font-h)}
.ataglance tr:last-child th,.ataglance tr:last-child td{border-bottom:0}
.pill{display:inline-block;font-size:.72rem;background:#eef5fc;color:var(--blue);border-radius:11px;
  padding:2px 10px;margin:0 5px 5px 0;font-family:var(--font-h);font-weight:600}
.pill.warn{background:#fdf0e2;color:#9a5b06}

/* ---------- notes / callouts ---------- */
.note{background:#f2f8fd;border-left:3px solid var(--cyan);border-radius:0 var(--r) var(--r) 0;
  padding:13px 17px;margin:16px 0;font-size:.92rem;color:var(--ink-2)}
.note.warn{background:#fdf6ec;border-left-color:var(--amber)}
.note b{color:var(--blue-dark)}

/* ---------- CTA band ---------- */
.ctaband{background:linear-gradient(120deg,var(--blue-dark),var(--navy-3) 60%,var(--blue));color:#fff;
  border-radius:var(--r-lg);padding:32px 36px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  box-shadow:var(--sh-lg)}
.ctaband h2{color:#fff;font-size:1.4rem;margin-bottom:5px}
.ctaband p{margin:0;color:#c9daf0;font-size:.96rem;max-width:60ch}
.ctaband .sp{flex:1}
.ctaband .btns{display:flex;gap:11px;flex-wrap:wrap}

/* ---------- application pages ---------- */
.app-video{margin:26px 0 30px}
.app-video .vthumb{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg)}
.app-video .vthumb img{width:100%;height:auto;display:block}
.app-video-cap{margin:9px 0 0;font-size:.85rem;color:var(--muted);text-align:center}
.app-sec{margin-top:34px}
.app-sec h2{font-size:1.4rem;margin-bottom:14px;padding-bottom:9px;
  border-bottom:2px solid var(--blue-dark)}
ul.app-list{list-style:none;margin:0;padding:0}
ul.app-list li{position:relative;padding:0 0 0 22px;margin:0 0 17px}
ul.app-list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;
  border-radius:2px;background:var(--cyan)}
ul.app-list b{display:block;font-family:var(--font-h);color:var(--blue-dark);font-size:1rem;
  margin-bottom:3px}
ul.app-list span{display:block;color:var(--ink-2);font-size:.94rem;line-height:1.62}
.app-close{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);
  color:var(--ink-2);font-size:.98rem}

/* ---------- FAQ ---------- */
.faq-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:34px;align-items:start}
@media(max-width:900px){.faq-layout{grid-template-columns:1fr}}
.faq-toc{position:sticky;top:82px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh)}
@media(max-width:900px){.faq-toc{position:static}}
.faq-toc .toc-note{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);margin:0 0 9px;font-weight:700}
.faq-toc a{display:flex;justify-content:space-between;gap:8px;padding:7px 9px;border-radius:6px;
  color:var(--ink-2);font-size:.88rem;line-height:1.3}
.faq-toc a:hover{background:var(--page);color:var(--blue);text-decoration:none}
.faq-toc a span{color:var(--muted-2);font-size:.78rem}
.faq-more{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)}
.faq-more ul{list-style:none;margin:0;padding:0}
.faq-more li{margin-bottom:5px}
.faq-more a{display:block;font-size:.82rem;padding:5px 9px}
.faqcat{margin-bottom:34px;scroll-margin-top:80px}
.faqcat h2{font-size:1.35rem;margin-bottom:12px;padding-bottom:9px;
  border-bottom:2px solid var(--blue-dark)}
details.faqq{border:1px solid var(--line);border-radius:var(--r);background:#fff;
  margin-bottom:8px;scroll-margin-top:82px;box-shadow:var(--sh)}
details.faqq>summary{list-style:none;cursor:pointer;padding:12px 44px 12px 16px;position:relative;
  font-family:var(--font-h);font-weight:600;color:var(--blue-dark);font-size:.97rem;line-height:1.4}
details.faqq>summary::-webkit-details-marker{display:none}
details.faqq>summary::after{content:"+";position:absolute;right:16px;top:11px;font-size:1.3rem;
  line-height:1;color:var(--blue);font-weight:400}
details.faqq[open]>summary::after{content:"‘2"}
details.faqq>summary:hover{background:#f7fafd}
details.faqq .fa{padding:0 16px 14px;border-top:1px solid var(--line-2)}
details.faqq .fa p{margin:13px 0 0;color:var(--ink-2);font-size:.93rem;line-height:1.62}
details.faqq[open]{border-color:#c9dcf0}

.faq-other-cat{margin-bottom:10px}
.faq-other-cat>summary{font-size:.96rem}
.faq-other-cat .acc-body{padding-top:4px}
.faq-other-cat details.faqq{box-shadow:none}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);gap:28px;
  align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* ---------- form groups ---------- */
.frm-grp{font-size:1.05rem;color:var(--blue-dark);margin:26px 0 12px;padding-bottom:7px;
  border-bottom:1px solid var(--line)}
.frm-grp:first-child{margin-top:0}
label.chk{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--ink-2);
  margin:0 0 15px;cursor:pointer}
label.chk input{accent-color:var(--blue);width:16px;height:16px;margin:0;flex:0 0 auto}

/* ---------- forms ---------- */
.frm{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh)}
.frm .row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:620px){.frm .row{grid-template-columns:1fr}}
.fld{margin-bottom:15px}
.fld label{display:block;font-family:var(--font-h);font-weight:600;font-size:.84rem;color:var(--ink-2);margin-bottom:5px}
.fld input,.fld select,.fld textarea{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);
  font-size:.93rem;font-family:var(--font-b);color:var(--ink);background:#fff}
.fld textarea{min-height:118px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(55,182,240,.15)}
.fld .req{color:#c0392b}
.frm .hp{position:absolute;left:-9999px}

/* ---------- footer (Berkeley Nucleonics layout) ---------- */
.gfoot{position:relative;overflow:hidden;background:#0e2038;color:#9bb0cc;padding:26px 0 12px;
  font-size:.9rem;font-family:var(--font-b);margin-top:56px}
.gfoot::before{content:"";position:absolute;left:50%;bottom:-150px;transform:translateX(-50%);
  width:600px;height:330px;pointer-events:none;animation:gfglow 6s ease-in-out infinite;
  background:radial-gradient(circle at 50% 50%,rgba(55,182,240,.20),rgba(63,208,196,.06) 46%,transparent 70%)}
@keyframes gfglow{0%,100%{opacity:.6}50%{opacity:.95}}
.gfoot .gwrap{position:relative;z-index:1;max-width:1140px;margin:0 auto;padding:0 28px}
.gfoot .gcols{display:grid;grid-template-columns:1.15fr 1.25fr 1fr;gap:30px;align-items:start;
  margin-bottom:10px}
.gfoot .gbrand a.gbnc-link{display:inline-block;line-height:0}
.gfoot .gbrand .gbnc{height:52px;width:auto;display:block;margin-bottom:9px}
.gfoot .gtagline{margin:0 0 12px;max-width:34ch;color:#aebfd4;font-size:.82rem;line-height:1.5}
.gfoot .gacad{display:flex;align-items:center;gap:11px;border-top:1px solid rgba(255,255,255,.1);
  padding-top:11px;max-width:34ch}
.gfoot .gacad a.gacad-logo{flex:0 0 auto;display:inline-flex;line-height:0}
.gfoot .gacad img{height:58px;width:auto;flex:0 0 auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.gfoot .gacad span{font-size:.72rem;line-height:1.4;color:#9bb0cc}
.gfoot .gacad b{color:#fff;font-family:var(--font-h);font-size:.82rem;display:block;margin-bottom:1px}
.gfoot .gacad a{text-decoration:none}
.gfoot .gacad a:hover b{color:#5fd0ff}
.gfoot .gmap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.gfoot .gmap-img{width:100%;max-width:340px;height:auto;filter:drop-shadow(0 5px 16px rgba(55,182,240,.28))}
.gfoot .gmap .gtag{margin:2px 0 0;font-size:1.1rem;line-height:1.35;color:#c4d6ee}
.gfoot .gmap .gtag a{color:#5fd0ff;font-weight:700;text-decoration:none}
.gfoot .gmap .gtag a:hover{color:#8fe2ff;text-decoration:underline}
.gfoot .gcompany h5{font-family:var(--font-h);color:#fff;font-size:.78rem;margin:0 0 8px;
  text-transform:uppercase;letter-spacing:.06em}
.gfoot .gcompany ul{list-style:none;padding:0;margin:0;columns:2;column-gap:20px}
.gfoot .gcompany li{margin-bottom:5px;font-size:.79rem;break-inside:avoid}
.gfoot .gcompany a{color:#9bb0cc;text-decoration:none}
.gfoot .gcompany a:hover{color:#fff;text-decoration:underline}
.gfoot .gsocial-label{font-size:.68rem;color:#9bb0cc;text-transform:uppercase;letter-spacing:.06em;
  margin:12px 0 4px;font-weight:600}
.gfoot .gsocial{display:flex;gap:10px}
.gfoot .gsocial a{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:1px solid rgba(120,170,225,.3);border-radius:7px;color:#9bb0cc;transition:all .16s}
.gfoot .gsocial a[aria-label="YouTube"]{color:#ff0000;border-color:rgba(255,0,0,.45)}
.gfoot .gsocial a[aria-label="LinkedIn"]{color:#0a66c2;border-color:rgba(10,102,194,.45)}
.gfoot .gsocial a:hover{filter:brightness(1.18);background:rgba(255,255,255,.06)}
.gfoot .gsocial svg{width:16px;height:16px;fill:currentColor}
.gfoot .gbottom{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.12);
  padding-top:9px;margin-top:8px;display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;font-size:.74rem;color:#8aa0bd}
.gfoot .gbottom a{color:inherit;text-decoration:none}
.gfoot .gbottom a:hover{color:#5fd0ff}
@media(max-width:860px){
  .gfoot .gcols{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px}
  .gfoot .gtagline,.gfoot .gacad{margin-inline:auto}
  .gfoot .gacad{text-align:left}
  .gfoot .gsocial{justify-content:center}
  .gfoot .gcompany ul{text-align:left}
  .gfoot .gbottom{justify-content:center;text-align:center}
}

/* ---------- misc ---------- */
.tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.emptynote{padding:28px;text-align:center;color:var(--muted);background:#fff;border:1px dashed var(--line);border-radius:var(--r-lg)}
@media print{.hdr,.ft,.ctaband,.tbl-tools{display:none}}

/* ---------- reduced motion ----------
   The site lifts tiles on hover, slides dropdowns and animates the hero. Anyone
   who has asked their OS for less movement gets the same layout without it.
   Durations go to near-zero rather than 0 so transitionend still fires and any
   handler waiting on it is not stranded. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .ss-tile:hover,.ss-tile:focus{transform:none}
}