/* Support page (Figma web 2026-10 Company, Support). Light only. */
.ls .sp { width: min(100% - (var(--ls-gutter) * 2), var(--ls-max)); margin-inline: auto; padding: 72px 0 96px; }
.ls .sp-row { display: flex; align-items: flex-start; gap: 96px; }
.ls .sp-intro { flex: none; width: 400px; display: flex; flex-direction: column; gap: 20px; }
.ls .sp-title { max-width: none; margin: 0; color: var(--ls-ink); font-size: 56px; font-weight: 800; line-height: 56px; letter-spacing: -0.045em; }
.ls .sp-lead { margin: 0; color: var(--ls-ink); font-size: 19px; font-weight: 500; line-height: 29px; }
.ls .sp-body { margin: 0; color: var(--ls-soft); font-size: 16px; font-weight: 500; line-height: 26px; }
.ls .sp-doodle { display: block; margin-top: 40px; }
.ls .sp-doodle img { display: block; width: 100%; height: 262px; object-fit: contain; object-position: center; mix-blend-mode: multiply; }
.ls .sp-main { flex: 1 1 0; min-width: 0; max-width: 624px; display: flex; flex-direction: column; gap: 56px; }
.ls .sp-sec { display: flex; flex-direction: column; gap: 14px; }
.ls .sp-sec h2 { margin: 0; color: var(--ls-ink); font-size: 32px; font-weight: 800; line-height: 38px; letter-spacing: -0.03em; }
.ls .sp-sec p { margin: 0; color: var(--ls-soft); font-size: 16px; font-weight: 500; line-height: 26px; }
.ls .sp-sec ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.ls .sp-sec li { position: relative; margin: 0; padding-left: 18px; color: var(--ls-soft); font-size: 16px; font-weight: 500; line-height: 26px; }
.ls .sp-sec li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--ls-ink); }
.ls .sp a { color: var(--ls-accent-text); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.ls .sp a:hover { color: var(--ls-ink); }
.ls .sp a:focus-visible, .ls .sp summary:focus-visible { outline: 3px solid var(--ls-ink); outline-offset: 2px; }
/* the one warning on the page */
.ls .sp-sec ul + p:last-child { padding: 22px; border: 1.5px solid var(--ls-ink); border-radius: 16px; background: var(--ls-paper); color: var(--ls-ink); font-weight: 600; line-height: 25px; }


.ls .sp-end { display: flex; flex-direction: column; gap: 6px; padding-top: 28px; border-top: 1px solid var(--ls-line-2); }
.ls .sp-contact { margin: 0; color: var(--ls-ink); font-size: 18px; font-weight: 700; line-height: 1.4; }
.ls .sp-contact a { font-weight: 700; }
.ls .sp-cross a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }

@media (max-width: 1100px) { .ls .sp-row { gap: 56px; } .ls .sp-intro { width: 340px; } }
@media (max-width: 900px) {
  .ls .sp { padding: 32px 0 64px; }
  .ls .sp-row { flex-direction: column; gap: 32px; }
  .ls .sp-intro { width: 100%; gap: 14px; }
  .ls .sp-title { font-size: 40px; line-height: 41px; }
  .ls .sp-doodle { display: none; }
  .ls .sp-main { max-width: none; width: 100%; }
  .ls .sp-sec h2 { font-size: 28px; line-height: 34px; }
  .ls .sp-lead { font-size: 17px; line-height: 26px; }
  .ls .sp-main { gap: 48px; }
  .ls .sp-sec ul + p:last-child { padding: 18px 20px; }
}

/* Left column follows the reader while the long right column scrolls, only where it fits. */
@media (min-width: 901px) and (min-height: 760px) {
  .ls .sp-intro { position: sticky; top: 100px; align-self: flex-start; }
}