/* ===== SUPPORT & DOWNLOAD CENTER — page-specific CSS (light) ===== */

/* ---------- SEARCH-FIRST HERO ---------- */
.sup-hero{padding:clamp(2.6rem,6vw,5rem) 0 clamp(2rem,4vw,3rem); border-bottom:1px solid var(--line-light); position:relative; overflow:hidden}
.sup-hero .container{position:relative; z-index:2}
.sup-hero h1{font-size:clamp(2.3rem,5.4vw,4.2rem); letter-spacing:-.03em; line-height:1.02; color:var(--on-light); margin:1rem 0 0; max-width:16ch; font-weight:500}
.sup-hero .sub{max-width:56ch; margin-top:1.1rem; color:var(--on-light-dim); font-size:clamp(1.02rem,1.4vw,1.18rem); line-height:1.6}

/* search box */
.searchwrap{margin-top:2rem; max-width:760px}
.searchbox{display:flex; align-items:center; gap:.7rem; border:1px solid var(--on-light); border-radius:var(--r-marketing); padding:.65rem .65rem .65rem 1.1rem; background:#fff; transition:box-shadow .2s var(--ease), border-color .2s}
.searchbox:focus-within{box-shadow:0 0 0 4px rgba(255,86,10,.12); border-color:var(--brand)}
.searchbox svg.si{flex-shrink:0; color:var(--on-light-mute)}
.searchbox input{flex:1; border:0; outline:0; background:none; font-family:var(--sans); font-size:1.02rem; color:var(--on-light); padding:.35rem 0}
.searchbox input::placeholder{color:var(--on-light-mute)}
.searchbox .btn{flex-shrink:0}
.popular{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:1.1rem; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--on-light-mute)}
.popular .plabel{margin-right:.2rem}
.popular .pchip{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--on-light-dim); border:1px solid var(--line-light); border-radius:var(--r-pill); padding:.42em .8em; cursor:pointer; transition:.15s var(--ease); text-decoration:none}
.popular .pchip:hover{border-color:var(--on-light); color:var(--on-light)}

/* ---------- CATEGORY TILES ---------- */
.lsec{padding:clamp(2.6rem,5vw,4.4rem) 0}
.sec-idx{font-family:var(--mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--on-light-mute); display:flex; align-items:center; gap:.8em; margin-bottom:1.4rem}
.sec-idx b{color:var(--on-light); font-weight:500} .sec-idx .ln{flex:1; height:1px; background:var(--line-light); max-width:80px}
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light); border-radius:var(--r-marketing); overflow:hidden}
.tile{display:flex; flex-direction:column; gap:.9rem; background:#fff; padding:clamp(1.4rem,2.4vw,2rem); color:inherit; text-decoration:none; transition:background .18s var(--ease)}
.tile:hover{background:#fafafa}
.tile .ico{width:42px; height:42px; border-radius:var(--r-lg); border:1px solid var(--line-light); display:grid; place-items:center; color:var(--on-light)}
.tile:hover .ico{border-color:var(--brand); color:var(--brand)}
.tile h3{font-size:1.12rem; font-weight:500; letter-spacing:-.02em; color:var(--on-light); margin:0; display:flex; align-items:center; gap:.45em}
.tile h3 .ar{color:var(--brand); opacity:0; transform:translateX(-5px); transition:.2s var(--ease)}
.tile:hover h3 .ar{opacity:1; transform:none}
.tile p{font-size:.88rem; color:var(--on-light-dim); line-height:1.5; margin:0; flex:1}
.tile .tcount{font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--on-light-mute)}
@media(max-width:860px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tiles{grid-template-columns:1fr}}

/* ---------- DOWNLOADS TABLE ---------- */
.dl-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1.4rem; flex-wrap:wrap; margin-bottom:1.4rem}
.dl-head h2{font-size:clamp(1.7rem,3.2vw,2.4rem); letter-spacing:-.03em; color:var(--on-light); font-weight:500; line-height:1.05; max-width:18ch}
.dl-controls{display:flex; gap:.9rem; align-items:center; flex-wrap:wrap}
.dl-filter{display:flex; align-items:center; gap:.65rem; border:1px solid var(--line-light); border-radius:var(--r-pill); padding:.5rem .85rem; min-width:230px}
.dl-filter svg{color:var(--on-light-mute); flex-shrink:0}
.dl-filter input{border:0; outline:0; background:none; font-family:var(--sans); font-size:.9rem; color:var(--on-light); width:100%}
.dl-filter input::placeholder{color:var(--on-light-mute)}
.dl-tabs{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.2rem}
.dl-tab{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--on-light-dim); border:1px solid var(--line-light); border-radius:var(--r-pill); padding:.5em .9em; background:#fff; cursor:pointer; transition:.15s var(--ease)}
.dl-tab:hover{border-color:var(--on-light); color:var(--on-light)}
.dl-tab[aria-selected="true"]{background:var(--on-light); color:#fff; border-color:var(--on-light)}

.dl-table{border-top:1px solid var(--on-light)}
.dl-row{display:grid; grid-template-columns:1.7fr 1fr .8fr .7fr auto; align-items:center; gap:1.2rem; padding:1.15rem 0; border-bottom:1px solid var(--line-light)}
.dl-row .d-title{font-size:1rem; color:var(--on-light); font-weight:500; letter-spacing:-.01em}
.dl-row .d-meta{font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--on-light-mute); margin-top:.3rem}
.dl-row .d-prod{font-size:.86rem; color:var(--on-light-dim)}
.typechip{display:inline-flex; align-items:center; font-family:var(--mono); font-size:.62rem; font-weight:500; text-transform:uppercase; letter-spacing:.04em; border:1px solid var(--line-light); border-radius:var(--r-pill); padding:.32em .66em; color:var(--on-light-dim)}
.typechip.pdf{color:var(--brand); border-color:rgba(255,86,10,.35); background:var(--brand-soft)}
.typechip.zip{color:var(--on-light-dim)}
.typechip.step{color:var(--blue); border-color:rgba(0,132,248,.3); background:rgba(0,132,248,.07)}
.dl-row .d-size{font-family:var(--mono); font-size:.74rem; color:var(--on-light-mute); text-align:right}
.dl-dl{display:inline-flex; align-items:center; gap:.45em; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--on-light); border:1px solid var(--line-light); border-radius:var(--r-pill); padding:.5em .9em; white-space:nowrap; text-decoration:none; transition:.15s var(--ease)}
.dl-dl:hover{border-color:var(--brand); color:var(--brand)}
.dl-dl svg{transition:transform .15s}
.dl-dl:hover svg{transform:translateY(2px)}
.dl-empty{padding:2rem 0; font-family:var(--mono); font-size:.8rem; color:var(--on-light-mute)}
.dl-empty a{color:var(--on-light); border-bottom:1px solid var(--line-light)}
.dl-foot{margin-top:1.4rem; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--on-light-mute); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.dl-foot a{color:var(--on-light); border-bottom:1px solid var(--line-light)}
@media(max-width:820px){
  .dl-row{grid-template-columns:1fr auto; gap:.6rem 1rem}
  .dl-row .d-prod{grid-column:1; order:3; font-size:.8rem}
  .dl-row .d-type{grid-column:1; order:4}
  .dl-row .d-size{grid-column:2; order:4; text-align:left}
  .dl-row .d-dl{grid-column:2; order:2; justify-self:end}
  .dl-row .d-titlecell{grid-column:1; order:1}
}

/* ---------- FAQ / DOCS ACCORDION ---------- */
.faqsec{border-top:1px solid var(--line-light)}
.faq-grid{display:grid; grid-template-columns:.8fr 1.4fr; gap:clamp(1.8rem,4vw,4rem); align-items:start}
.faq-aside h2{font-size:clamp(1.7rem,3.2vw,2.4rem); letter-spacing:-.03em; color:var(--on-light); font-weight:500; line-height:1.05}
.faq-aside p{color:var(--on-light-dim); line-height:1.6; margin-top:.9rem; max-width:38ch}
.faq-aside .docslink{display:inline-flex; align-items:center; gap:.5em; margin-top:1.3rem; font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; color:var(--brand); text-decoration:none}
.faq-aside .docslink svg{transition:transform .15s}
.faq-aside .docslink:hover svg{transform:translateX(3px)}
.acc{border-top:1px solid var(--on-light)}
.acc-item{border-bottom:1px solid var(--line-light)}
.acc-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.2rem; background:none; border:0; cursor:pointer; text-align:left; padding:1.25rem 0; font-family:var(--sans); font-size:1.08rem; font-weight:500; letter-spacing:-.01em; color:var(--on-light)}
.acc-q .pm{flex-shrink:0; width:24px; height:24px; position:relative}
.acc-q .pm::before,.acc-q .pm::after{content:""; position:absolute; background:var(--on-light); transition:.2s var(--ease)}
.acc-q .pm::before{top:11px; left:4px; width:16px; height:2px}
.acc-q .pm::after{top:4px; left:11px; width:2px; height:16px}
.acc-item.open .acc-q .pm::after{transform:rotate(90deg); opacity:0}
.acc-item.open .acc-q .pm::before{background:var(--brand)}
.acc-a{max-height:0; overflow:hidden; transition:max-height .28s var(--ease)}
.acc-a-inner{padding:0 0 1.4rem; color:var(--on-light-dim); line-height:1.65; max-width:60ch}
.acc-a-inner a{color:var(--brand); border-bottom:1px solid rgba(255,86,10,.3)}
@media(max-width:760px){.faq-grid{grid-template-columns:1fr}}

/* ---------- SUPPORT BAND ---------- */
.help-band{padding:0 0 clamp(3rem,6vw,5rem)}
.help-inner{border:1px solid var(--line-light); border-radius:var(--r-marketing); overflow:hidden; display:grid; grid-template-columns:1.3fr 1fr}
.help-copy{padding:clamp(2rem,4vw,3.2rem)}
.help-copy .he{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--brand)}
.help-copy h2{font-size:clamp(1.7rem,3.2vw,2.4rem); letter-spacing:-.03em; color:var(--on-light); font-weight:500; line-height:1.05; margin-top:.7rem; max-width:18ch}
.help-copy p{color:var(--on-light-dim); line-height:1.6; margin-top:.9rem; max-width:46ch}
.help-actions{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.5rem}
.help-chans{display:grid; gap:1px; background:var(--line-light); border-left:1px solid var(--line-light)}
.chan{background:#fff; padding:clamp(1.3rem,2.4vw,1.8rem) clamp(1.4rem,2.4vw,2rem); display:flex; flex-direction:column; gap:.25rem}
.chan .ck{font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--on-light-mute)}
.chan .cv{font-size:1.04rem; color:var(--on-light); font-weight:500; letter-spacing:-.01em; text-decoration:none}
.chan .cs{font-size:.84rem; color:var(--on-light-dim)}
.chan a.cv:hover{color:var(--brand)}
@media(max-width:760px){.help-inner{grid-template-columns:1fr} .help-chans{border-left:0; border-top:1px solid var(--line-light)}}