/* Line 31285 (ai.features.ai_employees_page_sells): the selling /ai-employees on the --ns-* tokens (light and dark), 375 px
   first. One line, five cards, one Hire each: the page's one next step. The cards keep their headings clear of the top menu
   when a post anchor (#front-desk, #sales-support, #specialist, #team, #workforce) or the host lands on one. */
.ns-aies-hero { padding: 18px 16px 2px; }
.ns-aies-wrap { max-width: 1120px; margin: 0 auto; }
.ns-aies-line { margin: 0; max-width: 24ch; font-size: clamp(1.4rem, 5.4vw, 2.5rem); line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; color: var(--ns-text, #202124); }
.ns-aies-jobs { padding: 10px 0 6px; }
/* Line 31623: the hiring first screen (its own job, never the home's pull card): who it is for, what it does, one next step. */
.ns-aies-first { max-width: 44rem; }
.ns-aies-first .ns-aies-kicker { margin-bottom: 6px; }
.ns-aies-for { margin: 10px 0 0; font-size: 1.05rem; line-height: 1.45; font-weight: 600; color: var(--ns-text, #202124); }
.ns-aies-does { margin: 8px 0 0; font-size: 1rem; line-height: 1.5; color: var(--ns-text-2, #5f6368); }
.ns-aies-does strong { font-weight: 800; color: var(--ns-text, #202124); white-space: nowrap; }
.ns-aies-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; }
.ns-aies-next .ns-aies-hire { min-width: 0; }
.ns-aies-person { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; margin: 0; font-size: .92rem; line-height: 1.45; color: var(--ns-text-2, #5f6368); }
.ns-aies-person a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ns-text, #202124); }
.ns-aies-or { white-space: nowrap; }
.ns-aies-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.ns-aies-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name hire" "job hire" "price hire"; align-items: center; column-gap: 12px; padding: 12px 14px; border: 1px solid var(--ns-border, #dadce0); border-radius: var(--ns-radius, 12px); background: var(--ns-card, #fff); scroll-margin-top: 96px; }
.ns-aies-name { grid-area: name; margin: 0; font-size: 1.02rem; line-height: 1.3; font-weight: 800; color: var(--ns-text, #202124); }
.ns-aies-job { grid-area: job; margin: 2px 0 0; font-size: .9rem; line-height: 1.35; color: var(--ns-text-2, #5f6368); }
.ns-aies-price { grid-area: price; margin: 4px 0 0; font-size: .92rem; color: var(--ns-text, #202124); }
.ns-aies-price strong { font-size: 1.08rem; font-weight: 800; }
.ns-aies-hire { grid-area: hire; display: inline-flex; align-items: center; justify-content: center; min-width: 84px; min-height: 48px; padding: 0 20px; border-radius: 999px; background: var(--ns-gold, #f5a623); color: var(--ns-on-accent, #202124); font-size: 1rem; font-weight: 800; text-decoration: none; }
.ns-aies-hire:hover { background: var(--ns-gold-deep, #e8920c); color: var(--ns-on-accent, #202124); }
.ns-aies-hire:focus-visible { outline: 3px solid var(--ns-text, #202124); outline-offset: 2px; }
.ns-aies-card:target, .ns-aies-card[data-ns-lit] { border-color: var(--ns-gold, #f5a623); box-shadow: 0 0 0 3px var(--ns-gold-glow, rgba(245, 166, 35, .28)); }
.ns-aies-what { margin: 16px 0 0; font-size: 1rem; line-height: 1.5; color: var(--ns-text-2, #5f6368); max-width: 44rem; }
.ns-aies-what + .ns-aies-outcome { margin-top: 6px; }
.ns-aies-outcome { margin: 16px 0 0; font-size: 1.05rem; font-weight: 600; line-height: 1.4; color: var(--ns-text, #202124); }
.ns-aies-trust { margin: 14px 0 0; font-size: .9rem; line-height: 1.45; color: var(--ns-text-2, #5f6368); }
.ns-aies-qa { padding: 28px 0 6px; }
.ns-aies-kicker { margin: 0 0 4px; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ns-text-2, #5f6368); }
.ns-aies-h2 { margin: 0 0 12px; font-size: clamp(1.15rem, 3.6vw, 1.55rem); line-height: 1.3; font-weight: 800; color: var(--ns-text, #202124); }
.ns-aies-q { border-top: 1px solid var(--ns-border, #dadce0); padding: 12px 0; }
.ns-aies-q summary { cursor: pointer; min-height: 24px; font-weight: 700; color: var(--ns-text, #202124); }
.ns-aies-q p { margin: 8px 0 0; line-height: 1.5; color: var(--ns-text-2, #5f6368); }
.ns-aies-agents { padding: 22px 16px 32px; }
.ns-aies-doors { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; }
.ns-aies-doors a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--ns-border-strong, #bdc1c6); border-radius: 999px; font-weight: 700; color: var(--ns-text, #202124); text-decoration: none; }
.ns-aies-human { margin: 0; color: var(--ns-text-2, #5f6368); }
.ns-aies-human a { font-weight: 700; color: var(--ns-text, #202124); }
/* A phone: the cards stay compact so the Hires sit high on the first screen. Line 31703: Luma rests in the house pane's strip
   above the bottom menu now, so the 84 px empty band once kept for her face at the top is gone and the hero opens with the
   home's 18 px (the base rule above). */
@media (max-width: 599px) {
    .ns-aies-line { max-width: none; }
    .ns-aies-jobs { padding-top: 8px; }
    .ns-aies-cards { gap: 8px; }
    .ns-aies-card { padding: 10px 14px; }
}
@media (min-width: 768px) {
    .ns-aies-hero { padding: 36px 24px 6px; }
    .ns-aies-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .ns-aies-agents { padding: 32px 24px 48px; }
}
@media (min-width: 1100px) {
    /* a wide screen keeps her room beside the line: the line keeps its own column, the cards start below her arrival */
    .ns-aies-hero { padding-bottom: 84px; }
    .ns-aies-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    /* the job line takes the slack, so every price and every Hire sits on one line across the five cards */
    .ns-aies-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; grid-template-areas: "name" "job" "price" "hire"; row-gap: 2px; padding: 18px 16px; }
    .ns-aies-job { align-self: start; }
    .ns-aies-hire { justify-self: start; margin-top: 12px; }
}