/* Shared field for tool and legal pages on the site layout. */
:root {
    --color-electric-blue: #FF5B1F;
    --color-electric-blue-light: #FF7A4A;
    --text-main: #0B0E13;
    --text-muted: #5B626C;
    --text-on-dark: #F5F4F0;
    --bg-body: #F5F4F0;
    --border-subtle: #D9DBD8;
    --color-success: #16A34A;
    --color-error: #DC2626;
    --color-warning: #D97706;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-button: none;
    --shadow-button-hover: none;
    --t-fast: 150ms;
    --t-med: 200ms;
    --ease-standard: ease;
    --container-max: 1120px;
    --container-padding-mobile: 20px;
    --container-padding-tablet: 32px;
    --container-padding-desktop: 40px;
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-2xl: 64px;
    --spacing-3xl: 96px;
}

.site-page {
    background: var(--paper);
    color: var(--ink);
    padding-bottom: 4rem;
}

.site-page p { margin: 0 0 0.75rem; }
.site-page ul,
.site-page ol { margin: 0 0 0.75rem; padding-left: 1.25rem; list-style: revert; }
.site-page svg { display: inline-block; vertical-align: middle; max-width: 100%; }
.site-page img { display: block; max-width: 100%; }

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}

@media (min-width: 641px) {
    .container { padding: 0 var(--container-padding-tablet); }
}

@media (min-width: 1025px) {
    .container { padding: 0 var(--container-padding-desktop); }
}

.legal-section { padding: 3.5rem 0 1rem; }

.legal-content { max-width: 42rem; }

.legal-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
}

.legal-date {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

.legal-body { line-height: 1.7; }

.legal-intro { font-size: 1.05rem; margin-bottom: 2rem; }

.legal-section-title {
    font-size: 1.25rem;
    margin: 2rem 0 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--mist);
}

.legal-text { margin-bottom: 0.75rem; }

.legal-text a {
    color: var(--signal);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-todo {
    margin: 0.75rem 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--mist);
    border-left: 3px solid var(--signal);
    background: #fff;
    color: var(--ink);
    font-size: 0.95rem;
}

.seo-check-badge {
    display: inline-block;
    border: 1px solid #FF5B1F;
    color: #0B0E13;
    background: #fff;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}