/* Lumivue Display Systems - holographic / rail / transparent showcase site */
:root{
  --navy:#0b2545; --navy-2:#123761; --steel:#41627c; --accent:#0d8ba6;
  --accent-d:#0a6f86; --bg:#f6f8fb; --card:#fff; --text:#1c2b3a;
  --muted:#5f7285; --line:#dce5ed; --soft:#eaf1f7; --ok:#167a68;
  --shadow:0 2px 14px rgba(16,42,70,.07); --radius:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--navy-2);text-decoration:none}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{line-height:1.25;color:var(--navy);letter-spacing:-.01em;margin:0 0 .6em}
h1{font-size:2.25rem} h2{font-size:1.55rem;margin-top:2.1rem} h3{font-size:1.16rem}
p{margin:0 0 1.05rem}
ul,ol{margin:0 0 1.2rem;padding-left:1.3rem} li{margin:.35rem 0}
strong{color:var(--navy)}
.wrap{width:min(1180px,92vw);margin:0 auto}
.section{padding:56px 0}
.section.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;font-weight:700;color:var(--accent);margin-bottom:.7rem}
.lead{font-size:1.12rem;color:var(--muted);max-width:820px}

/* header */
.topbar{background:var(--navy);color:#cddced;font-size:.82rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:34px;gap:1rem}
.topbar a{color:#cddced}
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 8px rgba(10,35,65,.05)}
.nav{display:flex;align-items:center;gap:1.4rem;min-height:70px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.32rem;color:var(--navy);letter-spacing:-.02em;white-space:nowrap}
.brand-mark{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,var(--accent),#4bc6d8);display:grid;place-items:center;color:#fff;font-size:1rem;font-weight:900}
.brand small{display:block;font-size:.6rem;font-weight:600;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;line-height:1}
.nav-links{display:flex;align-items:center;gap:.15rem;margin-left:auto;list-style:none;padding:0;margin:0}
.nav-links>li{position:relative}
.nav-links>li>a{display:block;padding:.5rem .62rem;font-weight:600;font-size:.88rem;color:var(--text);border-radius:6px}
.nav-links>li>a:hover{background:var(--soft);color:var(--navy-2)}
.dropdown{display:none;position:absolute;top:100%;left:0;min-width:720px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 14px 40px rgba(11,37,69,.15);padding:1rem;grid-template-columns:repeat(4,1fr);gap:1rem}
.nav-links>li:hover .dropdown{display:grid}
.dropdown h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin:0 0 .5rem}
.dropdown a{display:block;padding:.28rem .3rem;font-size:.86rem;color:var(--muted);border-radius:4px}
.dropdown a:hover{background:var(--soft);color:var(--navy)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.72rem 1.35rem;border-radius:6px;font-weight:700;font-size:.92rem;border:1px solid transparent;cursor:pointer;transition:.18s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-d);color:#fff}
.btn-outline{border-color:var(--line);background:#fff;color:var(--navy)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:.5rem 1rem;font-size:.85rem}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:6px;padding:.4rem .6rem;font-size:1.1rem;color:var(--navy);cursor:pointer}

/* hero */
.hero{background:linear-gradient(120deg,#0b2545 0%,#123761 62%,#1a4a78 100%);color:#fff;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.hero .wrap{position:relative;z-index:1;padding:76px 0 72px}
.hero h1{color:#fff;font-size:2.9rem;max-width:820px;line-height:1.15}
.hero .lead{color:#c9dbea;font-size:1.16rem}
.hero .eyebrow{color:#ffb08e}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.7rem}
.hero .btn-outline{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.hero .btn-outline:hover{border-color:#fff;color:#fff}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.13);margin-top:3.2rem;border-radius:8px;overflow:hidden}
.hero-stats div{background:rgba(11,37,69,.55);padding:1.15rem;text-align:center}
.hero-stats b{display:block;font-size:1.35rem;color:#fff}
.hero-stats span{font-size:.78rem;color:#b9cfe2;letter-spacing:.03em}

/* cards / grids */
.grid{display:grid;gap:1.15rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow);transition:.2s}
.card:hover{transform:translateY(-3px);border-color:#b9d0e3;box-shadow:0 8px 26px rgba(11,37,69,.11)}
.card h3{font-size:1.05rem;margin-bottom:.45rem}
.card h3 a{color:var(--navy)}
.card p{font-size:.9rem;color:var(--muted);margin:0}
.cat-card .ico{width:42px;height:42px;border-radius:9px;background:var(--soft);display:grid;place-items:center;color:var(--navy-2);font-weight:800;font-size:1.1rem;margin-bottom:.9rem}
.product-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
.product-card .thumb{background:#fff;border-bottom:1px solid var(--line);aspect-ratio:4/3;display:grid;place-items:center;padding:1rem}
.product-card .thumb img{max-height:100%;width:auto;object-fit:contain}
.product-card .body{padding:1.05rem 1.2rem 1.25rem}
.product-card h3{font-size:.98rem;line-height:1.35}
.product-card .meta{font-size:.78rem;color:var(--muted);margin:.3rem 0 .8rem}
.product-card .price-line{border-top:1px solid var(--line);padding-top:.7rem;font-size:.82rem;color:var(--navy-2);font-weight:600;display:flex;justify-content:space-between;align-items:center}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.8rem;flex-wrap:wrap}
.section-head h2{margin:0}
.section-head p{margin:.35rem 0 0;color:var(--muted);font-size:.95rem}
.text-link{font-weight:700;font-size:.9rem}

/* breadcrumbs + article */
.breadcrumb{font-size:.82rem;color:var(--muted);padding:1.1rem 0;border-bottom:1px solid var(--line);margin-bottom:2rem}
.breadcrumb a{color:var(--muted)} .breadcrumb a:hover{color:var(--accent)}
.breadcrumb span{margin:0 .4rem;color:#a9bccb}
.page-head{padding:34px 0 8px}
.page-head h1{font-size:2.3rem}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:2rem;align-items:start;padding:26px 0 60px}
/* v14: the main column must fill its grid track. The old 68ch cap left a
   ~260px dead strip between the article and the sticky sidebar on desktop. */
.article{max-width:none}
.article h2{border-bottom:1px solid var(--line);padding-bottom:.45rem}
.side{position:sticky;top:95px}
.side-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;margin-bottom:1.1rem}
.side-box h3{font-size:.98rem;margin-bottom:.7rem}
.side-box ul{list-style:none;padding:0;margin:0;font-size:.88rem}
.side-box li{padding:.32rem 0;border-bottom:1px dashed var(--line)}
.side-box li:last-child{border:0}
.cta-box{background:var(--navy);color:#fff;border:0}
.cta-box h3{color:#fff}
.cta-box p{color:#c9dbea;font-size:.87rem}
.cta-box .btn{width:100%}

/* tables */
.table-wrap{overflow-x:auto;margin:1.2rem 0 1.8rem;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:.72rem 1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--soft);color:var(--navy);font-weight:700;width:34%}
tr:last-child td{border-bottom:0}

/* Grouped specification table (product pages) and family matrix (category
   pages). Group headings stay quiet so the values remain the loudest thing. */
.spec-table th{width:32%}
.spec-table .spec-group th{width:auto;background:#e7eef4;color:var(--navy);
  font-size:.67rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  padding:.4rem .75rem;border-bottom:1px solid var(--line)}
.spec-table .spec-group + tr th,.spec-table .spec-group + tr td{border-top:0}
.spec-table.matrix{min-width:640px}
.spec-table.matrix th{width:auto}
.spec-table.matrix thead th{font-size:.7rem;text-transform:uppercase;
  letter-spacing:.06em;padding:.5rem .7rem}
.spec-table.matrix td{font-size:.82rem;padding:.5rem .7rem}
.spec-table.matrix td.mm{white-space:nowrap}
.spec-table.matrix td.mm a{font-weight:700;color:var(--navy)}
.spec-table.matrix tbody:first-of-type .spec-group th{border-top:0}

/* feature list */
.check-list{list-style:none;padding:0;margin:1rem 0 1.6rem}
.check-list li{position:relative;padding-left:1.6rem;margin:.55rem 0}
.check-list li:before{content:"";position:absolute;left:0;top:.55em;width:.62rem;height:.62rem;border-radius:50%;background:var(--accent)}
.note{background:var(--soft);border-left:4px solid var(--navy-2);padding:1rem 1.2rem;border-radius:0 8px 8px 0;margin:1.4rem 0;font-size:.93rem;color:var(--muted)}

/* product detail */
.pd{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2rem;align-items:start;margin:1.6rem 0 2.4rem}
.pd-img{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;aspect-ratio:4/3;min-height:0;overflow:hidden}
/* An absolutely positioned image resolves height:100% against the frame, so
   an 800x800 product shot is letterboxed intact instead of overflowing and
   losing the base of the cabinet. A grid item could not resolve that height. */
.pd-img img{position:absolute;inset:0;width:100%;height:100%;padding:1.4rem;object-fit:contain;max-height:none}
.pd-gallery{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.8rem}
.pd-thumb{padding:0;border:1px solid var(--line);border-radius:7px;background:#fff;cursor:pointer;line-height:0;transition:border-color .18s,box-shadow .18s,transform .18s}
.pd-thumb img{width:76px;height:76px;object-fit:contain;background:#fff;padding:.3rem;border:0;border-radius:6px;display:block}
.pd-thumb:hover{border-color:var(--accent);transform:translateY(-1px)}
.pd-thumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pd-thumb.is-active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(13,139,166,.22)}
.pd-summary h1{font-size:2rem}
.tag{display:inline-block;background:var(--soft);color:var(--navy-2);border-radius:20px;padding:.2rem .7rem;font-size:.75rem;font-weight:700;margin:0 .35rem .5rem 0}

/* faq */
.faq-item{border:1px solid var(--line);border-radius:8px;background:#fff;margin-bottom:.7rem;padding:1rem 1.2rem}
.faq-item h3{font-size:1rem;margin:0 0 .45rem}
.faq-item p{margin:0;font-size:.92rem;color:var(--muted)}

/* form */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
label{display:block;font-size:.85rem;font-weight:700;margin-bottom:.35rem;color:var(--navy)}
input,select,textarea{width:100%;padding:.7rem .85rem;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:.92rem;background:#fff;color:var(--text)}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid #b9d0e3;border-color:var(--navy-2)}
.full{grid-column:1/-1}

/* footer */
.site-footer{background:#081d34;color:#b8cadd;padding:52px 0 22px;margin-top:20px}
.site-footer .grid-4{gap:2rem}
.site-footer h4{color:#fff;font-size:.92rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.9rem}
.site-footer ul{list-style:none;padding:0;margin:0;font-size:.88rem}
.site-footer li{margin:.42rem 0}
.site-footer a{color:#b8cadd} .site-footer a:hover{color:#ffb08e}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2.6rem;padding-top:1.2rem;font-size:.8rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

@media(max-width:1000px){
  .article-layout{grid-template-columns:1fr}.side{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
  .grid-4{grid-template-columns:repeat(2,1fr)}.hero-stats{grid-template-columns:repeat(2,1fr)}
  .dropdown{min-width:560px;grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .nav-toggle{display:block;margin-left:auto}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:.6rem 1rem 1.2rem;box-shadow:0 12px 24px rgba(11,37,69,.12)}
  .nav-links.open{display:flex}
  .dropdown{position:static;display:none;min-width:0;grid-template-columns:1fr;box-shadow:none;border:0;padding:.2rem 0 .6rem}
  .nav-links>li:hover .dropdown{display:block}
  .nav .btn-primary{display:none}
  .grid-2,.grid-3,.grid-4,.pd,.form-grid{grid-template-columns:1fr}
  .hero .wrap{padding:52px 0}.hero h1{font-size:2.05rem}
  .section{padding:38px 0}h1{font-size:1.8rem}.page-head h1{font-size:1.85rem}
  .side{grid-template-columns:1fr}
  .topbar .wrap{flex-wrap:wrap;padding:.35rem 0}
}

/* ============ v5: product-first merchandising ============ */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:2.4rem;align-items:center}
.hero-products{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem}
.hero-prod{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:9px;padding:.65rem;text-align:center}
.hero-prod .hp-img{background:#fff;border-radius:6px;height:92px;display:grid;place-items:center;padding:.35rem;margin-bottom:.45rem}
.hero-prod img{max-height:84px;object-fit:contain}
.hero-prod b{display:block;font-size:.74rem;color:#fff;letter-spacing:.05em}
.hero-prod span{display:block;font-size:.66rem;color:#b9cfe2;line-height:1.4;margin-top:.15rem}
.hero-trust{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.25rem}
.hero-trust span{font-size:.73rem;color:#c9dbea;border:1px solid rgba(255,255,255,.22);border-radius:20px;padding:.2rem .68rem}

/* v14: the hero banner carries the family carousel — one section, not two. */
.hero-visual-wrap{min-width:0}
.hero-visual{position:relative;overflow:hidden}
.hero-track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform}
.hero-slide{flex:0 0 100%;min-width:100%}
.hs-card{display:block;background:#fff;border-radius:14px;overflow:hidden;color:var(--navy);
  text-decoration:none;box-shadow:0 18px 44px rgba(0,0,0,.32);transition:.2s}
.hs-card:hover{transform:translateY(-2px)}
.hs-media{display:block;background:#fff;aspect-ratio:16/11;overflow:hidden}
.hs-media img{width:100%;height:100%;object-fit:contain;padding:.55rem;display:block}
.hs-body{display:block;padding:.7rem .95rem .85rem;border-top:1px solid var(--line)}
.hs-eyebrow{display:block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:800}
.hs-name{display:block;font-size:1rem;line-height:1.3;margin:.15rem 0 .3rem;color:var(--navy)}
.hs-cta{font-size:.78rem;font-weight:700;color:var(--accent)}
.hero-visual .car-dots{position:static;margin-top:.7rem}
.hero-visual .car-btn{background:rgba(255,255,255,.94);color:var(--navy)}
.hero-visual .car-btn:hover{background:#fff;color:var(--accent)}
.hero-visual .car-dot{background:rgba(255,255,255,.45)}
.hero-visual .car-dot.active{background:#ffb08e}
@media(max-width:760px){
  .hero-visual-wrap{margin-top:1rem}
  /* Compact horizontal card so the banner does not push the grid off-screen. */
  .hs-card{display:flex;align-items:center}
  .hs-media{flex:0 0 44%;aspect-ratio:4/3}
  .hs-body{flex:1;min-width:0;border-top:0;border-left:1px solid var(--line);padding:.55rem .8rem}
  .hs-name{font-size:.9rem}
  .hs-cta{display:none}
  .hero-visual .car-dots{margin-top:.45rem}
}
.chip-rail{display:flex;gap:.5rem;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:.2rem 0 .6rem;scroll-snap-type:x proximity}
.chip-rail::-webkit-scrollbar{height:5px}
.chip-rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
.chip{flex:0 0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;padding:.42rem .85rem;font-size:.82rem;font-weight:600;color:var(--navy-2);white-space:nowrap;scroll-snap-align:start}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.ftabs{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.35rem;margin-bottom:1.1rem;-webkit-overflow-scrolling:touch}
.ftab{flex:0 0 auto;background:#fff;border:1px solid var(--line);border-radius:6px;padding:.45rem .85rem;font-size:.83rem;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.ftab:hover{border-color:var(--navy-2);color:var(--navy-2)}
.ftab.active{background:var(--navy);border-color:var(--navy);color:#fff}
/* v13: context for configured-to-order families + a never-empty filter state. */
.filter-note{background:#f4f7fb;border:1px solid var(--line);border-left:3px solid var(--accent);padding:.8rem 1rem;margin:-.35rem 0 1.1rem;font-size:.85rem;line-height:1.65;color:var(--muted)}
.filter-note strong{color:var(--navy)}
.filter-note a{color:var(--accent);font-weight:600}
.filter-empty{margin:0 0 1.1rem;padding:.9rem 1rem;background:#f4f7fb;border:1px dashed var(--line);font-size:.88rem;color:var(--muted)}
.filter-empty a{color:var(--accent);font-weight:600}
.filter-note[hidden],.filter-empty[hidden]{display:none}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;align-items:stretch}
.pgrid .pcard-extra{display:none}
.pgrid.expanded .pcard-extra{display:flex}
.pcard.filtered-out{display:none!important}
.pcard{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.2s;color:var(--text)}
.pcard:hover{transform:translateY(-3px);border-color:#b9d0e3;box-shadow:0 8px 26px rgba(11,37,69,.12);color:var(--text)}
/* Fixed row heights keep every title and spec line on the same baseline across the grid. */
/* v11: the image is absolutely positioned so its intrinsic ratio can never
   stretch the media box. Previously 600x600 photos made it 282px tall while
   400x300 schematics made it 215px, shifting every text row by 67px. */
.pcard-media{position:relative;background:#fff;border-bottom:1px solid var(--line);aspect-ratio:4/3;display:block;padding:0;flex:0 0 auto;overflow:hidden}
.pcard-media img{position:absolute;inset:0;width:100%;height:100%;padding:.45rem;object-fit:contain;display:block}
.pcard-badge{position:absolute;z-index:2;top:.5rem;left:.5rem;background:var(--navy);color:#fff;font-size:.65rem;font-weight:800;letter-spacing:.06em;border-radius:4px;padding:.2rem .45rem}
.pcard-body{padding:.85rem .9rem .95rem;display:flex;flex-direction:column;flex:1}
.pcard-cat{font-size:.67rem;line-height:1.3;height:1.3em;text-transform:uppercase;letter-spacing:.09em;color:var(--accent);font-weight:700;margin-bottom:.35rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard-body h3{font-size:.89rem;line-height:1.35;height:2.7em;margin:0 0 .6rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pcard-specs{list-style:none;padding:0;margin:0 0 .7rem;font-size:.74rem;flex:0 0 auto}
.pcard-specs li{display:flex;justify-content:space-between;align-items:center;gap:.4rem;height:2.05em;padding:0;border-bottom:1px dashed var(--line);min-width:0}
.pcard-specs li:last-child{border-bottom:0}
.pcard-specs span{color:var(--muted);white-space:nowrap;flex:0 0 auto}
.pcard-specs b{color:var(--navy);font-weight:700;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pcard-more{margin-top:auto;height:1.5em;line-height:1.5em;font-size:.76rem;font-weight:700;color:var(--accent)}
/* Two-column technical library: keeps the left column from ending far above the right one. */
.res-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.res-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:.85rem 1rem;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.2s}
.res-card:hover{transform:translateY(-2px);border-color:#b9d0e3;box-shadow:0 8px 26px rgba(11,37,69,.1)}
.res-card h3{font-size:.88rem;line-height:1.3;height:2.6em;margin:0 0 .35rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.res-card p{font-size:.76rem;line-height:1.5;height:3em;color:var(--muted);margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.article .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.show-all-wrap{text-align:center;margin-top:1.3rem}
.show-all-wrap .btn{min-width:230px}
.pd-qspec{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin:1.3rem 0 1.9rem}
.pd-qspec div{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:.8rem .5rem;text-align:center}
.pd-qspec b{display:block;font-size:1rem;color:var(--navy);line-height:1.35}
.pd-qspec span{font-size:.67rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.spec-note{font-size:.83rem;color:var(--muted);background:var(--soft);border-left:3px solid var(--steel);padding:.7rem 1rem;border-radius:0 6px 6px 0;margin:-.6rem 0 1.7rem}
.pd-cta{background:var(--navy);color:#fff;border-radius:10px;padding:1.25rem 1.5rem;margin:2rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.pd-cta h3{color:#fff;margin:0;font-size:1.12rem}
.pd-cta p{color:#c9dbea;font-size:.85rem;margin:.3rem 0 0}
.pd-cta .btn-outline{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.compare th,.compare td{font-size:.84rem;padding:.55rem .75rem}
.compare thead th{background:var(--navy);color:#fff}
.mobile-cta{display:none}
@media(max-width:1000px){
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .article .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-grid{gap:1.3rem}
}
@media(max-width:760px){
  .hero-grid{grid-template-columns:1fr}
  .hero-products{display:none}
  .hero .wrap{padding:30px 0 26px}
  .hero h1{font-size:1.6rem;line-height:1.2}
  .hero .lead{font-size:.9rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hero-actions{margin-top:.95rem;gap:.5rem}
  .hero-actions .btn{padding:.55rem .9rem;font-size:.82rem}
  .hero-trust{margin-top:.75rem;gap:.28rem}
  .hero-trust span{font-size:.65rem;padding:.15rem .48rem}
  .hero-stats{display:none}
  .section{padding:26px 0}
  .section-head{margin-bottom:.95rem}
  .section-head h2{font-size:1.26rem}
  .section-head p{font-size:.86rem}
  .chip-rail{margin-top:-.3rem}
  .ftabs{margin-bottom:.8rem}
  .pgrid,.article .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .pcard-media{aspect-ratio:1/1}
  .pcard-media img{padding:.35rem}
  .pcard-badge{font-size:.57rem;top:.32rem;left:.32rem;padding:.12rem .32rem}
  .pcard-body{padding:.58rem .6rem .68rem}
  .pcard-cat{font-size:.58rem;margin-bottom:.18rem;height:1.3em;line-height:1.3}
  .pcard-body h3{font-size:.77rem;height:2.7em;margin-bottom:.35rem}
  .pcard-specs{font-size:.65rem;margin-bottom:.4rem}
  .pcard-specs li{height:1.95em;padding:0}
  .pcard-more{font-size:.67rem}
  .res-grid{grid-template-columns:1fr;gap:.6rem}
  .res-card{padding:.7rem .85rem}
  .res-card h3{font-size:.86rem;height:auto}
  .res-card p{font-size:.78rem;height:auto}
  .pd-qspec{grid-template-columns:repeat(2,1fr);gap:.5rem;margin:1rem 0 1.4rem}
  .pd{margin:1rem 0 1.3rem;gap:1rem}
  .pd-img{min-height:205px;padding:.7rem}
  .pd-img img{padding:.7rem;max-height:none;width:100%;height:100%}
  .pd-summary h1{font-size:1.48rem}
  .pd-cta{padding:1rem}
  .mobile-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(11,37,69,.12);padding:.5rem .7rem;gap:.6rem}
  .mobile-cta a{flex:1;text-align:center;border-radius:6px;padding:.6rem .4rem;font-size:.82rem;font-weight:700}
  .mbtn-ghost{border:1px solid var(--line);color:var(--navy)}
  .mbtn-primary{background:var(--accent);color:#fff}
  body{padding-bottom:54px}
  .topbar{display:none}
  .nav{min-height:58px}
  .breadcrumb{margin-bottom:.9rem;padding:.7rem 0}
  .article-layout{padding:10px 0 40px;gap:1rem}
  .article h2{font-size:1.22rem;margin-top:1.7rem}
  .table-wrap{font-size:.85rem}
}
@media(max-width:380px){
  .pcard-body h3{font-size:.72rem}
  .pcard-specs{font-size:.6rem}
  .pcard-cat{font-size:.54rem}
}

/* v5: keep the product grid inside the first mobile viewport */
.products-section{padding-top:16px}
@media(max-width:760px){
  .products-section{padding-top:12px;padding-bottom:18px}
  .hero .wrap{padding:22px 0 20px}
  .hero h1{font-size:1.42rem}
  .hero .lead{-webkit-line-clamp:1;margin-bottom:0}
  .hero-actions{margin-top:.7rem}
  .hero-trust{margin-top:.55rem}
  .hero-trust span{font-size:.61rem;padding:.12rem .42rem}
  .section-head{margin-bottom:.55rem}
  .section-head h2{font-size:1.14rem}
  .section-head p{font-size:.8rem;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;margin-top:.2rem}
  .eyebrow{margin-bottom:.35rem;font-size:.68rem}
  .ftabs{margin-bottom:.55rem}
  .ftab{padding:.35rem .7rem;font-size:.76rem}
  .show-all-wrap{margin-top:.9rem}
  .show-all-wrap .btn{padding:.6rem 1rem;font-size:.84rem;min-width:0}
}
.ftabs,.chip-rail{scrollbar-width:none;-ms-overflow-style:none}
.ftabs::-webkit-scrollbar,.chip-rail::-webkit-scrollbar{display:none}

/* ============ v8: audit-driven accessibility, readability & trust ============ */
/* #e8663d measured 3.28:1 on white. #c14a24 gives 4.92:1 on white and
   4.62:1 on the light-grey section background - both pass WCAG AA. */
:root{--accent:#0d8ba6;--accent-d:#0a6f86}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:var(--navy);
  padding:.7rem 1.1rem;border:2px solid var(--navy);border-radius:0 0 8px 0;font-weight:700}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px}
/* Keyboard users must be able to open the product mega menu. */
.nav-links>li:hover .dropdown,.nav-links>li:focus-within .dropdown{display:grid}

.article-meta{font-size:.82rem;color:var(--muted);margin:-.2rem 0 1.5rem;
  padding-bottom:.8rem;border-bottom:1px solid var(--line)}
/* v14: 68ch cap removed (see .article-layout above). Product pages need the
   full track for spec tables, qspec strips and related-model cards; the
   sidebar now sits immediately next to the content instead of floating away. */

/* Two lines of room for category + spec values: no ellipsis, no half words,
   but still fixed row heights so the grid stays perfectly aligned. */
.pcard-cat{white-space:normal;text-overflow:clip;font-size:.72rem;
  height:2.6em;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pcard-specs li{height:2.9em;align-items:flex-start;padding:.22rem 0}
.pcard-specs b{white-space:normal;text-overflow:clip;line-height:1.3;
  max-height:2.6em;overflow:hidden}
.pcard-more{font-size:.8rem}

/* Consent / honeypot / error states for the server-side quote form */
.consent{display:flex;align-items:flex-start;gap:.55rem;font-size:.86rem;font-weight:400;
  color:var(--muted);margin:1rem 0 0;cursor:pointer}
.consent input{width:auto;flex:0 0 auto;margin-top:.25rem}
.consent a{color:var(--navy-2);text-decoration:underline}
.hp-wrap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{background:#fdecea;border:1px solid #f0b3a8;color:#8a2a12;
  border-radius:6px;padding:.75rem 1rem;margin-top:1rem;font-size:.88rem}
.form-error[hidden]{display:none}
.form-note{font-size:.84rem;color:var(--muted);margin:.9rem 0 0}
.form-note a{text-decoration:underline}

/* Quote / thank-you pages must not be covered by the fixed mobile CTA bar. */
body.page-quote{padding-bottom:0}
body.page-quote .mobile-cta{display:none!important}

@media(max-width:760px){
  /* Remove every line clamp that cut key copy off mid-sentence. */
  .hero .lead{-webkit-line-clamp:unset;display:block;overflow:visible;
    font-size:.92rem;line-height:1.55}
  .section-head p{-webkit-line-clamp:unset;display:block;overflow:visible;
    font-size:.86rem;line-height:1.5}
  .pcard-cat{font-size:.75rem;height:2.6em}
  .pcard-body h3{font-size:.88rem;height:2.7em}
  .pcard-specs{font-size:.75rem}
  .pcard-specs li{height:2.9em}
  .pcard-more{font-size:.78rem}
  .pcard-badge{font-size:.66rem}
  .res-card h3,.res-card p{height:auto;-webkit-line-clamp:unset;overflow:visible}
  /* Unify same-level headings; the engineering block used 1.55rem. */
  #engineering h2,.section-head h2{font-size:1.26rem}
  .site-footer .grid-4{grid-template-columns:repeat(2,1fr);gap:1.4rem}
  .nav-links>li:hover .dropdown,.nav-links>li:focus-within .dropdown{display:block}
}
@media(max-width:380px){
  /* Keep every card label at >=12px instead of 8.6-11.5px. */
  .pcard-body h3{font-size:.85rem}
  .pcard-specs{font-size:.75rem}
  .pcard-cat{font-size:.75rem}
  .pcard-more{font-size:.76rem}
  .hero .lead{font-size:.9rem}
}

/* Category rail needs an affordance; horizontal scrolling was undiscoverable. */
.rail-hint{display:none;font-size:.76rem;color:var(--muted);margin:0 0 .35rem}
@media(max-width:760px){
  .rail-hint{display:block}
  /* Keep one real product photo in the mobile first screen without pushing
     the product grid below the fold: a single 64px strip, not three cards. */
  .hero-products{display:grid;grid-template-columns:1fr;margin-top:.85rem}
  .hero-prod:nth-child(n+2){display:none}
  .hero-prod{display:flex;align-items:center;gap:.8rem;text-align:left;padding:.4rem .6rem}
  .hero-prod .hp-img{height:62px;width:86px;flex:0 0 86px;margin:0;padding:.2rem}
  .hero-prod img{max-height:58px}
  .hero-prod b{font-size:.8rem}
  .hero-prod span{font-size:.72rem;margin-top:.1rem}
}

/* ============ v10: concept A layout / original light palette ============
   A's structure is unchanged: three-part monospace status bar, FIG.01
   instrument frame, four-cell spec strip, filtered product range, square
   corners. Only the palette returns to the pre-v9 look: navy gradient hero,
   white sticky header, light-grey body, white cards, #c14a24 orange accent.
   #c14a24 is 4.92:1 on white (WCAG AA); on navy the accent is #ffb08e.
   All selectors remain scoped to body.home-a: the other 68 pages are
   byte-for-byte identical to v8.                                            */

/* The base stylesheet already is the light theme, so no blanket text
   overrides here - just A's square geometry and monospace labels. */
body.home-a{background:var(--bg);color:var(--text)}
body.home-a .eyebrow{color:var(--accent);font:700 .75rem Consolas,"SFMono-Regular",Menlo,monospace;letter-spacing:.18em}
body.home-a .section.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
body.home-a .text-link{color:var(--accent)}
body.home-a .check-list li:before{background:var(--accent)}
body.home-a .card,body.home-a .res-card,body.home-a .faq-item{background:#fff;border:1px solid var(--line);border-radius:0;box-shadow:none}
body.home-a .card:hover,body.home-a .res-card:hover{border-color:var(--accent);box-shadow:none}
body.home-a .card h3,body.home-a .res-card h3,body.home-a .faq-item h3{color:var(--navy)}
body.home-a .card p,body.home-a .res-card p,body.home-a .faq-item p{color:var(--muted)}
body.home-a .rail-hint{color:var(--muted)}
body.home-a .chip{background:#fff;border:1px solid var(--line);border-radius:0;color:var(--muted)}
body.home-a .chip:hover{border-color:var(--accent);color:var(--accent)}
body.home-a .chip-rail::-webkit-scrollbar-thumb{background:var(--line)}

/* Site chrome: navy status bar / white header / navy footer - the original look. */
body.home-a .topbar{background:var(--navy);border-bottom:1px solid #123761;color:#cddced;
  font:11px/28px Consolas,"SFMono-Regular",Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}
body.home-a .topbar .wrap{min-height:28px}
body.home-a .topbar a{color:#cddced}
body.home-a .ha-bar b{color:#ffb08e;font-weight:600}
body.home-a .site-header{background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);box-shadow:0 1px 8px rgba(10,35,65,.05)}
body.home-a .brand{color:var(--navy);font-size:1.15rem;letter-spacing:.06em}
body.home-a .brand-mark{background:linear-gradient(135deg,var(--accent),#4bc6d8);color:#fff;border-radius:3px}
body.home-a .brand small{color:var(--muted);font:10px Consolas,monospace;letter-spacing:.18em}
body.home-a .nav-links>li>a{color:var(--text)}
body.home-a .nav-links>li>a:hover{background:var(--soft);color:var(--navy-2)}
body.home-a .dropdown{background:#fff;border:1px solid var(--line);box-shadow:0 14px 40px rgba(11,37,69,.15)}
body.home-a .dropdown h4{color:var(--accent)}
body.home-a .dropdown a{color:var(--muted)}
body.home-a .dropdown a:hover{background:var(--soft);color:var(--navy)}
body.home-a .nav-toggle{border-color:var(--line);color:var(--navy)}
body.home-a .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
body.home-a .btn-primary:hover{background:var(--accent-d);border-color:var(--accent-d);color:#fff}
body.home-a .nav .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
body.home-a .nav .btn-primary:hover{background:var(--accent-d);color:#fff}
body.home-a .btn-outline{background:#fff;border-color:var(--line);color:var(--navy)}
body.home-a .btn-outline:hover{border-color:var(--accent);color:var(--accent)}
body.home-a .site-footer{background:#081d34;border-top:0;color:#b8cadd}
body.home-a .site-footer a{color:#b8cadd}
body.home-a .site-footer a:hover{color:#ffb08e}
body.home-a .footer-bottom{border-top-color:rgba(255,255,255,.12)}

/* A-style hero on the original navy gradient. */
.ha-hero{position:relative;overflow:hidden;border-bottom:1px solid #123761;
  background:linear-gradient(120deg,#0b2545 0%,#123761 62%,#1a4a78 100%)}
.ha-hero:before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:40px 40px}
body.home-a .ha-grid{position:relative;z-index:1;width:min(1280px,92vw);
  display:grid;grid-template-columns:1.04fr .96fr;gap:3.4rem;align-items:center;padding:54px 0 52px}
body.home-a .ha-hero{color:#fff}
body.home-a .ha-hero p,body.home-a .ha-hero li,body.home-a .ha-hero strong{color:#c9dbea}
.ha-kicker{font:11px Consolas,"SFMono-Regular",Menlo,monospace;letter-spacing:.2em;
  text-transform:uppercase;color:#ffb08e;margin-bottom:1.1rem}
.ha-kicker b{border:1px solid rgba(255,255,255,.35);padding:.15rem .45rem;margin-right:.7rem;color:#ffd3bf}
body.home-a .ha-hero h1{font-size:3.05rem;line-height:1.09;letter-spacing:-.035em;
  margin:0 0 1.1rem;font-weight:800;color:#fff}
body.home-a .ha-hero h1 span{color:#ffb08e}
body.home-a .ha-sub{color:#c9dbea;font-size:1.02rem;max-width:560px;margin:0 0 1.7rem;line-height:1.65}
.ha-acts{display:flex;gap:.75rem;flex-wrap:wrap}
.ha-b1,.ha-b2{display:inline-flex;align-items:center;padding:.78rem 1.3rem;
  font:700 .78rem Consolas,"SFMono-Regular",Menlo,monospace;letter-spacing:.09em;text-transform:uppercase}
.ha-b1{background:var(--accent);color:#fff}
.ha-b1:hover{background:var(--accent-d);color:#fff}
.ha-b2{border:1px solid rgba(255,255,255,.4);color:#fff}
.ha-b2:hover{border-color:#fff;color:#fff}
.ha-spec{display:grid;grid-template-columns:repeat(4,1fr);margin-top:2.1rem;
  border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2)}
.ha-spec div{padding:.75rem .8rem .75rem 0}
.ha-spec div+div{border-left:1px solid rgba(255,255,255,.2);padding-left:.9rem}
.ha-spec span{display:block;font:10px Consolas,monospace;letter-spacing:.12em;
  color:#b9cfe2;text-transform:uppercase}
.ha-spec b{font:600 .82rem Consolas,monospace;color:#fff}
.ha-stage{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.07);
  position:relative;padding:14px}
.ha-stage:before,.ha-stage:after{content:"";position:absolute;width:11px;height:11px;border:1px solid #ffb08e}
.ha-stage:before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.ha-stage:after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.ha-stage-tag{font:10px Consolas,monospace;letter-spacing:.14em;color:#b9cfe2;
  display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:.5rem}
.ha-stage-img{height:250px;display:grid;place-items:center;background:#fff;margin:12px 0;overflow:hidden}
.ha-stage-img img{width:auto;height:auto;max-width:100%;max-height:225px;
  object-fit:contain;mix-blend-mode:multiply}
.ha-stage-foot{display:flex;justify-content:space-between;font:11px Consolas,monospace;
  color:#c9dbea;border-top:1px solid rgba(255,255,255,.2);padding-top:.55rem}
.ha-stage-foot b{color:#ffb08e}
.ha-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.ha-thumb{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.07);display:flex;align-items:center;gap:.6rem;padding:.5rem}
.ha-thumb:hover{border-color:#ffb08e}
.ha-thumb-img{width:62px;height:62px;flex:0 0 62px;background:#fff;display:grid;place-items:center;overflow:hidden}
.ha-thumb-img img{width:auto;height:auto;max-width:60px;max-height:60px;object-fit:contain}
.ha-thumb b,.ha-thumb span span{display:block}
.ha-thumb b{font:600 .76rem Consolas,monospace;color:#fff}
.ha-thumb span span{font:10px Consolas,monospace;color:#b9cfe2;margin-top:.15rem}

/* A-style product range on the light body: same filter / show-all behaviour. */
body.home-a .ha-prod{padding:34px 0 60px}
.ha-ph{display:flex;justify-content:space-between;align-items:end;
  border-bottom:1px solid var(--line);padding-bottom:.9rem;margin-bottom:.75rem}
.ha-ph .ha-kicker{margin:0}
body.home-a .ha-ph .ha-kicker{color:var(--accent)}
body.home-a .ha-ph h2{font-size:1.5rem;margin:.35rem 0 0;letter-spacing:-.02em}
.ha-ph-link{font:11px Consolas,monospace;letter-spacing:.1em;color:var(--accent);text-transform:uppercase}
body.home-a .ha-prod-intro{color:var(--muted);font-size:.92rem;margin:0 0 1.1rem}
body.home-a .ftab{background:#fff;border:1px solid var(--line);border-radius:0;
  color:var(--muted);font:11px Consolas,monospace;letter-spacing:.04em;text-transform:uppercase}
body.home-a .ftab:hover{border-color:var(--accent);color:var(--accent)}
body.home-a .ftab.active{background:var(--navy);border-color:var(--navy);color:#fff}
body.home-a .filter-note,body.home-a .filter-empty{border-radius:0;font-size:.82rem}
body.home-a .pcard{background:#fff;border:1px solid var(--line);border-radius:0;
  box-shadow:none;color:var(--text)}
body.home-a .pcard:hover{border-color:var(--accent);box-shadow:none;color:var(--text)}
body.home-a .pcard-media{background:#fff;border-bottom:1px solid var(--line)}
body.home-a .pcard-badge{background:var(--navy);color:#fff;border:0;border-radius:0}
body.home-a .pcard-cat{color:var(--accent)}
body.home-a .pcard-body h3{color:var(--navy)}
body.home-a .pcard-specs li{border-bottom-color:var(--line)}
body.home-a .pcard-specs span{color:var(--muted)}
body.home-a .pcard-specs b{color:var(--navy)}
body.home-a .pcard-more{color:var(--accent)}
body.home-a .mobile-cta{background:#fff;border-top:1px solid var(--line)}
body.home-a .mbtn-ghost{border:1px solid var(--line);color:var(--navy)}
body.home-a .mbtn-primary{background:var(--accent);color:#fff}

@media(max-width:760px){
  body.home-a .topbar{display:block;font-size:9px;height:28px;overflow:hidden}
  body.home-a .topbar .wrap{height:28px;min-height:28px;flex-wrap:nowrap;white-space:nowrap}
  body.home-a .ha-bar .wrap span:nth-child(n+2){display:none}
  body.home-a .nav{min-height:52px}
  body.home-a .brand{font-size:1rem}
  body.home-a .brand small{display:none}
  body.home-a .nav-links{background:#fff;border-bottom:1px solid var(--line);box-shadow:none}
  body.home-a .nav-links>li>a{color:var(--text)}
  body.home-a .ha-grid{grid-template-columns:1fr;gap:.85rem;padding:16px 0 16px}
  body.home-a .ha-kicker{margin-bottom:.55rem;font-size:9px}
  body.home-a .ha-hero h1{font-size:1.68rem;margin-bottom:.55rem}
  body.home-a .ha-sub{font-size:.8rem;line-height:1.45;margin-bottom:.75rem}
  body.home-a .ha-b1,body.home-a .ha-b2{padding:.5rem .75rem;font-size:.65rem}
  body.home-a .ha-spec{grid-template-columns:repeat(2,1fr);margin-top:.7rem}
  body.home-a .ha-spec div{padding:.38rem .5rem .38rem 0}
  body.home-a .ha-spec div+div{padding-left:.6rem}
  body.home-a .ha-spec span{font-size:9px}
  body.home-a .ha-spec b{font-size:.75rem}
  body.home-a .ha-spec div:nth-child(3){border-left:0;padding-left:0}
  body.home-a .ha-spec div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.2)}
  body.home-a .ha-stage{padding:9px}
  body.home-a .ha-stage-tag{padding-bottom:.35rem;font-size:9px}
  body.home-a .ha-stage-img{height:100px;margin:6px 0}
  body.home-a .ha-stage-img img{max-height:92px}
  body.home-a .ha-stage-foot{padding-top:.4rem;font-size:9.5px}
  body.home-a .ha-thumbs{display:none}
  body.home-a .ha-prod{padding:14px 0 40px}
  body.home-a .ha-ph{padding-bottom:.6rem;margin-bottom:.55rem}
  body.home-a .ha-ph h2{font-size:1.05rem}
  body.home-a .ha-ph-link{display:none}
  body.home-a .ha-prod-intro{font-size:.76rem;margin-bottom:.6rem}
  body.home-a .ftabs{margin-bottom:.55rem}
  body.home-a .ftab{padding:.35rem .7rem;font-size:.7rem}
  body.home-a .show-all-wrap{margin-top:.9rem}
}

/* ============ v11: product-first category pages ============
   Previously the models sat after 2 intro paragraphs + 3 technical sections
   inside an .article capped at 68ch, so the first product image appeared at
   y=2177px on mobile and the unused right half of the column read as a blank
   block. Now the grid is full-width directly under the H1; copy and sidebar
   follow underneath, with no narrow-column gutter.                         */
.cat-page{padding-top:22px}
.cat-head .eyebrow{margin-bottom:.4rem}
.cat-head h1{font-size:2.25rem;margin:0 0 .55rem}
.cat-head .lead{font-size:1.02rem;line-height:1.6;max-width:78ch;margin:0}
.cat-products{padding:22px 0 30px}
.cat-section-head{display:flex;justify-content:space-between;align-items:end;
  border-bottom:1px solid var(--line);padding-bottom:.55rem;margin-bottom:1rem}
.cat-section-head h2{font-size:1.32rem;margin:0;border:0;padding:0}
.cat-section-head a{font-size:.85rem;font-weight:700;color:var(--accent);white-space:nowrap}
.cat-page .pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
/* v14: .cat-lower only wraps .article-layout, which is already a two-column
   grid. Being a grid itself created a second, empty 290px column on the far
   right of every category page — the large blank area next to the sidebar.
   It is a plain block container now. */
.cat-lower{padding:14px 0 60px}
.cat-copy{min-width:0}
.cat-note{margin:0 0 1.4rem}
.cat-copy h2{border-bottom:1px solid var(--line);padding-bottom:.45rem}
.cat-lower .side{position:sticky;top:95px}
@media(max-width:1000px){
  .cat-page .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cat-lower{grid-template-columns:1fr;gap:1.4rem}
  .cat-lower .side{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
}
@media(max-width:760px){
  .cat-page{padding-top:14px}
  .cat-head h1{font-size:1.5rem;margin-bottom:.4rem}
  .cat-head .lead{font-size:.9rem;line-height:1.55}
  .cat-products{padding:12px 0 18px}
  .cat-section-head{padding-bottom:.45rem;margin-bottom:.65rem}
  .cat-section-head h2{font-size:1.05rem}
  .cat-section-head a{display:none}
  .cat-page .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .cat-lower{padding:6px 0 40px}
  .cat-lower .side{grid-template-columns:1fr}
}

/* ============ v15: homepage Industries + FAQ layout polish ============
   Layout A and the original light palette are untouched. Two problems were
   purely structural: seven text cards in a 3-column grid leave a 2/3-wide
   empty last row, and five identical FAQ boxes sat in a 900px column with a
   dead band on the right. A featured tile + a closing CTA tile fill 3 x 3
   slots; the FAQ becomes a sticky intro rail + full-width numbered accordion.
   All selectors are scoped to body.home-a, so the other 68 pages are
   byte-for-byte unchanged.                                                  */
body.home-a .ha-ind-section{padding:52px 0 58px}
.ha-ind-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;
  border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:1.25rem}
.ha-ind-head .eyebrow{margin-bottom:.45rem}
.ha-ind-head h2{font-size:1.55rem;margin:0;letter-spacing:-.02em}
.ha-ind-head p{color:var(--muted);font-size:.9rem;margin:.5rem 0 0;max-width:62ch}
.ha-ind-all{flex:0 0 auto;font:700 .72rem Consolas,"SFMono-Regular",Menlo,monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--navy);background:#fff;
  border:1px solid var(--line);padding:.6rem .9rem;white-space:nowrap}
.ha-ind-all b{color:var(--accent);margin-left:.55rem;font-size:.9rem}
.ha-ind-all:hover{border-color:var(--accent);color:var(--accent)}
.ha-ind-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.icard{position:relative;display:flex;flex-direction:column;min-height:196px;
  background:#fff;border:1px solid var(--line);border-radius:0;
  padding:1.15rem 1.2rem 1rem;color:var(--text);
  transition:border-color .18s,background .18s}
.icard:hover{border-color:var(--accent);color:var(--text)}
.icard:before{content:"";position:absolute;left:-1px;top:-1px;width:0;height:2px;
  background:var(--accent);transition:width .22s}
.icard:hover:before{width:calc(100% + 2px)}
.icard-no{font:600 10px Consolas,monospace;letter-spacing:.16em;
  color:var(--accent);text-transform:uppercase}
.icard-main{display:block;margin-top:.7rem;flex:1}
.icard h3{font-size:1rem;line-height:1.35;margin:0 0 .45rem;color:var(--navy)}
.icard p{font-size:.85rem;line-height:1.6;color:var(--muted);margin:0}
.icard-go{display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);margin-top:1rem;padding-top:.65rem;
  font:600 10px Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;
  color:var(--navy-2)}
.icard-go b{font-size:1rem;color:var(--accent);transition:transform .18s}
.icard:hover .icard-go b{transform:translateX(4px)}
.icard-feature{grid-column:span 2;overflow:hidden;padding:1.4rem 1.5rem 1.15rem;
  background:linear-gradient(120deg,#0b2545 0%,#123761 62%,#1a4a78 100%);
  border-color:#123761}
.icard-feature:after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:36px 36px}
.icard-feature>*{position:relative;z-index:1}
.icard-feature .icard-no{color:#ffb08e}
.icard-feature h3{color:#fff;font-size:1.4rem;max-width:24ch;margin-bottom:.55rem}
.icard-feature p{color:#c9dbea;font-size:.9rem;max-width:64ch}
.icard-feature .icard-go{border-top-color:rgba(255,255,255,.22);color:#c9dbea}
.icard-feature .icard-go b{color:#ffb08e}
.icard-feature:hover{border-color:#ffb08e}
.icard-cta{background:var(--soft);border-left:2px solid var(--accent)}
.icard-cta .icard-no{color:var(--navy-2)}

body.home-a .ha-faq-section{padding:56px 0}
.ha-faq-wrap{display:grid;grid-template-columns:300px minmax(0,1fr);gap:2.6rem;align-items:start}
.ha-faq-side{position:sticky;top:95px}
.ha-faq-side .eyebrow{margin-bottom:.55rem}
.ha-faq-side h2{font-size:1.55rem;margin:0 0 .8rem;letter-spacing:-.02em}
.ha-faq-side p{font-size:.9rem;color:var(--muted);margin:0 0 1.3rem;line-height:1.65}
.ha-faq-cta{display:inline-flex;align-items:center;gap:1.6rem;padding:.7rem 1rem;
  background:var(--navy);color:#fff;font:700 .72rem Consolas,monospace;
  letter-spacing:.12em;text-transform:uppercase}
.ha-faq-cta b{color:#ffb08e;font-size:1rem}
.ha-faq-cta:hover{background:var(--accent);color:#fff}
.ha-faq-all{display:block;margin-top:.9rem;font-size:.82rem;font-weight:700;color:var(--accent)}
.ha-faq-stamp{margin-top:1.6rem;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:.7rem 0;display:grid;gap:.15rem}
.ha-faq-stamp span{font:10px Consolas,monospace;letter-spacing:.12em;color:var(--muted)}
.ha-faq-stamp b{font:600 11px Consolas,monospace;letter-spacing:.1em;color:var(--navy)}
.ha-faq-list{background:#fff;border:1px solid var(--line)}
.fitem{border-bottom:1px solid var(--line)}
.fitem:last-child{border-bottom:0}
.fitem summary{list-style:none;display:grid;grid-template-columns:34px minmax(0,1fr) 20px;
  gap:.8rem;align-items:center;padding:1rem 1.25rem;cursor:pointer;transition:background .18s}
.fitem summary::-webkit-details-marker{display:none}
.fitem summary:hover{background:var(--soft)}
.fno{font:600 11px Consolas,monospace;letter-spacing:.08em;color:var(--accent)}
.fq{font-size:.98rem;font-weight:700;color:var(--navy);line-height:1.4}
.fmark{position:relative;width:14px;height:14px;justify-self:end}
.fmark:before,.fmark:after{content:"";position:absolute;background:var(--navy-2);
  transition:transform .2s}
.fmark:before{left:0;top:6px;width:14px;height:2px}
.fmark:after{left:6px;top:0;width:2px;height:14px}
.fitem[open] .fmark:after{transform:rotate(90deg)}
.fitem[open] summary{background:#fff}
.fitem[open] .fq{color:var(--accent)}
.fitem[open]{box-shadow:inset 3px 0 0 var(--accent)}
.fans{padding:0 1.25rem 1.15rem 4.05rem}
.fans p{margin:0;font-size:.9rem;line-height:1.7;color:var(--muted);max-width:76ch}

@media(max-width:1000px){
  .ha-ind-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .icard-feature,.icard-cta{grid-column:span 2}
  .ha-faq-wrap{grid-template-columns:1fr;gap:1.4rem}
  .ha-faq-side{position:static}
  .ha-faq-stamp{display:none}
}
@media(max-width:760px){
  body.home-a .ha-ind-section{padding:30px 0 36px}
  .ha-ind-head{flex-direction:column;align-items:flex-start;gap:.8rem;
    padding-bottom:.8rem;margin-bottom:.9rem}
  .ha-ind-head h2{font-size:1.26rem}
  .ha-ind-head p{font-size:.82rem}
  .ha-ind-all{padding:.5rem .75rem}
  .ha-ind-grid{grid-template-columns:1fr;gap:10px}
  .icard-feature,.icard-cta{grid-column:span 1}
  .icard{min-height:0;padding:1rem}
  .icard-feature{padding:1.1rem}
  .icard-feature h3{font-size:1.15rem}
  .icard-go{margin-top:.8rem}
  body.home-a .ha-faq-section{padding:32px 0}
  .ha-faq-side h2{font-size:1.26rem}
  .fitem summary{padding:.85rem .9rem;grid-template-columns:26px minmax(0,1fr) 16px;gap:.55rem}
  .fq{font-size:.88rem}
  .fans{padding:0 .9rem .95rem 3.15rem}
  .fans p{font-size:.84rem}
}

/* ============ v11: owner contact channels (email + WhatsApp + phone + address) ============ */
/* Top status bar: five aligned items instead of a run of "|" characters. */
.topbar .tb-links{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.95rem}
.topbar .tb-links>*{position:relative;white-space:nowrap}
.topbar .tb-links>*+*:before{content:"";position:absolute;left:-.49rem;top:50%;
  transform:translateY(-50%);height:11px;border-left:1px solid rgba(255,255,255,.28)}
.topbar .tb-lang{opacity:.72}
.topbar .tb-wa{font-weight:700;color:#ffb08e}
.topbar .tb-wa:hover{color:#fff}

/* Footer: labelled rows keep long values from colliding with the label. */
.site-footer .contact-mini{list-style:none;padding:0;margin:1.05rem 0 0;font-size:.85rem}
/* Stacked label-over-value rows: a fixed label column broke long emails and
   phone numbers on a 390px screen, so the value gets the full column width. */
.site-footer .contact-mini li{display:block;padding:.42rem 0;margin:0;
  border-bottom:1px solid rgba(255,255,255,.11)}
.site-footer .contact-mini li:last-child{border-bottom:0}
.site-footer .contact-mini li>span{display:block;color:#8fa9c2;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:.08rem}
.site-footer .contact-mini li>a,.site-footer .contact-mini li>b{display:block;
  font-weight:600;font-size:.85rem;line-height:1.5;overflow-wrap:anywhere}
.site-footer .contact-mini b{color:#e4eef7;font-weight:600}
.site-footer .contact-mini-more{font-size:.78rem;margin:.65rem 0 0;color:#8fa9c2}
.site-footer .contact-mini-more a:hover{color:#ffb08e}

/* Floating WhatsApp button: the quick-contact touchpoint that replaces the
   footer contact block. Sits clear of the mobile CTA bar on small screens. */
.wa-float{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;z-index:70;
  box-shadow:0 6px 20px rgba(0,0,0,.28);transition:transform .15s ease,box-shadow .15s ease}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.32)}
.wa-float .ci{width:30px;height:30px}
.wa-float:focus-visible{outline:3px solid #12855a;outline-offset:2px}
@media(max-width:760px){
  .wa-float{right:12px;bottom:78px;width:52px;height:52px}
  .wa-float .ci{width:27px;height:27px}
}

/* Contact page: three equal channel cards, the address spans the next row. */
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.5rem 0 2.1rem}
.contact-card{position:relative;display:flex;align-items:flex-start;gap:.9rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.15rem 1.2rem;box-shadow:var(--shadow);color:var(--text);min-width:0}
a.contact-card{transition:.2s}
a.contact-card:hover{transform:translateY(-2px);border-color:var(--accent);
  box-shadow:0 8px 24px rgba(11,37,69,.1);color:var(--text)}
.contact-card-wide{grid-column:1/-1}
.cc-ico{flex:0 0 40px;height:40px;border-radius:10px;background:var(--soft);
  color:var(--accent);display:grid;place-items:center}
.cc-ico .ci{width:21px;height:21px}
.cc-body{display:block;min-width:0;flex:1}
.cc-label{display:block;font-size:.73rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);font-weight:700;margin-bottom:.2rem}
.cc-val{display:block;font-size:1.03rem;line-height:1.5;font-weight:700;
  color:var(--navy);overflow-wrap:anywhere}
.cc-addr{font-style:normal;font-size:.96rem;font-weight:600;line-height:1.65}
.cc-note{display:block;font-size:.84rem;color:var(--muted);margin-top:.35rem;line-height:1.55}
.cc-arrow{position:absolute;right:1rem;top:1.15rem;color:var(--accent);font-size:1.15rem}
.addr-local{display:block;font-size:.85rem;color:var(--muted);line-height:1.75;
  margin-top:.35rem;font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif}

/* Sidebar summary on contact / quote / about / support pages. */
.contact-side ul{list-style:none;padding:0;margin:0;font-size:.85rem}
.contact-side li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:.4rem;
  padding:.42rem 0;margin:0;border-bottom:1px dashed var(--line)}
.contact-side li:last-child{border-bottom:0}
.contact-side li>span{color:var(--muted);font-size:.78rem}
.contact-side li a,.contact-side li b{font-size:.85rem;overflow-wrap:anywhere}
.contact-side .text-link{display:inline-block;margin-top:.85rem;font-size:.82rem}

@media(max-width:760px){
  .contact-grid{grid-template-columns:1fr;gap:.8rem;margin:1.15rem 0 1.6rem}
  .contact-card-wide{grid-column:auto}
  .contact-card{padding:1rem}
  .cc-arrow{right:.9rem;top:1rem}
  .cc-val{font-size:.98rem}
  /* The four cards already carry every channel, so the sidebar copy is hidden. */
  body.page-contact .contact-side{display:none}
}

/* ============ v13: rotating family carousel + sub-classification ============ */
.fam-carousel,.sub-carousel{position:relative;margin:1.3rem 0 1rem;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.fam-track,.sub-track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1);will-change:transform}
.fam-slide,.sub-slide{flex:0 0 100%;min-width:100%;display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:1.2rem;padding:1.7rem}
.fam-media,.sub-media{background:var(--soft);border-radius:12px;padding:1rem;display:grid;place-items:center}
.fam-media img,.sub-media img{width:100%;height:auto;max-height:300px;object-fit:contain;border-radius:8px}
.fam-info .eyebrow,.sub-info .eyebrow{margin-bottom:.5rem}
.fam-info h3,.sub-info h3{font-size:1.5rem;margin:0 0 .5rem}
.fam-info p,.sub-info p{color:var(--muted);font-size:.96rem;margin:0 0 1rem}
.fam-thumbs{display:flex;gap:.7rem;margin-top:1.2rem;flex-wrap:wrap}
.fam-thumb{flex:1 1 0;min-width:0;background:var(--soft);border:1px solid var(--line);border-radius:10px;
  padding:.5rem .4rem;text-align:center;text-decoration:none;color:var(--text);transition:.18s}
.fam-thumb:hover{border-color:var(--accent);transform:translateY(-2px)}
.fam-thumb .ft-img{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:6px;background:#fff}
.fam-thumb .ft-img img{width:100%;height:100%;object-fit:contain}
.fam-thumb .ft-code{display:block;font-weight:800;color:var(--navy);font-size:.82rem;margin-top:.35rem}
.fam-thumb .ft-name{display:block;font-size:.66rem;color:var(--muted);line-height:1.25;margin-top:.1rem}
.sub-meta{margin-top:.7rem;font-size:.8rem;color:var(--muted)}
.sub-note{background:#f4f7fb;border:1px solid var(--line);border-left:3px solid var(--accent);
  padding:.8rem 1rem;margin:.2rem 0 1.1rem;font-size:.85rem;line-height:1.65;color:var(--muted)}
.sub-note strong{color:var(--navy)}
.sub-note[hidden]{display:none}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:42px;height:42px;border-radius:50%;
  border:0;background:var(--navy);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(11,37,69,.3);opacity:.92;transition:.15s;padding:0}
.car-btn:hover{background:var(--accent);opacity:1}
.car-prev{left:.6rem}
.car-next{right:.6rem}
.car-dots{position:absolute;left:0;right:0;bottom:.7rem;display:flex;justify-content:center;gap:.5rem;z-index:6}
.car-dot{width:10px;height:10px;border-radius:50%;border:0;background:rgba(11,37,69,.25);cursor:pointer;padding:0;transition:.15s}
.car-dot.active{background:var(--accent);width:22px;border-radius:6px}
.stabs{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.35rem;margin:.2rem 0 1.1rem;-webkit-overflow-scrolling:touch}
.stab{flex:0 0 auto;background:#fff;border:1px solid var(--line);border-radius:6px;padding:.45rem .95rem;
  font-size:.83rem;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;transition:.15s}
.stab:hover{border-color:var(--navy-2);color:var(--navy-2)}
.stab.active{background:var(--accent);border-color:var(--accent);color:#fff}
@media(max-width:760px){
  .fam-slide,.sub-slide{grid-template-columns:1fr;padding:1.1rem;gap:.8rem}
  .fam-media,.sub-media{order:-1}
  .fam-media img,.sub-media img{max-height:220px}
  .fam-info h3,.sub-info h3{font-size:1.25rem}
  .car-btn{width:36px;height:36px;font-size:1.2rem}
  .car-prev{left:.3rem}.car-next{right:.3rem}
  .fam-thumbs{margin-top:.8rem}
}

/* The family matrix scrolls sideways on a phone; the hint is only useful there. */
.only-mobile{display:none}
@media(max-width:760px){.only-mobile{display:inline}}

/* --- Lumivue site-specific layout rules (loaded after the shared system) --- */
.hero .wrap{padding:36px 0 34px}
.hero h1{font-size:2.3rem;max-width:760px}
.hero .lead{font-size:1.04rem;margin-bottom:0}
.hero .eyebrow{color:#7fe0f0}
.hero-actions{margin-top:1.2rem}
.hero-trust{margin-top:1rem}
.hero-grid{gap:1.8rem}
.hero-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;align-items:stretch}
.hero-prod{display:block;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:9px;padding:.7rem .5rem;text-align:center}
.hero-prod .hp-img{background:#fff;border-radius:6px;height:132px;display:grid;place-items:center;padding:.4rem;margin-bottom:.5rem}
.hero-prod img{max-height:122px;object-fit:contain}
.hero-prod b{display:block;font-size:.74rem;color:#fff;letter-spacing:.03em;line-height:1.35}
.hero-prod span{display:block;font-size:.66rem;color:#b9cfe2;line-height:1.4;margin-top:.2rem}
.hero-products-note{text-align:center;margin-top:.8rem;font-size:.72rem;color:#b9cfe2;letter-spacing:.04em}

.hn-cat-card .hn-cat-img,.hn-app .hn-app-img{display:block;background:#fff;border:1px solid var(--line);border-radius:8px;height:170px;overflow:hidden;margin-bottom:1rem}
.hn-cat-card .hn-cat-img img,.hn-app .hn-app-img img{width:100%;height:100%;object-fit:contain;padding:.6rem}
.hn-cat-card .text-link,.hn-app .text-link{font-size:.82rem;font-weight:700}
.hn-app-cta{background:var(--navy);border-color:var(--navy);display:flex;flex-direction:column;justify-content:center}
.hn-app-cta h3{color:#fff}
.hn-app-cta p{color:#c9dbea}
.hn-app p{font-size:.86rem;color:var(--muted);margin:0 0 .7rem}
.hn-feat-no{display:block;font-size:.76rem;font-weight:800;letter-spacing:.12em;color:var(--accent);margin-bottom:.65rem}
.hn-feat p{font-size:.88rem;color:var(--muted);margin:0}
.hn-faq-wrap{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);gap:2.4rem;align-items:start}
.hn-faq-side h2{margin-top:0}
.hn-faq-side p{color:var(--muted);font-size:.95rem}
.hn-faq-list{display:flex;flex-direction:column;gap:.55rem}
details.hn-q{background:#fff;border:1px solid var(--line);border-radius:8px;padding:.85rem 1.1rem;box-shadow:var(--shadow)}
details.hn-q[open]{border-color:#b9d0e3}
details.hn-q summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.8rem;font-weight:700;color:var(--navy);font-size:.95rem}
details.hn-q summary::-webkit-details-marker{display:none}
details.hn-q summary:after{content:"+";margin-left:auto;color:var(--accent);font-size:1.25rem;font-weight:400}
details.hn-q[open] summary:after{content:"\2212"}
.fno{font-size:.7rem;font-weight:800;color:var(--accent);letter-spacing:.08em}
details.hn-q p{margin:.75rem 0 .1rem;color:var(--muted);font-size:.9rem;line-height:1.65}
.hn-lead-img{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin:1.4rem 0 2rem;overflow:hidden;max-height:420px;display:grid;place-items:center}
.hn-lead-img img{width:100%;max-height:420px;object-fit:contain}
.cat-products{padding:22px 0 30px}
.show-all-wrap{text-align:center;margin-top:1.4rem}
.pcard-media{background:#fff}
#featured{padding-top:24px}
#featured .section-head{margin-bottom:1.1rem}

/* Fill the last grid row so a catalogue never ends in a wide empty gap. */
.pcard.hn-fill{background:#f4f7fb;border-style:dashed;box-shadow:none}
.pcard.hn-fill:hover{transform:none;border-color:var(--accent)}
.hn-fill .hn-fill-media{position:relative;display:grid;place-items:center;background:var(--soft);border-bottom:1px solid var(--line);aspect-ratio:4/3}
.hn-fill-media span{color:var(--navy-2);font-weight:800;font-size:1.02rem;line-height:1.4;text-align:center;padding:.6rem}
.hn-fill .pcard-body p{font-size:.78rem;line-height:1.5;color:var(--muted);margin:0 0 .6rem}

@media(max-width:1000px){
 .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .hn-faq-wrap{grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);gap:1.4rem}
 .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hero h1{font-size:1.95rem}
 .hero-prod .hp-img{height:105px}
 .hero-prod img{max-height:96px}
}
@media(max-width:760px){
 .hero .wrap{padding:26px 0 28px}
 .hero h1{font-size:1.7rem}
 .hero .lead{font-size:.92rem}
 .hero-grid{grid-template-columns:1fr;gap:1rem}
 .hero-actions{margin-top:.9rem}
 .hero-trust{margin-top:.75rem}
 .hero-products{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
 .hero-prod{padding:.45rem .3rem}
 .hero-prod .hp-img{height:74px;padding:.25rem;margin-bottom:.3rem}
 .hero-prod img{max-height:68px}
 .hero-prod b{font-size:.61rem}
 .hero-prod span{font-size:.56rem}
 .hero-products-note{margin-top:.45rem;font-size:.66rem}
 .pgrid,.article .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
 .pcard-body{padding:.7rem}
 .pcard-body h3{font-size:.8rem}
 .cat-products{padding:12px 0 18px}
 .hn-faq-wrap{grid-template-columns:1fr;gap:1rem}
 .grid-4,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hn-cat-card .hn-cat-img,.hn-app .hn-app-img{height:130px}
 .article-layout{grid-template-columns:1fr;gap:1.2rem;padding:16px 0 40px}
 .side{position:static}
 .pd{grid-template-columns:1fr;gap:1.1rem}
 .pd-qspec{grid-template-columns:repeat(2,1fr)}
 .form-grid{grid-template-columns:1fr}
 .hn-fill-media span{font-size:.85rem}
}
@media(max-width:420px){
 .grid-4,.grid-3{grid-template-columns:1fr}
 .hero-products{gap:.3rem}
}

/* Keep all three product families in the mobile hero and pull the product
   cards above the fold. Overrides the shared template's single-card rule. */
@media(max-width:760px){
 .mobile-cta{display:none}
 .hero .wrap{padding:18px 0 20px}
 .hero h1{font-size:1.45rem;line-height:1.25}
 .hero .lead{font-size:.85rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
 .hero-actions{margin-top:.7rem;gap:.5rem}
 .hero-actions .btn{padding:.55rem .9rem;font-size:.82rem}
 .hero-trust{display:none}
 .hero-grid{gap:.8rem}
 .hero-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;margin-top:0}
 .hero-prod,.hero-prod:nth-child(n+2){display:block;text-align:center;padding:.4rem .25rem;gap:0}
 .hero-prod .hp-img{height:60px;width:auto;flex:none;margin:0 0 .3rem;padding:.2rem}
 .hero-prod img{max-height:56px}
 .hero-prod b{font-size:.6rem;line-height:1.3}
 .hero-prod span{display:none}
 .hero-products-note{margin-top:.4rem;font-size:.62rem}
 #featured{padding-top:14px}
 #featured .section-head{margin-bottom:.6rem}
 #featured .section-head h2{font-size:1.15rem}
 #featured .section-head p{display:none}
 #featured .ftabs{margin-bottom:.7rem}
 /* Show every filter on small screens instead of a hidden horizontal scroll. */
 .ftabs{flex-wrap:wrap;overflow-x:visible}
 .ftab{flex:1 1 calc(50% - .4rem);white-space:normal;text-align:center;line-height:1.25;padding:.45rem .4rem}
}

/* Fixed, evenly distributed columns keep the three-family comparison matrix
   readable; the global th{width:34%} rule would otherwise squeeze the last
   column into a thin strip. No min-width: a wide table makes Chrome expand the
   mobile layout viewport and crops the whole page. */
.table-wrap{max-width:100%;min-width:0}
.article{min-width:0}
table.hn-matrix{table-layout:fixed}
table.hn-matrix th{width:auto;overflow-wrap:break-word;hyphens:none}
table.hn-matrix thead th{width:26%}
table.hn-matrix thead th:first-child{width:22%}
table.hn-matrix tbody th{width:22%}
table.hn-matrix td{overflow-wrap:break-word;hyphens:none}
@media(max-width:760px){
 /* Stack each specification into a labelled block: four cramped columns are
    unreadable at 390px, and a min-width table breaks the mobile viewport. */
 table.hn-matrix thead{display:none}
 table.hn-matrix tbody tr{display:block;border-bottom:1px solid var(--line);padding:.35rem 0}
 table.hn-matrix tbody tr:last-child{border-bottom:0}
 table.hn-matrix tbody th{display:block;width:100%!important;background:var(--soft);border:0;padding:.5rem .75rem}
 table.hn-matrix tbody td{display:block;width:100%!important;border:0;padding:.3rem .75rem;font-size:.8rem}
 table.hn-matrix tbody td::before{content:attr(data-label) ": ";font-weight:700;color:var(--navy)}
}

/* --- Google-facing editorial blocks (v2) --- */
.hn-compare .card{padding:1.05rem 1.1rem}
.hn-compare .card h3{font-size:.98rem;margin:0 0 .55rem}
.hn-compare .card h3 a{color:var(--navy)}
.hn-compare .card p{font-size:.84rem;color:var(--muted);line-height:1.62;margin:0 0 .7rem}
.hn-compare .card .text-link{color:var(--accent);font-size:.82rem}
.article .check-list a{color:var(--accent-d);text-decoration:underline;text-underline-offset:2px}
@media(max-width:760px){
 .hn-compare{grid-template-columns:1fr;gap:.6rem}
 .hn-compare .card{padding:.85rem .9rem}
}
/* Download cards: keep the PDF button on a common baseline. */
.dl-card{display:flex;flex-direction:column}
.dl-card .btn{margin-top:auto;align-self:flex-start}