/* The selling doors on the Google path (line 15802, upskill-doors-3-r1).
   Linked after each page's own styles, only while ai.features.offer_pages_upskill_2026 is on
   (App\Support\OfferPagesUpskill2026): /ai-employees, /industries/{industry}/{city?}, /pricing-faq and /invest.
   The values are public/css/ns-tokens.css's: Google's surface greys, NetShow gold as the one accent, Roboto, hairlines.
   - Outside the split shell (/ai-employees in layouts.content, the industry pages in layouts.landing) the page declares
     the --ns-* tokens itself: dark by default (the pages' ground today), light under prefers-color-scheme: light. The
     pages already draw through their own colour variables (--aie-* in ai-employees.css, --iv-* in the industry view's
     inline styles, each with main's literal as its fallback); this sheet points every one of them at a token.
   - Inside the split shell (/pricing-faq, /invest) the shell already declares the --ns-* tokens on its planes
     (css/pages/netshow-stage.css, re-declared by ns-tokens.css while shell_design_tokens is on), so the page reads them
     and follows the shell's scheme.
   Calm and clean: flat surfaces, one gold primary button, 44 px tap targets; 375 px first. */

/* Tokens, dark (the default). */
:where(body.ns-content-page:has(.ns-aie), body:has(.ns-iv-gp), .ns-iv-gp) {
    color-scheme: dark;
    --ns-bg: #202124;
    --ns-bg-deep: #1b1c1f;
    --ns-surface: #292a2d;
    --ns-elevated: #35363a;
    --ns-card: #2d2e31;
    --ns-text: #e8eaed;
    --ns-text-2: #9aa0a6;
    --ns-gold: #f5a623;
    --ns-gold-light: #fdd663;
    --ns-gold-deep: #c7851a;
    --ns-gold-border: rgba(245, 166, 35, .32);
    --ns-border: rgba(232, 234, 237, .12);
    --ns-border-strong: rgba(232, 234, 237, .2);
    --ns-on-accent: #202124;
    --ns-chrome: rgba(32, 33, 36, .96);
    --ns-link: #8ab4f8;
    --ns-ok: #81c995;
    --ns-info: #8ab4f8;
    --ns-font: Roboto, 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    --ns-radius: 12px;
}

/* Tokens, light. */
@media (prefers-color-scheme: light) {
    :where(body.ns-content-page:has(.ns-aie), body:has(.ns-iv-gp), .ns-iv-gp) {
        color-scheme: light;
        --ns-bg: #ffffff;
        --ns-bg-deep: #f8f9fa;
        --ns-surface: #f1f3f4;
        --ns-elevated: #e8eaed;
        --ns-card: #ffffff;
        --ns-text: #202124;
        --ns-text-2: #5f6368;
        --ns-gold: #f9ab00;
        --ns-gold-light: #b06000;
        --ns-gold-deep: #e37400;
        --ns-gold-border: rgba(176, 96, 0, .3);
        --ns-border: rgba(60, 64, 67, .14);
        --ns-border-strong: rgba(60, 64, 67, .26);
        --ns-on-accent: #202124;
        --ns-chrome: rgba(255, 255, 255, .96);
        --ns-link: #1a73e8;
        --ns-ok: #188038;
        --ns-info: #1a73e8;
    }
}

/* ---------- The layouts' top bar on the two pages outside the shell: Google chrome in both schemes ---------- */
:is(body.ns-content-page:has(.ns-aie), body:has(.ns-iv-gp)) .landing-header { background: var(--ns-bg); border-bottom-color: var(--ns-border); }
:is(body.ns-content-page:has(.ns-aie), body:has(.ns-iv-gp)) .landing-brand { color: var(--ns-text); }
:is(body.ns-content-page:has(.ns-aie), body:has(.ns-iv-gp)) :is(.landing-nav-link, .landing-link-btn) { color: var(--ns-text-2); }
:is(body.ns-content-page:has(.ns-aie), body:has(.ns-iv-gp)) :is(.landing-nav-link, .landing-link-btn):hover { color: var(--ns-text); background: var(--ns-surface); }

/* ---------- /ai-employees (layouts.content) ---------- */
body.ns-content-page:has(.ns-aie) { background: var(--ns-bg); color: var(--ns-text); font-family: var(--ns-font); }
body.ns-content-page:has(.ns-aie) .ns-content-body,
body.ns-content-page:has(.ns-aie) .ns-content-cta { background: var(--ns-bg); }
body.ns-content-page:has(.ns-aie) .ns-content-cta h2 { color: var(--ns-text); }
body.ns-content-page:has(.ns-aie) .ns-content-cta p { color: var(--ns-text-2); }
body.ns-content-page:has(.ns-aie) :is(.ns-aie-hero, .ns-aie, .ns-aie-final) {
    --aie-ink: var(--ns-text);
    --aie-text: var(--ns-text);
    --aie-muted: var(--ns-text-2);
    --aie-accent: var(--ns-gold);
    --aie-card: var(--ns-card);
    --aie-line: var(--ns-border);
    --aie-live: var(--ns-ok);
    --aie-dfy: var(--ns-info);
    --aie-build: var(--ns-gold-light);
    font-family: var(--ns-font);
}
body.ns-content-page:has(.ns-aie) .ns-aie-hero::before { display: none; }
body.ns-content-page:has(.ns-aie) :is(.ns-aie-hero h1, .ns-aie-section h2) { font-weight: 700; letter-spacing: -.01em; }
body.ns-content-page:has(.ns-aie) .ns-content-btn-primary {
    background: var(--ns-gold); color: var(--ns-on-accent); box-shadow: none; min-height: 44px;
}
body.ns-content-page:has(.ns-aie) .ns-content-btn-primary:hover { background: var(--ns-gold-deep); transform: none; box-shadow: none; }
body.ns-content-page:has(.ns-aie) .ns-content-btn-ghost,
body.ns-content-page:has(.ns-aie) .ns-aie-hero .ns-content-btn-ghost {
    background: transparent; color: var(--ns-text); border: 1px solid var(--ns-border-strong); min-height: 44px;
}
body.ns-content-page:has(.ns-aie) .ns-content-btn-ghost:hover { background: var(--ns-surface); border-color: var(--ns-border-strong); color: var(--ns-text); }
body.ns-content-page:has(.ns-aie) .ns-content-card { background: var(--ns-card); border-color: var(--ns-border); }
body.ns-content-page:has(.ns-aie) .ns-aie-job-cta { background: transparent; border-color: var(--ns-gold-border); color: var(--ns-text); }
body.ns-content-page:has(.ns-aie) .ns-aie-job-cta:hover,
body.ns-content-page:has(.ns-aie) .ns-aie-job-cta:focus-visible { background: var(--ns-surface); color: var(--ns-text); }
body.ns-content-page:has(.ns-aie) .ns-aie-moment::before { color: var(--ns-on-accent); }
/* Line 16207 (live check): gold as ink reads through --ns-gold-light; --ns-gold (1.93:1 on white) stays the fill. */
body.ns-content-page:has(.ns-aie) :is(.ns-aie-proof, .ns-aie-compare-price) { color: var(--ns-gold-light); }
body.ns-content-page:has(.ns-aie) a:focus-visible,
body.ns-content-page:has(.ns-aie) button:focus-visible { outline: 2px solid var(--ns-gold); outline-offset: 2px; }

/* ---------- /industries/{industry}/{city?} (layouts.landing) ---------- */
.ns-iv-gp {
    --iv-bg: var(--ns-bg);
    --iv-band: var(--ns-bg-deep);
    --iv-card: var(--ns-card);
    --iv-card-2: var(--ns-surface);
    --iv-panel: var(--ns-surface);
    --iv-panel-2: var(--ns-surface);
    --iv-chrome: var(--ns-surface);
    --iv-line: var(--ns-border);
    --iv-line-2: var(--ns-border);
    --iv-ink: var(--ns-text);
    --iv-ink-2: var(--ns-text);
    --iv-text: var(--ns-text);
    --iv-text-2: var(--ns-text-2);
    --iv-muted: var(--ns-text-2);
    --iv-link: var(--ns-link);
    --iv-btn: var(--ns-gold);
    --iv-btn-ink: var(--ns-on-accent);
    --iv-font: var(--ns-font);
}
/* The page's inline font-family is main's literal; the token font wins only inside the lit root. */
.ns-iv-gp { font-family: var(--iv-font) !important; }
.ns-iv-gp h1, .ns-iv-gp h2, .ns-iv-gp h3 { font-weight: 700 !important; letter-spacing: -.01em !important; }
.ns-iv-gp a:focus-visible, .ns-iv-gp button:focus-visible { outline: 2px solid var(--ns-gold); outline-offset: 2px; }
.ns-iv-gp .ns-industry-host__talk { min-height: 48px; }

/* ---------- /pricing-faq (split shell: the shell's tokens) ---------- */
.ns-pfaq { font-family: var(--ns-font, inherit); color: var(--ns-text, inherit); }
.ns-pfaq-eyebrow { color: var(--ns-text-2); opacity: 1; }
.ns-pfaq-disclosure { color: var(--ns-text-2); opacity: 1; }
.ns-pfaq-item { border-top-color: var(--ns-border); }
.ns-pfaq a:not(.ns-pfaq-button) { color: var(--ns-gold-light); }
.ns-pfaq-button { display: inline-flex; align-items: center; min-height: 44px; background: var(--ns-gold); color: var(--ns-on-accent); font-weight: 600; }
.ns-pfaq a.ns-pfaq-button { color: var(--ns-on-accent); }
.ns-pfaq a.ns-pfaq-button--quiet { background: transparent; color: var(--ns-text); border: 1px solid var(--ns-border-strong); }
.ns-pfaq-button:focus-visible, .ns-pfaq a:focus-visible { outline-color: var(--ns-gold); }

/* ---------- /invest (split shell: the shell's tokens) ---------- */
.inv { color: var(--ns-text); font-family: var(--ns-font, inherit); }
.inv-kicker { color: var(--ns-gold-light); }
.inv h1, .inv h2 { font-weight: 700; }
.inv-lede, .inv-tile-note { color: var(--ns-text-2); }
.inv-claim, .inv-tile { border-color: var(--ns-border); background: var(--ns-card); }
.inv-evidence, .inv-angles span, .inv-table-cue { color: var(--ns-text-2); }
.inv-table-wrap { border-color: var(--ns-border); }
.inv-table th, .inv-table td { border-bottom-color: var(--ns-border); }
.inv-table th { background: var(--ns-surface); }
.inv-angles a { border-color: var(--ns-border); background: var(--ns-card); min-height: 44px; }
.inv-angles a[aria-current="page"] { border-color: var(--ns-gold); }
.inv-prepared { color: var(--ns-text); border-color: var(--ns-gold-border); }
.inv-host-label { color: var(--ns-gold-light); }
.inv-host-line { color: var(--ns-text); }
.inv-host-voice { margin: 0; padding: 0 12px 8px; font-size: .8rem; line-height: 1.35; color: var(--ns-text-2); }
.ns-planes.ns-host-sliver .inv-host-voice { display: none; }
/* Line 16211: the accent stays the fill gold; text drawn with it takes the text gold, which reads in light and dark. */
body.ns-content-page:has(.ns-aie) :is(.ns-aie-proof, .ns-aie-price, .ns-aie-compare-price) { color: var(--ns-gold-light); }