/* Service pages (autoupdate and Fortinet subscriptions).
   Tokens copied from the search and partner sheets.
   Scoped so the rest of the public site keeps its current chrome.
   Dark values are set in night.css when that theme sheet is active. */

.service-page {
    --bg: #FFFFFF;
    --surface: #F4F4F5;
    --accent: #3390EC;
    --accent-hover: #2086EA;
    --text: #111827;
    --text-muted: #707579;
    --border: #E5E7EB;
    --danger: #E53935;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    margin: 0;
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.service-page *,
.service-page *::before,
.service-page *::after {
    box-sizing: border-box;
}

.service-page__main {
    min-width: 0;
}

.service-page__card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
}

.service-page__section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 0;
}

.service-page__title {
    margin: 0;
    color: var(--text);
    font-family: inherit;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
}

.service-page__card-title {
    margin: 0;
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.service-page__text {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.service-page__text a,
.service-page__prose a {
    color: var(--accent);
    text-decoration: none;
}

.service-page__text a:hover,
.service-page__prose a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Direct element children are spaced 16px apart. br stays untouched:
   the autoupdate translation uses <br><br> as its paragraph breaks. */
.service-page__prose > :not(br) {
    margin: 0 0 16px;
}

.service-page__prose > :not(br):last-child {
    margin-bottom: 0;
}

.service-page__prose h1,
.service-page__prose h2 {
    margin-left: 0;
    margin-right: 0;
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.service-page__prose h3 {
    margin-left: 0;
    margin-right: 0;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.service-page__prose p,
.service-page__prose li {
    color: var(--text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.service-page__prose p {
    margin-left: 0;
    margin-right: 0;
}

.service-page__prose ul {
    list-style: disc;
    padding-left: 1.25rem;
}

@media (min-width: 1024px) {
    .service-page {
        flex-direction: row;
        align-items: flex-start;
    }

    .service-page__aside {
        flex: 0 0 260px;
        width: 260px;
    }

    .service-page__main {
        flex: 1 1 auto;
    }

    .service-page--file > .service-page__main:nth-child(2) {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
    }

    .service-page--file > .service-page__main:nth-child(3) {
        flex: 1 1 0%;
        min-width: 0;
    }
}