/* Styles for the service landing page.
   External rather than inline so the page's Content-Security-Policy can allow
   style-src 'self' instead of 'unsafe-inline'. Palette mirrors
   frontend/tailwind.config.js. */
:root {
    --primary: #0C5678;
    --primary-dark: #094561;
    --bg: #FDFDFD;
    --surface: #FFFFFF;
    --text: #2A2A2A;
    --muted: #6B7280;
    --border: #E5E7EB;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1F1F1F;
        --surface: #151515;
        --text: #FFFFFF;
        --muted: #9CA3AF;
        --border: #3A3A3A;
    }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    /* System stack: the brand face is not self-hosted, and loading it from a
       third party would mean widening this page's CSP for cosmetics. */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 48px 40px;
    max-width: 460px;
    width: 100%;
    text-align: center;
}
.icon { width: 72px; max-width: 100%; height: auto; margin-bottom: 24px; }
.icon-dark { display: none; }
@media (prefers-color-scheme: dark) {
    .icon-light { display: none; }
    .icon-dark { display: inline; }
}
p { color: var(--muted); font-size: 16px; line-height: 1.6; margin-bottom: 28px; }
.btn {
    display: inline-block;
    background: var(--primary);
    color: #FFFFFF;
    padding: 14px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: background 0.2s;
}
.btn:hover { background: var(--primary-dark); }
.btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }