/* Get Support. On theme.css's tokens and v3.css's pieces. */
body:has(.sup) { background:var(--v3-page, #f4f6f8) }
.sup { padding-bottom:48px }
.sup > .wrap + .wrap, .sup > .wrap + .sup__form, .sup__form + .wrap { margin-top:24px }
.sup__open { padding-top:28px }
.sup__open h1 { font-size:clamp(1.9rem, 3.2vw, 2.7rem); margin:0 0 8px }
.sup__lede { color:var(--muted); max-width:62ch; margin:0 }
.sup__h2 { font-size:clamp(1.4rem, 2.2vw, 1.9rem); margin:4px 0 16px }
.sup__ways { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin-top:20px }
.sup__way { background:#fff; border:1px solid var(--hair); border-radius:var(--v3-r, 14px); padding:16px 18px; color:var(--navy); display:flex; flex-direction:column; gap:2px }
.sup__way b { font-size:1.15rem }
.sup__way small { color:var(--muted) }
.sup__way--call { background:var(--blue); border-color:var(--blue); color:#fff }
.sup__way--call .v3eyebrow, .sup__way--call small { color:#fff; opacity:.92 }
.sup__way--call:hover { color:#fff; background:var(--blue-dark) }
.sup__way--msg { border:2px solid var(--blue) }
.sup__picks { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px }
.sup__pick { border:1px solid var(--hair); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:2px; color:var(--navy) }
.sup__pick:hover { border-color:var(--blue) }
.sup__pick small { color:var(--muted) }
.sup__pick span { color:var(--blue); font-weight:700; font-size:.9rem; margin-top:4px }
.sup__form .ask { background:#fff; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair) }
.sup__side { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; align-items:start }
.sup__next, .sup__other, .sup__urgent { border-radius:var(--v3-r, 14px); padding:18px }
.sup__next { background:#fff; border:1px solid var(--hair) }
.sup__next ol { margin:10px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:8px; font-size:.92rem }
.sup__other { background:var(--navy-deep); color:#fff }
.sup__other a, .sup__other p { color:#fff }
.sup__phone { display:block; font-size:1.3rem; font-weight:800; margin-top:6px }
.sup__other small { opacity:.85 }
.sup__other p { margin:10px 0; font-size:.92rem }
.sup__tags { display:flex; flex-wrap:wrap; gap:8px }
.sup__tags a { border:1px solid rgba(255,255,255,.5); border-radius:99px; padding:4px 12px; font-size:.84rem }
.sup__urgent { background:#fff8e6; border:1px solid #f2d58f; font-size:.92rem }
.sup__faq-head { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap }
.sup__search input { border:1px solid var(--hair); border-radius:8px; padding:10px 12px; min-width:260px; min-height:44px }
.sup__faq .faq { padding:0; max-width:none }
.sup__faq .faq summary { font-size:1.05rem; padding:14px 18px; justify-content:flex-start }
.sup__faq .faq summary::after { margin-left:auto }
.sup__cat { flex:none; width:150px; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.sup__faq .faq p { font-size:1rem; padding:0 18px 14px 186px; margin-top:0 }
.sup__none, .sup__more { margin:12px 0 0 }
.sup__cards { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px }
.sup__cards a { background:#fff; border:1px solid var(--hair); border-radius:var(--v3-r, 14px); padding:16px; color:var(--navy); display:flex; flex-direction:column; gap:2px }
.sup__cards a:hover { border-color:var(--blue) }
.sup__cards small { color:var(--muted) }
.sup__hint { background:var(--sky); border:1px solid var(--sky-line); border-radius:8px; padding:8px 12px; font-size:.9rem; grid-column:1 / -1 }

@media (max-width:1100px) {
  .sup__picks { grid-template-columns:repeat(3, minmax(0, 1fr)) }
  .sup__side, .sup__cards { grid-template-columns:repeat(2, minmax(0, 1fr)) }
}
@media (max-width:700px) {
  .sup__ways, .sup__side, .sup__cards { grid-template-columns:minmax(0, 1fr) }
  .sup__picks { grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .sup__search, .sup__search input { width:100%; min-width:0 }
  .sup__faq .v3tabs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none }
  .sup__faq .faq summary { flex-wrap:wrap; gap:4px }
  .sup__cat { width:100% }
  .sup__faq .faq p { padding-left:18px }
}