.ns-trade{--ink:#172642;--muted:#52627a;--blue:#176bda;--pale:#eef5ff;color:var(--ink);background:#fff;max-width:970px;margin:auto;padding:clamp(20px,4vw,56px);font-family:Nunito,system-ui,sans-serif;line-height:1.55}
.ns-trade *{box-sizing:border-box}
.ns-trade h1,.ns-trade h2,.ns-trade h3,.ns-trade p{margin-top:0}
.ns-trade h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.08;letter-spacing:-.035em;max-width:13ch}
.ns-trade h2{font-size:clamp(1.55rem,3vw,2.3rem);line-height:1.18;letter-spacing:-.025em}
.ns-trade h3{font-size:1.08rem}
.ns-trade-hero{padding:clamp(24px,4vw,64px) 0 58px}
.ns-trade-eyebrow{text-transform:uppercase;font-size:.78rem;letter-spacing:.13em;font-weight:800;color:var(--blue)}
.ns-trade-lead{font-size:clamp(1.08rem,2vw,1.3rem);max-width:67ch;color:var(--muted)}
.ns-trade-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:28px 0 16px}
.ns-trade-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border-radius:12px;background:var(--blue);color:#fff!important;font-weight:800;text-decoration:none;text-align:center}
.ns-trade-button:hover{background:#0d53b0}
.ns-trade-link{color:#145dbb;font-weight:800;text-underline-offset:3px}
.ns-trade a:not(.ns-trade-button){color:#145dbb}
.ns-trade-disclosure{font-size:.9rem;color:var(--muted)}
.ns-trade-section{padding:52px 0;border-top:1px solid #dce5f1}
.ns-trade-section>p{color:var(--muted)}
.ns-trade-site{border:1px solid #bfd1e9;border-radius:20px;background:#fff;box-shadow:0 18px 48px rgba(24,50,90,.12);overflow:hidden;margin-top:24px}
.ns-trade-site-bar{display:flex;align-items:center;gap:20px;background:#e8f1ff;padding:13px 20px;border-bottom:1px solid #bfd1e9}
.ns-trade-site-dots{font-size:.55rem;letter-spacing:.25em;color:#7895bf;white-space:nowrap}
.ns-trade-site-body{padding:clamp(16px,3vw,30px)}
.ns-trade-site-intro{display:flex;gap:14px;align-items:center;padding:18px;border-radius:14px;background:#edf6ff;font-weight:700}
.ns-trade-site-icon{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;background:#cce4ff;color:#1260bd}
.ns-trade-moments{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ns-trade-moments li{min-width:0;padding:16px;border:1px solid #dce5f1;border-radius:14px}
.ns-trade-moments p{margin:0 0 11px;overflow-wrap:anywhere}
.ns-trade-moments p:last-child{margin:0}
.ns-trade-moments span{display:block;margin-bottom:5px;text-transform:uppercase;font-size:.7rem;letter-spacing:.1em;font-weight:800;color:#547090}
.ns-trade-spoken{padding:12px;background:#f1f7ff;border-radius:10px}
.ns-trade-checks,.ns-trade-question-list,.ns-trade-includes{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ns-trade-checks li,.ns-trade-question-list li{padding:16px 18px;border-radius:12px;background:#f1f6fc;overflow-wrap:anywhere}
.ns-trade-checks li:before{content:'✓';font-weight:900;color:#087759;margin-right:10px}
.ns-trade-question-list li{font-weight:800}
.ns-trade-desk{background:#f8fbff;padding-left:clamp(16px,3vw,28px);padding-right:clamp(16px,3vw,28px);border-radius:18px}
.ns-trade-package{background:#eaf3ff;border:1px solid #c4daf8;border-radius:20px;padding:clamp(24px,4vw,44px);margin:18px 0 30px}
.ns-trade-package h2{margin-bottom:6px}
.ns-trade-job{font-size:1.2rem;font-weight:700}
.ns-trade-price{font-size:1.8rem;font-weight:900;color:#115cb8;margin-bottom:2px}
.ns-trade-includes{grid-template-columns:1fr;margin-bottom:28px}
.ns-trade-includes li{display:flex;align-items:flex-start;gap:12px;background:#fff;border-radius:10px;padding:14px}
.ns-trade-tag{flex:0 0 auto;background:#dceaff;border-radius:20px;padding:3px 10px;font-size:.72rem;font-weight:800;white-space:nowrap}
.ns-trade-faq-item{padding:18px 0;border-bottom:1px solid #dce5f1}
.ns-trade-faq-item p{margin-bottom:0;color:var(--muted)}
.ns-trade-other ul{padding-left:20px;display:flex;flex-wrap:wrap;gap:12px 30px}
.ns-trade-final{background:#172d54;border-radius:20px;color:#fff;padding:clamp(26px,5vw,52px);display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:0 0 50px}
.ns-trade-final h2{flex-basis:100%;margin-bottom:0}
.ns-trade .ns-trade-final .ns-trade-link{color:#d7e9ff}
@media(max-width:650px){.ns-trade{padding:20px}.ns-trade-hero{padding-top:28px;padding-bottom:42px}.ns-trade-section{padding:40px 0}.ns-trade-moments,.ns-trade-checks,.ns-trade-question-list{grid-template-columns:1fr}.ns-trade-desk,.ns-trade-package{padding:22px}.ns-trade-includes li{flex-wrap:wrap}}
/* Line 7194 (trade-page-tablet-stage-first-r1): with ai.features.trade_page_tablet_split on, the trade page's root
   carries data-ns-tablet-split and the stage keeps its desk split from 768 to 1199 px: the page on the left, the
   host beside it at the desk width, as at 1440. netshow-stage.css stacks a portrait tablet (host at the bottom)
   and netshow-stage.js settles that host to its 96 px sliver, so the first screen showed a strip of forehead; here
   the stack and the sliver are undone. :has() follows the page through the shell's pane swap. Nothing below 768 px. */
@media (min-width: 768px) and (max-width: 1199px) {
    .ns-stage-body:has(.ns-trade[data-ns-tablet-split]) .ns-planes { flex-direction: row; }
    .ns-stage-body:has(.ns-trade[data-ns-tablet-split]) .ns-planes.ns-swapped { flex-direction: row-reverse; }
    .ns-stage-body:has(.ns-trade[data-ns-tablet-split]) .ns-content { order: 0; height: 100%; }
    .ns-stage-body:has(.ns-trade[data-ns-tablet-split]) .ns-splitter { order: 0; }
    .ns-stage-body:has(.ns-trade[data-ns-tablet-split]) .ns-host { order: 0; flex: 0 0 var(--ns-host-size, 380px); width: auto; min-width: 84px; max-width: 70vw; height: 100%; min-height: 0; max-height: none; }
    .ns-stage-body:has(.ns-trade[data-ns-tablet-split]) .ns-planes.ns-host-min .ns-host { flex-basis: 84px !important; }
    .ns-stage-body:has(.ns-trade[data-ns-tablet-split]) .ns-panebar { flex-basis: var(--ns-panebar-h); }
    /* the settle sliver: the host stays whole beside the page */
    .ns-stage-body:has(.ns-trade[data-ns-tablet-split]) .ns-planes.ns-host-sliver .ns-host { flex-basis: var(--ns-host-size, 380px) !important; display: flex; cursor: auto; }
    .ns-stage-body:has(.ns-trade[data-ns-tablet-split]) .ns-planes.ns-host-sliver .ns-face { height: auto; }
    .ns-stage-body:has(.ns-trade[data-ns-tablet-split]) .ns-planes.ns-host-sliver .ns-panebar { border-bottom: 1px solid var(--ns-border); background: rgba(10, 10, 20, .85); flex-direction: row; align-items: center; justify-content: normal; padding: 0 10px 0 14px; }
    .ns-stage-body:has(.ns-trade[data-ns-tablet-split]) .ns-planes.ns-host-sliver .ns-host-id { flex-direction: row; gap: 8px; }
    .ns-stage-body:has(.ns-trade[data-ns-tablet-split]) .ns-planes.ns-host-sliver .ns-swap { display: inline-flex; }
    .ns-stage-body:has(.ns-trade[data-ns-tablet-split]) .ns-planes.ns-host-sliver .ns-bar { border-top: 1px solid var(--ns-border); background: var(--ns-bg); align-items: stretch; padding-right: 0; }
    .ns-stage-body:has(.ns-trade[data-ns-tablet-split]) .ns-planes.ns-host-sliver .ns-bar button { display: flex; }
    .ns-stage-body:has(.ns-trade[data-ns-tablet-split]) .ns-planes.ns-host-sliver .ns-bar button[data-ns-stage-btn="talk"] { flex: 1 1 0; width: auto; height: auto; border-radius: 0; background: var(--ns-surface); color: var(--ns-text); }
    .ns-stage-body:has(.ns-trade[data-ns-tablet-split]) .ns-planes.ns-host-sliver .ns-bar button[data-ns-stage-btn="talk"]:hover, .ns-stage-body:has(.ns-trade[data-ns-tablet-split]) .ns-planes.ns-host-sliver .ns-bar button[data-ns-stage-btn="talk"][aria-expanded="true"] { background: var(--ns-elevated); color: var(--ns-gold-light); }
    .ns-stage-body:has(.ns-trade[data-ns-tablet-split]) .ns-planes.ns-host-sliver .ns-pop:not([hidden]) { display: block !important; }
}
/* On a portrait tablet netshow-stage.js drags the border up and down (its phone mode), which moves nothing in a
   side-by-side split, so the border rests hidden; the page plane is narrower there, so its cards take one column. */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .ns-stage-body:has(.ns-trade[data-ns-tablet-split]) .ns-splitter { display: none; }
    .ns-trade[data-ns-tablet-split] { padding: 24px; }
    .ns-trade[data-ns-tablet-split] .ns-trade-moments, .ns-trade[data-ns-tablet-split] .ns-trade-checks, .ns-trade[data-ns-tablet-split] .ns-trade-question-list { grid-template-columns: 1fr; }
}
/* Line 7319 (trade-pages-hold-still-at-768-r1): at 768x1024 the host's face rests in line 9706's 4:5 frame (336x420 at
   top 328.5), and about 11 s in netshow-stage.js settles the planes to ns-host-sliver, which that frame skips, so the
   face grew to the whole desk column (380x859 at top 109): one 0.089 layout shift on /talking-websites/plumbers and
   /dentists (walk-108 FF-7, 0.173 with the font swap). In the side-by-side split the sliver keeps the same frame, so the
   face holds still through the settle. Phones below 768 px keep their 96 px sliver; landscape and 1025 px up are main's. */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .ns-stage-body:has(.ns-trade[data-ns-tablet-split]) .ns-planes[data-ns-tablet-face-fit].ns-host-sliver .ns-face { flex: 1 1 0; width: auto; max-width: 100%; height: auto; max-height: min(48vh, 420px); aspect-ratio: 4 / 5; align-self: center; margin-block: auto; }
    .ns-stage-body:has(.ns-trade[data-ns-tablet-split]) .ns-planes[data-ns-tablet-face-fit].ns-host-sliver .ns-face img { object-position: 50% 25%; }
    .ns-stage-body:has(.ns-trade[data-ns-tablet-split]) .ns-planes.ns-face-floor[data-ns-tablet-face-fit].ns-host-sliver .ns-face img { width: auto; max-width: 100%; height: 100%; }
}
/* Line 7091 (trade-page-phone-hero-clear-of-stage-sheet-r1): on a phone 480 px wide or narrower the host's drawer
   starts at least 12 px below the hero's AI line, so both buttons and 'Your host here is an AI agent' are on the first
   screen (375x812: the stage sheet's 450 px keep put the drawer's top at 514 px, across 'Hear a talking website' at
   476-524 px). The page script writes --ns-trade-keep (the AI line's bottom in the page plane + 12 px); the drawer sits
   lower by that shortfall only, the way the stage sheet's own 450 px rule does, so every size netshow-stage.js writes
   still moves the border one to one and the sliver keeps its own rule. Wider screens are unchanged. */
@media(max-width:480px){.ns-trade-hero{padding-top:8px}.ns-trade-actions{margin:20px 0 12px}.ns-planes:has(.ns-trade) .ns-host{flex-basis:calc(var(--ns-host-size-m,46dvh) - max(0px,46dvh + var(--ns-tm-h) + 14px + max(450px,var(--ns-trade-keep,0px)) - 100dvh))}}
/* Line 8593 (trade-page-phone-host-face-eyes-to-chin-r1): with ai.features.trade_phone_face_fit on, the trade page's
   root carries data-ns-phone-face-fit. On a phone 480 px wide or narrower the drawer line 7091 leaves (375x812: 243 px)
   gave the name bar 40 px and TALK 56, so the face was a 375x147 band and object-fit: cover at 50% 30% showed rows
   17.6%-59% of the 1081x1023 portrait: forehead to nose, no mouth (walk-189 Q375). Here the name and AI AGENT float
   over the face's top corner in a pill at most 108 px wide (clear of the eyes, which start 122 px in; a long role
   label ends in its own ellipsis), so the face takes the drawer above TALK (187 px at 375x812), and the portrait is framed
   brows to chin: rows 27%-87% (his eyes 37.6%, chin 84.6%; her eyes 46.2%, chin 78.7%), the image never wider than
   that band allows (0.6 x 1023 rows over 1081 columns: 1.76 x the face's height) and centred. The drawer's border
   stays where line 7091 puts it, so both hero buttons and the AI line stay above it. The rules wait for 676 px of
   planes (a 740 px phone under the 64 px menu), the complement of line 8196's short-phone row, which keeps its own
   layout; the sliver keeps its own rule; the stage sheet's .ns-face img is untouched. */
@media(max-width:480px){
.ns-planes:has(.ns-trade[data-ns-phone-face-fit]){container:ns-trade-phone/size}
@container ns-trade-phone (min-height:676px){
.ns-planes:not(.ns-host-sliver):has(.ns-trade[data-ns-phone-face-fit]) .ns-host>.ns-panebar{position:absolute;top:0;left:0;right:0;z-index:3;padding:8px 8px 0;align-items:flex-start;background:none;border-bottom:0;pointer-events:none}
.ns-planes:not(.ns-host-sliver):has(.ns-trade[data-ns-phone-face-fit]) .ns-host>.ns-panebar>*{pointer-events:auto}
.ns-planes:not(.ns-host-sliver):has(.ns-trade[data-ns-phone-face-fit]) .ns-host>.ns-panebar .ns-host-id{flex:0 1 auto;flex-direction:column;align-items:flex-start;gap:0;max-width:108px;padding:3px 8px 4px;border-radius:10px;background:rgba(6,6,16,.72);line-height:1.2}
.ns-planes:not(.ns-host-sliver):has(.ns-trade[data-ns-phone-face-fit]) .ns-host>.ns-panebar .ns-host-name{font-size:14px}
.ns-planes:not(.ns-host-sliver):has(.ns-trade[data-ns-phone-face-fit]) .ns-host>.ns-panebar .ns-host-role{max-width:100%;font-size:11px}
.ns-planes:not(.ns-host-sliver):has(.ns-trade[data-ns-phone-face-fit]) .ns-host>.ns-panebar .ns-swap{margin-left:auto}
.ns-planes:not(.ns-host-sliver):has(.ns-trade[data-ns-phone-face-fit]) .ns-host>.ns-face{container-type:size}
.ns-planes:not(.ns-host-sliver):has(.ns-trade[data-ns-phone-face-fit]) .ns-host>.ns-face>img[data-ns-stage-face]{width:min(100%,176cqh);object-position:50% 68%}
}
}