/* themes/page-shared.css
   Shared stylesheet for SEO-expansion pages (vs-*, pricing, pillar, blog, glossary, etc.)
   Brand tokens: Inter / DM Serif Display / DM Mono, #060606 / #FAFAF9 / #81FF28.
   Do not load from pages that already define their own full styles. */

:root {
    --bg: #060606;
    --tx: #FAFAF9;
    --tx-body: rgba(250, 250, 249, 0.72);
    --tx-muted: rgba(250, 250, 249, 0.45);
    --neon: #81FF28;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.18);
    --font-body: 'Inter', sans-serif;
    --font-mono: 'DM Mono', monospace;
    --font-serif: 'DM Serif Display', serif;
    --pad-x: clamp(20px, 6vw, 96px);
    --container: 1100px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--bg); overflow-x: hidden; }
body {
    background: var(--bg);
    color: var(--tx);
    font-family: var(--font-body);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}
::selection { background: rgba(129,255,40,0.22); color: #fff; }
a, button, [role="button"], [role="link"] { touch-action: manipulation; }

/* ORBIS wordmark inline */
.orbis-wm {
    font-family: 'Inter', sans-serif !important;
    font-weight: 900 !important;
    font-style: normal !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
    color: var(--tx) !important;
}

/* Keyboard focus - visible neon ring on interactive elements */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible {
    outline: 2px solid var(--neon);
    outline-offset: 3px;
    border-radius: 2px;
}
.cta-strip a:focus-visible {
    outline-color: var(--bg);
}

/* ============== PAGE SHELL ============== */
.page-shell { max-width: var(--container); margin: 0 auto; padding: clamp(72px, 11vh, 150px) var(--pad-x); }
.page-eyebrow {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    letter-spacing: 0.3em; text-transform: uppercase; color: var(--neon);
    display: flex; align-items: center; gap: 12px; margin-bottom: 28px;
}
.page-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--neon); }
.page-h1 {
    font-family: var(--font-body); font-weight: 900;
    font-size: clamp(40px, 6vw, 80px);
    line-height: 1.02; letter-spacing: -0.03em; text-transform: uppercase;
    color: var(--tx); margin-bottom: 28px;
}
.page-h1 em {
    font-family: var(--font-serif); font-style: italic; font-weight: 400;
    color: var(--neon); text-transform: none; letter-spacing: -0.01em;
    text-shadow: 0 0 24px rgba(129,255,40,0.3);
}
.page-lede {
    font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5;
    color: var(--tx-body); max-width: 64ch; margin-bottom: 56px;
}

/* ============== SECTION ============== */
.sec { padding: clamp(56px, 8vh, 96px) 0; border-top: 1px solid var(--border); }
.sec-eyebrow { font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.25em; text-transform: uppercase; color: var(--tx-muted); margin-bottom: 16px; }
.sec-h2 {
    font-family: var(--font-body); font-weight: 900;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.05; letter-spacing: -0.025em; text-transform: uppercase;
    color: var(--tx); margin-bottom: 20px;
}
.sec-h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--neon); text-transform: none; }
.sec-h3 {
    font-family: var(--font-body); font-weight: 900;
    font-size: clamp(20px, 2.4vw, 28px);
    letter-spacing: -0.02em; text-transform: uppercase;
    color: var(--tx); margin: 32px 0 12px;
}
.sec p { color: var(--tx-body); max-width: 64ch; margin-bottom: 14px; font-size: clamp(15px, 1.3vw, 17px); }
.sec ul { color: var(--tx-body); max-width: 64ch; margin-left: 22px; }
.sec li { margin-bottom: 8px; }

/* ============== COMPARISON TABLE (vs-pages) ============== */
.cmp-table {
    width: 100%; border-collapse: collapse; margin: 32px 0;
    font-size: clamp(14px, 1.2vw, 16px);
}
.cmp-table th, .cmp-table td {
    padding: 18px 16px; text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.cmp-table th {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--tx-muted);
    background: rgba(255,255,255,0.02);
}
.cmp-table th.cmp-th-us { color: var(--neon); }
.cmp-table td.cmp-row-label { font-family: var(--font-mono); font-size: 11px; color: var(--tx-muted); text-transform: uppercase; letter-spacing: 0.18em; }
.cmp-table td.cmp-cell-us { color: var(--tx); font-weight: 500; }
.cmp-pill {
    display: inline-block; font-family: var(--font-mono); font-size: 9px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 3px; margin-left: 6px;
}
.cmp-pill-good { background: var(--neon); color: var(--bg); }
.cmp-pill-bad  { background: rgba(255,80,80,0.15); color: rgba(255,160,160,0.95); border: 1px solid rgba(255,80,80,0.4); }

/* ============== CTA STRIP ============== */
.cta-strip {
    margin: 64px 0 0; padding: 48px var(--pad-x);
    background: var(--neon); color: var(--bg);
    display: flex; justify-content: space-between; align-items: center;
    gap: 32px; flex-wrap: wrap;
}
.cta-strip h3 {
    font-family: var(--font-body); font-weight: 900;
    font-size: clamp(22px, 2.8vw, 36px);
    text-transform: uppercase; letter-spacing: -0.02em;
    color: var(--bg);
}
.cta-strip a {
    font-family: var(--font-body); font-weight: 700; font-size: 13px;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 14px 28px; background: var(--bg); color: var(--neon);
    border-radius: 100px; text-decoration: none; white-space: nowrap;
    transition: transform 0.2s ease;
}
.cta-strip a:hover { transform: translateY(-1px); }

/* ============== BLOG ARTICLE ============== */
.article-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.25em;
    text-transform: uppercase; color: var(--tx-muted); margin-bottom: 24px; display: flex; gap: 14px; }
.article-meta .dot { color: var(--neon); }
.article-body { max-width: 68ch; font-size: clamp(16px, 1.35vw, 18px); line-height: 1.75; color: var(--tx-body); }
.article-body p { margin-bottom: 22px; }
.article-body h2 { font-family: var(--font-body); font-weight: 900; font-size: clamp(24px, 2.8vw, 34px);
    line-height: 1.1; text-transform: uppercase; letter-spacing: -0.02em; color: var(--tx); margin: 48px 0 16px; }
.article-body h3 { font-family: var(--font-body); font-weight: 900; font-size: clamp(18px, 2vw, 22px);
    text-transform: uppercase; letter-spacing: -0.01em; color: var(--tx); margin: 32px 0 12px; }
.article-body strong { color: var(--tx); font-weight: 700; }
.article-body a { color: var(--neon); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-body blockquote {
    border-left: 2px solid var(--neon); padding: 8px 0 8px 24px; margin: 24px 0;
    font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 2vw, 26px);
    color: var(--tx); line-height: 1.4;
}
.author-card {
    margin-top: 64px; padding: 32px 0 0; border-top: 1px solid var(--border);
    display: flex; gap: 20px; align-items: flex-start;
}
.author-card .author-name { font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--neon); }
.author-card .author-bio { color: var(--tx-body); font-size: 15px; margin-top: 6px; }

/* ============== FAQ / GLOSSARY ITEM ============== */
.faq-item { padding: 24px 0; border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item h3 { font-family: var(--font-body); font-weight: 700; font-size: clamp(16px, 1.5vw, 19px);
    color: var(--tx); margin-bottom: 8px; line-height: 1.3; }
.faq-item p { color: var(--tx-body); font-size: clamp(14px, 1.2vw, 16px); }

/* ============== RESPONSIVE ============== */
@media (max-width: 700px) {
    .page-h1 { font-size: clamp(36px, 9vw, 56px); }
    .cmp-table { font-size: 13px; }
    .cmp-table th, .cmp-table td { padding: 12px 8px; }
    .cta-strip { flex-direction: column; align-items: flex-start; text-align: left; }
}