/* ==========================================================================
   GenSight.AI marketing site design system ("evidence ledger")
   Hand-written, loaded AFTER assets/tailwind.css on every marketing page.
   Tokens + a small component kit so pages share one type scale, one neutral
   scale, one accent rule (mode colour), one elevation (the product frame).
   Dark mode follows the existing `html.dark` class convention.
   ========================================================================== */

:root {
    /* neutrals (light) */
    --gs-bg: #f6f6f8;
    --gs-surface: #ffffff;
    --gs-surface-2: #f0f1f4;
    --gs-line: #e3e4e8;
    --gs-line-strong: #cbcfd7;
    --gs-ink: #0f1115;
    --gs-text: #2b2f38;
    --gs-muted: #697080;
    --gs-faint: #9aa0ab;
    --gs-inverse: #ffffff;

    /* mode accent: enterprise by default, swapped by body.mode-influencer */
    --gs-accent: #5B9BD5;
    --gs-accent-2: #91c8f6;
    --gs-accent-ink: #2f6fa8;      /* accent dark enough for text on light */
    --gs-accent-soft: rgba(91, 155, 213, 0.12);

    /* semantic (used sparingly, only where the product uses them) */
    --gs-ok: #16a34a;
    --gs-warn: #d97706;
    --gs-bad: #dc2626;

    /* type */
    --gs-font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --gs-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --gs-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
    --gs-net-node: 91,155,213; --gs-net-alt: 168,85,247; --gs-net-edge-a: .16; --gs-net-node-a: .85;

    /* rhythm */
    --gs-section: 80px;
    --gs-section-sm: 56px;
    --gs-radius: 12px;
    --gs-radius-sm: 8px;
    --gs-frame-shadow: 0 24px 48px -12px rgba(15, 17, 21, 0.14), 0 2px 6px rgba(15, 17, 21, 0.06);
}

html.dark {
    --gs-bg: #0b0d12;
    --gs-surface: #12151c;
    --gs-surface-2: #171b24;
    --gs-line: rgba(255, 255, 255, 0.08);
    --gs-line-strong: rgba(255, 255, 255, 0.16);
    --gs-ink: #f2f4f8;
    --gs-text: #cfd4de;
    --gs-muted: #8b90a0;
    --gs-faint: #5f6572;
    --gs-inverse: #0b0d12;
    --gs-accent-ink: #8fc1ee;
    --gs-accent-soft: rgba(91, 155, 213, 0.16);
    --gs-frame-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

body.mode-influencer {
    --gs-accent: #a855f7;
    --gs-accent-2: #af8dfd;
    --gs-accent-ink: #7e3ff2;
    --gs-accent-soft: rgba(168, 85, 247, 0.12);
}
html.dark body.mode-influencer {
    --gs-accent-ink: #c4a1ff;
    --gs-accent-soft: rgba(168, 85, 247, 0.18);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
.gs-body {
    font-family: var(--gs-font);
    background: var(--gs-bg);
    color: var(--gs-text);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01" 0, "cv11" 1;
}
.gs-body ::selection { background: var(--gs-accent-soft); }

.gs-container { max-width: 1120px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.gs-container-wide { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }

.gs-section { padding-top: var(--gs-section); padding-bottom: var(--gs-section); }
.gs-section-t { padding-top: var(--gs-section); }
.gs-section-b { padding-bottom: var(--gs-section); }
@media (max-width: 767px) {
    .gs-section { padding-top: var(--gs-section-sm); padding-bottom: var(--gs-section-sm); }
    .gs-section-t { padding-top: var(--gs-section-sm); }
    .gs-section-b { padding-bottom: var(--gs-section-sm); }
}
.gs-hairline { border-top: 1px solid var(--gs-line); }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.gs-display {
    font-family: var(--gs-serif);
    font-weight: 400;
    font-size: clamp(46px, 6vw, 76px);
    line-height: 1.0;
    letter-spacing: -0.015em;
    color: var(--gs-ink);
    text-wrap: balance;
}
.gs-display em { font-style: italic; color: var(--gs-accent-ink); }
.gs-h2 {
    font-family: var(--gs-serif);
    font-weight: 400;
    font-size: clamp(32px, 3.6vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--gs-ink);
    text-wrap: balance;
}
.gs-h3 {
    font-family: var(--gs-font);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.012em;
    color: var(--gs-ink);
}
.gs-h4 { font-weight: 600; font-size: 16px; line-height: 1.4; letter-spacing: -0.006em; color: var(--gs-ink); }
.gs-lead { font-size: 19px; line-height: 1.5; color: var(--gs-text); letter-spacing: -0.005em; }
.gs-body-sm { font-size: 15px; line-height: 1.55; color: var(--gs-muted); }
.gs-caption { font-size: 13px; line-height: 1.5; color: var(--gs-muted); }
.gs-muted { color: var(--gs-muted); }
.gs-ink { color: var(--gs-ink); }
.gs-accent-text { color: var(--gs-accent-ink); }

/* Mono label: only for values, signal names, and eyebrows above product data */
.gs-mono {
    font-family: var(--gs-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.gs-eyebrow {
    font-family: var(--gs-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gs-muted);
}
.gs-eyebrow-accent { color: var(--gs-accent-ink); }

.gs-link {
    color: var(--gs-ink);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--gs-line-strong);
    text-underline-offset: 3px;
    transition: text-decoration-color .15s ease;
}
.gs-link:hover { text-decoration-color: var(--gs-ink); }
.gs-arrow-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--gs-ink); font-weight: 500; font-size: 15px;
}
.gs-arrow-link svg { width: 14px; height: 14px; transition: transform .15s ease; }
.gs-arrow-link:hover svg { transform: translateX(2px); }
.gs-arrow-link-back { color: var(--gs-muted); }
.gs-arrow-link-back:hover { color: var(--gs-ink); }
.gs-arrow-link-back:hover svg { transform: translateX(-2px); }

/* --------------------------------------------------------------------------
   Buttons: primary is ink, never the mode colour (the colour means "mode")
   -------------------------------------------------------------------------- */
.gs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 20px;
    border-radius: var(--gs-radius-sm);
    font-family: var(--gs-font); font-weight: 500; font-size: 15px; letter-spacing: -0.005em;
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
    cursor: pointer; white-space: nowrap;
}
.gs-btn:active { transform: translateY(1px); }
.gs-btn-primary { background: var(--gs-ink); color: var(--gs-inverse); }
.gs-btn-primary:hover { background: #262a33; }
html.dark .gs-btn-primary:hover { background: #ffffff; }
.gs-btn-secondary { background: var(--gs-surface); color: var(--gs-ink); border-color: var(--gs-line-strong); }
.gs-btn-secondary:hover { border-color: var(--gs-ink); }
.gs-btn-ghost { background: transparent; color: var(--gs-text); }
.gs-btn-ghost:hover { color: var(--gs-ink); background: var(--gs-surface-2); }
.gs-btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }
.gs-btn-lg { height: 52px; padding: 0 24px; font-size: 16px; }
.gs-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */
.gs-card {
    background: var(--gs-surface);
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius);
}
.gs-card-pad { padding: 24px; }
.gs-panel { background: var(--gs-surface-2); border: 1px solid var(--gs-line); border-radius: var(--gs-radius); }
.gs-tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--gs-mono); font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
    color: var(--gs-muted); background: var(--gs-surface-2); border: 1px solid var(--gs-line);
    padding: 3px 9px; border-radius: 999px;
}
.gs-tag-accent { color: var(--gs-accent-ink); background: var(--gs-accent-soft); border-color: transparent; }
.gs-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--gs-accent); display: inline-block; }

/* The one elevation on the site: a real product capture in a quiet frame */
.gs-frame {
    background: var(--gs-surface);
    border: 1px solid var(--gs-line);
    border-radius: 14px;
    box-shadow: var(--gs-frame-shadow);
    overflow: hidden;
}
.gs-frame img { display: block; width: 100%; height: auto; }
.gs-frame .gs-img-dark { display: none; }
html.dark .gs-frame .gs-img-light { display: none; }
html.dark .gs-frame .gs-img-dark { display: block; }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.gs-nav { position: sticky; top: 0; z-index: 50; }
#nav-inner { border: 1px solid transparent; border-radius: 12px; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
@media (min-width: 768px) {
    /* Desktop: the bar floats as an island and picks up a surface on scroll */
    .gs-nav { padding: 12px 12px 0; }
    .gs-nav.is-scrolled #nav-inner { background: color-mix(in srgb, var(--gs-surface) 86%, transparent); backdrop-filter: blur(12px); border-color: var(--gs-line); box-shadow: 0 8px 24px rgba(15,17,21,.08); }
    html.dark .gs-nav.is-scrolled #nav-inner { box-shadow: 0 8px 24px rgba(0,0,0,.35); }
}
@media (max-width: 767px) {
    .gs-nav { background: color-mix(in srgb, var(--gs-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
    .gs-nav.is-scrolled { border-bottom-color: var(--gs-line); }
    #nav-inner { border-radius: 0; border: 0; }
}
.gs-nav-link { font-size: 14px; font-weight: 500; color: var(--gs-muted); transition: color .15s ease; white-space: nowrap; }
.gs-nav-link:hover { color: var(--gs-ink); }
.gs-logo { color: var(--gs-ink); display: inline-flex; align-items: center; }
.gs-logo svg { height: 34px; width: auto; overflow: visible; }

/* --------------------------------------------------------------------------
   Mode toggle (segmented). Active segment is ink; the mode colour lives in
   the dot and the status line, so the page's one colour still means "mode".
   -------------------------------------------------------------------------- */
.gs-seg { display: inline-flex; padding: 3px; background: var(--gs-surface-2); border: 1px solid var(--gs-line); border-radius: 10px; }
.gs-seg-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 16px; border-radius: 7px;
    font-size: 14px; font-weight: 500; color: var(--gs-muted);
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.gs-seg-btn:hover { color: var(--gs-ink); }
.gs-seg-btn.is-active { background: var(--gs-surface); color: var(--gs-ink); box-shadow: 0 1px 2px rgba(15,17,21,.08), 0 0 0 1px var(--gs-line); }
.gs-seg-btn .gs-seg-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--gs-faint); }
.gs-seg-btn.is-active .gs-seg-dot { background: var(--gs-accent); }
.gs-seg-btn[data-mode="influencer"].is-active .gs-seg-dot { background: #a855f7; }

/* Audit input */
.gs-input-row {
    display: flex; gap: 8px; padding: 6px;
    background: var(--gs-surface); border: 1px solid var(--gs-line-strong); border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.gs-input-row:focus-within { border-color: var(--gs-accent); box-shadow: 0 0 0 4px var(--gs-accent-soft); }
.gs-input-row input {
    flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
    padding: 0 14px; font-size: 17px; color: var(--gs-ink); font-family: var(--gs-font);
}
.gs-input-row input::placeholder { color: var(--gs-faint); }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */
.gs-price { font-weight: 600; font-size: 40px; letter-spacing: -0.03em; line-height: 1; color: var(--gs-ink); }
.gs-price small { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--gs-muted); margin-left: 6px; }
.gs-check-list { display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--gs-text); }
.gs-check-list li { display: flex; gap: 10px; align-items: flex-start; }
.gs-check-list li svg { width: 14px; height: 14px; margin-top: 5px; flex: none; color: var(--gs-accent-ink); }
.gs-check-list li.is-off { color: var(--gs-faint); }
.gs-check-list li.is-off svg { color: var(--gs-line-strong); }

/* --------------------------------------------------------------------------
   Compare table
   -------------------------------------------------------------------------- */
.gs-compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.gs-compare th, .gs-compare td { padding: 14px 16px; border-bottom: 1px solid var(--gs-line); vertical-align: top; text-align: left; }
.gs-compare th { font-weight: 500; color: var(--gs-muted); font-size: 13px; }
.gs-compare th.gs-compare-us, .gs-compare td.gs-compare-us { background: var(--gs-surface); }
.gs-compare tr:last-child td { border-bottom: 0; }
.gs-compare td:first-child { color: var(--gs-ink); font-weight: 500; }

/* Comparison table stacks into labelled rows on small screens */
@media (max-width: 720px) {
    .gs-compare, .gs-compare tbody, .gs-compare tr, .gs-compare td { display: block; width: 100%; }
    .gs-compare thead { display: none; }
    .gs-compare tr { padding: 6px 0 10px; border-bottom: 1px solid var(--gs-line); }
    .gs-compare tr:last-child { border-bottom: 0; }
    .gs-compare td { padding: 8px 16px; border-bottom: 0; }
    .gs-compare td:first-child { font-family: var(--gs-serif); font-size: 22px; font-weight: 400; padding-top: 14px; padding-bottom: 4px; }
    .gs-compare td[data-label]::before { content: attr(data-label); display: block; font-family: var(--gs-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--gs-faint); margin-bottom: 2px; }
    .gs-compare td.gs-compare-us { background: var(--gs-accent-soft); border-radius: 8px; margin: 6px 12px 0; padding: 10px 12px; width: auto; }
    .gs-compare td.gs-compare-us::before { color: var(--gs-accent-ink); }
}

/* Scroll reveal (kept from the previous build, softened) */
@media (prefers-reduced-motion: no-preference) {
    .gs-reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
    .gs-reveal.gs-in { opacity: 1; transform: none; }
}

/* Nav dropdown */
.gs-nav-dd { position: relative; display: inline-flex; }
.gs-nav-dd-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.gs-nav-dd-btn svg { width: 14px; height: 14px; transition: transform .15s ease; }
.gs-nav-dd.is-open .gs-nav-dd-btn svg, .gs-nav-dd:hover .gs-nav-dd-btn svg { transform: rotate(180deg); }
.gs-nav-menu { position: absolute; top: calc(100% + 14px); left: -12px; min-width: 240px; background: var(--gs-surface); border: 1px solid var(--gs-line); border-radius: 10px; box-shadow: 0 12px 32px rgba(15,17,21,.12); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; z-index: 60; }
.gs-nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.gs-nav-dd:hover .gs-nav-menu, .gs-nav-dd:focus-within .gs-nav-menu, .gs-nav-dd.is-open .gs-nav-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.gs-nav-menu a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 10px; border-radius: 7px; font-size: 14px; font-weight: 500; color: var(--gs-ink); text-decoration: none; }
.gs-nav-menu a:hover { background: var(--gs-surface-2); }
.gs-nav-menu-meta { font-family: var(--gs-mono); font-size: 11px; color: var(--gs-muted); }
.gs-nav-menu-soon { display: block; padding: 9px 10px 6px; font-family: var(--gs-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--gs-faint); border-top: 1px solid var(--gs-line); margin-top: 4px; }
/* Mobile menu: Index group (label + indented sub-links, stacked so nothing spills off-screen) */
.gs-nav-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gs-nav-sub { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-left: 4px; padding: 2px 0 2px 12px; border-left: 1px solid var(--gs-line); font-size: 14px; font-weight: 500; color: var(--gs-muted); transition: color .15s ease; }
.gs-nav-sub:hover { color: var(--gs-ink); }
.gs-nav-sub-soon { display: block; margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--gs-line); font-family: var(--gs-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--gs-faint); }
html.dark .gs-nav-menu { box-shadow: 0 12px 32px rgba(0,0,0,.45); }

/* Knowledge Hub strip */
.gs-kh-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; outline: none; }
.gs-kh-track::-webkit-scrollbar { display: none; }
.gs-kh-track:focus-visible { box-shadow: 0 0 0 2px var(--gs-accent); border-radius: 12px; }
.gs-kh-card { flex: 0 0 calc((100% - 32px) / 3); min-width: 260px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; border: 1px solid var(--gs-line); border-radius: var(--gs-radius); background: var(--gs-surface); color: inherit; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.gs-kh-card:hover { border-color: var(--gs-line-strong); transform: translateY(-2px); }
.gs-kh-title { font-weight: 600; font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; color: var(--gs-ink); }
.gs-kh-excerpt { font-size: 14.5px; line-height: 1.5; color: var(--gs-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.gs-kh-meta { font-family: var(--gs-mono); font-size: 12px; color: var(--gs-faint); margin-top: 6px; }
.gs-kh-card:hover .gs-kh-meta { color: var(--gs-accent-ink); }
.gs-kh-nav { display: flex; gap: 6px; }
.gs-kh-arrow { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--gs-line-strong); background: var(--gs-surface); color: var(--gs-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.gs-kh-arrow svg { width: 16px; height: 16px; }
.gs-kh-arrow:hover { background: var(--gs-surface-2); }
.gs-kh-arrow:disabled { opacity: .35; cursor: default; }
@media (max-width: 900px) { .gs-kh-card { flex-basis: 78%; } .gs-kh-nav { display: none; } }

/* Long-form prose (legal pages, articles) */
.gs-article { max-width: 820px; margin-left: auto; margin-right: auto; }
.gs-prose { max-width: 72ch; color: var(--gs-text); font-size: 16px; line-height: 1.7; }
.gs-prose h2 { font-family: var(--gs-serif); font-weight: 400; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; color: var(--gs-ink); margin: 44px 0 12px; }
.gs-prose h3 { font-family: var(--gs-font); font-weight: 600; font-size: 17px; color: var(--gs-ink); margin: 26px 0 8px; }
.gs-prose p { margin: 0 0 16px; }
.gs-prose ul, .gs-prose ol { margin: 0 0 18px; padding-left: 22px; }
.gs-prose li { margin: 6px 0; }
.gs-prose li::marker { color: var(--gs-accent); }
.gs-prose strong { color: var(--gs-ink); font-weight: 600; }
.gs-prose a { color: var(--gs-ink); text-decoration: underline; text-decoration-color: var(--gs-line-strong); text-underline-offset: 3px; }
.gs-prose a:hover { text-decoration-color: var(--gs-ink); }
.gs-prose em { color: var(--gs-muted); }
.gs-page-head { padding: 40px 0 36px; border-bottom: 1px solid var(--gs-line); margin-bottom: 40px; }
.gs-page-head .gs-display { font-size: clamp(40px, 5vw, 60px); }

/* FAQ */
.gs-faq-group { margin: 56px 0 0; }
.gs-faq-group:first-child { margin-top: 0; }
.gs-faq-group > h2 { margin-bottom: 20px; }
.gs-faq { border-top: 1px solid var(--gs-line); }
.gs-faq:last-child { border-bottom: 1px solid var(--gs-line); }
.gs-faq summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px 0; font-weight: 600; font-size: 17px; line-height: 1.35; color: var(--gs-ink); }
.gs-faq summary::-webkit-details-marker { display: none; }
.gs-faq summary::after { content: "+"; font-family: var(--gs-mono); font-weight: 400; font-size: 20px; line-height: 1; color: var(--gs-muted); flex: 0 0 auto; margin-top: 1px; transition: transform .2s ease; }
.gs-faq[open] summary::after { content: "\2212"; }
.gs-faq summary:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 4px; border-radius: 4px; }
.gs-faq-body { padding: 0 0 22px; max-width: 68ch; }
.gs-faq-body .gs-faq-lead { color: var(--gs-ink); font-weight: 500; margin: 0 0 8px; line-height: 1.5; }
.gs-faq-body p { margin: 0 0 10px; color: var(--gs-muted); font-size: 15px; line-height: 1.6; }
.gs-faq-body p:last-child { margin-bottom: 0; }

/* Modals (free audit summary, unlock, login, PDF lead). Ids and the
   hidden/flex toggles belong to the audit JS; only presentation lives here. */
.gs-modal { background: rgba(15,17,21,.55); backdrop-filter: blur(6px); }
html.dark .gs-modal { background: rgba(0,0,0,.7); }
.gs-modal-card { position: relative; width: 100%; background: var(--gs-surface); border: 1px solid var(--gs-line); border-radius: 16px; box-shadow: var(--gs-frame-shadow); padding: 28px; color: var(--gs-text); }
@media (max-width: 560px) { .gs-modal-card { padding: 22px 18px; border-radius: 14px; } }
.gs-modal-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 8px; border: 0; background: transparent; color: var(--gs-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.gs-modal-close:hover { background: var(--gs-surface-2); color: var(--gs-ink); }
.gs-field { width: 100%; font: inherit; font-size: 15px; padding: 11px 14px; border: 1px solid var(--gs-line-strong); border-radius: 8px; background: var(--gs-surface); color: var(--gs-ink); outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.gs-field:focus { border-color: var(--gs-accent); box-shadow: 0 0 0 3px var(--gs-accent-soft); }
.gs-field::placeholder { color: var(--gs-faint); }
.gs-tier { display: block; position: relative; padding: 14px 16px; border: 1px solid var(--gs-line); border-radius: 10px; background: var(--gs-surface); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.gs-tier:hover { border-color: var(--gs-line-strong); }
.gs-tier:has(input:checked) { border-color: var(--gs-ink); box-shadow: 0 0 0 1px var(--gs-ink); }
.gs-tier input { accent-color: var(--gs-accent); width: 15px; height: 15px; margin: 0; }
.gs-tier-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gs-tier-name { font-weight: 600; font-size: 15px; color: var(--gs-ink); }
.gs-tier .gs-tag { margin-left: 8px; vertical-align: 2px; }
.gs-tier-price { font-family: var(--gs-mono); font-size: 15px; color: var(--gs-ink); white-space: nowrap; }
.gs-tier-desc { display: block; margin: 4px 0 0 27px; font-size: 13px; line-height: 1.45; color: var(--gs-muted); }
.gs-pillar { padding: 12px 0; border-top: 1px solid var(--gs-line); }
.gs-bar { height: 4px; border-radius: 2px; background: var(--gs-surface-2); overflow: hidden; }
.gs-bar > div { height: 100%; border-radius: 2px; }
/* JS-rendered recommendation cards (renderBrandTeaserCard / renderBrandTeaserHint / renderLock) */
#modalRecs > div { border-radius: 10px !important; border: 1px solid var(--gs-line) !important; background: var(--gs-surface-2) !important; box-shadow: none !important; }
#modalRecs .blurred-row { border-radius: 8px !important; background: var(--gs-surface) !important; border: 1px solid var(--gs-line) !important; color: var(--gs-muted) !important; font-style: normal !important; }
#modalRecs button { background: var(--gs-ink) !important; color: var(--gs-bg) !important; border: 0 !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; padding: 10px 16px !important; box-shadow: var(--gs-frame-shadow) !important; }
#modalRecs .text-blue-600, #modalRecs .text-blue-400 { color: var(--gs-accent-ink) !important; }
#modalRecs .shrink-0 { flex-shrink: 1 !important; max-width: 100%; white-space: normal !important; }
#modalRecs span { overflow-wrap: anywhere; }
.gs-modal-card { overflow-x: hidden; }
/* Tailwind's .hidden must beat the kit's display rules (same specificity, kit loads later) */
.gs-btn.hidden, .gs-seg.hidden, .gs-tag.hidden, .gs-kh-nav.hidden { display: none; }
/* Toasts (showToast) */
#toast-container { bottom: 24px !important; right: 24px !important; }
#toast-container > div { background: var(--gs-ink) !important; border: 1px solid transparent !important; border-radius: 10px !important; box-shadow: 0 12px 32px rgba(0,0,0,.25) !important; padding: 12px 16px !important; backdrop-filter: none !important; }
#toast-container > div span:last-child { color: var(--gs-bg) !important; }
@media (max-width: 560px) { #toast-container { left: 16px; right: 16px !important; bottom: 16px !important; } }

/* Utilities used by rebuilt pages */
.gs-em { font-style: italic; color: var(--gs-accent-ink); }
.gs-accent-ink { color: var(--gs-accent-ink); }
.gs-body .gs-card img.rounded-xl { border-radius: 8px; }
.gs-avatar { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; border: 1px solid var(--gs-line); }

.gs-kh-grid-card { flex: none; min-width: 0; cursor: pointer; }
.gs-kh-grid-card:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 2px; }
.gs-kh-cover { margin: -22px -22px 6px; border-bottom: 1px solid var(--gs-line); background: var(--gs-surface-2); border-radius: var(--gs-radius) var(--gs-radius) 0 0; overflow: hidden; }
.gs-kh-cover img { display: block; width: 100%; height: 180px; object-fit: cover; }

/* Article body (post.html, Tailwind typography plugin from the Play CDN) */
.gs-prose-article { max-width: 72ch; font-size: 17px;
    --tw-prose-body: var(--gs-text); --tw-prose-headings: var(--gs-ink); --tw-prose-lead: var(--gs-text); --tw-prose-links: var(--gs-ink); --tw-prose-bold: var(--gs-ink); --tw-prose-counters: var(--gs-muted); --tw-prose-bullets: var(--gs-accent); --tw-prose-hr: var(--gs-line); --tw-prose-quotes: var(--gs-ink); --tw-prose-quote-borders: var(--gs-accent); --tw-prose-captions: var(--gs-muted); --tw-prose-code: var(--gs-ink); --tw-prose-pre-code: var(--gs-bg); --tw-prose-pre-bg: var(--gs-ink); --tw-prose-th-borders: var(--gs-line-strong); --tw-prose-td-borders: var(--gs-line);
    --tw-prose-invert-body: var(--gs-text); --tw-prose-invert-headings: var(--gs-ink); --tw-prose-invert-lead: var(--gs-text); --tw-prose-invert-links: var(--gs-ink); --tw-prose-invert-bold: var(--gs-ink); --tw-prose-invert-counters: var(--gs-muted); --tw-prose-invert-bullets: var(--gs-accent); --tw-prose-invert-hr: var(--gs-line); --tw-prose-invert-quotes: var(--gs-ink); --tw-prose-invert-quote-borders: var(--gs-accent); --tw-prose-invert-captions: var(--gs-muted); --tw-prose-invert-code: var(--gs-ink); --tw-prose-invert-pre-code: var(--gs-ink); --tw-prose-invert-pre-bg: var(--gs-surface-2); --tw-prose-invert-th-borders: var(--gs-line-strong); --tw-prose-invert-td-borders: var(--gs-line); }
.gs-prose-article h2 { font-family: var(--gs-serif); font-weight: 400; letter-spacing: -0.01em; font-size: 2rem; line-height: 1.15; }
.gs-prose-article h3 { font-family: var(--gs-font); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; }
.gs-prose-article a { text-decoration-color: var(--gs-line-strong); text-underline-offset: 3px; }
.gs-prose-article a:hover { text-decoration-color: var(--gs-ink); }
.gs-prose-article img { border-radius: var(--gs-radius); border: 1px solid var(--gs-line); }
.gs-prose-article blockquote { font-family: var(--gs-serif); font-style: italic; font-weight: 400; font-size: 1.35rem; line-height: 1.35; }
.gs-prose-article code { font-family: var(--gs-mono); font-size: .9em; background: var(--gs-surface-2); padding: 1px 5px; border-radius: 4px; }
.gs-prose-article code::before, .gs-prose-article code::after { content: none; }

/* Footer */
.gs-footer { border-top: 1px solid var(--gs-line); }
.gs-footer a { color: var(--gs-muted); font-size: 14px; transition: color .15s ease; }
.gs-footer a:hover { color: var(--gs-ink); }

/* --------------------------------------------------------------------------
   Overrides for retained components (What AI Said panel) so they follow tokens
   -------------------------------------------------------------------------- */
.aisaid-tab { color: var(--gs-muted) !important; }
.aisaid-tab:hover { color: var(--gs-ink) !important; }
.aisaid-tab.active,
.aisaid-tab[data-idx="0"].active,
.aisaid-tab[data-idx="2"].active { color: var(--gs-accent-ink) !important; background: var(--gs-accent-soft) !important; }
.aisaid-tab[data-idx="1"].active { color: #7e3ff2 !important; background: rgba(168, 85, 247, 0.12) !important; }
html.dark .aisaid-tab[data-idx="1"].active { color: #c4a1ff !important; background: rgba(168, 85, 247, 0.18) !important; }
.aisaid-mention { background: var(--gs-accent-soft) !important; color: var(--gs-accent-ink) !important; font-weight: 500 !important; border-radius: 4px; }
.aisaid-missing-pill { background: var(--gs-surface) !important; border-color: var(--gs-line-strong) !important; color: var(--gs-ink) !important; font-weight: 500 !important; }
.aisaid-missing-pill:hover { border-color: var(--gs-ink) !important; color: var(--gs-ink) !important; }
#aisaid-prompt { font-family: var(--gs-font) !important; font-style: normal !important; font-weight: 500; }

/* Small screens: stack the audit input, let product frames pan sideways */
@media (max-width: 560px) {
    .gs-input-row { flex-direction: column; }
    .gs-input-row input { height: 44px; }
    .gs-input-row .gs-btn { width: 100%; }
}
@media (max-width: 640px) {
    /* Product captures scale to the screen instead of scrolling sideways */
    .gs-frame img { width: 100%; height: auto; }
    .gs-display { font-size: 40px; }
    .gs-h2 { font-size: 30px; }
    .gs-logo svg { height: 28px; }
    #scoringPillars { grid-template-columns: 1fr; }
    .gs-lead { font-size: 17px; }
}
/* Hero: knowledge-network canvas behind the right half of the copy block */
.gs-hero-top { position: relative; }
.gs-hero-top > .gs-container { position: relative; z-index: 1; }
.gs-net { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.gs-net canvas { position: absolute; top: 0; right: 0; height: 100%; width: 58%;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 62% 45%, #000 20%, rgba(0,0,0,.65) 55%, transparent 90%);
    mask-image: radial-gradient(ellipse 70% 80% at 62% 45%, #000 20%, rgba(0,0,0,.65) 55%, transparent 90%); }
html.dark { --gs-net-edge-a: .22; --gs-net-node-a: .9; }
body.mode-influencer { --gs-net-node: 168,85,247; --gs-net-alt: 91,155,213; }
@media (max-width: 900px) {
    .gs-net canvas { width: 100%; opacity: .55;
        -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 60%, #000 10%, transparent 80%);
        mask-image: radial-gradient(ellipse 90% 60% at 50% 60%, #000 10%, transparent 80%); }
}
/* Grid items must be allowed to shrink below their content (scrolling frames) */
.gs-body .grid > * { min-width: 0; }
.gs-body { overflow-x: clip; }