/* Line 16001 (google-path-home-doors-r1): the home page and the front doors on the Google path, loaded only while
   ai.features.google_path_home_doors is on (layouts.partials.home-doors-style, after css/ns-tokens.css and after each
   page's own styles). The body carries .ns-gp .ns-home-doors: .ns-gp is the canonical token set of ns-tokens.css (Google's
   surface greys, #202124 ink, NetShow gold; light by default, dark under prefers-color-scheme: dark). This sheet only
   points each page's own colours, type and weights at those tokens, so no page brings a second look:
     .nsh      the home (marketing.netshow-home)          .cap   /capabilities (and `/` on netshow.ai)
     .ns-hire  /hire and /hire/{role}                     .persona  /for-me, /for-my-business, /for-my-company
     .ns-pov   /pricing-overview                          .hs    /harness in the shell
     .ns-build-page and the landing chrome: /enterprise and the landing fallbacks of the pages above.
   One type scale (--gp-*, DESIGN-GOOGLE-PATH-20260928 section 2.3: big text light, not bold), gold as ink only through
   --ns-gold-light (#b06000 on white, #fdd663 on dark), gold as a fill only on the one primary button, actions round and
   48 px tall, tabular figures on every price and table. The host's own frame (her face, the caption
   scrims) keeps its dark ground: it sits on her face. */

.ns-home-doors {
    /* Display 48/56 (phone 34/40), Title L 28/36 (phone 24/32), Title 22/28, Title S 16/24, Body 16/24, Label S 12/16. */
    --gp-h1: clamp(2.125rem, 1.6rem + 1.6vw, 3rem);
    --gp-h2: clamp(1.5rem, 1.35rem + .5vw, 1.75rem);
    --gp-h3: 1.375rem;
    --gp-title-s: 1rem;
    --gp-body: 1rem;
    --gp-eyebrow: .75rem;
    --gp-ink-accent: var(--ns-gold-light);
    --gp-focus: #00639b;
    /* Line 16097 (fix-ui-01, F-0614): the colour words of layouts.content (its CTA band, the talk openers), the ones
       css/pages/content-google-path.css maps for the content pages, so the /hire and /pricing-overview fallbacks in
       that layout read the same tokens as their page. */
    --ns-c-text: var(--ns-text);
    --ns-c-text-2: var(--ns-text-2);
    --ns-c-accent: var(--ns-gold-light);
    --ns-c-gold: var(--ns-gold);
    --ns-c-on-accent: var(--ns-on-accent);
    --ns-c-card: var(--ns-card);
    --ns-c-tint: var(--ns-surface);
    --ns-c-line: var(--ns-border-strong);
}
@media (prefers-color-scheme: dark) {
    .ns-home-doors { --gp-focus: #a8c7fa; }
}

/* Line 16097 (fix-ui-01, F-0615): /enterprise signed in sits in layouts.app, whose chrome keeps its own dress. The page
   wraps itself in .ns-home-doors.ns-gp-ag, the token set that follows the app's theme switch (data-bs-theme, dark by
   default) instead of the device scheme, so the page and the app around it never disagree. */
.ns-home-doors.ns-gp-ag {
    --gp-focus: #00639b;
    background: var(--ns-bg);
    color: var(--ns-text);
    font-family: var(--ns-font);
}
[data-bs-theme="dark"] .ns-home-doors.ns-gp-ag { --gp-focus: #a8c7fa; }

body.ns-home-doors {
    background: var(--ns-bg);
    color: var(--ns-text);
    font-family: var(--ns-font);
}

/* The split shell's content plane follows the device scheme once it carries one of these token-aware pages
   (ns-tokens.css keeps .ns-main dark for every other page). */
.ns-home-doors .ns-main:is(:has(.nsh), :has(.cap), :has(.ns-hire), :has(.persona), :has(.ns-pov), :has(.hs)) {
    --ns-bg: inherit;
    --ns-bg-deep: inherit;
    --ns-surface: inherit;
    --ns-elevated: inherit;
    --ns-card: inherit;
    --ns-text: inherit;
    --ns-text-2: inherit;
    --ns-gold: inherit;
    --ns-gold-light: inherit;
    --ns-gold-deep: inherit;
    --ns-gold-glow: inherit;
    --ns-gold-border: inherit;
    --ns-border: inherit;
    --ns-border-strong: inherit;
    --ns-on-accent: inherit;
    color-scheme: inherit;
    color: var(--ns-text);
    background: var(--ns-bg);
}

/* One type scale and Google weights on every door. */
.ns-home-doors :is(.nsh, .cap, .ns-hire, .persona, .ns-pov, .hs, .ns-build-page) {
    font-family: var(--ns-font);
    font-size: var(--gp-body);
    line-height: 1.6;
}
.ns-home-doors :is(.nsh-h1, .cap-h1, .ns-hire h1, .persona__title, .ns-pov h1, .hs h1, .ns-build-page h1) {
    color: var(--ns-text);
    font-size: var(--gp-h1);
    font-weight: 400;
    line-height: 1.17;
    letter-spacing: -.01em;
}
.ns-home-doors :is(.nsh-h2, .cap-h2, .ns-hire h2, .ns-hire__label, .persona h2, .ns-pov h2, .hs h2, .ns-build-page h2) {
    color: var(--ns-text);
    font-size: var(--gp-h2);
    font-weight: 400;
    line-height: 1.29;
    letter-spacing: 0;
}
.ns-home-doors :is(.nsh-h3, .cap-h3, .ns-hire h3, .persona h3, .ns-pov h3, .hs h3) {
    color: var(--ns-text);
    font-size: var(--gp-h3);
    font-weight: 400;
    line-height: 1.27;
}
.ns-home-doors :is(.nsh-card h3, .nsh-qa h3, .cap-row h4, .cap-price h4, .cap-pkg h3, .persona__product__name, .hs-card h3) {
    color: var(--ns-text);
    font-size: var(--gp-title-s);
    font-weight: 500;
    line-height: 1.5;
}
.ns-home-doors .cap-h3 { color: var(--gp-ink-accent) !important; }
.ns-home-doors :is(.nsh-sub, .cap-sub, .persona__blurb, .ns-pov-lead) { color: var(--ns-text-2); font-size: clamp(1rem, .95rem + .3vw, 1.125rem); }
.ns-home-doors :is(.nsh-body, .nsh-note, .nsh-steps, .nsh-card p, .nsh-qa p, .cap-lede, .cap-row p, .cap-price p,
    .cap-choose p, .cap-pkg p, .ns-hire p, .persona__product__tagline, .persona__ctaband__text, .hs p, .hs li) {
    color: var(--ns-text-2);
    font-size: var(--gp-body);
}
.ns-home-doors :is(.nsh-eyebrow, .cap-eyebrow, .hs-kicker, .persona__eyebrow) {
    color: var(--gp-ink-accent) !important;
    font-size: var(--gp-eyebrow);
    line-height: 1.33;
    font-weight: 500;
    letter-spacing: .04em;
}
.ns-home-doors :is(.nsh-card, .nsh-qa, .nsh-plan, .cap-choose li, .cap-row, .cap-price, .cap-pkg, .hs-card, .ns-pov-ladder, .persona__product, .persona__ctaband) {
    background: var(--ns-card);
    border: 1px solid var(--ns-border-strong);
    border-radius: var(--ns-radius);
    box-shadow: none;
}

/* The one primary step: gold fill, dark ink, round, 48 px. Every other action is quiet (actions are round, content is a rounded rectangle). */
.ns-home-doors :is(.nsh-btn-primary, .cap-btn-primary, .hs-btn-primary, .ns-pov-button:not(.ns-pov-button--quiet), .persona__cta__primary, .ns-hire__btn--primary, .ns-build-page .btn-primary) {
    background: var(--ns-gold);
    border: 1px solid transparent;
    color: var(--ns-on-accent) !important;
    border-radius: 9999px;
    font-weight: 500;
    min-height: 48px;
}
.ns-home-doors :is(.nsh-btn-ghost, .cap-btn-ghost, .hs-btn:not(.hs-btn-primary), .ns-pov-button--quiet, .persona__cta__secondary) {
    background: transparent;
    border: 1px solid var(--ns-border-strong);
    color: var(--ns-text) !important;
    border-radius: 9999px;
    font-weight: 500;
    min-height: 48px;
}
.ns-home-doors :is(.nsh-btn, .cap-btn) { font-size: var(--gp-body); }
/* Inside a card the extra doors read as links, so the page keeps one button that stands out. */
.ns-home-doors .nsh-card .nsh-btn-ghost {
    min-height: 48px;
    padding: 0;
    border: 0;
    color: var(--gp-ink-accent) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ns-home-doors :is(.nsh-proof, .cap-door, .hs a:not(.hs-btn), .ns-hire a:not(.ns-hire__btn), .ns-build-lines a, .ns-build-reach a,
    .nsh-plan-price, .cap-amount, .persona__product__price, .persona__product__icon) {
    color: var(--gp-ink-accent) !important;
}
.ns-home-doors :is(.nsh-ask, .nsh-look, .nsh-asklist li, .cap-tag, .cap-pkg-tag, .hs-tag, .hs-families li) {
    font-weight: 500;
    border-radius: 9999px;
    border-color: var(--ns-border-strong);
}
.ns-home-doors :is(.nsh-card-title, .nsh-plan-name, .cap-pick, .ns-pov-row-name, .persona__tier) { font-weight: 500; }
.ns-home-doors :is(.cap-pkg-tag[data-tag="live"], .hs-tag-ready) { color: var(--ns-on-accent) !important; }
.ns-home-doors :is(a, button, summary, input, select, textarea):focus-visible { outline: 2px solid var(--gp-focus); outline-offset: 2px; }

/* Tabular figures on every price and table. */
.ns-home-doors :is(table, .nsh-plan-price, .cap-amount, .ns-pov-row, .ns-hire__price-figure, .ns-hire__card-price,
    .ns-hire__top-price, .persona__product__price) { font-variant-numeric: tabular-nums; }
.ns-home-doors table { border-collapse: collapse; }
.ns-home-doors :is(th, td) { border-bottom: 1px solid var(--ns-border); padding: 8px 12px; text-align: left; }

/* /hire and /hire/{role}: the sheet's own colour set onto the tokens (as line 15830 does for /talking-signs). */
.ns-home-doors .ns-hire {
    --hire-bg: var(--ns-bg);
    --hire-panel: var(--ns-surface);
    --hire-line: var(--ns-border-strong);
    --hire-text: var(--ns-text);
    --hire-soft: var(--ns-text-2);
    --hire-accent: var(--ns-gold);
    --hire-accent-ink: var(--ns-on-accent);
}
.ns-home-doors .ns-hire :is(.ns-hire__label, .ns-hire__still-state, .ns-hire__opener, .ns-hire__trade, .ns-hire__price-figure,
    .ns-hire__card-price, .ns-hire__top-price) { color: var(--ns-text); font-weight: 500; }
.ns-home-doors .ns-hire :is(.ns-hire__still img, .ns-hire__card img, .ns-hire__host-once img, .ns-hire__tile, .ns-hire__role-icon) { background: var(--ns-surface); }
.ns-home-doors .ns-hire .ns-hire__face-caption { color: var(--ns-text-2); }
.ns-home-doors .ns-hire .ns-hire__guard { background: var(--ns-surface); color: var(--ns-text); }
.ns-home-doors .ns-hire .ns-hire__notice { background: var(--ns-surface); color: var(--ns-text); }
.ns-home-doors .ns-hire .ns-hire__btn:not(.ns-hire__btn--primary) { color: var(--ns-text); background: transparent; }
.ns-home-doors .ns-hire .ns-hire__bar-guide:focus-visible { outline-color: var(--gp-focus); }

/* The three persona doors: their --persona-* set onto the tokens, one accent (NetShow gold) instead of three. */
.ns-home-doors .persona {
    --persona-surface: var(--ns-card);
    --persona-surface-alt: var(--ns-surface);
    --persona-border: var(--ns-border);
    --persona-border-strong: var(--ns-border-strong);
    --persona-text: var(--ns-text);
    --persona-text-dim: var(--ns-text-2);
    --persona-text-mute: var(--ns-text-2);
    --persona-accent: var(--gp-ink-accent);
    --persona-glow: var(--ns-gold-glow);
    background: var(--ns-bg);
    color: var(--ns-text);
}

/* /enterprise and the landing chrome of the landing fallbacks. */
.ns-home-doors :is(.landing-bg, .landing-main) { background: var(--ns-bg) !important; color: var(--ns-text); }
.ns-home-doors :is(.landing-header, .landing-footer) { background: var(--ns-bg-deep) !important; color: var(--ns-text); border-color: var(--ns-border); }
.ns-home-doors :is(.landing-brand, .landing-link-btn) { color: var(--ns-text); }
.ns-home-doors .landing-link-btn { min-height: 48px; display: inline-flex; align-items: center; }
.ns-home-doors .landing-footer :is(a, p, div) { color: var(--ns-text-2) !important; }
.ns-home-doors .landing-footer h4 { color: var(--gp-ink-accent) !important; }
.ns-home-doors .ns-build-page { color: var(--ns-text); }
.ns-home-doors .ns-build-page :is(.lead, p, label) { color: var(--ns-text-2); }
/* Line 16710: the "Your host here is an AI agent." line (enterprise_hero_ai_line) was faint on a phone; main ink, 400. */
.ns-home-doors .ns-build-page .lead.ns-build-ai-line { color: var(--ns-text); font-weight: 400; }
.ns-home-doors .ns-build-lines li { background: var(--ns-card); border: 1px solid var(--ns-border-strong); border-radius: var(--ns-radius); color: var(--ns-text-2); }
.ns-home-doors .ns-build-lines strong { color: var(--ns-text); font-weight: 500; }
.ns-home-doors .ns-build-page hr { border-color: var(--ns-border-strong); opacity: 1; }
.ns-home-doors .ns-build-page :is(.form-control, .form-select) {
    background-color: var(--ns-card);
    color: var(--ns-text);
    border: 1px solid var(--ns-border-strong);
    border-radius: 8px;
    min-height: 48px;
    font-size: 1rem;
}
.ns-home-doors .ns-build-page :is(.form-control, .form-select):focus { border-color: var(--gp-focus); box-shadow: 0 0 0 1px var(--gp-focus); }
.ns-home-doors .ns-build-page .form-label { color: var(--ns-text); font-weight: 500; }

/* 375 px first: one column, 16 px gutters, nothing wider than the phone. */
@media (max-width: 599px) {
    /* A phone's page headline is 28/36 (the system's headline row); display size is for one short hero line only. */
    .ns-home-doors { --gp-h1: 1.75rem; --gp-h2: 1.5rem; }
    .ns-home-doors :is(.nsh-h1, .cap-h1, .ns-hire h1, .persona__title, .ns-pov h1, .hs h1, .ns-build-page h1) { line-height: 1.29; }
    /* The two first actions stack, each on one line, the one primary step on top. */
    .ns-home-doors .nsh-ctas .nsh-btn { flex: 1 1 100%; }
}
@media (max-width: 575px) {
    .ns-home-doors :is(.nsh, .cap, .ns-hire, .ns-pov, .hs) { padding-left: 16px; padding-right: 16px; }
    .ns-home-doors .ns-build-page { padding: 24px 16px !important; }
    .ns-home-doors :is(.nsh-cards, .nsh-faq, .cap-rows, .cap-price-grid, .cap-pkgs, .cap-choose) { grid-template-columns: minmax(0, 1fr); }
    .ns-home-doors :is(.nsh, .cap, .ns-hire, .persona, .ns-pov, .hs, .ns-build-page) { overflow-wrap: anywhere; min-width: 0; }
}

/* Line 16077 (fix-stage-01, F-0522): /agents, the agent directory (agents.directory on layouts.landing). Its own styles read
   the older palette names (--ns-text-primary, --ns-text-secondary, --ns-accent) and white-on-dark rgba literals; here they
   point at the same tokens. The portraits keep their own pictures; only the tile under a missing one takes the surface. */
.ns-home-doors .agents-directory {
    --ns-text-primary: var(--ns-text);
    --ns-text-secondary: var(--ns-text-2);
    --ns-accent: var(--ns-gold-light);
    color: var(--ns-text);
    font-family: var(--ns-font);
}
.ns-home-doors .agents-directory .directory-hero { background: none; }
.ns-home-doors .agents-directory .directory-hero h1 {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--ns-text);
    font-size: var(--gp-h1);
    font-weight: 400;
    line-height: 1.17;
    letter-spacing: -.01em;
}
.ns-home-doors .agents-directory .directory-hero p { color: var(--ns-text-2); font-size: var(--gp-body); line-height: 1.5; }
.ns-home-doors .agents-directory .directory-search input {
    background: var(--ns-card);
    border-color: var(--ns-border-strong);
    color: var(--ns-text);
    border-radius: 24px;
    min-height: 48px;
}
.ns-home-doors .agents-directory .directory-search input::placeholder { color: var(--ns-text-2); }
.ns-home-doors .agents-directory .directory-search input:focus { border-color: var(--gp-focus); }
.ns-home-doors .agents-directory .directory-pill { background: var(--ns-surface); border-color: var(--ns-border-strong); color: var(--ns-text-2); }
.ns-home-doors .agents-directory .directory-pill:hover { border-color: var(--ns-gold-border); color: var(--ns-text); }
.ns-home-doors .agents-directory .directory-pill--active { background: var(--ns-gold-glow); border-color: var(--ns-gold-border); color: var(--ns-text); }
.ns-home-doors .agents-directory .directory-card { background: var(--ns-card); border-color: var(--ns-border-strong); }
.ns-home-doors .agents-directory .directory-card:hover { border-color: var(--ns-gold-border); }
.ns-home-doors .agents-directory .directory-card__thumb { background: var(--ns-surface); }
.ns-home-doors .agents-directory .directory-card__initial { color: var(--ns-gold-light); }
.ns-home-doors .agents-directory .directory-card__name,
.ns-home-doors .agents-directory .directory-empty h3 { color: var(--ns-text); font-weight: 500; }
.ns-home-doors .agents-directory .directory-card__category { color: var(--ns-gold-light); }
.ns-home-doors .agents-directory :is(.directory-card__desc, .directory-empty, .directory-pagination p, .directory-pagination .text-gray-700, .directory-pagination .text-sm) { color: var(--ns-text-2); }
.ns-home-doors .agents-directory .directory-pagination .page-link { background: var(--ns-surface); border-color: var(--ns-border-strong); color: var(--ns-text-2); }
.ns-home-doors .agents-directory .directory-pagination .page-item.active .page-link { background: var(--ns-gold); border-color: var(--ns-gold); color: var(--ns-on-accent); }
.ns-home-doors .agents-directory :focus-visible { outline: 2px solid var(--gp-focus); outline-offset: 2px; }

/* H-0063: Bootstrap ships dark muted ink with !important; the directory uses the page tokens. */
.ns-home-doors .agents-directory .text-muted { color: var(--ns-text-2) !important; }

/* H-0072: the package-change link has a legacy inline dark-page colour. */
.ns-home-doors [data-ns-chosen-package] a { color: var(--ns-gold-light) !important; }
