/* Data Cablers — overrides that bring the imported components into the segplc.com look.
   Load order: style.css, premium.css, extra.css (segplc) -> dc-components.css (imported) -> this file. */
[hidden]{display:none!important}
dialog{margin:auto}

/* ---------- wordmark (no logo artwork yet: type lockup in the segplc face) ---------- */
.dclogo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex:none}
.dclogo .mk{width:40px;height:40px;border-radius:10px;background:var(--yellow);display:grid;align-content:center;gap:4px;padding:0 9px;flex:none}
.dclogo .mk i{display:block;height:4px;border-radius:2px;background:var(--ink)}
.dclogo .mk i:nth-child(2){width:70%}
.dclogo .wm{display:flex;flex-direction:column;line-height:1}
.dclogo .wm b{font-size:23px;font-weight:900;letter-spacing:-.04em}
.dclogo .wm b span{font-weight:500;margin-left:1px}
.dclogo .wm small{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.nav.over .dclogo{color:#fff}.nav.over .dclogo .wm small{color:#C9C7BC}
.dclogo-ft{color:#fff;margin-bottom:18px}.dclogo-ft .wm small{color:#8F8E88}
@media (max-width:1180px){.dclogo .wm small{display:none}}
.nav .mega-s{width:min(620px,100vw - 32px)}
.ft .fineprint{border-top:1px solid rgba(255,255,255,.08);margin-top:28px;padding-top:22px;font-size:12.5px;line-height:1.6;color:#8F8E88}
.ft .fineprint b{color:#C9C7BC}
.ft .fineprint p{max-width:none}

/* ---------- section rhythm and type: segplc scale ---------- */
.dcx .x-sec{padding-block:clamp(64px,9vw,120px)}
.dcx .x-sec-sm{padding-block:clamp(40px,6vw,72px)}
.dcx .x-sec-alt{background:var(--sand)}
.dcx .x-sec-dk,.dcx .x-sec-gr{background:var(--ink);color:#D9D8D2}
.dcx .x-sec-gr{background:#2B2B29}
.dcx .x-sec-y{background:var(--yellow)}
.dcx .x-d0,.dcx .x-d1,.dcx .x-d2,.dcx .x-d3,.dcx .x-d4{font-family:var(--font);color:var(--ink)}
.dcx .x-d1{font-size:clamp(30px,3.6vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1.08}
.dcx .x-d2{font-size:clamp(26px,2.8vw,36px);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.dcx .x-d3{font-size:clamp(20px,2vw,24px);font-weight:800;letter-spacing:-.02em}
.dcx .dark .x-d1,.dcx .dark .x-d2,.dcx .dark .x-d3,.dcx .dark .x-d4,.dcx .dark h3,.dcx .dark h4{color:#fff}
.dcx .dark .eyebrow{color:#fff}
.dcx .x-rule-y{width:56px;height:5px;border-radius:3px;margin:20px 0 22px}
.dcx .x-sec-head{max-width:820px;margin-bottom:clamp(32px,4vw,52px)}
.dcx .x-sec-head .lede{margin:0}
.dcx .x-body-lg{color:var(--body)}
.dcx .dark .x-body-lg,.dcx .dark .lede{color:#D9D8D2}

/* ---------- hero: segplc dark hero ---------- */
.dcx .x-pghero.hero-d{padding:clamp(40px,5vw,72px) 0 clamp(56px,7vw,96px)}
.dcx .x-pghero.hero-d::before{display:block}
.dcx .x-pghero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center}
.dcx .x-pghero-grid>*{min-width:0}
.dcx .x-pghero .x-d0{color:#fff;font-size:clamp(38px,4.6vw,62px);line-height:1;letter-spacing:-.05em;font-weight:900}
.dcx .x-pghero .x-d0 br+*,.dcx .x-pghero .x-d0{text-wrap:balance}
.dcx .x-pghero .lede{color:#D9D8D2;max-width:58ch}
.dcx .x-pghero .x-rule-y{display:none}
.dcx .x-pghero .x-btn-row{margin-top:28px}
.dcx .dc-crumbs{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 22px;font-size:13.5px;color:#B6B5AD}
.dcx .dc-crumbs li+li::before{content:"/";margin-right:6px;color:#6B6B66}
.dcx .dc-crumbs a{color:#fff;text-decoration:none;font-weight:600}
.dcx .dc-crumbs a:hover{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px}
.dcx .x-pgstats{border-radius:var(--r) var(--r) 0 0;overflow:hidden;gap:1px;background:rgba(255,255,255,.1)}
.dcx .x-pgstats div{background:rgba(255,255,255,.04)}
.dcx .x-pgstats b{color:var(--yellow);font-family:var(--font);font-weight:900;letter-spacing:-.03em}
.dcx .x-pghero .x-notice{border-radius:0 0 var(--r) var(--r)}
.dcx .x-pghero .x-keyfacts{border-radius:var(--r);overflow:hidden}

/* first line of the home H1 white, second line yellow, like segplc */
.home .dcx .x-pghero .x-d0{font-size:clamp(40px,5.2vw,70px)}

/* ---------- cards, notices, tables: segplc radius and borders ---------- */
.dcx .x-g2,.dcx .x-g3,.dcx .x-g4{gap:20px;background:none;border:0}
.dcx .x-cell{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:clamp(22px,2.4vw,30px);transition:transform .3s,box-shadow .3s}
.dcx .x-cell:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.dcx .x-sec-alt .x-cell{background:#fff}
.dcx .dark .x-cell{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.dcx .x-cell h3{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.dcx .dark .x-cell h3{color:#fff}
.dcx .x-cell .x-n{font-family:var(--mono);color:#6E5700}
.dcx .dark .x-cell .x-n{color:var(--yellow)}
.dcx .x-notice{border-radius:var(--r);border-left-width:5px;border-left-color:var(--yellow)}
.dcx .x-notice h4{font-weight:800;letter-spacing:-.02em}
.dcx .x-tablewrap{border-radius:var(--r);overflow:auto}
.dcx .x-keyfacts{border-radius:var(--r)}
.dcx .x-med{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff}
.dcx .x-med h3{font-size:26px;font-weight:900}
.dcx .x-med .x-straight{border-radius:12px}
.dcx .x-cl{border-radius:var(--r)}
.dcx .x-checks .x-k{color:var(--yellow);border-radius:4px}
.dcx .dark .x-checks .x-k{color:var(--yellow)}
.dcx .x-steps li::before{border-radius:50%}
.dcx .x-fig img{border-radius:14px}
.dcx .x-pull{border-radius:var(--r)}
.dcx .x-accred{border-radius:var(--r)}
.dcx .x-ctaband{border-radius:0}
.dcx .x-ticker{background:var(--yellow);color:var(--ink)}
.dcx .x-ticker-in span b{color:var(--ink)}

/* links: charcoal with a thick yellow underline (playbook) */
.dcx .x-tlink{font-family:var(--font);font-size:15px;letter-spacing:0;text-transform:none;font-weight:700;border-bottom:3px solid var(--yellow)}
.dcx .dark .x-tlink{color:#fff}
.dcx p a:not(.btn):not(.x-q):not(.x-tlink){color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:3px}
.dcx .dark p a:not(.btn):not(.x-q):not(.x-tlink){color:#fff}

/* buttons: segplc pills; ghost reads dark on light sections, white on dark ones */
.dcx .x-btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.dcx .btn-wide{width:100%}
.dcx .btn-ghost{color:var(--ink);border-color:var(--line-2)}
.dcx .btn-ghost:hover{border-color:var(--ink);background:transparent}
.dcx .dark .btn-ghost,.dcx .hero-d .btn-ghost,.dcx .x-ctaband .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.dcx .dark .btn-ink{background:#fff;color:var(--ink)}
.dcx .x-sec-foot{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-top:36px}

/* ---------- patch panel tool ---------- */
.dcx .x-panel-block{border-radius:var(--r);overflow:hidden}
.dcx .x-panel{border-radius:14px}
.dcx .x-port{border-radius:6px}
.dcx .x-port.x-sel{outline:2px solid var(--yellow);outline-offset:-2px}
.dcx .x-cert{border-radius:var(--r);overflow:hidden}

/* ---------- form ---------- */
.dcx .x-form{border-radius:var(--r);box-shadow:var(--shadow)}
.dcx .x-fr input,.dcx .x-fr select,.dcx .x-fr textarea{border-radius:10px;font-family:var(--font)}
.dcx .x-hp{position:absolute;left:-9999px}

/* ---------- photo bands ---------- */
.dc-pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.dc-pgrid-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
.dc-pgrid figure{margin:0}
.dc-pgrid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;display:block}
.dc-pgrid figcaption{font-size:13.5px;color:var(--muted);margin-top:8px}
@media (max-width:900px){.dc-pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (max-width:980px){.dcx .x-pghero-grid{grid-template-columns:1fr}}
.dcx .x-pghero.hero-d .wrap{display:block}
.nav nav>a,.nav nav>details>summary{white-space:nowrap}
/* fixes after first visual pass */
.dcx .eyebrow,.dcx .dark .eyebrow,.dcx .x-sec-dk .eyebrow,.dcx .x-sec-gr .eyebrow,.dcx .x-ctaband .eyebrow{color:var(--ink)}
.dcx .x-ctaband .eyebrow{background:var(--ink);color:var(--yellow)}
.dcx .x-ctaband .btn-ghost,.dcx .x-sec-y .btn-ghost{color:var(--ink);border-color:var(--ink)}
.dcx .x-ctaband .btn-ghost:hover{background:var(--ink);color:var(--yellow)}
.dcx .x-ctaband .x-contact a{color:var(--ink);text-decoration:none;font-weight:800}
.dcx .dark .x-g2,.dcx .dark .x-g3,.dcx .dark .x-g4{background:none;border:0}
.dcx .x-cert .x-spectable td,.dcx .x-cert .x-spectable th{color:var(--body);border-color:var(--line)}
.dcx .x-cert .x-spectable td:first-child,.dcx .x-cert .x-spectable .x-mono{color:var(--ink);font-weight:700}
.dcx .x-cert .x-spectable .x-ok{color:var(--ok)}
.dcx .x-ticker,.dcx .x-ticker-in span{color:var(--ink)}
.dcx .x-ticker-in span{opacity:1;font-weight:700}
@media (max-width:640px){
  .dclogo{gap:9px}.dclogo .mk{width:34px;height:34px;padding:0 7px;gap:3px}.dclogo .mk i{height:3.5px}
  .dclogo .wm b{font-size:19px}
  .nav .right .btn-y{display:none}
  .dcx .x-pghero .x-d0{font-size:clamp(34px,10vw,44px)}
}
.dcx .x-split>*,.dcx .x-g2>*,.dcx .x-g3>*,.dcx .x-g4>*{min-width:0}
.dcx .x-fig img{width:100%;height:auto}
.dcx .x-steps li{grid-template-columns:44px minmax(0,1fr);row-gap:0}
.dcx .x-steps li::before{grid-row:1 / span 3}
.dcx .x-steps li>*{grid-column:2}
.dcx .dc-crumbs li{color:#B6B5AD}
.dcx .hero-d p a:not(.btn):not(.x-q),.dcx .hero-d .x-qnote a{color:#fff}
/* header fit at laptop widths (cut-off "Request a price" at ~1370px) */
@media (max-width:1460px){.dclogo .wm small{display:none}.nav .tel small{display:none}.nav .wrap{gap:18px}.nav nav>a,.nav nav>details>summary{padding-inline:10px}}
@media (max-width:1180px){.nav .tel span{display:none}}
/* ---------- patch panel: scroll-driven RJ45 patch leads + switch-style link/activity LEDs ---------- */
.dcx .x-port{position:relative;overflow:hidden;padding:7px 3px 6px;gap:5px;min-height:92px;justify-content:flex-start}
.dcx .x-port .x-jack,.dcx .x-port .x-led{display:none}
.dcx .x-leds{display:flex;justify-content:space-between;width:62%;height:5px}
.dcx .x-leds i{width:8px;height:4px;border-radius:1px;background:#262A2E;transition:background .2s,box-shadow .2s}
.dcx .x-port.x-link .x-lnk{background:#2BD46A;box-shadow:0 0 8px rgba(43,212,106,.95)}
.dcx .x-port.x-link .x-act{background:#2BD46A;box-shadow:0 0 8px rgba(43,212,106,.95);animation:dc-act var(--blink,.5s) steps(2,jump-none) infinite}
@keyframes dc-act{0%{opacity:1}50%{opacity:.12}100%{opacity:1}}
/* RJ45 socket: square mouth, contacts along the top, keyway notch at the bottom */
.dcx .x-sock{position:relative;width:62%;aspect-ratio:1/0.82;background:#050607;border:2px solid #3A3D42;border-radius:2px;box-shadow:inset 0 3px 6px rgba(0,0,0,.9)}
.dcx .x-sock .x-pins{position:absolute;left:14%;right:14%;top:2px;height:5px;
  background:repeating-linear-gradient(90deg,#B98D22 0 2px,transparent 2px 4.6px);opacity:.85}
.dcx .x-sock .x-key{position:absolute;left:34%;right:34%;bottom:-2px;height:24%;background:#0A0B0D;border:2px solid #3A3D42;border-bottom:0}
/* the lead */
.dcx .x-lead{position:absolute;z-index:3;left:50%;top:14px;width:62%;opacity:0;transform-origin:50% 22%;pointer-events:none;will-change:transform,opacity}
.dcx .x-plugsvg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 calc(var(--sh,0) * 14px) calc(var(--sh,0) * 10px + 1px) rgba(0,0,0,.55))}
.dcx .x-lead .x-shadow{display:none}
.dcx .x-port .x-sock{transition:border-color .2s}
.dcx .x-port.x-link .x-sock{border-color:#2E4A38}
.dcx .x-port .x-n{position:absolute;bottom:4px;right:6px;z-index:4;display:block!important;font-size:.5rem}
.dcx .x-port.x-link{border-color:#2E4A38}
.dcx .x-port.x-sel{border-color:var(--yellow)}
@media (max-width:760px){.dcx .x-port{min-height:78px}}
@media (prefers-reduced-motion:reduce){.dcx .x-port.x-link .x-act{animation:none}}
/* headline highlights (segplc style) */
.dcx em.mark{font-style:normal}
.dcx .dark em.mark,.dcx .hero-d em.mark{background:none;color:var(--yellow)}
.dcx .x-ctaband em.mark{background:linear-gradient(transparent 58%,#fff 58%,#fff 92%,transparent 92%);color:var(--ink)}
.dcx .x-pghero h1 em{font-style:normal;color:var(--yellow)}
.dcx .dark em.mark,.dcx .hero-d em.mark{padding:0;margin:0;box-shadow:none}