/* Support page (support.html) in the Hairline look (2026-09-15).
   Loaded after css/hairline.css. Every rule is scoped to body.hl-site.pg-support.
   Sections: the introduction (portrait on a hairline ring, title, lede, the
   white pill and a text link), the contact routes as a strip-like band
   (light title, quiet note, a text link on one shared baseline), and the
   answers in the textmaker "Fair questions" layout (sticky head on the left,
   question rows on hairlines on the right). */

/* ---------- introduction ---------- */
.hl-site.pg-support .sp-hero { padding-bottom: 0; }
.hl-site.pg-support .sp-logo {
  width: 92px;
  height: 92px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}
.hl-site.pg-support .sp-hero h1 { margin-top: 26px; }
.hl-site.pg-support .sp-hero .lead {
  margin: 20px auto 0;
  max-width: 52ch;
  font-size: 19px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--hl-lede);
}
.hl-site.pg-support .sp-hero .hero-cta { margin-top: 34px; }

/* ---------- contact routes: a strip-like band ---------- */
.hl-site.pg-support .sp-contact { padding-top: clamp(96px, 11vw, 160px); padding-bottom: clamp(88px, 10vw, 144px); }
.hl-site.pg-support .sp-contact .hl-head h2 { margin: 0; }
.hl-site.pg-support .sp-routes { gap: 0; margin-top: 0; }
.hl-site.pg-support .sp-routes > .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 26px 28px;
  border-top: 0;
  opacity: 1;
}
.hl-site.pg-support .sp-routes > .card:first-child { padding-left: 0; }
/* the channel name reads like the strip's light numerals */
.hl-site.pg-support .sp-routes h3 {
  margin: 0;
  font: 600 clamp(26px, 2.5vw, 32px)/1.1 "Space Grotesk", sans-serif;
  letter-spacing: -0.03em;
  background: var(--hl-num);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hl-site.pg-support .sp-routes .sp-glyph { display: none; }
.hl-site.pg-support .sp-routes .hl-note {
  margin-top: 14px;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--hl-soft);
}
/* the actions share one baseline along the bottom of the band */
.hl-site.pg-support .sp-routes .sp-act { margin-top: auto; padding-top: 18px; font-size: 15px; }
.hl-site.pg-support .sp-routes .sp-act .hl-link { margin: 0 0 -12px -2px; }
.hl-site.pg-support .sp-routes .sp-act .hl-label { padding: 12px 0 0; }
/* the coming-soon route stays quiet */
.hl-site.pg-support .sp-routes > .card.soon h3 { background: var(--hl-num-sm); -webkit-background-clip: text; background-clip: text; opacity: 0.7; }
.hl-site.pg-support .sp-routes > .card.soon .hl-label { color: var(--hl-soft); }

/* ---------- answers: the textmaker "Fair questions" layout ---------- */
.hl-site.pg-support .sp-faq { padding-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(88px, 10vw, 144px); }
.hl-site.pg-support .sp-faq .faq-head h2 { margin: 0; max-width: 12ch; }
.hl-site.pg-support .sp-qa details {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.hl-site.pg-support .sp-qa details:last-child { border-bottom: 1px solid var(--line); }
.hl-site.pg-support .sp-qa details > summary {
  font-size: 16px;
  line-height: 1.45;
  color: #fff;
  cursor: pointer;
}
.hl-site.pg-support .sp-qa details > summary::after { font-weight: 400; color: var(--hl-ice); }
.hl-site.pg-support .sp-qa details > p {
  margin-top: 10px;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--hl-lede);
}
.hl-site.pg-support .sp-qa details > p a { text-decoration: underline; text-decoration-thickness: 1px; }

/* ---------- narrower screens (the band keeps the hairline.css column rhythm) ---------- */
@media (max-width: 1100px) {
  .hl-site.pg-support .sp-routes > .card { padding: 26px 20px 24px; }
  .hl-site.pg-support .sp-routes > .card:first-child { padding-left: 0; }
}
@media (max-width: 820px) {
  .hl-site.pg-support .sp-hero .lead { font-size: 17px; }
  .hl-site.pg-support .sp-contact { padding-top: 88px; padding-bottom: 72px; }
  .hl-site.pg-support .sp-faq { padding-top: 40px; padding-bottom: 72px; }
  .hl-site.pg-support .sp-routes > .card { padding: 22px 16px 20px; }
  .hl-site.pg-support .sp-routes > .card:nth-child(2n+1) { padding-left: 0; }
  .hl-site.pg-support .sp-routes > .card:nth-child(n+3) { border-top: 1px solid var(--hl-rule); }
  .hl-site.pg-support .sp-faq .faq-head h2 { max-width: 20ch; }
  .hl-site.pg-support .sp-faq .faq-grid { gap: 32px; }
}
/* style.css forces every section to 84px on phones; this page sets its own rhythm */
@media (max-width: 640px) {
  .hl-site.pg-support main > .sp-hero { padding-top: 58px !important; padding-bottom: 0 !important; }
  .hl-site.pg-support main > .sp-contact { padding-top: 80px !important; padding-bottom: 64px !important; }
  .hl-site.pg-support main > .sp-faq { padding-top: 32px !important; padding-bottom: 72px !important; }
  .hl-site.pg-support .sp-logo { width: 80px; height: 80px; }
}
@media (max-width: 480px) {
  .hl-site.pg-support .sp-routes > .card { padding: 20px 0 18px; }
  .hl-site.pg-support .sp-routes > .card + .card { border-top: 1px solid var(--hl-rule); }
  .hl-site.pg-support .sp-routes .sp-act { padding-top: 10px; }
  .hl-site.pg-support .sp-qa details > p { font-size: 15px; }
}

@media (forced-colors: active) {
  .hl-site.pg-support .sp-routes h3 { forced-color-adjust: none; background: none; color: CanvasText; }
}