/* Header and footer matching technologyuserlists.com (site_chrome.py)
   Generated by build.py – edit the source module, then rebuild. */

html{scroll-padding-top:120px}
.wrap{overflow:clip}
/* ---- live-site header ---- */
header.sh{position:sticky;top:0;z-index:60;padding:0;background:#fff;color:#000;box-shadow:0 2px 16px rgba(0,0,0,.07);font-family:'Open Sans',system-ui,Arial,sans-serif}
.sh-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px clamp(20px,4.2vw,60px)}
.sh-logo img{display:block;height:38px;width:auto}
.sh-r{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.sh-top{display:flex;gap:22px;font-size:15.5px}
.sh-top a,.sh-mc a{display:inline-flex;align-items:center;gap:8px;color:#c7036b}
.sh-top svg{width:15px;height:15px;color:#c90269}
.sh .sh-nav{display:block;padding:0}
.sh .sh-nav>ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;color:#000;font-size:14px}
.sh-nav li{position:relative;list-style:none}
.sh-nav>ul>li>a{display:inline-flex;align-items:center;gap:3px;padding:6px 6px;color:#000;text-transform:uppercase;white-space:nowrap}
.sh-nav>ul>li>a svg{width:12px;height:12px}
.sh-nav>ul>li:hover>a,.sh-nav>ul>li:focus-within>a{color:#6a31c8}
.sh-nav .sh-q{background:#6a31c8;color:#fff!important;font-weight:700;padding:8px 12px!important;margin-left:8px}
.sh-nav .sh-q:hover{background:#c4046e}
.sh-dd{position:absolute;top:100%;left:0;display:none;margin:4px 0 0;padding:0 10px;background:#fff;box-shadow:0 0 30px rgba(127,137,161,.25);list-style:none;z-index:5}
.sh-dd li a{display:block;padding:8px;color:#333;font-size:13px;border-bottom:1px solid #ddd;white-space:nowrap}
.sh-dd li a:hover,.sh-dd li a[aria-current]{color:#6a31c8}
.sh-has:hover>.sh-dd,.sh-has:focus-within>.sh-dd{display:block}
.sh-nav li.sh-mega{position:static}
.sh-mega>.sh-dd{left:auto;right:clamp(20px,4.2vw,60px);top:100%;width:min(1040px,calc(100vw - 40px));grid-template-columns:repeat(4,1fr);column-gap:10px;padding:8px 14px}
.sh-mega:hover>.sh-dd,.sh-mega:focus-within>.sh-dd{display:grid}
.sh-has>.sh-dd{animation:ddIn .22s ease}
@keyframes ddIn{from{opacity:0;transform:translateY(6px)}}
.sh-burger,.sh-x{display:none;background:none;border:0;color:#c90269;cursor:pointer;padding:6px}
.sh-burger svg,.sh-x svg{width:28px;height:28px}
.sh-mob{position:fixed;top:0;bottom:0;left:0;width:280px;max-width:86vw;z-index:70;overflow-y:auto;background:rgba(0,0,0,.97);padding:56px 0 24px;transform:translateX(-100%);transition:transform .35s ease}
.sh-mob.open{transform:none}
.sh-mob .sh-x{display:block;position:absolute;top:10px;right:10px;color:#fff}
.sh-mob>a,.sh-mob summary{display:block;padding:10px 22px;color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;cursor:pointer}
.sh-mob details{border:0;border-radius:0;padding:0;margin:0;background:none;box-shadow:none}
.sh-mob details[open]{background:rgba(255,255,255,.04);box-shadow:none}
.sh-mob summary{list-style:none;display:flex;justify-content:space-between;font-size:13px}
.sh-mob summary:after{content:"+";background:none;color:#fff;width:auto;height:auto;font-size:16px;display:inline}
.sh-mob details[open] summary:after{content:"–";color:#aa81ed}
.sh-mob details a{display:block;padding:8px 22px 8px 34px;color:#ddd;font-size:13px}
.sh-mob .sh-mc{display:grid;gap:8px;padding:18px 22px 0;font-size:13px}
.sh-ov{position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.6)}
@media(max-width:1180px){.sh-r{display:none}.sh-burger{display:block}}
@media(max-width:900px){.sh-in{padding:10px 16px}.sh-logo img{height:30px}}
header.hero{padding-top:clamp(8px,2vw,24px)}
/* ---- live-site footer ---- */
footer.sf{padding:0;background:#1f1f1f;color:#eee;font-size:14px;font-family:'Open Sans',system-ui,Arial,sans-serif}
.sf-top{padding:60px clamp(20px,6vw,110px) 30px}
.sf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;max-width:1200px;margin:0 auto}
.sf h4{position:relative;font-size:18px;font-weight:400;color:#fff;text-transform:uppercase;padding-bottom:12px;margin-bottom:16px}
.sf h4:after{content:"";position:absolute;left:0;bottom:0;width:30px;height:2px;background:#666}
.sf .sf-mt{margin-top:40px}
.sf p{font-size:13px;line-height:22px;color:#eee}
.sf-links{list-style:none;padding:0;margin:0}
.sf-contact{margin-top:28px}
.sf-links li{display:flex;gap:8px;align-items:flex-start;border-bottom:1px solid #333;padding:10px 0;line-height:1.5}
.sf-links li:first-child{padding-top:0}
.sf-links svg{width:14px;height:14px;flex:none;margin-top:4px;color:#ddd}
.sf-links a{color:#eee;transition:color .2s}.sf-links a:hover{color:#ca0168}
.sf-blog em{font-style:italic}
.sf-social{display:flex;gap:12px;margin-top:4px}
.sf-social a{color:#c90269;transition:color .3s,transform .3s}.sf-social a:hover{color:#fff;transform:translateY(-2px)}
.sf-social svg{width:28px;height:28px}
.sf-qc form{display:grid;gap:12px}
.sf-qc input,.sf-qc select,.sf-qc textarea{width:100%;font:inherit;font-size:13px;color:#fff;background:none;border:1px solid #333;border-radius:4px;padding:8px 12px}
.sf-qc select option{color:#000}
.sf-qc ::placeholder{color:#9f9f9f}
.sf-lbl{font-size:13px;color:#eee;margin-bottom:-6px}
.sf-btn{justify-self:start;font:inherit;font-size:16px;font-weight:500;letter-spacing:1px;padding:8px 32px;border:0;color:#fff;cursor:pointer;background:linear-gradient(to right,#6932c9 0%,#ca0168 100%);transition:background .5s}
.sf-btn:hover{background:#ca0168}
.sf-bottom{border-top:1px solid #333;margin:0 clamp(20px,6vw,110px);padding:30px 0;font-size:12px;color:#c6036c;text-align:left;max-width:1200px}
@media(min-width:1421px){.sf-bottom{margin:0 auto}}
@media(max-width:1000px){.sf-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.sf-grid{grid-template-columns:1fr}}
