/* Shared frame for customer information. Customer HTML stays intact. */
.sp-info { padding: 24px 0 var(--sp-section); }
.sp-info-head { margin-bottom: 32px; }
.sp-info-head h1 { margin: 0; }
.sp-info-layout { display: grid; gap: 32px; align-items: start; }
.sp-info-layout > * { min-width: 0; }
.sp-service-nav { min-width: 0; }
.sp-service-nav h2 { font-size: var(--sp-fs-ui); font-weight: 600; margin: 0 0 12px; }
.sp-service-links { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 3px 3px 12px; margin: -3px -3px 0; scroll-snap-type: x proximity; }
.sp-service-links a { display: inline-flex; flex: none; align-items: center; gap: 12px; min-height: var(--sp-hit); padding: 10px 16px; border-radius: var(--sp-r-sm); background: var(--sp-surface); font-size: var(--sp-fs-ui); text-decoration: none; scroll-snap-align: start; }
.sp-service-links svg { display: none; width: 16px; height: 16px; flex: none; }
body.sp .sp-service-links a:hover { background: var(--sp-surface-2); }
body.sp .sp-service-links a[aria-current="page"] { color: var(--sp-action); background: var(--sp-t1); box-shadow: inset 0 0 0 1px var(--sp-t2); font-weight: 600; }
.sp-info-article { max-width: 760px; }
.sp-prose { line-height: 1.7; overflow-wrap: anywhere; }
.sp-prose > :first-child { margin-top: 0; }
.sp-prose :is(h1, h2, h3, h4) { color: var(--sp-ink); font-weight: 600; letter-spacing: var(--sp-track-tight); line-height: 1.25; text-wrap: balance; scroll-margin-top: 24px; }
.sp-prose :is(h1, h2) { font-size: var(--sp-fs-h3); margin: 36px 0 14px; }
.sp-prose :is(h3, h4) { font-size: var(--sp-fs-lg); margin: 28px 0 12px; }
.sp-prose p { margin: 0 0 16px; }
.sp-prose :is(ul, ol) { padding-left: 22px; margin: 0 0 20px; }
.sp-prose .sp-prows { padding-left: 0; margin: 12px 0 20px; list-style: none; }
.sp-prose .sp-prows li { margin-bottom: 0; padding-left: 0; }
.sp-prose details { margin: 0 0 12px; }
.sp-prose summary { cursor: pointer; font-weight: 600; }
.sp-prose li { margin-bottom: 8px; padding-left: 3px; }
body.sp .sp-prose a:not(.sp-btn) { color: var(--sp-action); text-decoration: underline; text-decoration-color: var(--sp-t2); text-underline-offset: 3px; }
body.sp .sp-prose a:not(.sp-btn):hover { text-decoration-color: currentColor; }
.sp-prose :is(img, iframe, video) { max-width: 100%; }
.sp-prose iframe { aspect-ratio: 16 / 9; height: auto; width: 100%; }
.sp-prose img { height: auto; }
.sp-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 24px 0; font-size: var(--sp-fs-ui); }
.sp-prose :is(td, th) { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sp-line); min-width: 120px; }
.sp-prose th { background: var(--sp-surface); font-weight: 600; }
.sp-prose blockquote { padding: 20px 24px; margin: 24px 0; background: var(--sp-surface); border-radius: var(--sp-r-sm); }
.sp-prose hr { border: 0; border-top: 1px solid var(--sp-line); margin: 32px 0; }
.sp-prose pre { max-width: 100%; overflow-x: auto; }
.sp-prose .reseller-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 20px; }
.sp-prose .reseller { padding: 20px; background: var(--sp-paper); border: 1px solid var(--sp-line); border-radius: var(--sp-r-sm); }
.sp-prose .reseller h3 { margin: 0 0 10px; font-size: 1rem; }
.sp-prose .reseller address { margin-bottom: 10px; font-style: normal; font-size: .9rem; line-height: 1.6; }
.sp-prose .reseller p { margin: 0; font-size: .9rem; line-height: 1.8; }
@media (min-width: 900px) {
    .sp-info-head { margin-left: 284px; }
    .sp-info-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 44px; }
    .sp-service-nav { position: sticky; top: 24px; }
    .sp-service-links { flex-direction: column; overflow: visible; padding-bottom: 0; gap: 4px; }
    .sp-service-links a { justify-content: space-between; background: transparent; }
    .sp-service-links svg { display: block; }
}
@media (max-width: 559px) {
    .sp-info-head { margin-bottom: 24px; }
    .sp-info-layout { gap: 20px; }
}