/* ════════════════════════════════════════════════════════════════════════════
   AELIUS — SHARED THEME
   Brings the secondary pages (privacy, terms, ethics, contact, error pages)
   onto the same design language as the landing page and the chat app:

     · pure black ground, no grey panels
     · translucent surfaces over blur — never a solid fill
     · hairline white borders instead of heavy strokes or shadows
     · Inter for text, Instrument Serif italic for accents, JetBrains Mono for
       labels and code
     · large radii, generous line-height, restrained colour

   Loaded AFTER style.css, so it overrides that file's older palette without
   requiring every page to be rewritten. Each page keeps its own layout rules;
   this only restyles the shared vocabulary (nav, cards, headings, grids,
   tables, badges, buttons).
   ════════════════════════════════════════════════════════════════════════════ */

:root {
    --black: #000;
    --ink: #050505;
    --panel: #0a0a0a;
    --hair: rgba(255, 255, 255, 0.07);
    --hair2: rgba(255, 255, 255, 0.13);
    --hair3: rgba(255, 255, 255, 0.22);
    --t1: #f5f5f6;
    --t2: #9b9ba1;
    --t3: #68686e;
    --t4: #3b3b40;
    --glass: rgba(255, 255, 255, 0.03);
    --glass-2: rgba(255, 255, 255, 0.055);
    --accent: #2f81f7;
    --font: 'Inter', -apple-system, system-ui, 'Onest', sans-serif;
    --serif: 'Instrument Serif', Georgia, serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --ease: cubic-bezier(.22, 1, .36, 1);

    /* Kept so any rule still reading the old names lands on the new palette
       rather than the old blue-on-slate scheme. */
    --primary-color: #000;
    --secondary-color: #2f81f7;
    --accent-color: #2f81f7;
    --background-color: #000;
    --text-color: #f5f5f6;
    --card-bg: rgba(255, 255, 255, 0.03);
}

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
    font-family: var(--font);
    background: var(--black);
    color: var(--t1);
    line-height: 1.65;
    -webkit-tap-highlight-color: transparent;
}

::selection { background: #fff; color: #000; }

.si { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }

/* ── Atmosphere ───────────────────────────────────────────────────────────────
   The same grain + vignette the landing page uses. Attached to body::before /
   ::after so no page needs extra markup. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    opacity: .05;
    mix-blend-mode: screen;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 8999;
    pointer-events: none;
    background: radial-gradient(130% 100% at 50% 0%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}

/* ── Navigation ──────────────────────────────────────────────────────────── */
.navbar {
    background: rgba(0, 0, 0, .62) !important;
    backdrop-filter: saturate(160%) blur(20px);
    -webkit-backdrop-filter: saturate(160%) blur(20px);
    border-bottom: 1px solid var(--hair) !important;
    padding: 0 22px !important;
    height: 62px;
    align-items: center;
}

.navbar a {
    color: var(--t2);
    font-weight: 500;
    letter-spacing: -.01em;
    transition: color .2s var(--ease);
}

.navbar a:hover { color: #fff; }

.navbar > a:first-child,
.navbar .navbar-brand {
    color: #fff;
    font-size: 1rem !important;
    font-weight: 700;
    letter-spacing: -.03em;
}

.navbar-logo {
    height: 26px;
    width: 26px;
    object-fit: contain;
    border-radius: 7px;
    filter: grayscale(1) brightness(1.6);
}

.nav-list { gap: 2px; }
.nav-list a { font-size: .87rem !important; padding: 8px 13px; border-radius: 9px; }

/* The one filled control in the nav: white pill, like the landing page CTA. */
.navbar .nav-cta,
.navbar a.cta {
    background: #fff !important;
    color: #000 !important;
    border-radius: 100px !important;
    padding: 8px 18px !important;
    font-weight: 600 !important;
}

/* ── Type ────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { letter-spacing: -.035em; line-height: 1.15; color: #fff; }
h1 { font-weight: 800; }
h2 { font-weight: 750; }
h3, h4 { font-weight: 650; letter-spacing: -.02em; }
p { color: var(--t2); }
a { color: var(--accent); }
strong, b { color: var(--t1); }
code, pre, kbd { font-family: var(--mono); }

code {
    background: var(--glass);
    border: 1px solid var(--hair);
    border-radius: 6px;
    padding: 1px 6px;
    font-size: .88em;
    color: #cfe6ff;
}

/* Page titles. style.css paints each word of `.main-text` with its own
   green→blue gradient; the landing page's headline is plain white, so these
   collapse the gradient back to a single flat white fill. The rule has to
   neutralise `background-clip:text` too, or the text stays transparent. */
.main-text {
    font-size: clamp(2.6rem, 7vw, 4.6rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.055em !important;
    line-height: 1 !important;
    color: #fff !important;
}

.main-text .word,
.main-text [class*="word-"] {
    background-image: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
}

/* Section headings inside the legal/contact cards were accent-coloured with an
   accent underline. White text on a hairline rule reads calmer and matches the
   landing page, where colour is reserved for actions. */
h2, h3,
.contact-form h2, .contact-info h2,
.contact-section h3, .contact-info h3 {
    color: #fff !important;
}

.contact-form h2, .contact-info h2 {
    border-bottom: 1px solid var(--hair) !important;
    padding-bottom: 12px;
}

/* ── Surfaces ─────────────────────────────────────────────────────────────
   Everything that was a solid dark card becomes a translucent pane with a
   hairline edge. Listed by the class names the legal/error pages actually use,
   plus the generic ones. */
.card, .panel, .box, .section-card, .info-card, .note, .callout,
.data-card, .right-card, .summary-card, .definition-card, .contact-card,
.priv-section, .tos-section, .ethics-section, .policy-section,
.data-grid > *, .rights-grid > *, .summary-grid > *, .definitions-grid > * {
    background: var(--glass) !important;
    border: 1px solid var(--hair) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: none !important;
    transition: background .25s var(--ease), border-color .25s var(--ease);
}

.card:hover, .data-card:hover, .right-card:hover,
.summary-card:hover, .definition-card:hover, .contact-card:hover {
    background: var(--glass-2) !important;
    border-color: var(--hair2) !important;
}

/* Hero strips at the top of the legal pages. */
.priv-hero, .tos-hero, .page-hero, .hero {
    background: radial-gradient(120% 100% at 50% 0%,
                rgba(255, 255, 255, .045) 0%, transparent 62%) !important;
    border-bottom: 1px solid var(--hair) !important;
}

/* Pills / badges. */
.priv-badge, .tos-badge, .badge, .pill, .tag, .chip {
    background: var(--glass) !important;
    border: 1px solid var(--hair2) !important;
    border-radius: 100px !important;
    color: var(--t1) !important;
    font-family: var(--mono);
    font-size: .68rem !important;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 6px 15px !important;
    backdrop-filter: blur(8px);
}

/* Meta rows ("Last updated…", "Effective…"). */
.tos-meta, .priv-meta, .page-meta {
    color: var(--t3);
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .08em;
}

/* Dividers. */
hr, .divider, .rule {
    border: none;
    border-top: 1px solid var(--hair);
    margin: 34px 0;
}

/* Tables. */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--hair);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, .012);
}
th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--hair); }
th {
    background: rgba(255, 255, 255, .02);
    color: var(--t2);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
td { color: var(--t2); font-size: .93rem; }
tr:last-child td { border-bottom: none; }

/* Lists. */
ul, ol { color: var(--t2); }
li { margin-bottom: 7px; }
li::marker { color: var(--t4); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
button, .btn, .button, input[type="submit"] {
    font-family: inherit;
    border-radius: 100px;
    font-weight: 600;
    letter-spacing: -.01em;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease),
                background .2s var(--ease), border-color .2s var(--ease);
}

.btn-primary, .button-primary, button.primary, input[type="submit"] {
    background: #fff;
    color: #000;
    border: none;
    box-shadow: 0 6px 30px rgba(255, 255, 255, .14);
}
.btn-primary:hover, .button-primary:hover, button.primary:hover,
input[type="submit"]:hover {
    box-shadow: 0 12px 44px rgba(255, 255, 255, .28);
    transform: translateY(-1px);
}

.btn-secondary, .button-secondary, button.secondary, .btn-ghost {
    background: var(--glass);
    color: #fff;
    border: 1px solid var(--hair2);
}
.btn-secondary:hover, .button-secondary:hover, button.secondary:hover,
.btn-ghost:hover { background: var(--glass-2); border-color: var(--hair3); }

/* ── Forms ───────────────────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], textarea, select {
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--hair2);
    border-radius: 12px;
    color: var(--t1);
    font-family: inherit;
    padding: 11px 14px;
    outline: none;
    transition: border-color .2s var(--ease), background .2s var(--ease);
}
input:focus, textarea:focus, select:focus {
    border-color: var(--accent);
    background: rgba(47, 129, 247, .07);
}
::placeholder { color: var(--t4); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer, .footer {
    background: transparent !important;
    border-top: 1px solid var(--hair);
    color: var(--t3);
}
footer a, .footer a { color: var(--t2); }
footer a:hover, .footer a:hover { color: #fff; }

/* ── Error / status pages ────────────────────────────────────────────────── */
.error-card, .status-card, .error-container {
    background: var(--glass) !important;
    border: 1px solid var(--hair) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.error-code {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.04em;
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}