/* NetShow split shell (line 1873, netshow-split-shell-kit-r1): layouts/netshow-stage.blade.php.
   The planes, splitter, sliver and tight bar are lifted from Michael's ACT home_iframe container
   format in the voice repo's public/wcis-site/index.html (:21-160); the full-width top bar follows
   the one-top-menu pattern of Rose's alive page. Colours are NetShow's landing-v4 dark and gold.
   Line 1986: the palette is declared on the top menu and the footer index too, so layouts.landing
   draws them (behind landing_top_menu) with the same colours outside the shell. */
.ns-stage-body, .ns-tm, .ns-foot {
    --ns-bg: #060610;
    --ns-bg-deep: #0a0a14;
    --ns-surface: #12121e;
    --ns-elevated: #1a1a2a;
    --ns-card: #161624;
    --ns-text: #f0f0f5;
    --ns-text-2: #b4b4c8;
    --ns-gold: #f5a623;
    --ns-gold-light: #ffcf73;
    --ns-gold-deep: #c7851a;
    --ns-gold-glow: rgba(245, 166, 35, .25);
    --ns-gold-border: rgba(245, 166, 35, .28);
    --ns-border: rgba(255, 255, 255, .08);
    --ns-border-strong: rgba(255, 255, 255, .14);
    /* Line 15532: the chrome, host glow, splitter, on-accent ink and speaking ring the sheet and the layout used to
       write as literals; same values, so public/css/ns-tokens.css (shell_design_tokens) can dress them. */
    --ns-on-accent: #1a1206;
    --ns-chrome: rgba(10, 10, 20, .96);
    --ns-chrome-soft: rgba(10, 10, 20, .85);
    --ns-host-glow: #1c1a2e;
    --ns-splitter-mid: #2a2638;
    --ns-speaking: #5eead4;
    --ns-font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ns-radius: 14px;
    --ns-tm-h: 64px;
    --ns-bar-h: 56px;
    --ns-panebar-h: 44px;
}
.ns-stage-body {
    margin: 0;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--ns-bg);
    color: var(--ns-text);
    font: 16px/1.55 var(--ns-font);
}
.ns-stage-body *, .ns-stage-body *::before, .ns-stage-body *::after { box-sizing: border-box; }
.ns-stage-body [hidden] { display: none !important; }
/* Line 1785: an existing page in the content plane (.ns-stage-inner) keeps its own link colours; :where() keeps this at 0,1,1. */
.ns-stage-body a:where(:not(.ns-stage-inner .ns-main a, #ns-stage-dock a)) { color: var(--ns-gold-light); }
/* Line 5640: the Alive dock TALK opens on a page without the shell's own voice (#ns-stage-dock) keeps its own link colours
   (above) and its phone padding never pushes this fixed-height body. */
.ns-stage-body:has(#ns-stage-dock) { padding-bottom: 0; }
.ns-stage-body :focus-visible { outline: 2px solid var(--ns-gold); outline-offset: 2px; }
.ns-skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ns-gold); color: var(--ns-on-accent) !important; padding: 8px 14px; border-radius: 8px; font-weight: 800; text-decoration: none; }
.ns-skip:focus { top: 8px; }

/* ---- the one top menu: full width, above both planes ---- */
.ns-tm, .ns-foot { font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.ns-tm { position: sticky; top: 0; z-index: 50; flex: 0 0 var(--ns-tm-h); height: var(--ns-tm-h); display: flex; align-items: center; gap: 18px; padding: 0 20px; background: var(--ns-chrome); border-bottom: 1px solid var(--ns-border); }
.ns-tm-logo { display: inline-flex; align-items: center; min-height: 44px; gap: 10px; color: var(--ns-text) !important; font-weight: 800; font-size: 19px; letter-spacing: .01em; text-decoration: none; white-space: nowrap; }
.ns-tm-mark { color: var(--ns-gold); flex: none; }
.ns-tm-nav { flex: 1 1 auto; min-width: 0; }
.ns-tm-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.ns-tm-item > a, .ns-tm-group summary { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 8px 12px; border-radius: 10px; color: var(--ns-text-2) !important; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.ns-tm-item > a:hover, .ns-tm-group summary:hover, .ns-tm-group details[open] > summary { color: var(--ns-text) !important; background: var(--ns-elevated); }
.ns-tm-group { position: relative; }
.ns-tm-group summary { list-style: none; }
.ns-tm-group summary::-webkit-details-marker { display: none; }
.ns-tm-caret { transition: transform .15s ease; }
.ns-tm-group details[open] .ns-tm-caret { transform: rotate(180deg); }
.ns-tm-drop { list-style: none; margin: 0; padding: 6px; position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; background: var(--ns-surface); border: 1px solid var(--ns-border-strong); border-radius: 12px; box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .8); }
.ns-tm-drop a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: 8px; color: var(--ns-text) !important; font-weight: 600; font-size: 15px; text-decoration: none; }
.ns-tm-drop a:hover { background: var(--ns-elevated); color: var(--ns-gold-light) !important; }
.ns-tm-cta { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 999px; background: var(--ns-gold); color: var(--ns-on-accent) !important; font-weight: 800; font-size: 15px; text-decoration: none; white-space: nowrap; box-shadow: 0 10px 30px -10px var(--ns-gold-glow); }
.ns-tm-cta:hover { background: var(--ns-gold-light); }
.ns-tm-toggle { display: none; flex: none; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; border-radius: 10px; background: var(--ns-elevated); color: var(--ns-text); border: 1px solid var(--ns-border-strong); font-weight: 700; font-size: 15px; line-height: 1; font-family: inherit; cursor: pointer; }
/* Line 9080: with every menu row lit the links need 1180 px beside the filled button (measured, Nunito); narrower, they fold behind the menu button instead of running under it. */
@media (max-width: 1179px) {
    .ns-tm { gap: 10px; padding: 0 12px; }
    .ns-tm-toggle { display: inline-flex; }
    .ns-tm-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100dvh - var(--ns-tm-h)); overflow-y: auto; padding: 10px 12px 16px; background: var(--ns-surface); border-bottom: 1px solid var(--ns-border-strong); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9); }
    .ns-tm.is-open .ns-tm-nav { display: block; }
    .ns-tm-list { flex-direction: column; align-items: stretch; gap: 2px; }
    .ns-tm-item > a, .ns-tm-group summary { width: 100%; justify-content: space-between; min-height: 48px; font-size: 16px; }
    .ns-tm-drop { position: static; min-width: 0; box-shadow: none; border: 0; background: transparent; padding: 0 0 6px 12px; }
    .ns-tm-cta { margin-left: auto; }
    .ns-tm-nav + .ns-tm-toggle { margin-left: auto; } /* no filled button: the menu button still sits at the edge */
}
@media (max-width: 420px) {
    .ns-tm-logo span { font-size: 17px; }
    .ns-tm-cta { padding: 9px 12px; font-size: 14px; }
    .ns-tm-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .ns-tm-toggle { padding: 8px 10px; }
}
@media (max-width: 359px) {
    .ns-tm-logo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Line 14354 (agent-profile-foot-links-clear-of-sticky-header-phone-r1): at 375 the phone footer index is taller than
   the screen, so at the foot the sticky bar sat over its links (live check b962c85a27, /agent/mrs-netshow). In
   layouts.landing the bar leaves by the footer's overlap (netshow-stage.js mountMenu), clipped to its box so the filled
   button's glow leaves with it; 768 px and up never move. */
@media (max-width: 767.98px) {
    .ns-tm[data-ns-tm-foot]:not(.is-open) { transform: translateY(calc(-1 * var(--ns-tm-foot-push, 0px))); clip-path: inset(0); }
}

/* ---- the two planes and the splitter (template :25-30) ---- */
.ns-planes { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: row; width: 100%; }
.ns-host { position: relative; flex: 0 0 var(--ns-host-size, 380px); min-width: 84px; max-width: 70vw; height: 100%; display: flex; flex-direction: column; background: radial-gradient(120% 80% at 50% 20%, var(--ns-host-glow) 0%, var(--ns-bg-deep) 70%); overflow: hidden; }
.ns-splitter { flex: 0 0 10px; cursor: col-resize; background: linear-gradient(to right, var(--ns-surface), var(--ns-splitter-mid), var(--ns-surface)); display: flex; align-items: center; justify-content: center; touch-action: none; user-select: none; z-index: 5; }
.ns-splitter:hover, .ns-splitter:focus-visible { background: linear-gradient(to right, var(--ns-surface), var(--ns-gold-deep), var(--ns-surface)); }
.ns-nub { width: 4px; height: 46px; border-radius: 3px; background: var(--ns-gold-border); pointer-events: none; }
.ns-content { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; overflow-y: auto; overflow-x: hidden; background: var(--ns-bg); scroll-behavior: smooth; }
.ns-main { outline: none; }
.ns-planes.ns-swapped { flex-direction: row-reverse; }
.ns-planes.ns-host-min .ns-host { flex-basis: 84px !important; min-width: 84px; }

/* ---- the host plane: name and role, the still face, the tight bar ---- */
.ns-panebar { flex: 0 0 var(--ns-panebar-h); display: flex; align-items: center; gap: 8px; padding: 0 10px 0 14px; background: var(--ns-chrome-soft); border-bottom: 1px solid var(--ns-border); }
.ns-host-id { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; }
.ns-host-name { font-weight: 800; font-size: 15px; color: var(--ns-text); }
.ns-host-role { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ns-gold); overflow: hidden; text-overflow: ellipsis; }
.ns-swap { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 32px; border-radius: 8px; background: var(--ns-elevated); color: var(--ns-text); border: 1px solid var(--ns-border-strong); cursor: pointer; }
.ns-swap:hover { border-color: var(--ns-gold); color: var(--ns-gold-light); }
.ns-face { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ns-face img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* Line 9011 (pricing-faq-host-face-mouth-above-bar-r1, stage_face_floor_narrow): on a phone or tablet the face box is
   wide and short (375x188 at 375x812, 768x375 at 768x1024), and cover scaled the portrait to its width, so only a
   forehead-to-nose band showed over the TALK bar. Lit, the still portrait is never wider than its own aspect at the
   box's height: a wide box shows the whole face, mouth and chin above the bar; a tall box crops its sides as before.
   The drawer's size is not touched (line 5646 keeps the hero's buttons above it); the sliver and 1024 px up are main's. */
@media (max-width: 1023px) {
    .ns-planes.ns-face-floor:not(.ns-host-sliver) .ns-face img { width: auto; max-width: 100%; height: 100%; }
}
.ns-bar { flex: 0 0 var(--ns-bar-h); display: flex; align-items: stretch; gap: 1px; background: var(--ns-bg); border-top: 1px solid var(--ns-border); z-index: 45; }
.ns-bar button { flex: 1 1 auto; min-width: 0; padding: 0 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: var(--ns-surface); color: var(--ns-text); border: 0; font-weight: 800; font-size: 12px; line-height: 1.1; font-family: inherit; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; }
.ns-bar button:hover, .ns-bar button[aria-pressed="true"], .ns-bar button[aria-expanded="true"] { background: var(--ns-elevated); color: var(--ns-gold-light); }
.ns-bar button svg { flex: none; }
.ns-bar-slot { display: contents; }
/* Spanish labels are one short word (the long words stay in title and aria-label); the type is sized
   against the host pane, never the viewport, so every button fits at 375 and in the 380 px desktop pane.
   Line 15135 (es-stage-bar-labels-12px-and-tablet-holds-still-r1): the pane-sized clamp bottomed out at 8.6 px
   (live check 3, /es/empleados-ia at 375 and 1440) and English sat at 10.5 px. Every bar label is 12 px now, the
   house minimum: each button starts from its own label's width and shares what is left (flex 1 1 auto, 2 px
   sides), English keeps its capitals with .02em tracking, Spanish is written in sentence case, so the seven
   Spanish words need 352 px and the English 243 px of the 375 px phone and 380 px desk bars, one row, 55 px tall. */
html[lang="es"] .ns-host { container-type: inline-size; }
html[lang="es"] .ns-bar button { letter-spacing: 0; text-transform: none; }
.ns-pop { position: absolute; left: 10px; right: 10px; bottom: calc(var(--ns-bar-h) + 8px); z-index: 47; max-height: calc(100% - var(--ns-bar-h) - var(--ns-panebar-h) - 20px); overflow-y: auto; padding: 12px; background: var(--ns-surface); border: 1px solid var(--ns-border-strong); border-radius: 12px; box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .85); font-size: 14px; color: var(--ns-text-2); }
.ns-pop p { margin: 0 0 8px; }
.ns-pop-hd { font-size: 11px !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ns-gold) !important; margin: 6px 0 6px !important; }
.ns-pop button { display: block; width: 100%; text-align: left; margin: 2px 0; padding: 9px 10px; border-radius: 8px; background: none; border: 0; color: var(--ns-text); font-weight: 700; font-size: 14px; line-height: 1.3; font-family: inherit; cursor: pointer; }
.ns-pop button span { font-weight: 600; color: var(--ns-text-2); font-size: 12px; margin-left: 6px; }
.ns-pop button:hover, .ns-pop button[aria-pressed="true"] { background: var(--ns-elevated); color: var(--ns-gold-light); }
/* line 1800: the save row before any words: still focusable and read out, visibly resting */
.ns-pop button[aria-disabled="true"], .ns-pop button[aria-disabled="true"]:hover { background: none; color: var(--ns-text-2); font-weight: 600; cursor: default; }
.ns-reach-list { list-style: none; margin: 0; padding: 0; }
.ns-reach-list a { display: block; padding: 9px 10px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.ns-reach-list a:hover { background: var(--ns-elevated); }
.ns-debug { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--ns-border-strong); }
.ns-vol { position: absolute; left: 30%; bottom: calc(var(--ns-bar-h) + 8px); z-index: 60; padding: 10px 12px; background: var(--ns-surface); border: 1px solid var(--ns-border-strong); border-radius: 10px; }
.ns-vol input { width: 140px; accent-color: var(--ns-gold); }

/* width classes (template :661-666): mid and icons fold the labels, narrow is the icon column */
.ns-host.ns-w-icons .ns-bar button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ns-host.ns-w-narrow .ns-panebar { display: none; }
.ns-host.ns-w-narrow .ns-face { flex: none; aspect-ratio: 1 / 1; }
.ns-host.ns-w-narrow .ns-bar { flex: 1 1 auto; flex-direction: column; }
.ns-host.ns-w-narrow .ns-bar button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Line 6042: a thumb-sized toolbar on phones. Every host button keeps a 32 px tap box on both sides; on a
   landscape phone with the host folded to its icon column, the face gives up height so the buttons fit. */
@media (max-width: 480px), (max-height: 480px) {
    .ns-bar button { min-width: 32px; min-height: 32px; }
    .ns-host.ns-w-narrow .ns-face { flex: 0 1 84px; aspect-ratio: auto; min-height: 44px; }
}
/* Line 9707 (stage-bar-tap-targets-wide-r1, stage_bar_tap_targets_wide): on a tablet and a desktop the stage's own controls
   were under 44 px (walk 240, /talking-websites/dentists): the swap button 36x32, the VOL slider 140x16, and at the icons
   width (a pane dragged to 220-329 px) TALK / TEXT / MUTE / VOL / AGENT / FULL / MIN 30-47 px wide. Lit, every bar button has
   a 44 px minimum both ways (the icon stays small), the bar wraps to a second row instead of squeezing, four to a row at the
   icons width where the bar is 90 px and the menus sit above it, the icon column lets the face give up height so its
   buttons fit, the swap button is 44 x 44 in a 45 px name bar, the volume slider's hit box is 44 px tall and the menus sit
   above the bar however many rows it has. Phones (480 px
   and narrower, or 480 px and shorter) keep line 6042's sizes; the default desk bar (7 x 53x55 in the 380 px pane) is unchanged. */
@media (min-width: 481px) and (min-height: 481px) {
    .ns-planes[data-ns-bar-tap-wide] .ns-bar button { min-width: 44px; min-height: 44px; }
    .ns-planes[data-ns-bar-tap-wide] .ns-host:not(.ns-w-narrow) .ns-bar { flex: 0 0 auto; min-height: var(--ns-bar-h); flex-wrap: wrap; anchor-name: --ns-stage-bar; }
    .ns-planes[data-ns-bar-tap-wide] .ns-host.ns-w-icons { --ns-bar-h: 90px; }
    .ns-planes[data-ns-bar-tap-wide] .ns-host.ns-w-icons .ns-bar button { flex-basis: calc(25% - 1px); }
    .ns-planes[data-ns-bar-tap-wide] .ns-host.ns-w-narrow .ns-face { flex: 0 1 auto; min-height: 44px; }
    .ns-planes[data-ns-bar-tap-wide] .ns-panebar { min-height: 45px; }
    .ns-planes[data-ns-bar-tap-wide] .ns-swap { min-width: 44px; min-height: 44px; }
    .ns-planes[data-ns-bar-tap-wide] .ns-vol input { min-height: 44px; }
    /* a bar that wrapped (a live session shows CAM and SYNC: 9 buttons need 404 px in one row) keeps the menus above its
       real top; the fallbacks are main's 56 px bar and 45 px name bar, and a browser without anchors keeps main's rule */
    .ns-planes[data-ns-bar-tap-wide] .ns-pop, .ns-planes[data-ns-bar-tap-wide] .ns-vol { bottom: calc(anchor(--ns-stage-bar top, 56px) + 8px); }
    .ns-planes[data-ns-bar-tap-wide] .ns-pop { max-height: calc(100% - anchor-size(--ns-stage-bar height, 56px) - 65px); }
}

/* ---- the page plane footer: the full public index, a person to reach, the legal links ---- */
.ns-foot { margin-top: 48px; padding: 36px 24px 28px; background: var(--ns-bg-deep); border-top: 1px solid var(--ns-border); display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.ns-foot-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
.ns-foot ul { list-style: none; margin: 0; padding: 0; }
.ns-foot li { margin: 0 0 6px; }
.ns-foot a { color: var(--ns-text-2); text-decoration: none; font-weight: 600; }
.ns-foot a:hover { color: var(--ns-gold-light); text-decoration: underline; }
.ns-foot-hd { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ns-gold); }
.ns-foot-legal { margin: 0; padding-top: 16px; border-top: 1px solid var(--ns-border); font-size: 14px; color: var(--ns-text-2); }
/* Line 10637 (footer-index-links-tap-box-r1): walk 288 counted 23 footer-index links and 6 contact and legal
   links under 32 px at 768 on a trade page; line 5645's box below stops at 480 px. Every width now gives them
   a 44 px box with the text centred; only the row height changes (layouts.landing's .ns-foot--page a follows). */
.ns-foot-index a, .ns-foot > nav a, .ns-foot-contact a, .ns-foot-legal > a { display: inline-flex; align-items: center; min-height: 44px; }
/* Line 15125: a short index link ('FAQ' measured 28 x 44 at 768 on /live-avatars and /agent/jungle-jon) is 44 px wide
   too, on every page that shares this footer (line 15023 gave the Studio alone its 44 px width). */
.ns-foot-index a { min-width: 44px; }
/* layouts.landing (line 1986): the footer index inside the page footer, no second panel */
.ns-foot--page { margin-top: 0; padding: 28px 0 20px; background: transparent; border-top: 0; text-align: left; }
.ns-foot--page a { display: inline-block; min-height: 44px; padding: 10px 0; line-height: 24px; }
.ns-foot--page li { margin: 0; }
/* Line 10211 (trade-page-links-tap-box-wide-r1): live check d7d1c7999bb counted 11 page links under 32 px in #ns-main on
   /talking-websites/dentists at 768 and 1440: the other-trades chips (about 22 px) and 'Hear a talking website' /
   'Explore talking websites' (about 25 px). With stage_page_links_tap_wide lit (the stage root
   carries its mark), from 481 px up they get a 44 px box with the text centred; the chip list's row gap and the footer list items'
   6 px margin go so the columns stay about as tall (line 10637 already boxed the footer links). Phones keep main's rules. */
@media (min-width: 481px) {
    .ns-planes[data-ns-page-links-tap-wide] a.ns-trade-link, .ns-planes[data-ns-page-links-tap-wide] .ns-trade-other li > a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 6px; }
    .ns-planes[data-ns-page-links-tap-wide] .ns-trade-other ul { row-gap: 0; }
    .ns-planes[data-ns-page-links-tap-wide] .ns-foot li { margin: 0; }
}

/* ---- PORTRAIT / PHONE (template :152-160): the page on top, the host a living strip at the bottom ---- */
@media (max-width: 700px), (orientation: portrait) and (max-width: 1024px) {
    .ns-planes, .ns-planes.ns-swapped { flex-direction: column; }
    .ns-content { order: 1; flex: 1 1 auto; height: auto; min-height: 0; }
    .ns-splitter { order: 2; flex: 0 0 14px; cursor: row-resize; background: linear-gradient(to bottom, var(--ns-surface), var(--ns-splitter-mid), var(--ns-surface)); }
    .ns-splitter:hover, .ns-splitter:focus-visible { background: linear-gradient(to bottom, var(--ns-surface), var(--ns-gold-deep), var(--ns-surface)); }
    .ns-nub { width: 46px; height: 4px; }
    .ns-host { order: 3; flex: 0 0 var(--ns-host-size-m, 46dvh); width: 100%; min-width: 0; max-width: none; height: auto; min-height: 96px; max-height: 78dvh; }
    .ns-planes.ns-host-min .ns-host { flex-basis: var(--ns-host-size-m, 46dvh) !important; }
    .ns-panebar { flex-basis: 40px; }
    /* the living sliver: face, name and TALK stay; the page takes the rest */
    .ns-planes.ns-host-sliver .ns-host { flex-basis: 96px !important; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-rows: 1fr; cursor: pointer; }
    .ns-planes.ns-host-sliver .ns-face { grid-column: 1; grid-row: 1; height: 96px; }
    .ns-planes.ns-host-sliver .ns-panebar { grid-column: 2; grid-row: 1; border: 0; background: none; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 12px; }
    .ns-planes.ns-host-sliver .ns-host-id { flex-direction: column; gap: 2px; }
    .ns-planes.ns-host-sliver .ns-swap { display: none; }
    .ns-planes.ns-host-sliver .ns-bar { grid-column: 3; grid-row: 1; border: 0; background: none; align-items: center; padding-right: 10px; }
    .ns-planes.ns-host-sliver .ns-bar button { display: none; }
    .ns-planes.ns-host-sliver .ns-bar button[data-ns-stage-btn="talk"] { display: flex; flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--ns-gold); color: var(--ns-on-accent); }
    .ns-planes.ns-host-sliver .ns-pop { display: none !important; }
    .ns-foot { padding: 28px 16px 24px; }
}
/* Line 9706 (trade-host-face-eyes-to-chin-tablet-r1, stage_host_face_tablet_fit): on a tablet the drawer's face box was
   the pane's full width and what the name bar and TALK leave of its height (768x375 at 768x1024, 820x447 at 820x1180),
   so cover scaled the near-square portrait to the width and only rows 13-70% showed: an eyes band with no mouth or chin
   on /es/empleados-ia and /compare/custom-gpts (walk 240). Lit, the face panel is a 4:5 frame centred in the drawer, as
   tall as the drawer leaves it and never taller than min(48vh, 420px), portrait at 50% 25%: eyes to chin. The frame's
   size comes from the drawer alone, so nothing moves as the still or the live face mounts. The drawer's size, the
   sliver, phones (480 px and narrower, or 480 px and shorter) and wide screens are main's. */
@media (min-width: 481px) and (max-width: 700px) and (min-height: 481px), (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) {
    .ns-planes[data-ns-tablet-face-fit]:not(.ns-host-sliver) .ns-face { flex: 1 1 0; width: auto; max-width: 100%; max-height: min(48vh, 420px); aspect-ratio: 4 / 5; align-self: center; margin-block: auto; }
    .ns-planes[data-ns-tablet-face-fit]:not(.ns-host-sliver) .ns-face img { object-position: 50% 25%; }
}
/* Line 6669: on a phone 480 px wide or narrower and at least 740 px tall the page keeps its first 450 px above
   the drawer, so the hero's two buttons are whole (375x812: the 46dvh start put the drawer's top at 424 px,
   across 'Habla con Mr. NetShow' at 399-448 px; 'Agenda una llamada' ends at 506 px). The drawer sits lower by
   that shortfall only: every size netshow-stage.js writes (the start, a drag, a tap) still moves the border one
   to one, and the sliver keeps its own rule.
   Line 5646: the same floor holds on every portrait phone 480 px or narrower, so a shorter phone's hero buttons are
   whole too (390x664, a 390x844 iPhone under Safari's bars: the 46dvh start put the drawer's top at 344.6 px, across
   'Book a build call' on /pricing-faq, which ends at 448.5 px). There the drawer starts with the rest of the screen,
   never under the host's 96 px floor (its name and TALK), and still settles to the sliver; a landscape phone keeps
   the 46dvh start. */
@media (max-width: 480px) and (orientation: portrait) {
    .ns-host { flex-basis: calc(var(--ns-host-size-m, 46dvh) - max(0px, 46dvh + var(--ns-tm-h) + 14px + 450px - 100dvh)); }
}
/* Line 8196: on a portrait phone 480 px or narrower and under 740 px tall that floor leaves the drawer 112-140 px
   at its start (375x667, 390x664, 360x640), and the stacked name bar + face + TALK bar cut the face to a 30-45 px
   strip. There the drawer at its start height takes the sliver's row: a whole 96 px face | name + AI AGENT | TALK.
   netshow-stage.js marks a drawer given a size of its own (a drag, a key, the sliver) ns-host-sized, so a drawer
   grown by hand stacks as before; the border stays where the floor put it.
   Line 8391: the row hides the speaking caption and the captions box, as the sliver does; in their stacked-layout
   box inside the 96 px face they wrapped into a 72x139 px box over it. The row's AI AGENT label keeps the AI line. */
@media (max-width: 480px) and (orientation: portrait) and (max-height: 739px) {
    .ns-planes:not(.ns-host-sized):not(.ns-host-sliver) .ns-host { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-rows: 1fr; align-items: center; }
    .ns-planes:not(.ns-host-sized):not(.ns-host-sliver) .ns-face { grid-column: 1; grid-row: 1; width: 96px; height: 96px; flex: none; }
    .ns-planes:not(.ns-host-sized):not(.ns-host-sliver) .ns-panebar { grid-column: 2; grid-row: 1; border: 0; background: none; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 12px; }
    .ns-planes:not(.ns-host-sized):not(.ns-host-sliver) .ns-host-id { flex-direction: column; gap: 2px; }
    .ns-planes:not(.ns-host-sized):not(.ns-host-sliver) .ns-swap { display: none; }
    .ns-planes:not(.ns-host-sized):not(.ns-host-sliver) .ns-bar { grid-column: 3; grid-row: 1; border: 0; background: none; align-items: center; padding-right: 10px; }
    .ns-planes:not(.ns-host-sized):not(.ns-host-sliver) .ns-bar button { display: none; }
    .ns-planes:not(.ns-host-sized):not(.ns-host-sliver) .ns-bar button[data-ns-stage-btn="talk"] { display: flex; flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--ns-gold); color: var(--ns-on-accent); }
    .ns-planes:not(.ns-host-sized):not(.ns-host-sliver) .ns-invite, .ns-planes:not(.ns-host-sized):not(.ns-host-sliver) .ns-captions { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ns-content { scroll-behavior: auto; }
    .ns-tm-caret { transition: none; }
}

/* Line 1874: the host's live face, invitation line, captions and backup-voice label (netshow-stage-voice.js).
   The live face sits over the still in the same box; the still stays under it until the face reports ready. */
.ns-face-live { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ns-face-live > * { width: 100%; height: 100%; }
.ns-host[data-face="live"] .ns-face img[data-ns-stage-face] { visibility: hidden; }
.ns-invite { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; padding: 8px 12px; border-radius: 12px; background: rgba(6, 6, 16, .78); color: #fff; font-weight: 700; font-size: .95rem; line-height: 1.35; text-align: center; }
.ns-backup { position: absolute; top: 10px; left: 10px; margin: 0; padding: 3px 9px; border-radius: 999px; background: rgba(6, 6, 16, .78); color: var(--ns-gold, #f5c451); font-size: .75rem; font-weight: 800; letter-spacing: .02em; }
.ns-captions { position: absolute; left: 12px; right: 12px; bottom: 12px; max-height: 40%; overflow: hidden; padding: 8px 12px; border-radius: 12px; background: rgba(6, 6, 16, .78); color: #fff; font-size: .95rem; line-height: 1.4; }
.ns-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ns-host.ns-speaking .ns-face { animation: ns-speak 0.9s ease-in-out infinite; }
@keyframes ns-speak { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.08); } }
.ns-planes.ns-host-sliver .ns-invite, .ns-planes.ns-host-sliver .ns-captions { display: none; }
@media (prefers-reduced-motion: reduce) {
    .ns-host.ns-speaking .ns-face { animation: none; }
}

/* Line 1799: 'Show me around' (netshow-stage-tour.js). A 3 px ring marks the section she is saying a
   line about; the caption sits at the bottom of the page plane while the tour runs; the Ask card any
   shell page can place (<x-shell-ask-tour>) shows only when the page has a section to tour. */
.ns-tour-ring { outline: 3px solid var(--ns-gold); outline-offset: -3px; border-radius: 12px; }
.ns-tour-caption { position: sticky; bottom: 12px; z-index: 5; margin: 0 16px 12px; padding: 10px 14px; border-radius: 12px; background: rgba(6, 6, 16, .88); border: 1px solid var(--ns-border-strong); color: #fff; font-size: 1rem; line-height: 1.4; text-align: center; }
.ns-ask-tour { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0; padding: 16px 18px; border: 1px solid var(--ns-border-strong); border-radius: 14px; background: var(--ns-surface); }
.ns-ask-tour[hidden] { display: none; }
.ns-ask-tour-hd { margin: 0; font-weight: 800; color: var(--ns-text); }
.ns-ask-tour-go { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ns-gold); color: var(--ns-on-accent); font: inherit; font-weight: 800; cursor: pointer; }
.ns-ask-tour-go:focus-visible { outline: 3px solid var(--ns-gold-light); outline-offset: 3px; }

/* Line 5645 (marketing-pages-phone-tap-targets-and-one-header-r1): on a phone every footer link and every
   link that is a list item's own link in the page body is a 44 px tap target with its text centred. The
   footer selectors cover the one footer (.ns-foot: the page plane and layouts.landing), its legal row and
   the layouts.app footer (.ns-footer__col) on the guest pages that wear the one top menu; the body selector
   rides :where() so a list link a page styles as its own box keeps that box. Above 480 px nothing changes. */
@media (max-width: 480px) {
    .ns-foot li > a,
    .ns-foot-legal a,
    .ns-footer__col li > a,
    :where(.ns-main li, .ns-content-page main li) > a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
}

/* A refused Spanish voice keeps its caption below the face, including the compact strip. */
html[lang|="es"] .ns-host > .ns-backup { position: static; flex: none; margin: 0; padding: 6px 10px; border-radius: 0; text-align: center; white-space: normal; }
@media (max-width: 1023px) {
    html[lang|="es"] .ns-host[data-voice-audio="captions"] > .ns-backup { grid-column: 1 / -1; grid-row: 2; }
    html[lang|="es"] .ns-planes.ns-host-sliver .ns-host[data-voice-audio="captions"],
    html[lang|="es"] .ns-planes:not(.ns-host-sized):not(.ns-host-sliver) .ns-host[data-voice-audio="captions"] { flex-basis: 130px !important; grid-template-rows: 96px auto; }
}