/* Support portal (support*.html) — builds on site.css brand tokens. */
.sp{padding:120px 0 80px;min-height:70vh}
.sp .wrap{max-width:980px}
.sp h1{font-size:clamp(30px,4.4vw,46px);margin-bottom:10px}
.sp h2{font-size:22px;margin:34px 0 14px}
.sp .lead{color:var(--muted);font-size:16px;margin-bottom:22px}
.sp-hero{background:linear-gradient(135deg,#F0E8FF,#FFE6F2);border-radius:var(--r-card);padding:48px 32px;text-align:center;margin-bottom:34px}
.sp-search{position:relative;max-width:620px;margin:18px auto 0}
.sp-search input{width:100%;font:inherit;font-size:16px;padding:16px 22px;border-radius:999px;border:2px solid var(--border);background:#fff;outline:none}
.sp-search input:focus{border-color:var(--primary)}
.sp-results{max-width:620px;margin:10px auto 0;text-align:left}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sp-cat{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 10px;border:1.5px solid var(--border);border-radius:18px;background:#fff;font-weight:500;font-size:14px;text-align:center;cursor:pointer;transition:border-color .2s,transform .2s}
.sp-cat:hover{border-color:var(--primary);transform:translateY(-2px)}
.sp-cat .e{font-size:28px}
.sp-cat.sel{border-color:var(--primary);background:var(--fill)}
.sp-card{display:block;border:1.5px solid var(--border);border-radius:18px;padding:16px 18px;background:#fff;margin-bottom:10px;transition:border-color .2s}
a.sp-card:hover,.sp-card.click:hover{border-color:var(--primary);cursor:pointer}
.sp-card h3{font-size:16px;font-family:var(--body);font-weight:500;letter-spacing:0;margin-bottom:4px}
.sp-card p{color:var(--muted);font-size:14px}
.sp-card.unread h3{font-weight:700}
.sp-badge{display:inline-block;font-size:12px;font-weight:500;padding:3px 10px;border-radius:999px;background:var(--fill);color:var(--primary)}
.sp-badge.open{background:#FEF3C7;color:#92400E}.sp-badge.under_review{background:#DBEAFE;color:#1E40AF}
.sp-badge.pending_customer{background:#FFEDD5;color:#9A3412}.sp-badge.resolved{background:#DCFCE7;color:#166534}.sp-badge.closed{background:#E5E7EB;color:#374151}
.sp-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#EF4444;margin-left:6px;vertical-align:middle}
.sp-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 18px}
.sp-tab{font:inherit;font-size:14px;padding:8px 16px;border-radius:999px;border:1.5px solid var(--border);background:#fff;cursor:pointer}
.sp-tab.on{background:var(--primary);border-color:var(--primary);color:#fff}
.sp-banner{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:var(--navy);color:#fff;border-radius:22px;padding:20px 24px;margin:30px 0}
.sp-banner a{text-decoration:underline}
.sp-contact{background:var(--fill);border-radius:var(--r-card);padding:34px;text-align:center;margin-top:40px}
.sp-muted{color:var(--muted);font-size:14px}
.sp-err{color:#B91C1C;font-size:14px;margin-top:8px}
.sp-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sp-between{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.sp-form label{display:block;font-weight:500;font-size:14px;margin:14px 0 6px}
.sp-form input,.sp-form textarea{width:100%;font:inherit;font-size:15px;padding:13px 16px;border-radius:14px;border:1.5px solid var(--border);outline:none;background:#fff}
.sp-form input:focus,.sp-form textarea:focus{border-color:var(--primary)}
.sp-count{text-align:right;font-size:12px;color:var(--muted);margin-top:4px}
.sp-steps{height:6px;background:var(--fill);border-radius:999px;overflow:hidden;margin:6px 0 22px}
.sp-steps>div{height:100%;background:var(--primary);transition:width .3s}
.sp-choice{display:block;width:100%;text-align:left;font:inherit;font-size:15px;padding:14px 16px;border:1.5px solid var(--border);border-radius:14px;background:#fff;margin-bottom:8px;cursor:pointer}
.sp-choice.sel{border-color:var(--primary);background:var(--fill);font-weight:500}
.sp-choice small{display:block;color:var(--muted);font-size:13px}
.sp-nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
.sp-review{border:1.5px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:10px;background:#fff;white-space:pre-wrap}
.sp-review .h{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);font-weight:500;margin-bottom:4px}
.sp-review .h button{border:0;background:none;color:var(--primary);font:inherit;cursor:pointer}
.sp-thread{display:flex;flex-direction:column;gap:12px;padding:18px;background:#FAF8FF;border-radius:22px;min-height:200px;max-height:60vh;overflow-y:auto}
.sp-msg{max-width:78%}
.sp-msg .meta{font-size:12px;color:var(--muted);margin-bottom:3px}
.sp-msg .b{padding:11px 15px;border-radius:18px;white-space:pre-wrap;word-wrap:break-word;font-size:15px}
.sp-msg.me{align-self:flex-end;text-align:right}.sp-msg.me .b{background:var(--primary);color:#fff;border-bottom-right-radius:5px;text-align:left}
.sp-msg.them{align-self:flex-start}.sp-msg.them .b{background:#ECECF1;border-bottom-left-radius:5px}
.sp-reply{display:flex;gap:10px;align-items:flex-end;margin-top:12px}
.sp-reply textarea{flex:1;font:inherit;font-size:15px;padding:12px 14px;border-radius:16px;border:1.5px solid var(--border);resize:vertical;min-height:52px;outline:none}
.sp-article{font-size:16px;line-height:1.75;color:#3b2d55}
.sp-article h1,.sp-article h2,.sp-article h3{color:var(--navy);margin:22px 0 10px}
.sp-article ul,.sp-article ol{padding-left:22px;margin:8px 0 14px}
.sp-article p{margin:0 0 12px}
.sp-pager{display:flex;gap:8px;justify-content:center;margin-top:18px}
.sp-hide{display:none!important}
.btn[disabled]{opacity:.5;pointer-events:none}
@media(max-width:600px){.sp{padding-top:100px}.sp-hero{padding:34px 18px}.sp-msg{max-width:92%}}