/* SpecHub Support (stage 13): orange on white, square corners, no side stripes, no black blocks */
.sup{max-width:var(--container,1440px);margin:0 auto;padding:30px 24px 72px}
.sup .k-head{margin-bottom:22px}
.sup-h1{font-size:clamp(26px,3vw,36px)}
.sup-meta{font-size:14px;color:#6B6463;margin:6px 0 0}
.sup-ok,.sup-err{border:1px solid #E9E2D9;background:#FAF8F5;padding:14px 18px;margin:0 0 22px;font-size:15px;line-height:1.55;color:#211D22}
.sup-err{border-color:#F3C3AC;background:#FDF1EA}
.sup-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px}
.sup-sec-h h2,.sup-ask h2{font-size:20px;font-weight:700;color:#211D22;margin:0}
.sup-sec-h h2 span{font-size:14px;font-weight:600;color:#6B6463;margin-left:8px}
.sup-yours{margin:0 0 34px}

/* rows: one request */
.sup-rows{display:flex;flex-direction:column;border:1px solid #E9E2D9;background:#fff}
.sup-row{display:flex;align-items:center;gap:14px;padding:14px 18px;text-decoration:none;color:#211D22;border-top:1px solid #F0EAE2;min-height:56px}
.sup-row:first-child{border-top:0}
.sup-row:hover{background:#FAF8F5}.sup-row:hover b{color:#D9561F}
.sup-row:focus-visible{outline:2px solid #F06C38;outline-offset:-2px}
.sup-row__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sup-row__t b{font-size:15.5px;font-weight:700}
.sup-row__t small{font-size:13px;color:#6B6463}
.sup-row__l{font-size:13.5px;color:#4A4446;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sup-row.is-new b{color:#D9561F}
.sup-new{font-size:12.5px;font-weight:700;color:#D9561F;white-space:nowrap}
.sup-none{padding:18px;margin:0;font-size:15px;color:#4A4446}

/* status */
.sup-st{display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;padding:4px 11px;white-space:nowrap;justify-content:center}
.sup-st--new{background:#F5EFE8;color:#211D22}
.sup-st--open{background:#F5EFE8;color:#211D22}
.sup-st--answered{background:#FDE9DF;color:#B8461A}
.sup-st--closed{background:#F2EFEB;color:#6B6463}

/* the home: the form and the side */
.sup-home{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:36px;align-items:start}
.sup-ask{border:1px solid #E9E2D9;background:#fff;padding:24px 26px 28px}
.sup-ask h2{margin-bottom:16px}
.sup-lab{display:block;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#211D22;margin:0 0 10px;padding:0}
.sup-kinds{border:0;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.sup-kind{position:relative;display:block;cursor:pointer}
.sup-kind input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sup-kind span{display:flex;flex-direction:column;gap:3px;height:100%;padding:12px 14px;border:1px solid #E4DDD3;background:#fff;min-height:64px}
.sup-kind b{font-size:14.5px;font-weight:700;color:#211D22}
.sup-kind small{font-size:12.5px;line-height:1.4;color:#6B6463}
.sup-kind:hover span{border-color:#C9BFB3}
.sup-kind input:checked+span{border-color:#F06C38;box-shadow:inset 0 0 0 1px #F06C38;background:#FFF8F4}
.sup-kind input:focus-visible+span{outline:2px solid #F06C38;outline-offset:2px}
.sup-f{display:block;margin:0 0 14px}
.sup-f>span{display:block;font-size:14px;font-weight:600;color:#211D22;margin:0 0 6px}
.sup-f em{font-style:normal;font-weight:400;color:#6B6463}
.sup-f input,.sup-f select,.sup-f textarea,.sup-reply textarea{display:block;width:100%;box-sizing:border-box;min-height:46px;padding:11px 13px;border:1px solid #D8CFC4;background:#fff;font:15px/1.45 inherit;font-family:inherit;color:#211D22}
.sup-f textarea,.sup-reply textarea{min-height:130px;resize:vertical}
.sup-f input:focus,.sup-f select:focus,.sup-f textarea:focus,.sup-reply textarea:focus{outline:2px solid #F06C38;outline-offset:-1px;border-color:#F06C38}
.sup-guest{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.sup-note{font-size:13.5px;color:#6B6463;margin:2px 0 16px}
.sup-aside{display:flex;flex-direction:column;gap:16px}
.sup-box{border:1px solid #E9E2D9;background:#FAF8F5;padding:18px 20px}
.sup-box__h{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#211D22;margin:0 0 12px}
.sup-how{margin:0;padding:0 0 0 20px;font-size:14px;line-height:1.55;color:#4A4446}.sup-how li{margin:0 0 8px}.sup-how b{color:#211D22}
.sup-person{display:flex;flex-direction:column;gap:2px;margin:0 0 12px;font-size:14px}.sup-person span{color:#6B6463;font-size:13.5px}
.sup-quick{list-style:none;margin:0;padding:0;font-size:14.5px}.sup-quick li{padding:6px 0;border-top:1px solid #EDE6DD}.sup-quick li:first-child{border-top:0}

/* one request */
.sup-one{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start}
.sup-track{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0 0 26px;padding:0;counter-reset:s}
.sup-track li{position:relative;display:flex;flex-direction:column;gap:8px;font-size:13.5px;font-weight:600;color:#6B6463;padding-top:0}
.sup-track li i{display:block;height:4px;background:#EDE6DD}
.sup-track li.is-done{color:#4A4446}.sup-track li.is-done i{background:#F7B596}
.sup-track li.is-now{color:#211D22}.sup-track li.is-now i{background:#F06C38}
.sup-track li span{padding-right:8px}
.sup-thread{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.sup-msg{border:1px solid #E9E2D9;background:#fff;padding:14px 18px}
.sup-msg--dcp{background:#FFF8F4;border-color:#F3D2C1}
.sup-msg__h{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13.5px;margin:0 0 8px}
.sup-msg__h b{color:#211D22}.sup-msg--dcp .sup-msg__h b{color:#B8461A}
.sup-msg__h time{color:#6B6463}
.sup-msg__b{font-size:15px;line-height:1.6;color:#211D22;overflow-wrap:anywhere}
.sup-msg__a{margin-top:10px;font-size:13.5px;font-weight:600;color:#4A4446}
.sup-sys{font-size:13px;color:#6B6463;text-align:center;padding:2px 0}.sup-sys time{margin-left:6px}
.sup-reply{margin-top:22px;border-top:1px solid #E9E2D9;padding-top:18px}
.sup-reply__f{display:flex;align-items:center;gap:14px;margin-top:10px}
.sup-saved{font-size:14px;color:#4A4446}
.sup-dl{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;margin:0 0 16px;font-size:14px}.sup-dl dt{color:#6B6463}.sup-dl dd{margin:0;color:#211D22;font-weight:600}
.sup-side-l{margin:12px 0 0;font-size:14.5px}

/* the list page */
.sup-listbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.sup-tabs{display:flex;flex-wrap:wrap;gap:0}
.sup-tabs a{padding:10px 16px;font-size:14px;font-weight:600;color:#4A4446;text-decoration:none;border:1px solid #E4DDD3;background:#fff;min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px}
.sup-tabs a+a{border-left:0}
.sup-tabs a span{color:#6B6463;font-weight:600}
.sup-tabs a.on{color:#211D22;box-shadow:inset 0 -2px 0 #F06C38}

@media(max-width:980px){.sup-home,.sup-one{grid-template-columns:1fr}.sup-aside{order:2}}
@media(max-width:640px){
  .sup{padding:22px 16px 56px}
  .sup-ask{padding:18px 16px 22px}
  .sup-kinds{grid-template-columns:1fr 1fr}
  .sup-guest{grid-template-columns:1fr}
  .sup-row{flex-wrap:wrap;gap:8px 12px}.sup-row__t{flex-basis:100%}.sup-row__l{white-space:normal}
  .sup-track li{font-size:12px}
}

/* the admin side */
.sup-msg--note{background:#FAF8F5;border-style:dashed}
.sup-msg--note .sup-msg__h b{color:#4A4446}
.sua-btns{flex-wrap:wrap}
.sua-f{display:flex;align-items:flex-end;gap:8px;margin:0 0 12px}
.sua-f label{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;font-size:13px;color:#6B6463}
.sua-f select{min-height:38px;padding:6px 8px;border:1px solid #D8CFC4;background:#fff;font:inherit;font-size:14px;color:#211D22}
.sua-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sua-filter select,.sua-filter input[type=search]{min-height:38px;padding:6px 10px;border:1px solid #D8CFC4;background:#fff;font:inherit;font-size:14px;color:#211D22}
.sua-filter input[type=search]{width:240px}
.sua-mine{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:#211D22}

/* stage 13b: the Support home that gives people the confidence to ask */
.sup-hero2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:36px;align-items:end;background:#FAF8F5;border:1px solid #E9E2D9;padding:28px 30px;margin:0 0 30px}
.sup-hero2 .k-h1{font-size:clamp(28px,3.4vw,42px);line-height:1.12;margin:6px 0 12px}
.sup-hero2 .k-lead{margin:0 0 20px;max-width:640px}
.sup-hero2__cta{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
.sup-hero2__g{font-size:14.5px}
.sup-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#E9E2D9;border:1px solid #E9E2D9;margin:0}
.sup-facts div{background:#fff;padding:14px 16px}
.sup-facts div:last-child{grid-column:1/-1}
.sup-facts dt{font-size:30px;font-weight:800;letter-spacing:-.02em;color:#211D22;line-height:1}
.sup-facts dd{margin:6px 0 0;font-size:13.5px;line-height:1.4;color:#4A4446}
.sup-h2{font-size:22px;font-weight:700;color:#211D22;margin:0 0 6px;letter-spacing:-.01em}
.sup-sub{font-size:15px;color:#4A4446;margin:0 0 16px;max-width:760px}
.sup-help{margin:0 0 34px}
.sup-help__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.sup-help__c{display:flex;flex-direction:column;gap:6px;border:1px solid #E9E2D9;background:#fff;padding:16px 18px;text-decoration:none;color:#211D22;min-height:130px}
.sup-help__c b{font-size:16px}.sup-help__c span{font-size:14px;line-height:1.5;color:#4A4446;flex:1}
.sup-help__c em{font-style:normal;font-size:13.5px;font-weight:700;color:#D9561F}
.sup-help__c:hover{border-color:#F06C38}.sup-help__c:focus-visible{outline:2px solid #F06C38;outline-offset:2px}
.sup-team{margin:0 0 34px}
.sup-team__r{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#D9561F;margin:18px 0 8px}
.sup-team__g{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
.sup-p{display:flex;gap:16px;border:1px solid #E9E2D9;background:#fff;padding:18px}
.sup-face{display:block;flex:none;object-fit:cover;background:#F5EFE8}
.sup-face--i{display:inline-flex;align-items:center;justify-content:center;background:#F06C38;color:#fff;font-weight:800;font-size:22px;letter-spacing:.02em}
.sup-p__t{display:flex;flex-direction:column;gap:3px;min-width:0}
.sup-p__t>b{font-size:17px;color:#211D22}.sup-p__t>span{font-size:14px;color:#4A4446}
.sup-p__t p{font-size:14px;line-height:1.5;color:#4A4446;margin:6px 0 0}
.sup-p__x{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.sup-p__x i{font-style:normal;font-size:12px;font-weight:600;color:#3A3537;border:1px solid #E4DDD3;padding:3px 8px}
.sup-p__a{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:12px;font-size:14px}
.sup-join{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px;align-items:center;border:1px solid #F3D2C1;background:#FFF8F4;padding:24px 26px;margin:0 0 30px}
.sup-join ul{margin:10px 0 0;padding:0 0 0 18px;font-size:15px;line-height:1.6;color:#3A3537}.sup-join li{margin:0 0 4px}
.sup-join__b{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.sup-join__b span{font-size:13.5px;color:#6B6463}
.sup-sem{border:1px solid #E9E2D9;background:#FAF8F5;margin:0 0 22px;padding:16px 18px}
.sup-sem[hidden]{display:none}
.sup-sem legend{float:left;width:100%}.sup-sem legend em{font-style:normal;font-weight:500;text-transform:none;letter-spacing:0;color:#6B6463}
.sup-sem__l{clear:both;max-height:340px;overflow:auto;background:#fff;border:1px solid #E9E2D9;padding:4px 12px;margin:0 0 14px}
.sup-sem__d{font-size:12.5px;font-weight:700;color:#6B6463;margin:10px 0 2px}
.sup-sem__s{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-top:1px solid #F0EAE2;cursor:pointer;font-size:14.5px;font-weight:600;color:#211D22;line-height:1.35}
.sup-sem__s input{margin-top:3px;accent-color:#F06C38;width:18px;height:18px;flex:none}
.sup-sem__s small{display:block;font-size:12.5px;font-weight:400;color:#6B6463}
.sup-askto{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-6px 0 16px;font-size:14px;color:#4A4446}
.sua-photo{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
@media(max-width:980px){.sup-hero2,.sup-join{grid-template-columns:1fr}.sup-help__g{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.sup-hero2{padding:20px 16px}.sup-help__g{grid-template-columns:1fr}.sup-team__g{grid-template-columns:1fr}.sup-p{padding:14px}.sup-join{padding:18px 16px}}
