/* Telematics product pages – common stylesheet (CHICO IP PBX, EPABX, TCX200, intercoms, VPN routers, VoIP gateways, IP-TCX Hybrid IP-PBX, IPAS100 IP Paging System, IPX1000-SE Enterprise IP-PBX Software, FCT, SE-CCS call centre) – includes the shared Products menu and footer credit line */
:root{--bg:#111214;--panel:#191b1e;--line:#2b2e33;--tx:#f6f7f8;--mu:#c4c9cf;--red:#d81e26;--blue:#6db1ff}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
img,svg{max-width:100%;display:block}
img{height:auto} /* keep every photo's aspect ratio when its width shrinks (width/height attributes stay for layout) */
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.w{width:min(1120px,92%);margin:0 auto}
section{padding:72px 0}
h1,h2,h3{line-height:1.15;letter-spacing:-.01em}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem);margin-bottom:12px}
.lead{color:var(--mu);max-width:62ch;margin-bottom:36px}
.ico{width:26px;height:26px;fill:none;stroke:var(--blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* helpers (replace former inline styles) */
.sprite{position:absolute}
.arch .t{font-size:17px}
.cap-field{max-width:260px}
.btn-submit{cursor:pointer;font:inherit;font-weight:700}

/* header */
header{background:#0b0c0d;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.bar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:10px 0}
.logo{background:#fff;border-radius:6px;padding:6px 10px;display:block;flex:none}
.logo img{height:30px;width:auto;max-width:none}
.badge{border-radius:50%;background:#fff;width:46px;height:46px;flex:none}
nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
nav a{text-decoration:none;padding:8px 14px;border-radius:6px;color:var(--mu);font-weight:600;font-size:.95rem}
nav a:hover,nav a[aria-current]{color:#fff;background:#202327}
nav a[aria-current]{box-shadow:inset 0 -2px var(--red)}

.mb{display:none;flex:none;margin-left:auto;background:#202327;border:1px solid var(--line);border-radius:6px;padding:8px;cursor:pointer;line-height:0}
.mb .ico{stroke:#fff}.mb .x{display:none}.mb[aria-expanded=true] .o{display:none}.mb[aria-expanded=true] .x{display:inline}
/* hero */
.hero{position:relative;overflow:hidden;padding:20px 0 64px;background:linear-gradient(180deg,#17181b,#111214)}
.hero>svg{position:absolute;inset:0;width:100%;height:100%;color:var(--blue);opacity:.35}
.hero .w{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:32px;align-items:start}
.hero h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:800}
.hero h1 span{display:block}
.h1a{font-size:1.2em;font-weight:800;color:#5ba3ff;letter-spacing:.04em}
.hero p .pn{font-size:1.15em;color:#fff}
.hero p{color:#e0e3e6;margin:18px 0 26px;max-width:46ch;font-size:1.3rem}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 22px;border-radius:6px;font-weight:700;text-decoration:none;border:1px solid var(--line);background:#202327}
.btn.p{background:var(--red);border-color:var(--red);color:#fff}
.btn:hover{filter:brightness(1.15)}
.stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.stats b{display:block;font-size:1.7rem;line-height:1}
.stats span{color:var(--mu);font-size:.85rem}
.hero .cap{font-size:min(1.3rem,1.8vw);font-weight:500;line-height:1.2;margin:6px 0 22px;width:91.8%;max-width:none;text-align:center;white-space:nowrap;color:var(--tx)}
.cap b{font-size:1.3em;font-weight:800}
.cap span{font-size:.8em;color:#e0e3e6;margin-left:.5em}
.shot{position:relative;width:91.8%}
.shot:before{content:"";position:absolute;inset:8% 4%;background:radial-gradient(closest-side,rgba(74,155,255,.28),transparent);filter:blur(10px)}
.shot img{position:relative;width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
.dash{stroke-dasharray:6 10;animation:flow 3s linear infinite}
@keyframes flow{to{stroke-dashoffset:-64}}
@media(prefers-reduced-motion:reduce){.dash{animation:none}html{scroll-behavior:auto}}

/* summary */
.sum{display:grid;grid-template-columns:1.2fr 1fr;gap:40px}
.sum p+p{margin-top:14px;color:var(--mu)}
.tick{list-style:none;padding:0;display:grid;gap:10px;align-self:center}
.tick li{padding-left:30px;position:relative}
.tick li:before{content:"";position:absolute;left:0;top:.35em;width:16px;height:9px;border-left:3px solid var(--red);border-bottom:3px solid var(--red);transform:rotate(-45deg) scale(.8)}

/* features */
.alt{background:var(--panel);border-block:1px solid var(--line)}
.feat{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.feat div{padding:22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.feat h3{font-size:1.05rem;margin:10px 0 8px}
.feat p{color:var(--mu);font-size:.92rem}

/* specs */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
table{border-collapse:collapse;width:100%;min-width:520px}
th,td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--line)}
thead th{background:#202327}
thead th:last-child{color:var(--blue)}
tbody th{color:var(--mu);font-weight:500}
tr:last-child>*{border-bottom:0}
.note{color:var(--mu);font-size:.85rem;margin-top:12px}

/* use cases */
.use{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.use div{border-left:3px solid var(--red);padding:4px 0 4px 18px}
.use h3{font-size:1.05rem;margin:8px 0 4px}
.use p{color:var(--mu);font-size:.92rem}

/* architecture */
.arch{background:#0d0e10;border:1px solid var(--line);border-radius:10px;padding:14px}
.arch text{fill:#f6f7f8;font:600 13px system-ui,Arial,sans-serif}
.arch .s{fill:#c4c9cf;font-weight:400;font-size:11px}
.arch rect.n{fill:#191b1e;stroke:#3a3f45}
.arch .l{stroke:#4a9bff;stroke-width:1.6;fill:none}

/* brochure */
.dl{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:8px;padding:22px 26px}
.dl .ico{width:40px;height:40px;stroke:var(--red)}
.dl div{flex:1;min-width:220px}.dl h2{font-size:1.3rem;margin:0 0 2px}.dl p{color:var(--mu);font-size:.92rem}
#brochure{padding-top:0}
/* form */
form{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:820px}
label{display:grid;gap:6px;font-weight:600;font-size:.9rem}
input,select,textarea{font:inherit;color:var(--tx);background:#0d0e10;border:1px solid #3a3f45;border-radius:6px;padding:11px 12px;width:100%}
textarea{min-height:110px;resize:vertical}
.full{grid-column:1/-1}
.hp{position:absolute;left:-9999px}
#msg{min-height:1.4em;color:#ff8a8f;font-size:.9rem}

footer{background:#0b0c0d;border-top:1px solid var(--line);padding:36px 0;color:var(--mu);font-size:.92rem}
.fc{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
footer h3{color:var(--tx);font-size:1rem;margin-bottom:6px}
footer a{text-decoration:none;color:#e0e3e6}
footer a:hover{color:#fff}
.cp{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:.82rem}
footer{position:relative}
.dby{position:absolute;right:12px;bottom:6px;margin:0;font-size:.58rem;line-height:1;color:#50565c}
footer .dby a{color:inherit}
footer .dby a:hover{color:#7b828a}

@media(max-width:820px){
 .hero .w,.sum,form{grid-template-columns:1fr}
 .hero .w>div:nth-child(2){order:-1}
 .shot{width:100%}
 .hero .cap{font-size:min(1.3rem,4.2vw);width:100%}
 .bar{flex-wrap:wrap;gap:10px 12px;padding:8px 0}
 .logo{padding:5px 8px}
 .logo img{height:clamp(18px,6.2vw,26px)}
 .badge{width:40px;height:40px}
 .mb{display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0}
 nav{display:none;margin-left:0;width:100%;flex-direction:column;gap:0;border-top:1px solid var(--line);padding-top:6px}
 nav.open{display:flex}
 nav a{padding:12px 10px;border-bottom:1px solid var(--line)}
 nav a:last-child{border-bottom:0}
 section{padding:52px 0}
}

/* ---- EPABX Analog page additions (new class names only; existing rules untouched) ---- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* model cards */
.models{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}
.mcard{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;display:flex;flex-direction:column}
.mcard .pic{height:170px;display:flex;align-items:center;justify-content:center;background:#0d0e10;border-radius:8px;padding:10px;margin-bottom:14px}
.mcard .pic img{width:auto;height:auto;max-height:100%;max-width:100%;object-fit:contain}
.mcard h3{font-size:1.25rem;color:#fff}
.mcard .cfg{color:var(--blue);font-weight:700;font-size:.9rem;margin:2px 0 8px}
.mcard p{color:var(--mu);font-size:.9rem;flex:1;margin-bottom:14px}
.mcard .btn{text-align:center;padding:9px 14px;font-size:.9rem}

/* comparison tables */
table.cmp{min-width:880px}
.cmp thead th{white-space:nowrap}
.cmp thead th:last-child{color:inherit}
.cmp thead th:first-child,.cmp tbody th{position:sticky;left:0;z-index:1}
.cmp thead th:first-child{background:#202327}
.cmp tbody th{background:var(--bg)}
.alt .cmp tbody th{background:var(--panel)}
.cmp td{white-space:nowrap;position:relative}
.cmp .grp th{background:#202327;color:var(--blue);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.yes{color:#5fd38d;font-weight:700}
.no{color:#7b828a}

/* photo gallery */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.gal figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.gal img{width:100%;height:auto}
.gal figcaption{padding:12px 14px;color:var(--mu);font-size:.9rem}

/* multi-brochure download */
.dls{display:flex;flex-wrap:wrap;gap:10px}
.dls .btn{padding:9px 16px;font-size:.92rem}

@media(max-width:820px){
 .mcard .pic{height:150px}
}

/* ---- EPABX Analog page: mobile fixes ---- */
.mcard .pic picture{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.cmp .fx{display:inline}
@media(max-width:820px){
 /* wide tables that scroll sideways: slimmer sticky label column so more model columns show */
 .cmp thead th:first-child,.cmp tbody th{white-space:normal;min-width:96px;max-width:112px;padding:10px 8px;font-size:.88rem;line-height:1.3}
 .cmp td,.cmp thead th{padding:10px 12px}
 /* feature-difference table: fits the screen, no sideways scroll */
 table.cmp.fit{min-width:0;table-layout:fixed}
 .cmp.fit thead th:first-child,.cmp.fit tbody th{position:static;width:28%;max-width:none;min-width:0;padding:10px 4px 10px 8px;font-size:.78rem;line-height:1.25;overflow-wrap:anywhere}
 .cmp.fit thead th,.cmp.fit td{padding:10px 2px;text-align:center;font-size:.85rem}
 .cmp.fit thead th:first-child{text-align:left}
 .cmp.fit .fx{display:none}
 .cmp.fit .grp th{text-align:left}
}

/* ---- TCX200 Modular PBX page additions (new class names only; existing rules untouched) ---- */
/* four pillars */
.tc-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.tc-pillars>div{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:10px;padding:22px}
.tc-pillars .k{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);font-weight:700}
.tc-pillars h3{font-size:1.15rem;margin:.35em 0 .45em}
.tc-pillars p{color:var(--mu);font-size:.92rem}

/* capacity ladder (bar heights set by class, no inline styles) */
.tc-ladder{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;gap:12px;margin:0 0 10px;max-width:760px}
.tc-ladder .step{text-align:center}
.tc-ladder .bar{background:linear-gradient(180deg,var(--blue),rgba(109,177,255,.25));border-radius:8px 8px 0 0;display:flex;align-items:flex-start;justify-content:center;padding-top:6px;font-weight:800;color:#0b0c0d}
.tc-ladder .b1{height:30px}.tc-ladder .b2{height:76px}.tc-ladder .b3{height:98px}.tc-ladder .b4{height:144px}.tc-ladder .b5{height:190px}
.tc-ladder .nm{font-weight:700;margin-top:8px}
.tc-ladder .sb{color:var(--mu);font-size:.85rem}
#sizes .note{margin:0 0 30px;max-width:72ch}

/* key telephone section */
.tc-kts{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.tc-kts p{color:var(--mu);margin-bottom:18px}
.tc-phone{position:relative;justify-self:center;max-width:340px}
.tc-phone:before{content:"";position:absolute;inset:10%;background:radial-gradient(closest-side,rgba(74,155,255,.25),transparent);filter:blur(12px)}
.tc-phone img{position:relative;width:100%;height:auto;filter:drop-shadow(0 16px 26px rgba(0,0,0,.6))}

/* feature accordion */
details.tc-acc{background:var(--panel);border:1px solid var(--line);border-radius:10px;margin:0 0 12px;padding:0 20px}
details.tc-acc summary{cursor:pointer;font-weight:700;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
details.tc-acc summary::-webkit-details-marker{display:none}
details.tc-acc summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--blue)}
details.tc-acc[open] summary::after{content:"–"}
details.tc-acc ul{columns:2;column-gap:36px;padding:0 0 18px 18px;margin:0;color:var(--mu)}
details.tc-acc li{break-inside:avoid;margin:0 0 6px}

/* inside-the-cabinet gallery: equal photo boxes for wide and tall cabinets */
.tc-gal .ph{height:240px;display:flex;align-items:center;justify-content:center;background:#0d0e10;padding:14px}
.tc-gal .ph picture{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.tc-gal .ph img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.tc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:26px}
.tc-cards div{border-left:3px solid var(--blue);padding:4px 0 4px 18px}
.tc-cards h3{font-size:1.05rem;margin-bottom:4px}
.tc-cards p{color:var(--mu);font-size:.92rem}

/* FX-A bridge */
.tc-bridge{border-left:4px solid var(--blue);padding:6px 0 6px 22px;max-width:80ch}
.tc-bridge p{color:var(--mu)}
.tc-bridge a{color:var(--blue)}

@media(max-width:820px){
 .tc-kts{grid-template-columns:1fr;gap:28px}
 .tc-phone{max-width:260px}
 .tc-ladder{gap:6px}
 .tc-ladder .sb{font-size:.72rem;line-height:1.3;min-height:2.6em}
 .tc-ladder .b5{height:160px}.tc-ladder .b4{height:122px}
 details.tc-acc ul{columns:1}
 .tc-gal .ph{height:200px}
}

/* ---- Mobile header fix: keep logo, badge and menu button on one row, button top-right (shared by all pages) ---- */
@media(max-width:820px){
 .bar{display:grid;grid-template-columns:minmax(0,max-content) auto 1fr auto;align-items:center}
 .logo{min-width:0}
 .logo img{width:auto;height:auto;max-width:100%;max-height:clamp(18px,6.2vw,26px)}
 .mb{grid-column:4;margin-left:0;justify-self:end}
 nav{grid-column:1/-1}
}

/* ---- FCT (Fixed Cellular Terminal) page additions (new class names only; existing rules untouched) ---- */
.fc-h1{color:#5ba3ff}
.fc-shot:before{background:radial-gradient(closest-side,rgba(61,220,132,.2),rgba(74,155,255,.16),transparent)}
/* product photo beside a two-column spec table */
.fc-spec{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:28px;align-items:start}
.fc-photo{margin:0;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.fc-photo img{width:100%;height:auto}
.fc-photo figcaption{background:var(--panel);padding:10px 14px;color:var(--mu);font-size:.88rem;border-top:1px solid var(--line)}
table.fc-tab{min-width:0}
.fc-tab th{width:42%}
.alt .fc-tab tbody th{background:transparent}
.fc-note{margin-top:22px;border-left:3px solid var(--blue);padding-left:12px}
.arch .fc-lg{stroke:#3ddc84}
@media(max-width:820px){
 .fc-spec{grid-template-columns:1fr}
 .fc-photo{max-width:420px;justify-self:center}
 .fc-tab th,.fc-tab td{padding:10px 12px;font-size:.92rem}
}

/* ---- EPAX Intercom Lite (TI-LITE-16) page additions (new class names only; existing rules untouched) ---- */
#brochure.il-brochure{padding:56px 0}
.feat.il-feat{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.il-bridge{margin-top:28px;border-left:4px solid var(--blue);padding:6px 0 6px 22px;max-width:80ch}
.il-bridge p{color:var(--mu)}
.il-bridge strong{color:var(--tx)}
.il-bridge a{color:var(--blue)}
@media(max-width:820px){
 #brochure.il-brochure{padding:40px 0}
 .il-bridge{padding-left:16px}
}

/* ---- TI500 Society Intercom page additions (new class names only; existing rules untouched) ---- */
/* six-step capacity ladder */
.tc-ladder.ti-ladder{grid-template-columns:repeat(6,1fr);max-width:860px}
.ti-ladder .t1{height:30px}.ti-ladder .t2{height:50px}.ti-ladder .t3{height:62px}.ti-ladder .t4{height:98px}.ti-ladder .t5{height:134px}.ti-ladder .t6{height:190px}
/* six model cards: three per row on desktop */
.models.ti-models{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
/* product range cards */
.ti-range{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.ti-rcard{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:18px;text-decoration:none;color:inherit;transition:border-color .2s}
a.ti-rcard:hover{border-color:var(--blue)}
.ti-rcard.here{border-color:var(--red)}
.ti-rcard .pic{height:150px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;padding:10px;margin-bottom:14px}
.ti-rcard .pic picture{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.ti-rcard .pic img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.ti-rcard .k{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);font-weight:700}
.ti-rcard h3{font-size:1.15rem;margin:.3em 0 .4em}
.ti-rcard p{color:var(--mu);font-size:.92rem;flex:1;margin-bottom:12px}
.ti-rcard .go{font-weight:700;color:var(--blue);font-size:.92rem}
.ti-rcard.here .go{color:var(--mu)}
#brochure.ti-brochure{padding:56px 0}
@media(max-width:820px){
 .tc-ladder.ti-ladder{gap:5px}
 .ti-ladder .sb{font-size:.66rem}
 .ti-ladder .t6{height:160px}.ti-ladder .t5{height:114px}.ti-ladder .t4{height:84px}
 #brochure.ti-brochure{padding:40px 0}
}

/* ---- TI500E Large Society Intercom page additions (new class names only; existing rules untouched) ---- */
/* horizontal capacity scale: TI-LITE-16 vs TI500 vs TI500E */
.te-scale{display:grid;gap:12px;max-width:860px;margin:0 0 40px}
.te-scale .row{display:grid;grid-template-columns:170px 1fr;align-items:center;gap:14px}
.te-scale .nm{font-weight:700;font-size:.95rem;color:var(--mu)}
.te-scale .hl .nm{color:var(--tx)}
.te-scale .trk{background:#0d0e10;border:1px solid var(--line);border-radius:8px;height:40px;overflow:hidden}
.te-scale .bar{height:100%;display:flex;align-items:center;justify-content:flex-end;padding:0 12px;font-weight:800;color:#0b0c0d;background:linear-gradient(90deg,rgba(109,177,255,.35),var(--blue));border-radius:0 8px 8px 0;min-width:52px}
.te-scale .s1{width:1.6%}.te-scale .s2{width:25.2%}.te-scale .s3{width:100%;background:linear-gradient(90deg,rgba(216,30,38,.45),var(--red));color:#fff}
/* three numbered steps */
.te-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-bottom:36px}
.te-steps>div{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:22px 22px 22px 70px}
.te-steps .n{position:absolute;left:20px;top:20px;width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.te-steps h3{font-size:1.08rem;margin-bottom:6px}
.te-steps p{color:var(--mu);font-size:.92rem}
/* linking diagrams on white */
.te-dia{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.te-dia figure{margin:0;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.te-dia .ph{flex:1;background:#fff;padding:14px;height:320px;display:flex;align-items:center;justify-content:center}
.te-dia .ph picture{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.te-dia .ph img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.te-dia figcaption{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;padding:14px 16px}
.te-dia figcaption b{font-size:1.05rem}
.te-dia figcaption span{grid-column:1;color:var(--mu);font-size:.9rem}
.te-dia figcaption .btn{grid-column:2;grid-row:1/3;padding:9px 16px;font-size:.9rem}
.te-link{color:var(--blue)}
@media(max-width:820px){
 .te-scale .row{grid-template-columns:1fr;gap:4px}
 .te-scale .trk{height:34px}
 .te-dia{grid-template-columns:1fr}
 .te-dia .ph{height:auto;flex:none}
 .te-steps>div{padding:18px 18px 18px 64px}
}

/* ---- TX-101 SoftEther VPN Router page additions (new class names only; existing rules untouched) ---- */
/* system features: intro text beside the tick list */
.tx-sum{align-items:center}
.tx-sum h2+p{margin-top:4px}
.tx-sum p{color:var(--mu)}
/* product photo beside the spec table: photo sits at the top on desktop */
#specs .fc-spec{grid-template-columns:minmax(0,460px) 1fr}
#specs .fc-photo{position:sticky;top:90px}
/* ways-to-connect cards: icon tiles */
#connect .feat .ico{width:30px;height:30px}
@media(max-width:820px){
 #specs .fc-spec{grid-template-columns:1fr}
 #specs .fc-photo{position:static}
 .tx-sum .tick{margin-top:6px}
}

/* ---- SIP to E1/T1/PRI VoIP Gateway (GW-P101/P201/P401) page additions (new class names only; existing rules untouched) ---- */
/* hero: second line under the blue product-type heading */
.hero h1 .gw-sub{font-size:.62em;font-weight:700;color:var(--tx);margin-top:4px;letter-spacing:0}
/* calls-per-model scale: 30 / 60 / 120 */
.gw-scale .g1{width:25%}.gw-scale .g2{width:50%}
.gw-scale .g3{width:100%;background:linear-gradient(90deg,rgba(216,30,38,.45),var(--red));color:#fff}
/* model cards: three across, wide gateway photos */
.models.gw-models{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.gw-models .pic{background:#fff}
/* spec table: three model columns need less width than the EPABX tables */
table.cmp.gw-cmp{min-width:680px}
.gw-cmp td[colspan]{white-space:normal}
/* photo gallery: wide, short gateway photos on white */
.gw-gal .ph{height:200px;background:#fff}
.gw-mnote{display:none}
/* compatible operators */
.gw-ops{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px;align-self:center}
.gw-ops li{padding:10px 18px;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:8px;background:var(--panel);font-weight:700}
@media(max-width:820px){
 .gw-gal .ph{height:160px}
 table.cmp.gw-cmp{min-width:560px}
 .gw-ops li{padding:8px 14px;font-size:.92rem}
 .gw-mnote{display:block}
}

/* ---- FXS Analog VoIP Gateway (GW-S04/S08/S16/S32) page additions (new class names only; existing rules untouched) ---- */
/* phones-per-model scale: 4 / 8 / 16 / 32 (reuses .te-scale) */
.fs-scale .f1{width:12.5%}.fs-scale .f2{width:25%}.fs-scale .f3{width:50%}
.fs-scale .f4{width:100%;background:linear-gradient(90deg,rgba(216,30,38,.45),var(--red));color:#fff}
/* four model cards: four across on wide screens, two on tablets, one on phones */
.models.fs-models{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.fs-models .pic{background:#fff}
/* four-model spec table */
table.cmp.fs-cmp{min-width:780px}
.fs-cmp td[colspan]{white-space:normal}
/* rear-panel close-ups: wide, short photos on white */
.fs-gal{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.fs-gal .ph{height:200px;background:#fff}
/* brochure follows a shaded section, so it needs its own top padding */
#brochure.fs-brochure{padding:56px 0}
@media(max-width:820px){
 .fs-gal{grid-template-columns:1fr}
 .fs-gal .ph{height:150px}
 table.cmp.fs-cmp{min-width:600px}
 #brochure.fs-brochure{padding:40px 0}
}

/* ---- FXO CO Line VoIP Gateway (GW-T04/T08) page additions (new class names only; existing rules untouched) ---- */
/* lines-per-model scale: 4 / 8 (reuses .te-scale) */
.fo-scale .o1{width:50%}
.fo-scale .o2{width:100%;background:linear-gradient(90deg,rgba(216,30,38,.45),var(--red));color:#fff}
/* two model cards side by side, kept to a comfortable width */
.models.fo-models{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:860px}
.fo-models .pic{background:#fff;height:200px}
/* two-model spec table: narrow enough to fit a phone without sideways scrolling */
table.cmp.fo-cmp{min-width:560px}
.fo-cmp td[colspan]{white-space:normal}
/* single rear-panel close-up */
.fo-gal{grid-template-columns:minmax(0,860px)}
.fo-gal .ph{height:220px;background:#fff}
@media(max-width:820px){
 .fo-models .pic{height:160px}
 table.cmp.fo-cmp{min-width:0;table-layout:fixed}
 .fo-cmp thead th:first-child,.fo-cmp tbody th{width:34%;max-width:none;min-width:0}
 .fo-cmp td{white-space:normal}
 .fo-gal .ph{height:auto;padding:10px}
}

/* ---- TX-201 Dual WAN VPN Router page additions (new class names only; existing rules untouched) ---- */
/* two tunnel cards: WireGuard (green) and SoftEther (blue) */
.tx2-tun{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.tx2-tun>div{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:10px;padding:22px 24px}
.tx2-tun .wg{border-top-color:#3ddc84}
.tx2-tun .k{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);font-weight:700}
.tx2-tun .wg .k{color:#3ddc84}
.tx2-tun h3{font-size:1.2rem;margin:.35em 0 .9em}
.tx2-tun .tick{gap:8px;color:var(--mu);font-size:.95rem}
.tx2-tun .wg .tick li:before{border-color:#3ddc84}
.tx2-tun .se .tick li:before{border-color:var(--blue)}
/* highlights: icon tiles, three across on desktop */
#highlights .feat{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
#highlights .feat .ico{width:30px;height:30px}
/* brochure follows a shaded section, so it needs its own top padding */
#brochure.tx2-brochure{padding:56px 0}
@media(max-width:820px){
 .tx2-tun{grid-template-columns:1fr}
 .tx2-tun>div{padding:18px 18px}
 #highlights .feat{grid-template-columns:1fr}
 #brochure.tx2-brochure{padding:40px 0}
}

/* ---- IP-TCX Hybrid IP-PBX page additions (new class names only; existing rules untouched) ---- */
/* hero concept image: blue (analog) and green (IP) glow */
.ipt-shot:before{background:radial-gradient(closest-side,rgba(74,155,255,.22),rgba(61,220,132,.12),transparent)}
/* familiar dialling codes: code tiles */
.ipt-codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.ipt-codes>div{display:flex;align-items:center;gap:14px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.ipt-codes b{flex:none;min-width:76px;text-align:center;font:800 1.15rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--blue);background:#0d0e10;border:1px solid #3a3f45;border-radius:6px;padding:10px 8px}
.ipt-codes span{color:var(--mu);font-size:.92rem;line-height:1.35}
/* analog / IP cards: give the analog side its blue tick marks */
#hybrid .tx2-tun .se .k{color:var(--blue)}
@media(max-width:820px){
 .ipt-codes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .ipt-codes>div{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
 .ipt-codes b{min-width:0;font-size:1.05rem}
}
/* nine feature tiles: three across on desktop */
#features .feat.ipt-feat{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
@media(max-width:820px){#features .feat.ipt-feat{grid-template-columns:1fr}}

/* ---- IPAS100 IP Paging System page additions (new class names only; existing rules untouched) ---- */
/* hero concept image: blue (sources), green (speakers) and red (emergency) glow */
.ipa-shot:before{background:radial-gradient(closest-side,rgba(74,155,255,.22),rgba(61,220,132,.12),transparent)}
/* priority ladder: emergency (red) down to music (muted blue) */
.ipa-prio{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ipa-prio li{position:relative;display:flex;gap:14px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:10px;padding:18px}
.ipa-prio .n{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#0b0c0d;background:var(--blue)}
.ipa-prio h3{font-size:1.08rem;margin:4px 0 6px}
.ipa-prio p{color:var(--mu);font-size:.92rem}
.ipa-prio .p1{border-top-color:var(--red)}.ipa-prio .p1 .n{background:var(--red);color:#fff}.ipa-prio .p1 h3{color:#ff8a8f}
.ipa-prio .p2{border-top-color:#8fc4ff}.ipa-prio .p2 .n{background:#8fc4ff}
.ipa-prio .p3{border-top-color:#6db1ff}
.ipa-prio .p4{border-top-color:#4a6f99}.ipa-prio .p4 .n{background:#4a6f99;color:#fff}
.ipa-prio li:not(:last-child):after{content:"";position:absolute;right:-12px;top:50%;width:10px;height:10px;border-top:2px solid var(--mu);border-right:2px solid var(--mu);transform:translateY(-50%) rotate(45deg);opacity:.6}
#priority .fc-note{max-width:72ch}
@media(max-width:980px){.ipa-prio{grid-template-columns:repeat(2,1fr)}.ipa-prio li:after{display:none}}
@media(max-width:820px){
 .ipa-prio{grid-template-columns:1fr;gap:10px}
 .ipa-prio li{padding:14px 16px}
 .ipa-prio h3{margin-top:2px}
}
/* editions: IPAS100 appliance and TPAS100-SE software edition */
.models.ipa-models{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:900px}
.ipa-models .pic{background:#fff;height:190px}
.ipa-models .pic.ipa-sw{background:#0d0e10;gap:18px}
.ipa-sw .ico{width:96px;height:96px;stroke-width:1.2}
.ipa-sw .ico.lic{width:64px;height:64px;stroke:#3ddc84}
.ipa-tag{align-self:flex-start;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--blue);border:1px solid var(--blue);border-radius:20px;padding:2px 10px;margin-bottom:8px}
.ipa-tag.sw{color:#3ddc84;border-color:#3ddc84}
.ipa-models .cfg{flex:none}
.ipa-models .tick{align-self:stretch;flex:1;gap:8px;margin-bottom:18px;color:var(--mu);font-size:.92rem}
/* two-edition spec table */
.fc-tab.ipa-tab th{width:auto}
.ipa-tab thead th{color:var(--tx)}
.ipa-tab thead th:first-child{color:var(--mu);font-weight:500}
.ipa-tab td[colspan]{color:var(--tx)}
@media(max-width:820px){
 .ipa-models .pic{height:150px}
 .ipa-sw .ico{width:76px;height:76px}.ipa-sw .ico.lic{width:50px;height:50px}
 .fc-tab.ipa-tab th,.fc-tab.ipa-tab td{padding:9px 8px;font-size:.85rem}
}

/* ---- IPX1000-SE Enterprise IP-PBX Software page additions (new class names only; existing rules untouched) ---- */
/* hero concept image: blue (lines) and green (endpoints) glow */
.ipx-shot:before{background:radial-gradient(closest-side,rgba(74,155,255,.24),rgba(61,220,132,.12),transparent)}
/* hero heading: product type on one line */
.ipx-h1 .h1a{font-size:1em;letter-spacing:.02em}
.hero .ipx-h1 .gw-sub{font-size:.55em}
/* six feature codes: three across on desktop */
.ipt-codes.ipx-codes{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px}
/* users-per-server scale: 100 / 250 / 500 / 1,000 (reuses .te-scale) */
.ipx-scale .x1{width:10%}.ipx-scale .x2{width:25%}.ipx-scale .x3{width:50%}
.ipx-scale .x4{width:100%;background:linear-gradient(90deg,rgba(216,30,38,.45),var(--red));color:#fff}
/* server sizing table: five columns */
table.cmp.ipx-cmp{min-width:720px}
.ipx-cmp tbody th{color:var(--tx);font-weight:700}
/* steps sit on the plain background: give the cards the panel colour */
#how .te-steps>div{background:var(--panel)}
#how .te-steps{margin-bottom:0}
/* six use cases: three across on desktop */
.use.ipx-use{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
@media(max-width:820px){
 table.cmp.ipx-cmp{min-width:600px}
 .ipt-codes.ipx-codes{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ipx-scale .x1{min-width:52px}
 .use.ipx-use{grid-template-columns:1fr}
}

/* ---- SE-CCS50 / SE-CCS100 Call Centre (Software Edition) page additions (new class names only; existing rules untouched) ---- */
/* hero: brighter glow behind the server-and-screens concept image */
.cc-shot:before{inset:4% 2%;background:radial-gradient(closest-side,rgba(74,155,255,.24),rgba(61,220,132,.1),transparent)}
/* two editions: cards without photos, scale bar inside */
.models.cc-models{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:860px}
.cc-models .mcard h3{font-size:1.4rem}
.cc-models .trk{background:#0d0e10;border:1px solid var(--line);border-radius:6px;height:14px;overflow:hidden;margin:4px 0 14px}
.cc-models .trk i{display:block;height:100%;width:50%;background:linear-gradient(90deg,rgba(109,177,255,.35),var(--blue))}
.cc-models .c2 .trk i{width:100%;background:linear-gradient(90deg,rgba(216,30,38,.45),var(--red))}
.cc-ed-note{margin-top:18px;max-width:72ch}
/* two ways to buy */
.cc-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.cc-opts>div{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:10px;padding:24px}
.cc-opts .sw{border-top-color:#3ddc84}
.cc-opts .k{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);font-weight:700}
.cc-opts .sw .k{color:#3ddc84}
.cc-opts h3{font-size:1.3rem;margin:.35em 0 .5em}
.cc-opts p{color:var(--mu);margin-bottom:16px}
.cc-opts .tick{gap:8px;color:var(--mu);font-size:.95rem;margin-bottom:22px;flex:1;align-self:stretch}
.cc-opts .tick li:before{border-color:var(--blue)}
.cc-opts .sw .tick li:before{border-color:#3ddc84}
.cc-opts .btn{align-self:flex-start}
/* product screens: real screenshots in a browser-style frame */
.cc-gal{grid-template-columns:repeat(2,minmax(0,1fr))}
.cc-gal figure{background:#0d0e10}
.cc-gal .ph{position:relative;padding-top:22px;background:#202327;border-bottom:1px solid var(--line)}
.cc-gal .ph:before{content:"";position:absolute;left:12px;top:8px;width:7px;height:7px;border-radius:50%;background:#ff6b6b;box-shadow:12px 0 #f5c451,24px 0 #3ddc84}
.cc-gal .ph img{aspect-ratio:16/10;object-fit:cover;object-position:top left}
.cc-gal figcaption b{display:block;color:var(--tx);font-size:1rem;margin-bottom:2px}
/* six use cases: three across on desktop */
.use.cc-use{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
/* spec table with two edition columns */
.cc-cmp td[colspan]{text-align:left}
#specs .cc-cmp thead th:not(:first-child){text-align:left}
@media(max-width:820px){
 .cc-gal{grid-template-columns:1fr}
 .cc-opts>div{padding:20px 18px}
 .cc-opts .btn{align-self:stretch;text-align:center}
}

/* ---- Products menu (shared by all pages): mega panel on desktop, two-level accordion in the mobile drawer ---- */
/* Desktop: four columns across the full width, every product with its one-line description, no footer strip,
   so the whole panel fits on a laptop screen without scrolling */
.pm{display:flex}
.pm-t,.pm-h{-webkit-tap-highlight-color:transparent}
.pm-t{display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;font:inherit;font-weight:600;font-size:.95rem;color:var(--mu);padding:8px 10px 8px 14px;border-radius:6px}
.pm-t:hover,.pm.open .pm-t,.pm-t.cur{color:#fff;background:#202327}
.pm-t.cur{box-shadow:inset 0 -2px var(--red)}
.pm-cv{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.pm.open .pm-t .pm-cv{transform:rotate(180deg)}
.pm-p{display:none;position:absolute;left:0;right:0;top:100%;background:#141518;border-bottom:1px solid var(--line);box-shadow:0 28px 48px rgba(0,0,0,.6);max-height:calc(100vh - 68px);overflow-y:auto}
.pm.open .pm-p{display:block;animation:pmIn .16s ease-out}
@keyframes pmIn{from{opacity:0;transform:translateY(-6px)}}
.pm-p .w{width:min(1320px,96%)}
.pm-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;padding:22px 0 20px}
.pm-g+.pm-g{margin-top:20px}
/* category headings: shaded bar, red edge, icon tile */
.pm-h{display:flex;align-items:center;gap:12px;width:100%;border:0;border-left:3px solid var(--red);border-radius:0 8px 8px 0;background:linear-gradient(90deg,rgba(109,177,255,.16),rgba(109,177,255,.03));padding:8px 12px;margin-bottom:6px;color:#5ba3ff;font:inherit;font-weight:800;font-size:1.05rem;letter-spacing:.01em;line-height:1.2;text-align:left;cursor:default}
.pm-h .ico{width:30px;height:30px;padding:5px;border-radius:7px;background:#0d0e10;border:1px solid #3a3f45}
.pm-h .pm-cv{display:none;margin-left:auto}
.pm-g ul{list-style:none;padding:0 0 0 6px}
/* product links: name + one-line description */
.pm-p a{display:block;padding:6px 10px;border-radius:6px;border-left:2px solid transparent;text-decoration:none;color:var(--tx);font-weight:400;font-size:1rem}
.pm-p a b{display:block;font-size:.95rem;font-weight:700;color:#fff;line-height:1.3}
.pm-p a span{display:block;font-size:.8rem;color:var(--mu);line-height:1.4}
.pm-p a:hover{background:#202327;border-left-color:var(--blue)}
.pm-p a[aria-current]{background:#1d2024;border-left-color:var(--red);box-shadow:none}
/* help card in the free space under the gateways */
.pm-cta{margin-top:20px;background:#0d0e10;border:1.5px solid #4a5159;border-top:3px solid var(--blue);border-radius:10px;padding:14px 16px}
.pm-cta b{display:block;color:#fff;font-size:.95rem}
.pm-cta>span{display:block;color:var(--mu);font-size:.8rem;line-height:1.4;margin:2px 0 12px}
.pm-cta .pm-fl{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.pm-p .pm-cta a{display:inline-block;padding:7px 14px;border:1.5px solid #8a929b;border-radius:6px;background:#22262b;font-weight:700;font-size:.85rem;color:#fff}
.pm-p .pm-cta a.pm-ask{background:var(--red);border-color:var(--red)}
.pm-p .pm-cta a:hover{background:#2c3137;border-color:#c4c9cf}
.pm-p .pm-cta a[aria-current]{background:#2c3137;border-color:#c4c9cf}
.pm-p .pm-cta a.pm-ask:hover{background:var(--red);border-color:var(--red);filter:brightness(1.15)}
/* narrower desktops and tablets in landscape */
@media(min-width:821px) and (max-width:1099px){
 .pm-cols{gap:0 16px}
 .pm-h{font-size:.95rem;padding:7px 8px;gap:8px}
 .pm-h .ico{width:26px;height:26px;padding:4px}
 .pm-p .w{width:97%}
 .pm-cols{padding:16px 0 12px}
 .pm-g+.pm-g,.pm-cta{margin-top:12px}
 .pm-p a{padding:4px 8px}
 .pm-p a b{font-size:.86rem}
 .pm-p a span{font-size:.72rem;line-height:1.3}
 .pm-cta{padding:10px 12px}
}
/* short laptop screens: same content, tighter spacing (descriptions always stay) */
@media(min-width:821px) and (max-height:600px){
 .pm-cols{padding:14px 0 12px}
 .pm-g+.pm-g,.pm-cta{margin-top:12px}
 .pm-h{padding:5px 12px;margin-bottom:4px}
 .pm-h .ico{width:26px;height:26px;padding:4px}
 .pm-p a{padding:4px 10px}
}
@media(prefers-reduced-motion:reduce){.pm.open .pm-p{animation:none}.pm-cv{transition:none}}
/* Mobile: two-level accordion; help card dropped (Contact Us is already in the menu) */
@media(max-width:820px){
 nav.open{flex-wrap:nowrap;max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain}
 .pm{display:block;border-bottom:1px solid var(--line)}
 .pm-t{width:100%;justify-content:space-between;padding:12px 10px;border-radius:0}
 .pm-t:hover,.pm.open .pm-t{background:none}
 .pm-t.cur{background:none;box-shadow:none;color:#fff}
 .pm-p{position:static;max-height:none;overflow:visible;box-shadow:none;border:1px solid var(--line);border-radius:8px;margin:0 0 10px}
 .pm.open .pm-p{animation:none}
 .pm-p .w{width:100%}
 .pm-cols{display:block;padding:0}
 .pm-g+.pm-g{margin-top:0}
 .pm-h{padding:7px 10px;margin:0;font-size:.95rem;cursor:pointer;border-radius:0;border-bottom:1px solid var(--line)}
 .pm-h .ico{width:26px;height:26px;padding:4px}
 .pm-h .pm-cv{display:block}
 .pm-g.open .pm-h{background:linear-gradient(90deg,rgba(109,177,255,.28),rgba(109,177,255,.06))}
 .pm-g.open .pm-h .pm-cv{transform:rotate(180deg)}
 .pm-g ul{display:none;padding:4px 6px 6px;border-bottom:1px solid var(--line)}
 .pm-g.open ul{display:block}
 .pm-p a{padding:6px 10px 6px 48px}
 .pm-p a b{font-size:.92rem}
 .pm-p a span{font-size:.78rem;line-height:1.35}
 .pm-cta{display:none}
 .pm-col:last-child .pm-g:not(.open) .pm-h,.pm-col:last-child .pm-g ul{border-bottom:0}
}
/* short phones: tighter rows (descriptions always stay) */
@media(max-width:820px) and (max-height:760px){
 nav a,.pm-t{padding-top:6px;padding-bottom:6px}
 .pm-h{padding-top:3px;padding-bottom:3px}
 .pm-p a{padding:3px 10px 3px 48px}
 .pm-p a span{line-height:1.25}
 .pm-p{margin-bottom:4px}
}

/* ---- All Products and Ask Our Engineers pages (new class names only; existing rules untouched) ---- */
/* hero: right-hand column stays second on phones */
@media(max-width:820px){.ap-hero .w>div:nth-child(2){order:0}}
.hero .ap-cap{white-space:normal;text-align:left;width:100%;margin-bottom:14px}
/* category jump tiles */
.ap-jump{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ap-jump a{display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgba(17,18,20,.85);border:1px solid #3a3f45;border-left:3px solid var(--red);border-radius:8px;text-decoration:none;transition:border-color .2s,background .2s}
.ap-jump a:hover{background:#202327;border-color:var(--blue);border-left-color:var(--red)}
.ap-jump .ico{width:34px;height:34px;padding:6px;border-radius:7px;background:#0d0e10;border:1px solid #3a3f45}
.ap-jump b{display:block;color:#5ba3ff;font-size:.98rem;line-height:1.25}
.ap-jump small{display:block;color:var(--mu);font-size:.8rem}
/* category sections */
.ap-h2{display:flex;align-items:center;gap:14px;color:#5ba3ff}
.ap-h2 .ico{width:44px;height:44px;padding:8px;border-radius:10px;background:#0d0e10;border:1px solid #3a3f45}
section[id]{scroll-margin-top:70px}
.ap-range{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
/* which-one guide */
table.ap-guide{min-width:0}
.ap-guide thead th:last-child{color:inherit}
.ap-guide tbody th{width:58%;color:var(--tx);font-weight:500}
.ap-guide td a{color:var(--blue);font-weight:700;text-decoration:none}
.ap-guide td a:hover{text-decoration:underline}
.ap-guide tbody tr:hover>*{background:#16181b}
/* ask-our-engineers contact card */
.ae-contact{background:rgba(17,18,20,.9);border:1.5px solid #4a5159;border-top:3px solid var(--red);border-radius:12px;padding:24px 26px;margin-top:6px}
.ae-contact h2{font-size:1.35rem;margin-bottom:14px}
.ae-row{display:grid;gap:2px;padding:12px 0;border-top:1px solid var(--line)}
.ae-row .k{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:2px}
.ae-row a{text-decoration:none;font-size:1.1rem;font-weight:600;color:#fff}
.ae-row a[href^="mailto"]{font-size:.95rem;font-weight:500;color:#e0e3e6}
.ae-row a:hover{color:var(--blue)}
.ae-contact p{color:var(--mu);font-size:.9rem;margin-top:10px}
@media(max-width:820px){
 .ap-jump{grid-template-columns:1fr 1fr;gap:8px}
 .ap-jump a{padding:10px;gap:8px}
 .ap-jump .ico{width:28px;height:28px;padding:5px}
 .ap-jump b{font-size:.88rem}
 .ap-h2 .ico{width:36px;height:36px;padding:6px}
 .ap-guide tbody th{width:55%;font-size:.88rem}
 .ap-guide td{font-size:.9rem}
 .ae-contact{padding:20px}
}


/* ---- Services, Careers and Contact Us pages (new class names only; existing rules untouched) ---- */
/* boxed card in the hero (under-construction notice, careers summary) */
.uc-card{background:rgba(17,18,20,.9);border:1.5px solid #4a5159;border-top:3px solid var(--blue);border-radius:12px;padding:26px 28px;margin-top:6px}
.uc-card>.ico{width:46px;height:46px;padding:9px;border-radius:10px;background:#0d0e10;border:1px solid #3a3f45;margin-bottom:14px}
.uc-card h2{font-size:1.4rem;margin-bottom:8px}
.uc-card p{color:var(--mu);font-size:.95rem;margin-bottom:12px}
.uc-card .tick{margin:4px 0 14px;font-weight:600}
.cr-card{border-top-color:var(--red)}
/* phone and e-mail links */
.ct-tel{display:block;text-decoration:none;font-size:1.15rem;font-weight:700;color:#fff;line-height:1.6}
.ct-mail{display:block;text-decoration:none;font-size:.95rem;color:#e0e3e6;margin-top:4px;overflow-wrap:anywhere}
.ct-tel:hover,.ct-mail:hover{color:var(--blue)}
/* contact cards */
.ct-cards{display:grid;gap:16px;margin-top:6px}
.ct-card{background:rgba(17,18,20,.9);border:1.5px solid #4a5159;border-left:4px solid var(--red);border-radius:10px;padding:20px 22px}
.ct-card.sv{border-left-color:var(--blue)}
.ct-card .k{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);font-weight:700}
.ct-card h3{font-size:1.1rem;margin:4px 0 10px}
/* internship cards */
.cr-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.cr-role{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:10px;padding:24px}
.cr-role>.ico{width:44px;height:44px;padding:8px;border-radius:10px;background:#0d0e10;border:1px solid #3a3f45;margin-bottom:14px}
.cr-role .k{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);font-weight:700}
.cr-role h3{font-size:1.25rem;margin:.3em 0 .4em}
.cr-role p{color:var(--mu);font-size:.92rem;margin-bottom:14px}
.cr-role .tick{gap:8px;color:var(--mu);font-size:.92rem;margin-bottom:20px;flex:1;align-self:stretch}
.cr-role .btn{align-self:flex-start;padding:10px 18px;font-size:.92rem}
@media(max-width:820px){
 .uc-card{padding:20px}
 .ct-card{padding:16px 18px}
 .cr-role{padding:20px 18px}
 .cr-role .btn{align-self:stretch;text-align:center}
}
/* contact form: extra fields for product enquiries (shown by script) */
.ct-prod{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ct-prod[hidden]{display:none}
@media(max-width:820px){.ct-prod{grid-template-columns:1fr}}

/* ---- Footer (shared by all pages): icons, address with map tile, Google map pop-up ---- */
.ft-h{display:flex;align-items:center;gap:10px}
.ft-h .ico{width:32px;height:32px;padding:6px;border-radius:8px;background:#16181b;border:1px solid #3a3f45}
footer .ft-l{display:flex;align-items:flex-start;gap:10px;margin:5px 0;line-height:1.5;font-style:normal;color:#e0e3e6}
.ft-l .ico{width:18px;height:18px;margin-top:3px;stroke-width:1.8}
.ft-co p{margin-bottom:8px}
footer .fc.ft4{grid-template-columns:1fr 1fr 118px 1.25fr;gap:24px 32px}
.ft-map{display:block;width:118px;align-self:start;border:1px solid #3a3f45;border-radius:10px;overflow:hidden;background:#16181b;text-decoration:none;transition:border-color .2s}
.ft-map:hover,.ft-map:focus-visible{border-color:var(--blue)}
.ft-map svg{display:block;width:100%;height:auto;aspect-ratio:1}
.ft-map:hover svg{filter:brightness(1.06)}
.ft-cap{display:flex;align-items:center;justify-content:center;gap:4px;padding:5px 4px;font-size:.7rem;line-height:1.2;white-space:nowrap;font-weight:700;color:#fff;border-top:1px solid #3a3f45}
@media(max-width:1000px){footer .fc.ft4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){footer .fc.ft4{grid-template-columns:1fr}.ft-mc{order:4}}
.ft-cap svg{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* map pop-up */
.hm-map{width:min(960px,94vw);max-height:90vh;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--tx);overflow:hidden}
.hm-map::backdrop{background:rgba(0,0,0,.7)}
.hm-map-h{display:flex;align-items:center;gap:14px;padding:12px 14px 12px 18px;border-bottom:1px solid var(--line)}
.hm-map-h b{flex:1;font-size:.95rem}
.hm-map-h a{color:var(--blue);font-weight:700;font-size:.9rem;text-decoration:none;white-space:nowrap}
.hm-map iframe{display:block;width:100%;height:min(70vh,560px);border:0;background:#0d0e10}
@media(max-width:820px){
 .hm-map-h{flex-wrap:wrap;padding:10px 12px}
 .hm-map-h b{flex-basis:calc(100% - 50px);font-size:.88rem}
 .hm-map-h a{order:3}
 .hm-map iframe{height:62vh}
}
.hm-x{flex:none;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line);background:#202327;color:#fff;cursor:pointer;padding:0}
.hm-x:hover{border-color:var(--blue)}
.hm-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* ---- Phones only: secondary text a little brighter (still below the #e0e3e6 body text); design credit fainter ---- */
@media(max-width:820px){
 :root{--mu:#d5d9dd}
 .arch .s{fill:#d5d9dd}
 .dby{color:#3c4146}
}