/* Public information pages extend the existing ShareHub /support layout. */
.public-site {
    --public-ink: #1a1d29;
    --public-muted: #526071;
    --public-link: #205cba;
    color: var(--public-ink);
    background: #f7f9fc;
}
.public-site a:not(.btn) { color: var(--public-link); text-underline-offset: .2em; }
.public-site .btn-primary { background-color: var(--public-link); border-color: var(--public-link); }
.public-site .btn-primary:hover, .public-site .btn-primary:focus-visible { background-color: #184a99; border-color: #184a99; }
.public-site .btn-outline-primary { color: var(--public-link); border-color: var(--public-link); }
.public-site .btn-outline-primary:hover { color: #fff; background-color: var(--public-link); }
.public-site a:focus-visible, .public-site summary:focus-visible {
    outline: 3px solid var(--public-link);
    outline-offset: 4px;
}
.public-site ::selection { background: #dbeafe; color: var(--public-ink); }
.public-site .public-header { background: #fff; }
.public-site .public-header [aria-current="page"] { text-decoration: underline !important; font-weight: 600; }
.public-site .public-main { max-width: 1120px; }
.public-site .public-breadcrumb { color: var(--public-muted); font-size: .875rem; margin-bottom: 2rem; }
.public-site .public-intro { max-width: 74ch; margin-bottom: 3rem; }
.public-site .public-intro h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.15; letter-spacing: -.025em; margin-bottom: 1.25rem; }
.public-site .public-intro .lead { color: var(--public-muted); line-height: 1.7; }
.public-site .public-sections { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 4rem; }
.public-site .public-sections section { border-top: 1px solid #d4dce7; padding-top: 1.5rem; min-width: 0; scroll-margin-top: 2rem; }
.public-site .public-sections h2 { font-size: 1.4rem; margin-bottom: 1rem; }
.public-site .public-sections p, .public-site .public-sections li { max-width: 74ch; line-height: 1.75; }
.public-site .public-sections li + li { margin-top: .5rem; }
.public-site .public-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2rem; }
.public-site .public-next { border-top: 1px solid #d4dce7; padding-top: 2rem; margin-top: 3rem; }
.public-site .public-next p { max-width: 74ch; }
.public-site .public-footer nav { max-width: 74ch; }
.public-site .public-example { max-width: 74ch; margin-top: 1.5rem; }
.public-site .public-example h3 { font-size: 1.05rem; margin-bottom: .75rem; }
.public-site .public-preview { margin: 3rem 0; }
.public-site .public-preview img { display: block; max-width: 100%; height: auto; border-radius: 12px; border: 1px solid #d4dce7; }
.public-site .public-preview figcaption { max-width: 74ch; margin-top: .75rem; color: var(--public-muted); font-size: .875rem; line-height: 1.6; }
.public-site .text-muted { color: var(--public-muted) !important; }
@media (max-width: 767px) {
    .public-site .public-sections { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .public-site .public-intro { margin-bottom: 2rem; }
    .public-site .public-header nav { align-items: flex-start !important; }
    .public-site .public-menu { width: 100%; gap: .75rem 1.25rem !important; }
    .public-site .public-menu a { min-height: 44px; display: inline-flex; align-items: center; }
    .public-site .public-actions .btn { min-height: 44px; display: inline-flex; align-items: center; }
}