/* Line 2353 (2026-09-25) — /ai-employees, B build 'job first'. Page-only; the shell
   (layouts/content) owns the fonts, the dark ground and the .ns-content-btn-* buttons.
   Tokens mirror the shell's own values so the page never brings a second look.
   Line 15811 (upskill-doors-12): inside the Google-path shell (public/css/ns-tokens.css) the page reads the shell's
   --ns-* tokens; everywhere else each fallback is main's own value, so nothing changes outside the shell. */
.ns-aie-hero, .ns-aie, .ns-aie-final {
    --aie-ink: var(--ns-text, #f0f0f5);
    --aie-text: #e2e8f0;
    --aie-muted: var(--ns-text-2, #94a3b8);
    --aie-accent: var(--ns-gold, #f59e0b);
    --aie-card: var(--ns-card, rgba(22, 33, 62, .5));
    --aie-line: rgba(255, 255, 255, .08);
    --aie-live: #34d399;
    --aie-dfy: #60a5fa;
    --aie-build: #fbbf24;
}

.ns-aie *, .ns-aie-hero *, .ns-aie-final * { box-sizing: border-box; min-width: 0; }

/* Hero: h1, sub and both buttons fit the first phone viewport. */
.ns-aie-hero { padding: 1.75rem 0 2rem; text-align: left; }
.ns-aie-hero-inner { max-width: 880px; }
.ns-aie-host { display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; color: var(--aie-muted); font-size: .9rem; }
/* Line 7253: the host's face owns the hero, 240 px here and 160 px at 480 px and below. */
.ns-aie-face { width: 240px; height: 240px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; border: 3px solid var(--aie-accent); flex: 0 0 auto; }
.ns-aie-hero h1 { font-size: clamp(1.75rem, 6vw, 3.4rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.08; color: var(--aie-ink); margin: 0 0 .8rem; }
.ns-aie-sub { color: var(--aie-text); font-size: clamp(1rem, 2.4vw, 1.2rem); line-height: 1.55; margin: 0 0 1.1rem; max-width: 680px; }
.ns-aie-ctas { display: flex; flex-wrap: wrap; gap: .6rem; }
.ns-aie-btn { padding: 12px 22px; font-size: .98rem; justify-content: center; }
/* Line 10992 (company_doors_talk_in_place): 'Talk to Mr. NetShow' as a button (it starts the lent dock's talk in place) wears the link's look. */
button.ns-aie-btn { font-family: inherit; line-height: inherit; cursor: pointer; }
button.ns-content-btn-primary.ns-aie-btn { border: 0; }
button.ns-content-btn-ghost.ns-aie-btn { background: transparent; }
/* The hero ghost button wears the hero ink: the layout ghost grey (#94a3b8) read as disabled beside the h1. */
.ns-aie-hero .ns-content-btn-ghost { color: var(--aie-ink); border-color: rgba(240, 240, 245, .55); }
.ns-aie-quiet { color: var(--aie-muted); font-size: .88rem; margin: .9rem 0 0; }

/* Sections */
.ns-aie-section { padding: 2.25rem 0; border-top: 1px solid var(--aie-line); }
.ns-aie-section:first-child { border-top: 0; padding-top: 0; }
.ns-aie-section h2 { font-size: clamp(1.45rem, 4vw, 2.2rem); font-weight: 900; color: var(--aie-ink); letter-spacing: -.02em; margin: 0 0 .5rem; }
.ns-aie-lead { color: var(--aie-muted); margin: 0 0 1.25rem; max-width: 680px; }

/* Tags */
.ns-aie-tag { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; vertical-align: 1px; }
.ns-aie-tag--live { color: var(--aie-live); }
.ns-aie-tag--done_for_you { color: var(--aie-dfy); }
.ns-aie-tag--in_build { color: var(--aie-build); }
.ns-aie-proposed { display: inline-block; margin-left: .45rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; color: var(--aie-build); border: 1px dashed var(--aie-build); border-radius: 6px; padding: 1px 6px; }
.ns-aie-legend { color: var(--aie-muted); font-size: .88rem; display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; margin: 1.1rem 0 0; }

/* Jobs */
.ns-aie-jobs { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 700px) { .ns-aie-jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ns-aie-jobs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ns-aie-job { display: flex; flex-direction: column; background: var(--aie-card); border: 1px solid var(--aie-line); border-radius: 14px; padding: 1.25rem; scroll-margin-top: calc(var(--landing-header-height, 72px) + 16px); }
/* Line 5780: /ai-employees#<rung> lands the card's title below the sticky landing header. At 760px and
   under that header wraps its nav (landing.css) and measured 171px tall at 375px, not 72px. */
@media (max-width: 760px) { .ns-aie-job { scroll-margin-top: 188px; } }
.ns-aie-job.is-proposed { border-style: dashed; }
.ns-aie-job-title { font-size: 1.2rem; font-weight: 800; color: var(--aie-ink); margin: 0 0 .25rem; line-height: 1.25; }
.ns-aie-job-name { color: var(--aie-muted); font-size: .9rem; margin: 0 0 .75rem; }
.ns-aie-price { font-size: 1.6rem; font-weight: 900; color: var(--aie-accent); margin: 0; line-height: 1.2; }
.ns-aie-price-note { color: var(--aie-muted); font-size: .82rem; margin: .25rem 0 .9rem; }
.ns-aie-includes { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .55rem; }
.ns-aie-includes li { color: var(--aie-text); font-size: .93rem; line-height: 1.45; }
.ns-aie-job-cta { margin-top: auto; display: block; text-align: center; padding: 11px 16px; border-radius: 999px; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .45); color: var(--aie-ink); font-weight: 800; text-decoration: none; }
.ns-aie-job-cta:hover, .ns-aie-job-cta:focus-visible { background: rgba(245, 158, 11, .22); color: var(--aie-ink); }

/* A day */
.ns-aie-day { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; counter-reset: aieday; }
@media (min-width: 1000px) { .ns-aie-day { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ns-aie-moment { counter-increment: aieday; background: var(--aie-card); border: 1px solid var(--aie-line); border-radius: 12px; padding: 1rem; }
.ns-aie-moment::before { content: counter(aieday); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--aie-accent); color: #0a0a0f; font-weight: 900; font-size: .85rem; margin-bottom: .5rem; }
.ns-aie-moment p { margin: 0 0 .4rem; color: var(--aie-text); font-size: .93rem; }
.ns-aie-moment-head strong { color: var(--aie-ink); display: block; margin-bottom: .25rem; }
.ns-aie-proof { color: var(--aie-accent); font-weight: 700; font-size: .9rem; }
.ns-aie-lobby { color: var(--aie-text); font-size: .93rem; line-height: 1.45; margin: 0 0 1rem; overflow-wrap: anywhere; }

/* Compare: a table on wide screens, one collapsible block per package on a phone. */
.ns-aie-compare-table-wrap { display: none; }
.ns-aie-compare-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.ns-aie-compare-table th, .ns-aie-compare-table td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--aie-line); vertical-align: top; color: var(--aie-text); }
.ns-aie-compare-table thead th { color: var(--aie-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.ns-aie-compare-table tbody th { color: var(--aie-ink); font-weight: 800; width: 24%; }
.ns-aie-compare-price { color: var(--aie-accent); font-weight: 800; font-size: .9rem; }
.ns-aie-compare-stack { display: grid; gap: .6rem; }
.ns-aie-compare-block { background: var(--aie-card); border: 1px solid var(--aie-line); border-radius: 12px; padding: .2rem 1rem; }
.ns-aie-compare-block summary { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; padding: .8rem 0; cursor: pointer; color: var(--aie-ink); font-weight: 800; }
.ns-aie-compare-block[open] { padding-bottom: 1rem; }
@media (min-width: 900px) {
    .ns-aie-compare-table-wrap { display: block; }
    .ns-aie-compare-stack { display: none; }
}

/* After, human, FAQ */
.ns-aie-steps { margin: 0; padding-left: 1.3rem; display: grid; gap: .6rem; color: var(--aie-text); }
.ns-aie-steps strong { color: var(--aie-ink); }
.ns-aie-human p { color: var(--aie-muted); }
.ns-aie-human-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.ns-aie-human-list a { display: inline-block; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--aie-line); color: var(--aie-ink); font-weight: 700; text-decoration: none; }
.ns-aie-human-list a:hover, .ns-aie-human-list a:focus-visible { border-color: rgba(245, 158, 11, .45); }
.ns-aie-faq { border-bottom: 1px solid var(--aie-line); padding: .8rem 0; }
.ns-aie-faq summary { cursor: pointer; color: var(--aie-ink); font-weight: 800; }
.ns-aie-faq p { color: var(--aie-text); margin: .6rem 0 0; }

.ns-aie-final { text-align: center; }
.ns-aie-final-inner h2 { font-size: clamp(1.5rem, 4vw, 2.4rem); font-weight: 900; color: var(--aie-ink); margin: 0 0 .6rem; }
.ns-aie-final-inner p { color: var(--aie-muted); margin: 0 0 1.2rem; }
.ns-aie-final .ns-aie-ctas { justify-content: center; }

@media (max-width: 480px) {
    .ns-aie-btn { flex: 1 1 100%; }
    .ns-aie-face { width: 160px; height: 160px; }
}

/* Line 11011 (company_doors_greet_on_time): while the dock says his hello behind the portrait, alive-dock-own-stage.js
   marks .ns-aie-host data-host-speaking="1" and unhides the caption slot: a gentle pulsing ring outside his gold border
   (a still ring when motion is reduced) and the line he is saying in place of 'Hosted by', 'an AI agent' kept. The slot
   renders only when the page lends him its dock and stays [hidden] until he speaks, so the key off paints nothing new. */
.ns-aie-host[data-host-speaking="1"] .ns-aie-face { animation: ns-aie-host-speaks 1.6s ease-in-out infinite; }
@keyframes ns-aie-host-speaks {
    0%, 100% { box-shadow: 0 0 0 3px rgba(245, 158, 11, .4); }
    50% { box-shadow: 0 0 0 9px rgba(245, 158, 11, .14); }
}
.ns-aie-host-says:not([hidden]) { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.ns-aie-host-who { color: var(--aie-muted); font-size: .8rem; }
.ns-aie-host-line { display: block; color: var(--aie-ink); font-size: 1rem; font-weight: 700; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) {
    .ns-aie-host[data-host-speaking="1"] .ns-aie-face { animation: none; box-shadow: 0 0 0 5px rgba(245, 158, 11, .35); }
}
/* Beside the 160 px face a phone has about 170 px of line: three lines there, never a chat box. */
@media (max-width: 480px) {
    .ns-aie-host-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; white-space: normal; font-size: .95rem; }
}
/* Line 12642, corrected by Line 13201 (ai.features.aie_works_with_gutter): the resting pill
   occupies the bottom-right corner, not a tablet sidebar. Keep the native card columns and
   reserve bottom clearance through 1199 px for both the strip and the following price grid.
   Reuse the strip's page-only feature mark so key-off HTML stays byte-identical.
   Line 13221 (ai-employees-works-with-gutter-sized-to-rest-pill-r1, same key): live check 86f500bcdd3 (OU-DN) measured the
   served pill resting from 768 px up as a corner box about 232x72 px, 16 px in, so from 768 to 1199 px the clearance is sized to
   that 72 px height, and each price card's 'Book a build call' link carries the same scroll margin, so a card scrolled or tabbed
   into view ends above the pill, never under it. */
@media (max-width: 1199.98px) {
    body:has(.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]) .ns-aie .keyed-in-strip[data-aie-works-with-gutter="1"] { padding-bottom: calc(64px + 16px + 16px + env(safe-area-inset-bottom)); }
    body:has(.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]) .ns-aie .keyed-in-strip[data-aie-works-with-gutter="1"] h2,
    body:has(.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]) .ns-aie .keyed-in-strip[data-aie-works-with-gutter="1"] .keyed-in-grid > li { scroll-margin-bottom: calc(64px + 16px + 16px + env(safe-area-inset-bottom)); }
    body:has(.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]) .ns-aie .keyed-in-strip[data-aie-works-with-gutter="1"] ~ #jobs .ns-aie-jobs { padding-bottom: calc(64px + 16px + 16px + env(safe-area-inset-bottom)); }
    body:has(.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]) .ns-aie .keyed-in-strip[data-aie-works-with-gutter="1"] ~ #jobs #ns-aie-jobs-title,
    body:has(.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]) .ns-aie .keyed-in-strip[data-aie-works-with-gutter="1"] ~ #jobs .ns-aie-job,
    body:has(.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]) .ns-aie .keyed-in-strip[data-aie-works-with-gutter="1"] ~ #jobs .ns-aie-job-cta { scroll-margin-bottom: calc(64px + 16px + 16px + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    body:has(.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]) .ns-aie .keyed-in-strip[data-aie-works-with-gutter="1"] { padding-bottom: calc(72px + 16px + 16px + env(safe-area-inset-bottom)); }
    body:has(.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]) .ns-aie .keyed-in-strip[data-aie-works-with-gutter="1"] h2,
    body:has(.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]) .ns-aie .keyed-in-strip[data-aie-works-with-gutter="1"] .keyed-in-grid > li { scroll-margin-bottom: calc(72px + 16px + 16px + env(safe-area-inset-bottom)); }
    body:has(.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]) .ns-aie .keyed-in-strip[data-aie-works-with-gutter="1"] ~ #jobs .ns-aie-jobs { padding-bottom: calc(72px + 16px + 16px + env(safe-area-inset-bottom)); }
    body:has(.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]) .ns-aie .keyed-in-strip[data-aie-works-with-gutter="1"] ~ #jobs #ns-aie-jobs-title,
    body:has(.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]) .ns-aie .keyed-in-strip[data-aie-works-with-gutter="1"] ~ #jobs .ns-aie-job,
    body:has(.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]) .ns-aie .keyed-in-strip[data-aie-works-with-gutter="1"] ~ #jobs .ns-aie-job-cta { scroll-margin-bottom: calc(72px + 16px + 16px + env(safe-area-inset-bottom)); }
    /* Line 14052 (walk-513 FF-51q, same key): the gutter and scroll margins clear a card scrolled or tabbed into view, not the one
       at the fold before any scroll (the Grok card under his pill at 768). The grid itself reserves his corner: its last column ends
       the resting pill's served width (232 px) + 16 px short of the viewport's right edge at every scroll offset. The column is
       centred, so (100vw - 100%) / 2 is the room already right of the grid's box. */
    body:has(.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]) .ns-aie .keyed-in-strip[data-aie-works-with-gutter="1"] .keyed-in-grid { padding-right: max(0px, calc(232px + 16px - (100vw - 100%) / 2)); }
    /* Line 14672 (OV-JZ live check on 620016bdd5, same key): the page now opens on his portrait hero, so on the first screen at 768
       and 1024 his resting pill sat on the 'Every AI employee comes with' list ('as a file you can downl...', 'your visitor's br...').
       The band keeps the same corner reserve as the grid; it comes before the strip, so the strip's page mark keys it by :has(). */
    body:has(.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]) .ns-aie:has(> .keyed-in-strip[data-aie-works-with-gutter="1"]) > [data-ai-employees-comes-with] { padding-right: max(0px, calc(232px + 16px - (100vw - 100%) / 2)); }
}
/* Line 14520 (ai-employees-anchor-landing-face-only-off-price-line-r2, ai.features.ai_employees_pill_folds_after_anchor_landing):
   the dock's Talk and caption sit in .ns-door-voice-controls, painted as display:contents (css/door-voice-first.css), so the
   fold's opacity on that wrapper paints no change and his Talk chip stayed on the price line. Lit, the script marks the folded
   dock data-aie-pill-face-only="1" and what that wrapper holds goes clear and takes no taps too: the fold is his face only.
   The script sets the mark only with the key on and only while it folds him, so with the key off nothing here matches. */
.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-aie-pill-face][data-aie-pill-face-only="1"] > .ns-door-voice-controls > * { opacity: 0; pointer-events: none; }
/* Line 15272 (same key as 14073, ai-employees-rest-pill-yields-to-comes-with-heading-phone-r2): at 480 px and under, while he
   greets or speaks over a word of the 'Every AI employee comes with' section, js/pages/ai-employees-pill-yields.js marks the
   dock data-aie-pill-rise="1" and writes --aie-pill-dy, the climb of the whole pill straight up from his bottom-right rest to
   a band with no words in the screen's bottom half (0px when his face folds there instead). It replaces any other script's
   move while the mark holds; the pill keeps its box, so nothing on the page moves. Only the script sets the mark, so with
   the key off nothing here matches. */
@media (max-width: 480px) {
    .alive-dock.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-aie-pill-rise="1"] { translate: 0px var(--aie-pill-dy, 0px) !important; }
}
/* Line 14073 (ai.features.aie_rest_pill_holds_corner, on line 13481's script): with the price or 'Works with' cards on
   screen the script marks the dock data-alive-dock-holds-corner="1" and folds him at every width, so from 1200 px his face
   form below reads the same, held in the corner. Only the script sets both marks, so with the key off nothing here matches. */
@media (min-width: 1200px) {
    .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-alive-dock-holds-corner="1"][data-aie-pill-face] { background: transparent; border-color: transparent; box-shadow: none; overflow: visible; pointer-events: none; }
    .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-alive-dock-holds-corner="1"][data-aie-pill-face] > :not([data-ns-door-face]) { opacity: 0; pointer-events: none; }
    .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-alive-dock-holds-corner="1"][data-aie-pill-face] > .ns-door-voice-controls > * { visibility: hidden; opacity: 0; pointer-events: none; }
    .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-alive-dock-holds-corner="1"][data-aie-pill-face] > [data-ns-door-face] { translate: var(--aie-pill-face-dx, 0px) 0; pointer-events: auto; cursor: pointer; }
    .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-alive-dock-holds-corner="1"][data-aie-pill-face="clear"] > [data-ns-door-face] { opacity: 0; pointer-events: none; }
}
/* Line 13481 (fix-forward of line 13201, ai.features.aie_works_with_gutter): the gutter clears the grids' ends, not the
   cards passing under him mid-scroll. js/pages/ai-employees-pill-yields.js (loaded only while the key is on) marks the
   resting dock data-aie-pill-face="1" while a job card's or a 'Works with' card's words cross the pill: only his round
   face with its AI mark stays, moved to the pill's right end (--aie-pill-face-dx), so he keeps his bottom-right rest.
   The pill keeps its box (nothing on the page moves); its name, caption, Talk and Open go clear and take no taps, its
   round clip lets go so the AI mark on his face is whole at the right end, and a tap on his face opens his panel. "clear": a title or a price still runs under his face, so it steps aside too until
   that line has passed. Only the script sets the mark, so with the key off nothing here matches. */
/* Line 14673 (same key as 14073, ai-employees-rest-pill-yields-to-comes-with-heading-phone-r1): at 480 px and under the
   script may also set --aie-pill-face-dy, the climb of his face above a line of the 'Every AI employee comes with' heading;
   unset it is 0px, the translate main paints. */
@media (max-width: 1199.98px) {
    .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-aie-pill-face] { background: transparent; border-color: transparent; box-shadow: none; overflow: visible; pointer-events: none; }
    .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-aie-pill-face] > :not([data-ns-door-face]) { opacity: 0; pointer-events: none; }
    /* Line 14891 (walk-542 FF-48b): door-voice-first.css lays the pill's .ns-door-voice-controls out with display:contents, and a
       box-less wrapper paints nothing of its own, so the opacity above never reached its caption, Talk and Menu: Talk stayed
       painted on the job cards' words. Its children fold themselves; the mark cleared, nothing here matches. */
    .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-aie-pill-face] > .ns-door-voice-controls > * { visibility: hidden; opacity: 0; pointer-events: none; }
    .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-aie-pill-face] > [data-ns-door-face] { translate: var(--aie-pill-face-dx, 0px) var(--aie-pill-face-dy, 0px); pointer-events: auto; cursor: pointer; }
    .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-aie-pill-face="clear"] > [data-ns-door-face] { opacity: 0; pointer-events: none; }
}
/* Line 14392 (ai.features.aie_pill_clears_host_photo, on line 13481's script): at 480 px and under, once the resting pill
   crosses his hero portrait or the 'Hosted by' line beside it, js/pages/ai-employees-pill-yields.js marks the dock
   data-aie-pill-below-host="1" and writes --aie-pill-host-dy, the offset from his bottom-right rest to the nearest spot clear
   of them. The offset replaces any other script's move (!important outranks an inline translate) while the mark holds; the
   pill keeps its box, so nothing on the page moves. Only the script sets the mark, so with the key off nothing here matches. */
@media (max-width: 480px) {
    .alive-dock.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-aie-pill-below-host="1"] { translate: 0px var(--aie-pill-host-dy, 0px) !important; }
}