/* ===========================================================
   YR Menu — bespoke marketing site design system
   No framework, no CDN fonts. System font stack + Boxicons
   (already self-hosted for the admin panel/customer menu).
   =========================================================== */

:root {
    --site-ink: #0f172a;
    --site-ink-soft: #334155;
    --site-muted: #64748b;
    --site-bg: #ffffff;
    --site-bg-soft: #f8f9fc;
    --site-border: #e7e9f0;
    --site-primary: #ff6b35;
    --site-primary-dark: #e5532a;
    --site-primary-soft: #fff1ea;
    --site-radius: 18px;
    --site-radius-sm: 12px;
    --site-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
    --site-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.14);
    --site-max: 1140px;
    --site-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ---------- Scroll-reveal ----------
   Visible by default (no-JS, crawlers, slow scripts all see real content).
   JS adds .pre-reveal itself right before observing, so the hidden state
   only ever exists once we know we can also bring it back. */

.pre-reveal {
    opacity: 0;
    transform: translateY(24px);
}

.reveal, .pre-reveal {
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.reveal.in-view, .pre-reveal.in-view { opacity: 1; transform: translateY(0); }

.reveal-stagger.in-view > * {
    animation: site-rise 600ms ease-out backwards;
}

.reveal-stagger.in-view > *:nth-child(1) { animation-delay: 0ms; }
.reveal-stagger.in-view > *:nth-child(2) { animation-delay: 80ms; }
.reveal-stagger.in-view > *:nth-child(3) { animation-delay: 160ms; }
.reveal-stagger.in-view > *:nth-child(4) { animation-delay: 240ms; }
.reveal-stagger.in-view > *:nth-child(5) { animation-delay: 320ms; }
.reveal-stagger.in-view > *:nth-child(6) { animation-delay: 400ms; }

@keyframes site-rise {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}

body {
    margin: 0;
    font-family: var(--site-font);
    color: var(--site-ink-soft);
    background: var(--site-bg);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; touch-action: manipulation; }

h1, h2, h3, h4 {
    margin: 0;
    color: var(--site-ink);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

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

/* ---------- Buttons ---------- */

.site-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    border: none;
    transition: transform 150ms ease-out, background 150ms ease-out, border-color 150ms ease-out;
    white-space: nowrap;
}

/* Press feedback applies to every button variant - buttons should feel
   responsive to the tap itself, not just to hover (which touch devices don't have). */
.site-btn:active { transform: scale(0.97); }

.site-btn-primary {
    background: var(--site-primary);
    color: #fff;
    box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3);
}

.site-btn-ghost {
    background: transparent;
    color: var(--site-ink);
}

.site-btn-dark {
    background: var(--site-ink);
    color: #fff;
}

.site-btn-outline {
    background: transparent;
    color: var(--site-ink);
    border: 1.5px solid var(--site-border);
}

/* Hover-only effects gated to real pointers - touch devices fire :hover on
   tap, which would otherwise leave a button looking "stuck" lifted/highlighted
   until the next tap elsewhere. */
@media (hover: hover) and (pointer: fine) {
    .site-btn-primary:hover { background: var(--site-primary-dark); transform: translateY(-2px); }
    .site-btn-ghost:hover { background: var(--site-bg-soft); }
    .site-btn-dark:hover { background: #1e293b; transform: translateY(-2px); }
    .site-btn-outline:hover { border-color: var(--site-ink); }
}

.site-btn-lg { padding: 16px 32px; font-size: 16px; }
.site-btn-block { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .site-btn { transition: none; }
}

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--site-border);
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
    gap: 24px;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 19px;
    color: var(--site-ink);
    flex-shrink: 0;
}

.site-logo-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--site-primary), var(--site-primary-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 32px;
    margin: 0 auto;
}

.site-nav a {
    font-weight: 500;
    font-size: 15px;
    color: var(--site-ink-soft);
    transition: color 150ms;
}

.site-nav a:hover { color: var(--site-ink); }

.site-header-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.site-lang-switch { position: relative; }

.site-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--site-border);
    background: #fff;
    font-size: 18px;
    color: var(--site-ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.site-icon-btn:hover { border-color: var(--site-ink); color: var(--site-ink); }

.site-lang-menu {
    position: absolute;
    top: 50px;
    right: 0;
    background: #fff;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    box-shadow: var(--site-shadow-lg);
    min-width: 160px;
    z-index: 60;
    display: none;
    overflow: hidden;
    padding: 6px;
}

.site-lang-menu.show { display: block; }

.site-lang-menu a {
    display: block;
    padding: 9px 12px;
    font-size: 14px;
    border-radius: 8px;
    color: var(--site-ink-soft);
}

.site-lang-menu a:hover { background: var(--site-bg-soft); }
.site-lang-menu a.active { color: var(--site-primary); font-weight: 600; background: var(--site-primary-soft); }

.site-nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--site-border);
    background: #fff;
    font-size: 20px;
    align-items: center;
    justify-content: center;
}

@media (max-width: 860px) {
    .site-nav { display: none; }
    .site-header-cta .site-btn-ghost { display: none; }
    .site-nav-toggle { display: flex; }
}

/* Mobile nav drawer */
.site-nav.show {
    display: flex;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 24px 24px;
    gap: 16px;
    border-bottom: 1px solid var(--site-border);
    box-shadow: var(--site-shadow);
}

/* ---------- Sections ---------- */

section { padding: 96px 0; }

@media (max-width: 720px) {
    section { padding: 56px 0; }
}

.site-section-soft { background: var(--site-bg-soft); }

.site-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--site-primary-soft);
    color: var(--site-primary-dark);
    font-weight: 700;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.site-section-head { max-width: 640px; margin: 0 0 56px; }
.site-section-head.center { margin: 0 auto 56px; text-align: center; }

.site-section-head h2 { font-size: 38px; margin-bottom: 14px; }
.site-section-head p { font-size: 17px; color: var(--site-muted); margin: 0; }

@media (max-width: 720px) {
    .site-section-head h2 { font-size: 28px; }
}

/* ---------- Hero ---------- */

.site-hero {
    padding: 36px 0 40px;
    position: relative;
    overflow: hidden;
}

.site-hero::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.12), transparent 70%);
    pointer-events: none;
    animation: site-blob-breathe 9s ease-in-out infinite;
}

.site-hero-copy {
    max-width: 720px;
    margin: 0 auto;
    padding-top: 28px;
    text-align: center;
}

@media (max-width: 960px) {
    .site-hero-copy { padding-top: 8px; }
}

/* Full-bleed - the showcase image spans the entire viewport width, breaking
   out of .site-container's max-width on purpose (a deliberately wider,
   more immersive hero than the rest of the contained page sections). */
.site-hero-art {
    width: 100%;
    margin-top: 32px;
}

/* Entrance animation - plays once on load (hero is above the fold, no
   scroll needed to see it, so this runs immediately rather than waiting
   on the IntersectionObserver used by .reveal elsewhere on the page). */
.site-hero-copy > * { opacity: 0; transform: translateY(18px); animation: site-rise 700ms ease-out forwards; }
.site-hero-copy > *:nth-child(1) { animation-delay: 40ms; }
.site-hero-copy > *:nth-child(2) { animation-delay: 120ms; }
.site-hero-copy > *:nth-child(3) { animation-delay: 200ms; }
.site-hero-copy > *:nth-child(4) { animation-delay: 280ms; }
.site-hero-copy > *:nth-child(5) { animation-delay: 360ms; }

.site-hero-art {
    opacity: 0;
    animation: site-hero-art-in 900ms ease-out 200ms forwards;
}

@keyframes site-hero-art-in {
    from { opacity: 0; transform: translateY(28px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes site-blob-breathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.12); opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
    .site-hero-copy > *, .site-hero-art { opacity: 1 !important; transform: none !important; animation: none !important; }
    .site-hero::before { animation: none !important; }
    .site-hero-phones { animation: none !important; }
}

.site-hero h1 {
    font-size: 56px;
    margin-bottom: 22px;
}

.site-hero h1 span { color: var(--site-primary); }

@media (max-width: 720px) {
    .site-hero h1 { font-size: 36px; }
}

.site-hero p.lead {
    font-size: 19px;
    color: var(--site-muted);
    margin: 0 auto 32px;
    max-width: 520px;
}

.site-hero-ctas { display: flex; justify-content: center; gap: 14px; margin-bottom: 28px; flex-wrap: wrap; }

.site-hero-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    color: var(--site-muted);
}

.site-hero-trust i { color: var(--site-primary); font-size: 18px; }

/* Hero template showcase - a pre-rendered multi-phone image (real bezels/
   shadows baked in), not a CSS-built frame. height:auto is required here -
   without it the browser was using the HTML height attribute as a fixed
   pixel value instead of scaling with width, stretching the image tall
   and pushing the whole page down with blank space. */
.site-hero-phones {
    width: 100%;
    height: auto;
    max-width: 1800px;
    margin: 0 auto;
    display: block;
    animation: site-phones-float 5s ease-in-out infinite;
}

@keyframes site-phones-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

/* ---------- How it works ---------- */

.site-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

@media (max-width: 820px) {
    .site-steps { grid-template-columns: 1fr; gap: 28px; }
}

.site-step { text-align: center; }

.site-step-num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--site-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 20px;
    margin: 0 auto 20px;
}

.site-step h4 { font-size: 19px; margin-bottom: 10px; }
.site-step p { color: var(--site-muted); margin: 0; font-size: 15px; }

/* ---------- Feature grid ---------- */

.site-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 960px) {
    .site-features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
    .site-features-grid { grid-template-columns: 1fr; }
}

.site-feature-card {
    background: #fff;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    padding: 28px;
    transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .site-feature-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--site-shadow);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-feature-card { transition: none; }
    .site-feature-card:hover { transform: none; }
}

.site-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--site-primary-soft);
    color: var(--site-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 18px;
}

.site-feature-card h4 { font-size: 18px; margin-bottom: 8px; }
.site-feature-card p { margin: 0; color: var(--site-muted); font-size: 15px; }

/* ---------- Live demo callout ---------- */

.site-demo-banner {
    background: var(--site-ink);
    border-radius: 28px;
    padding: 64px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
    color: #fff;
}

@media (max-width: 760px) {
    .site-demo-banner { grid-template-columns: 1fr; text-align: center; padding: 40px 28px; }
}

.site-demo-banner h2 { color: #fff; font-size: 32px; margin-bottom: 12px; }
.site-demo-banner p { color: #cbd5e1; font-size: 16px; margin: 0; max-width: 480px; }

@media (max-width: 760px) { .site-demo-banner p { margin: 0 auto; } }

/* ---------- Pricing ---------- */

.site-pricing-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    align-items: stretch;
}

@media (max-width: 1080px) {
    .site-pricing-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
    .site-pricing-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
}

.site-pricing-card {
    background: #fff;
    border: 1.5px solid var(--site-border);
    border-radius: var(--site-radius);
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
}

.site-pricing-card.featured {
    border-color: var(--site-primary);
    box-shadow: 0 12px 32px rgba(255, 107, 53, 0.18);
    position: relative;
}

.site-pricing-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--site-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 999px;
}

.site-pricing-card h4 { font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 14px; }

.site-pricing-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.site-pricing-price .amount { font-size: 34px; font-weight: 800; color: var(--site-ink); }
.site-pricing-price .period { font-size: 14px; color: var(--site-muted); }

.site-pricing-card .billed-note { font-size: 12px; color: var(--site-muted); margin: 0 0 20px; min-height: 16px; }

.site-pricing-list { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }

.site-pricing-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: var(--site-ink-soft);
    margin-bottom: 10px;
}

.site-pricing-list i { color: var(--site-primary); font-size: 16px; flex-shrink: 0; margin-top: 2px; }

.site-toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 48px;
}

.site-toggle {
    position: relative;
    width: 52px;
    height: 28px;
    background: var(--site-border);
    border-radius: 999px;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.site-toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 200ms ease-out;
}

.site-toggle.on { background: var(--site-primary); }
.site-toggle.on::after { transform: translateX(24px); }

.site-toggle-wrap span { font-weight: 600; font-size: 14px; color: var(--site-muted); }
.site-toggle-wrap span.active { color: var(--site-ink); }

.site-save-badge {
    background: var(--site-primary-soft);
    color: var(--site-primary-dark);
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}

/* ---------- FAQ ---------- */

.site-faq { max-width: 760px; margin: 0 auto; }

.site-faq-item {
    border-bottom: 1px solid var(--site-border);
}

.site-faq-q {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 22px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 17px;
    font-weight: 600;
    color: var(--site-ink);
}

.site-faq-q i { transition: transform 200ms; color: var(--site-muted); flex-shrink: 0; }
.site-faq-item.open .site-faq-q i { transform: rotate(45deg); }

.site-faq-a {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 250ms ease-out;
}

.site-faq-item.open .site-faq-a { grid-template-rows: 1fr; }

.site-faq-a p { min-height: 0; overflow: hidden; margin: 0 0 22px; color: var(--site-muted); font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
    .site-faq-a { transition: none; }
}

/* ---------- CTA band ---------- */

.site-cta-band {
    text-align: center;
}

.site-cta-band h2 { font-size: 36px; margin-bottom: 16px; }
.site-cta-band p { color: var(--site-muted); font-size: 17px; margin: 0 0 32px; }

/* ---------- Footer ---------- */

.site-footer {
    background: var(--site-ink);
    color: #94a3b8;
    padding: 64px 0 0;
}

.site-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 720px) {
    .site-footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

.site-footer-brand p { margin: 14px 0 0; font-size: 14px; max-width: 320px; line-height: 1.6; }

.site-logo-light { color: #fff; }

.site-footer-col h6 { color: #fff; font-size: 14px; margin: 0 0 16px; }
.site-footer-col a { display: block; font-size: 14px; margin-bottom: 10px; color: #94a3b8; }
.site-footer-col a:hover { color: #fff; }

.site-footer-bottom {
    padding: 24px 0;
    font-size: 13px;
    color: #64748b;
}

/* ---------- Forms (contact page) ---------- */

.site-form-card {
    background: #fff;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    padding: 40px;
    box-shadow: var(--site-shadow);
    max-width: 560px;
    margin: 0 auto;
}

.site-form-group { margin-bottom: 20px; }

.site-form-group label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--site-ink);
}

.site-form-group input, .site-form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--site-border);
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    color: var(--site-ink);
    transition: border-color 150ms;
}

.site-form-group input:focus, .site-form-group textarea:focus {
    outline: none;
    border-color: var(--site-primary);
}

.site-alert {
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 24px;
}

.site-alert-success { background: #ecfdf5; color: #047857; }
.site-alert-error { background: #fef2f2; color: #b91c1c; }

/* ---------- Generic content blocks (features page) ---------- */

.site-feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

@media (max-width: 860px) {
    .site-feature-row { grid-template-columns: 1fr; }
}

.site-feature-row.reverse .site-feature-row-text { order: 2; }

.site-feature-row-text .site-eyebrow { margin-bottom: 18px; }
.site-feature-row-text h3 { font-size: 30px; margin-bottom: 16px; }
.site-feature-row-text p { color: var(--site-muted); font-size: 16px; margin: 0 0 20px; }

.site-feature-row-text ul { list-style: none; padding: 0; margin: 0; }

.site-feature-row-text ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 15px;
    color: var(--site-ink-soft);
}

.site-feature-row-text ul li i { color: var(--site-primary); font-size: 18px; margin-top: 1px; }

.site-feature-row-visual {
    background: var(--site-bg-soft);
    border-radius: var(--site-radius);
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
}

.site-feature-row-visual img { border-radius: 12px; box-shadow: var(--site-shadow-lg); max-height: 420px; }

/* ---------- Legal pages ---------- */

.legal-page { padding: 64px 0 96px; }
.legal-container { max-width: 760px; }

.legal-updated { color: var(--site-muted); font-size: 14px; margin: 0 0 8px; }
.legal-page h1 { font-size: 36px; margin: 0 0 32px; }
.legal-page h2 { font-size: 21px; margin: 40px 0 14px; }
.legal-page p { color: var(--site-ink-soft); line-height: 1.7; margin: 0 0 16px; }
.legal-page ul { color: var(--site-ink-soft); line-height: 1.7; margin: 0 0 16px; padding-left: 22px; }
.legal-page li { margin-bottom: 8px; }
.legal-page a { color: var(--site-primary); text-decoration: underline; }

.legal-entity-list { list-style: none; padding: 0; margin: 0 0 16px; }
.legal-entity-list li {
    background: var(--site-bg-soft);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    padding: 16px 20px;
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--site-ink-soft);
}
.legal-entity-list strong { color: var(--site-ink); }

.legal-table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.legal-table th, .legal-table td { border: 1px solid var(--site-border); padding: 10px 14px; text-align: left; color: var(--site-ink-soft); }
.legal-table th { background: var(--site-bg-soft); color: var(--site-ink); font-weight: 600; }

.legal-disclaimer {
    margin-top: 48px;
    padding: 16px 20px;
    background: var(--site-primary-soft);
    border-radius: var(--site-radius-sm);
    color: var(--site-ink-soft);
    font-size: 13.5px;
    font-style: italic;
}

@media (max-width: 720px) {
    .legal-page { padding: 40px 0 64px; }
    .legal-page h1 { font-size: 28px; }
}