/* AI Chat Assistant for Business — page-specific styles only.
 *
 * Everything reusable (type scale, cards, dark panel, badges, rule grids,
 * buttons, feature-icon discs) comes from shared.css. The HERO's chat card
 * comes from static-pages/anim-agent-chat.css, which this page declares in
 * deps.json — it is the home page's own AI Agent card, and the rules below
 * change nothing about how it is drawn. They only say where it sits, how big it
 * is, and that it has stopped moving.
 *
 * What is left here is either a graphic this page owns (the band's question
 * card, the band's gold strip, the follow-up thread), a composition it invents
 * (the hero surface, the transform row, the rule rows, the FAQ list), or a
 * value genuinely tuned to this page.
 *
 * Surfaces, hairlines, metric strip, pulse dot, FAQ and closing statement are
 * deliberately the same values as the voice-to-text, knowledge base, client
 * reporting, internal reporting, security, alerts and MCP Read API pages rather
 * than approximations of them: they are siblings in one product section, and a
 * reader moving between them should not be able to see a seam.
 *
 * All selectors are scoped to .static-page--ai-chat-assistant-for-business, so
 * nothing leaks into any other page. The prefix is also what keeps this page in
 * control of the shared chat stylesheet it declares: deps.json styles are
 * emitted AFTER this file, so order would hand a bare .agent-chat rule back to
 * the partial — specificity is what wins, not order, which is why every
 * override below carries the slug.
 *
 * COLOUR RULE that governs every graphic below. Gold carries exactly one
 * meaning on this page — the interruption that did not happen — and appears in
 * exactly ONE place: .aca-quiet, the strip under the dark band's photograph.
 * That absence is the one thing on this page a reader would not have predicted
 * from the heading, so it gets the one colour nothing else uses. The thought
 * bubbles beside it mark their resolved state in teal instead
 * (.aca-thought__state), because a second gold element inside the same section
 * would split one meaning across two graphics and the reader would stop being
 * able to tell what gold means. Teal stays the assistant and the action, blue
 * carries the transform
 * arrow and the thread section's kicker, and everything else sits on the
 * neutral ramp. No third accent is introduced.
 *
 * DENSITY note that governs every graphic below. The theme sets line-height as
 * a LENGTH, which does not scale down, so a 12px label inside .static-page
 * inherits ~30px of leading and a 33px row silently becomes a 50px one. Every
 * graphic root here therefore restates line-height as a unitless ratio. It is
 * the first thing to check if one of them ever looks oversized.
 */

/* ── Surfaces ──────────────────────────────────────────────────────────────
   Off-white alternating with plain white down the page, a hairline at each
   change. A hair warmer than slate-50 so it reads as paper rather than grey. */
.static-page--ai-chat-assistant-for-business .aca-surface-soft {
    background: #FBFDFC;
}
.static-page--ai-chat-assistant-for-business .aca-hairline-top {
    border-top: 1px solid #EEF2F1;
}

/* ── Hero ──────────────────────────────────────────────────────────────────
   Two very soft radial washes — teal from the top-left, blue from the
   top-right — over the warm off-white, fading out above the metric strip so the
   strip sits on flat colour. Same construction as the sibling pages. */
.static-page--ai-chat-assistant-for-business .aca-hero {
    background:
        radial-gradient(1100px 520px at 12% -12%, #E8F3F1 0%, transparent 62%),
        radial-gradient(900px 460px at 92% 4%, var(--sp-brand-blue-tint) 0%, transparent 60%),
        #FBFDFC;
    padding-bottom: var(--sp-space-6);
}

.static-page--ai-chat-assistant-for-business .aca-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sp-brand-teal);
    flex-shrink: 0;
    animation: acaPulse 1.8s ease-in-out infinite;
}
@keyframes acaPulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}

/* ══ Chat card (hero graphic) ══════════════════════════════════════════════
   The card itself is drawn entirely by static-pages/anim-agent-chat.css, the
   same stylesheet the home page uses, and the markup is written in the state
   that file's animation ends in. So there is nothing to restyle here — only
   what changes because the card has been dropped into this page's hero column
   and has stopped moving.

   SIZE. The shared card's whole visual language — 11px type, 20px avatars,
   tight tool chips — is drawn for the 340px the home page caps it at, and every
   dimension inside it is a fixed pixel value. Widening the box would leave all
   of them at their original size, so a 440px card would be a wide panel with
   phone-sized text in it. zoom scales layout as well as paint, so one number
   moves the whole component and it stays sharp; the alternative was restating
   every one of those values here, which would copy the design out of the shared
   file and let this page's card drift from the home page's.

   1.25 puts the card at 340 x 1.25 = 425px inside the hero's 440px column —
   7.5px of air each side, and a hair wider than the 416px panel it replaced, so
   the hero's optical weight is unchanged.

   WHERE THE ZOOM COMES OFF. zoom multiplies the resolved width, so `width:100%`
   fills the container first and is then scaled: the card needs a container of
   at least 425px to hold its zoomed self. Asked of the container rather than of
   the viewport, because the container is 440px in the desktop hero column and
   the full content width once the hero stacks — two different things the
   viewport cannot tell apart. Below 430px of container the card drops back to
   1x and simply fills what it is given (max-width 340px caps it above that). */
.static-page--ai-chat-assistant-for-business .aca-hero-figure {
    display: flex;
    justify-content: center;
    align-items: center;
    container-type: inline-size;
}
.static-page--ai-chat-assistant-for-business .aca-chat {
    width: 100%;
    max-width: 340px;
    zoom: 1.25;
    box-shadow: 0 1px 2px rgba(21, 41, 39, 0.05),
                0 18px 40px -26px rgba(21, 41, 39, 0.45);
}
@container (max-width: 429px) {
    .static-page--ai-chat-assistant-for-business .aca-chat {
        zoom: 1;
    }
}

/* Stillness: every other animation in the shared file is gated behind a state
   class the script adds, so writing the finished markup is enough to stop it.
   The header dot's pulse is the exception — it runs off the base rule, with no
   class to withhold — so it is the one thing turned off by hand. */
.static-page--ai-chat-assistant-for-business .aca-chat .agent-chat__dot {
    animation: none;
}

/* Matches .agent-chat__avatar's 20px so the sources start on the same left edge
   as the bubble above them, without borrowing the avatar's tinted disc — that
   class paints a filled circle, and an empty one reads as a bug. */
.static-page--ai-chat-assistant-for-business .aca-chat__gutter {
    width: 20px;
    flex-shrink: 0;
}
.static-page--ai-chat-assistant-for-business .aca-chat__sources {
    flex: 1;
    min-width: 0;
    padding-top: 0.55rem;
    border-top: 1px solid #EEF2F1;
}
.static-page--ai-chat-assistant-for-business .aca-cites__label {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--sp-font-mono);
    font-size: 0.57rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--sp-ink-faint);
}
/* Stepped down to the chat's own scale so the citations read as part of the
   card rather than as something pasted into it. Ticks are teal: every source
   here was inside the asker's access, which is what makes the answer usable. */
.static-page--ai-chat-assistant-for-business .aca-cite {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.12rem 0;
}
.static-page--ai-chat-assistant-for-business .aca-cite__tick {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 0.95rem;
    height: 0.95rem;
    margin-top: 0.08rem;
    border-radius: 50%;
    background: var(--sp-brand-teal-tint);
    color: var(--sp-brand-teal);
    font-size: 0.55rem;
    line-height: 1;
}
.static-page--ai-chat-assistant-for-business .aca-cite__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.static-page--ai-chat-assistant-for-business .aca-cite__text {
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sp-ink);
}
.static-page--ai-chat-assistant-for-business .aca-cite__meta {
    font-size: 0.6rem;
    line-height: 1.3;
    color: var(--sp-ink-faint);
}

/* ── Metric strip ──────────────────────────────────────────────────────────
   The values here are short phrases rather than numbers ("Plain words",
   "Nobody pinged"), so the size is a step below the numeric strips on the voice
   and knowledge base pages: at their clamp cap a two-word value wrapped while a
   one-digit value did not, and a strip where one cell is two lines tall reads
   as a mistake rather than as emphasis. Same value the internal reporting,
   security, alerts and MCP pages settled on, for the same reason. */
.static-page--ai-chat-assistant-for-business .aca-metric__value {
    font-size: clamp(1.5rem, 2.3vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--sp-brand-teal);
    margin-bottom: 0.6rem;
}
.static-page--ai-chat-assistant-for-business .aca-metric__label {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--sp-ink-muted);
    max-width: 12rem;
}

/* ── Inline cross-link (pillar card) ───────────────────────────────────────
   The security pillar is the page's single security section, and it hands the
   argument to the page that owns it rather than making it again. The link is
   on its own line so it reads as the next thing to do rather than as a phrase
   inside a sentence. */
.static-page--ai-chat-assistant-for-business .aca-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sp-brand-teal);
    text-decoration: none;
}
.static-page--ai-chat-assistant-for-business .aca-inline-link:hover,
.static-page--ai-chat-assistant-for-business .aca-inline-link:focus-visible {
    color: var(--sp-brand-teal-dark);
    text-decoration: underline;
}
.static-page--ai-chat-assistant-for-business .aca-inline-link i {
    font-size: 0.85rem;
}

/* ══ Transform row (dark band) ═════════════════════════════════════════════
   Three columns — the person the answers arrived for, an arrow, the questions
   that got them — because the whole claim of the section is that the one
   becomes the other.

   The columns are 1fr/56px/1fr, but neither card fills its column: each caps at
   520px and hugs the arrow from its own side. So the gap between them is
   exactly the arrow's 56px column and nothing else. Left to fill their columns
   at a 1200px container they would sit 232px apart, with the arrow floating in
   the middle of a gap rather than joining two things, and the pair would stop
   reading as one transformation.

   Below `lg` the arrow rotates to point down and the columns stack, which keeps
   the reading order (question → answer) on a phone. */
.static-page--ai-chat-assistant-for-business .aca-transform {
    display: grid;
    grid-template-columns: 1fr 56px 1fr;
    align-items: center;
}
.static-page--ai-chat-assistant-for-business .aca-transform__arrow {
    display: flex;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--sp-brand-blue);
}
@media (max-width: 1023px) {
    .static-page--ai-chat-assistant-for-business .aca-transform {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .static-page--ai-chat-assistant-for-business .aca-transform__arrow {
        transform: rotate(90deg);
    }
    /* Stacked, there is no arrow column to hug — the cards are above and below
       it — so both recentre. */
    .static-page--ai-chat-assistant-for-business .aca-photo-card,
    .static-page--ai-chat-assistant-for-business .aca-thoughts-wrap {
        margin-inline: auto;
    }
}

/* width:100% is load-bearing next to the auto margin, not redundant. An auto
   margin on a grid item switches off the default justify-self:stretch, so the
   item falls back to fit-content — which would make each card's width depend on
   how long its longest line of text happened to be. Stating the width restores
   "fill the column, then cap".

   The cap is the same on both sides, so the pair is symmetric about the arrow
   and the group's centre is the band's centre. Both sides fill their 520px —
   the photo as a card, the thoughts as a column of floating shapes.

   The right side is a wrapper rather than the thought column itself because the
   column's internal fallbacks are container queries, and an element cannot
   query the container it establishes. The wrapper carries the width and the
   container-type; the column fills it. */
.static-page--ai-chat-assistant-for-business .aca-photo-card,
.static-page--ai-chat-assistant-for-business .aca-thoughts-wrap {
    width: 100%;
    max-width: 520px;
}
.static-page--ai-chat-assistant-for-business .aca-photo-card {
    margin-left: auto;
}
.static-page--ai-chat-assistant-for-business .aca-thoughts-wrap {
    margin-right: auto;
    container-type: inline-size;
}

/* ── Photo card (dark band, input side) ────────────────────────────────────
   A photograph with the gold strip written underneath it. The card chrome —
   white, radius, padding, shadow — lives here rather than on the strip inside
   it, so the photo and its caption are one object and not two stacked cards.
   Same anatomy as the sibling pages' band photo cards, which is the same move:
   a human moment on the input side, the machine's finished work on the other.

   The caption is now ONE part and no more. It used to carry a head and a
   verbatim question above the strip; the thoughts opposite carry all four
   questions, so repeating one of them here said the same thing twice inside one
   section — and this is the side already spending 351px on a photograph, so it
   is the side that stays compact if the pair is to end up the same height. */
.static-page--ai-chat-assistant-for-business .aca-photo-card {
    background: #ffffff;
    border: 1px solid #EFF4F3;
    border-radius: 20px;
    padding: 1.5rem;
    color: var(--sp-ink);
    line-height: 1.35;
    letter-spacing: -0.005em;
    text-align: left;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}

/* The photograph carries its own near-white surroundings, so its outer edge
   blends into the card and only a small radius is needed to stop its corners
   fighting the card's. Same treatment the sibling pages give their band photos.

   aspect-ratio holds the slot at exactly the declared 1100x821 while the JPEG
   decodes, so the band's proportions are correct before it paints and stay
   correct if the file is ever missing. The background is what keeps that state
   a quiet neutral block rather than a broken-image glyph. */
.static-page--ai-chat-assistant-for-business .aca-photo-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1100 / 821;
    object-fit: cover;
    border-radius: 6px;
    background: #EEF2F1;
}

/* The nobody-interrupted strip — the one and only gold element on the page.
   A recessed panel rather than another sentence, so it reads as a property of
   the moment rather than as more of the caption. Its left edge is the gold
   itself, the same construction the alerts page uses for its "why this
   severity" strip; only the meaning differs. */
.static-page--ai-chat-assistant-for-business .aca-quiet {
    margin-top: 0.9rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(248, 194, 108, 0.35);
    border-left: 3px solid var(--sp-brand-gold);
    border-radius: 10px;
    background: var(--sp-brand-gold-tint);
}
.static-page--ai-chat-assistant-for-business .aca-quiet__label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--sp-font-mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--sp-brand-gold-ink);
}
.static-page--ai-chat-assistant-for-business .aca-quiet__label i {
    font-size: 0.7rem;
    line-height: 1;
}
.static-page--ai-chat-assistant-for-business .aca-quiet__text {
    margin: 0.3rem 0 0;
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--sp-ink-soft);
}

/* ══ Thought bubbles (dark band, answer side) ══════════════════════════════
   A morning's four questions as they occurred, floating on the dark ground.

   NO CONTAINER, deliberately. A card, a head or a window would put these
   questions somewhere, and the point of the section is that they were nowhere
   yet — still in one person's head, not yet in anybody's inbox. The band's
   heading claims the answer arrived without anyone being asked; drawn as a chat
   these would say the opposite, because a message typed into a window has
   already cost somebody the interruption.

   WHAT MAKES THEM READ AS THOUGHTS is one device: the chain of shrinking
   circles under each bubble, drawn as three CSS discs that step down and to the
   LEFT — towards the photograph beside them, because the person in it is who
   these are occurring to. Everything else stays in the site's existing
   vocabulary rather than inventing a dialect for one graphic: the same white
   surface, the same #EFF4F3 hairline and the same deep on-dark shadow the photo
   card opposite uses, only at a smaller radius and in four small shapes instead
   of one large one. No cartoon cloud outline, no second palette.

   HEIGHT PEERAGE with the photo card opposite. The photo card is 489.9px at a
   1280px viewport. Four thoughts and the three gaps between them are what this
   side has to build that out of, so the gap is the lever: at 2.4rem the column
   lands near 460px, roughly 30px short, which is well inside the 100px the pair
   is allowed to differ by. The other lever is the bubble type size, and both
   are the numbers to re-check if either side of the band is edited. */
.static-page--ai-chat-assistant-for-business .aca-thoughts {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    line-height: 1.35;
    letter-spacing: -0.005em;
    text-align: left;
}

/* Staggered by four different indents so the group drifts rather than stacking
   into a column of sent messages. The indents are percentages of the wrapper,
   so they scale with it — and because a percentage margin on a flex item takes
   its width out of that item's own box, a long question inside an indented
   thought wraps rather than overflowing. Widths are otherwise left to the text,
   which is what gives four shapes four different sizes without hand-setting
   any of them. */
.static-page--ai-chat-assistant-for-business .aca-thought {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.static-page--ai-chat-assistant-for-business .aca-thought:nth-child(2) { margin-left: 12%; }
.static-page--ai-chat-assistant-for-business .aca-thought:nth-child(3) { margin-left: 4%;  }
.static-page--ai-chat-assistant-for-business .aca-thought:nth-child(4) { margin-left: 16%; }

/* The bubble itself: the photo card's chrome at a smaller radius. White, the
   same #EFF4F3 hairline, and a shallower version of the same on-dark shadow, so
   four small shapes and one large one read as the same material. The radius is
   uniform on all four corners — a clipped corner is a message tail, which is
   the one thing this graphic must not say. */
.static-page--ai-chat-assistant-for-business .aca-thought__bubble {
    position: relative;
    max-width: 78%;
    margin: 0;
    padding: 0.85rem 1.1rem;
    background: #ffffff;
    border: 1px solid #EFF4F3;
    border-radius: 18px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--sp-ink);
    box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.65);
}

/* The chain. Three discs of shrinking size stepping down-left from the bubble's
   lower-left corner: 11px, then 6.5px, then 3.5px. The first hangs off the
   bubble; the other two hang off the footer row below it, which is the only way
   to place three of them with two pseudo-elements per box — and it also means
   the chain's length is fixed rather than depending on how tall the bubble
   grew. Same white fill and same hairline as the bubble, so the chain is made
   of the bubble rather than drawn on top of it.

   Every disc sits at left >= 0 inside its own box, so none of them can push
   past the wrapper's left edge at any width. */
.static-page--ai-chat-assistant-for-business .aca-thought__bubble::after,
.static-page--ai-chat-assistant-for-business .aca-thought__foot::before,
.static-page--ai-chat-assistant-for-business .aca-thought__foot::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #EFF4F3;
    box-shadow: 0 10px 20px -14px rgba(0, 0, 0, 0.65);
}
.static-page--ai-chat-assistant-for-business .aca-thought__bubble::after {
    width: 11px;
    height: 11px;
    left: 18px;
    top: calc(100% + 6px);
}
.static-page--ai-chat-assistant-for-business .aca-thought__foot::before {
    width: 6.5px;
    height: 6.5px;
    left: 8px;
    top: 2px;
}
.static-page--ai-chat-assistant-for-business .aca-thought__foot::after {
    width: 3.5px;
    height: 3.5px;
    left: 0;
    top: 11px;
}

/* The footer row sits beside the chain's tail rather than under it, which is
   what keeps a thought compact enough for four of them to stand next to a
   photograph. padding-left clears the two discs the row carries; margin-top is
   the gap between the first disc and the second. */
.static-page--ai-chat-assistant-for-business .aca-thought__foot {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1.2rem;
    padding-left: 2.6rem;
    max-width: 100%;
}

/* The resolved state. This is what keeps the section's heading true — the band
   claims the answer arrived, not merely that the question occurred, so the
   graphic has to show the arrival.

   Teal, in the on-dark tone the rest of this panel uses for an accent, and
   deliberately NOT gold: gold means "the interruption that did not happen" on
   this page and is spent on .aca-quiet under the photograph. A second gold
   element inside the same section would split one meaning across two graphics
   and the reader would stop being able to tell what gold means. */
.static-page--ai-chat-assistant-for-business .aca-thought__state {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: none;
    font-family: var(--sp-font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--sp-ink-on-dark-accent);
}
.static-page--ai-chat-assistant-for-business .aca-thought__state i {
    font-size: 0.8rem;
    line-height: 1;
}

/* The colleague the question would otherwise have gone to. The prefix is
   written into the markup rather than added as generated content, because it is
   the half of the item that carries the page's argument — an absence — and
   generated content is not in the document for a search engine to read.

   Separated from the state by a hairline rather than by a bullet, which is how
   this page separates two values on one row everywhere else. The hairline is
   dropped in the narrow layout below, where the row wraps and a rule at the
   start of the second line would read as a stray mark. */
.static-page--ai-chat-assistant-for-business .aca-thought__who {
    padding-left: 0.55rem;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--sp-ink-on-dark);
    opacity: 0.72;
}

/* Narrow fallback, asked of the column's own container rather than of the
   viewport: this column is 520px beside the arrow and the full content width
   once the band stacks, and those two do not order the same way as the window
   narrows.

   459px is derived from measured ink, not rounded down from a breakpoint, and
   the binding string is NOT the longest one. Each bubble's text box is
   0.78 x (1 - its indent) x C, less 35.2px of bubble padding and its 2px
   border. Measured at 0.95rem/600: "What did we promise Halton for the pilot?"
   is 314.47px wide at no indent and needs C >= 450.9; "Who owns the onboarding
   audit now?" is 289.13px at a 4% indent and needs 435.8; "What changed while I
   was away?" is 253.91px at 16% and needs 444.3; and "Where did the Ops
   migration get to?" is 275.88px at 12% and needs 456.1 — the widest
   requirement of the four, because the stagger costs it more width than its
   shorter string saves. So the wide layout stops holding all four on one line
   below 456.1px of container, and crossing at 459 keeps 3.9px of spare.

   Below it three things step down together: the indents come off, because a 16%
   indent out of a narrow column costs more than the stagger is worth; the
   bubble cap opens to 100% and the type to 0.88rem, which brings the longest
   string down to 291.02px and needs only 323.4px of container, so the fallback
   carries every thought on one line well past where the wide layout gives up;
   and the footer's hairline is dropped because the row wraps there and a rule at
   the start of a second line reads as a stray mark. */
@container (max-width: 459px) {
    .static-page--ai-chat-assistant-for-business .aca-thoughts {
        gap: 1.9rem;
    }
    .static-page--ai-chat-assistant-for-business .aca-thought:nth-child(2),
    .static-page--ai-chat-assistant-for-business .aca-thought:nth-child(3),
    .static-page--ai-chat-assistant-for-business .aca-thought:nth-child(4) {
        margin-left: 0;
    }
    .static-page--ai-chat-assistant-for-business .aca-thought__bubble {
        max-width: 100%;
        padding: 0.75rem 0.95rem;
        font-size: 0.88rem;
    }
    .static-page--ai-chat-assistant-for-business .aca-thought__foot {
        gap: 0.15rem 0.5rem;
        padding-left: 2.2rem;
    }
    .static-page--ai-chat-assistant-for-business .aca-thought__who {
        padding-left: 0;
        border-left: 0;
    }
}

/* ── Rule rows (follow-up copy column) ─────────────────────────────────────
   The three facts this section settles, as bars: the fact's name, and in the
   mono column its answer. Same bar as the alerts page's rule rows and the MCP
   page's, because it is the same move — a short fixed list where every row has
   exactly one value. */
.static-page--ai-chat-assistant-for-business .aca-rule-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #FBFDFC;
    border: 1px solid #E7EEEC;
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
}
.static-page--ai-chat-assistant-for-business .aca-rule-row__what {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--sp-ink);
}
.static-page--ai-chat-assistant-for-business .aca-rule-row__value {
    font-family: var(--sp-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--sp-brand-teal);
    text-align: right;
    flex: none;
}
/* Below the width where a name and its value cannot share a line, the value
   drops under the name rather than squeezing it to two or three words. */
@media (max-width: 400px) {
    .static-page--ai-chat-assistant-for-business .aca-rule-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
    .static-page--ai-chat-assistant-for-business .aca-rule-row__value {
        text-align: left;
    }
}

/* ══ Follow-up thread (two-column mock) ════════════════════════════════════
   Three turns of one conversation, narrowing each time. A transcript rather
   than a second chat card: the band already carries the chat card, and
   repeating its chrome here would say "another chat" when the thing to notice
   is the SHAPE of the exchange — broad answer, narrowed, then a question that
   only means anything because of the two above it.

   Each turn is a pair, and the pair is the unit: question and its answer share
   one recessed block, with the blocks separated by space rather than by rules,
   so three exchanges read as three steps rather than as six lines.

   Width comes from the column this is dropped into, not from the viewport —
   roughly 620px beside the copy on desktop and full width when the section
   stacks — so the narrow fallback below is asked of a container query. Keyed to
   the viewport it would not even be monotonic as the window narrows. */
.static-page--ai-chat-assistant-for-business .aca-thread-wrap {
    width: 100%;
    max-width: 40rem;
    container-type: inline-size;
}
.static-page--ai-chat-assistant-for-business .aca-thread {
    --aca-pad: 1.15rem;
    background: #ffffff;
    border: 1px solid #E7EEEC;
    border-radius: 16px;
    padding: var(--aca-pad);
    line-height: 1.35;
    letter-spacing: -0.005em;
    text-align: left;
    box-shadow: 0 1px 2px rgba(21, 41, 39, 0.05),
                0 18px 40px -26px rgba(21, 41, 39, 0.45);
}
.static-page--ai-chat-assistant-for-business .aca-thread__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.85rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid #EEF2F1;
}
.static-page--ai-chat-assistant-for-business .aca-thread__title {
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #0E223B;
}
.static-page--ai-chat-assistant-for-business .aca-thread__tag {
    font-family: var(--sp-font-mono);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sp-ink-faint);
    white-space: nowrap;
}

.static-page--ai-chat-assistant-for-business .aca-turn + .aca-turn {
    margin-top: 0.7rem;
}
.static-page--ai-chat-assistant-for-business .aca-turn__q,
.static-page--ai-chat-assistant-for-business .aca-turn__a {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
}
/* The question is the tinted half of the pair and the answer the plain one, so
   a reader can find the three questions without reading anything. The pair
   shares one rounded block: the question takes the top corners, the answer the
   bottom. */
.static-page--ai-chat-assistant-for-business .aca-turn__q {
    background: #F5FAF9;
    border: 1px solid #E6EFED;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
}
.static-page--ai-chat-assistant-for-business .aca-turn__a {
    background: #FFFFFF;
    border: 1px solid #E6EFED;
    border-radius: 0 0 12px 12px;
}
.static-page--ai-chat-assistant-for-business .aca-turn__badge {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #E0EAE8;
    color: var(--sp-ink-muted);
    font-size: 0.72rem;
    line-height: 1;
}
.static-page--ai-chat-assistant-for-business .aca-turn__badge--agent {
    background: var(--sp-brand-teal-tint);
    border-color: transparent;
    color: var(--sp-brand-teal);
}
.static-page--ai-chat-assistant-for-business .aca-turn__text {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--sp-ink-soft);
}
.static-page--ai-chat-assistant-for-business .aca-turn__q .aca-turn__text {
    font-weight: 600;
    color: var(--sp-ink);
}
.static-page--ai-chat-assistant-for-business .aca-thread__foot {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px solid #EEF2F1;
    font-size: 0.66rem;
    line-height: 1.45;
    color: var(--sp-ink-faint);
}
.static-page--ai-chat-assistant-for-business .aca-thread__foot i {
    font-size: 0.8rem;
    color: var(--sp-brand-teal);
    flex: none;
}
/* 420px is derived from the longest line the component has to hold on one row,
   not rounded down from a breakpoint. Everything a turn spends before the text
   starts is fixed: 2 x 1.15rem of card padding (36.8px) plus its 2px border,
   2 x 0.7rem of row padding (22.4px) plus its 2px border, the 1.5rem badge
   (24px) and the 0.6rem gap (9.6px) — 96.8px in total. The longest question,
   "What changed on my accounts while I was away?", measures 320.1px at the wide
   0.8rem size, so the wide layout stops fitting it on one line below 416.9px of
   component width. Measured, not estimated: at a 401px component that question
   wrapped to two lines while at 400px it did not, because the narrow rules
   below step the badge and both paddings down — fixed anatomy falls to 76px and
   the type to 0.76rem, which needs only 303.9px. Crossing at 420px keeps ~4px
   of spare on the wide side rather than the 1px the exact figure would leave. */
@container (max-width: 420px) {
    .static-page--ai-chat-assistant-for-business .aca-thread {
        --aca-pad: 0.85rem;
    }
    .static-page--ai-chat-assistant-for-business .aca-turn__q,
    .static-page--ai-chat-assistant-for-business .aca-turn__a {
        gap: 0.45rem;
        padding: 0.5rem 0.55rem;
    }
    .static-page--ai-chat-assistant-for-business .aca-turn__badge {
        width: 1.25rem;
        height: 1.25rem;
        font-size: 0.62rem;
    }
    .static-page--ai-chat-assistant-for-business .aca-turn__text {
        font-size: 0.76rem;
    }
}

/* ── Icon chip on the dark card ────────────────────────────────────────────
   The pale teal tint .sp-feature-icon uses would punch a flat hole in the dark
   gradient, so the chip on that card takes a translucent white fill and its
   accent from the on-dark ramp — the same substitution the sibling pages make
   for their dark cards. */
.static-page--ai-chat-assistant-for-business .aca-icon-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--sp-radius);
    background: rgba(255, 255, 255, 0.10);
    color: var(--sp-ink-on-dark-accent);
    font-size: 1.4rem;
    line-height: 1;
}
/* The dark card's link is a footer to the card, so it needs its own top gap;
   .sp-btn has no margin of its own by design. */
.static-page--ai-chat-assistant-for-business .aca-dark-link {
    margin-top: 1.5rem;
}

/* ══ FAQ ═══════════════════════════════════════════════════════════════════
   Native <details>/<summary>. The browser supplies the open/close behaviour,
   the keyboard handling and the correct expanded/collapsed announcement, so
   there is no script and no plugin stylesheet involved — and every answer is in
   the page's text whether or not it has been opened.

   The default disclosure triangle is removed on both the standard and the
   WebKit-prefixed pseudo-element and replaced by a caret on the right, which is
   where this site's other disclosure controls put it. Removing only one of the
   two leaves a stray marker in Safari. */
.static-page--ai-chat-assistant-for-business .aca-faq {
    max-width: 52rem;
    margin-inline: auto;
}
.static-page--ai-chat-assistant-for-business .aca-faq__item {
    background: #ffffff;
    border: 1px solid #E9EFEE;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(21, 41, 39, 0.04);
}
.static-page--ai-chat-assistant-for-business .aca-faq__item + .aca-faq__item {
    margin-top: 0.7rem;
}
.static-page--ai-chat-assistant-for-business .aca-faq__item[open] {
    border-color: var(--sp-brand-teal-soft);
    box-shadow: 0 1px 2px rgba(21, 41, 39, 0.05),
                0 14px 32px -22px rgba(21, 41, 39, 0.45);
}
.static-page--ai-chat-assistant-for-business .aca-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.3rem;
    cursor: pointer;
    list-style: none;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.45;
    color: var(--sp-ink);
}
.static-page--ai-chat-assistant-for-business .aca-faq__q::-webkit-details-marker { display: none; }
.static-page--ai-chat-assistant-for-business .aca-faq__q::marker { content: ""; }
.static-page--ai-chat-assistant-for-business .aca-faq__item[open] .aca-faq__q {
    color: var(--sp-brand-teal-dark);
}
/* Focus is drawn on the summary itself rather than being left to the UA: the
   summary is the control, and a keyboard user needs to see where they are. */
.static-page--ai-chat-assistant-for-business .aca-faq__q:focus-visible {
    outline: 2px solid var(--sp-brand-teal);
    outline-offset: -2px;
    border-radius: 14px;
}
/* A tinted disc that fills solid when open, so the control reads as a control
   at a glance. It rotates rather than swapping glyph, which is one rule instead
   of two and keeps open and closed obviously the same button. */
.static-page--ai-chat-assistant-for-business .aca-faq__caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--sp-brand-teal-tint);
    font-size: 0.8rem;
    color: var(--sp-brand-teal);
    transition: transform 0.2s ease, background 0.2s ease;
}
.static-page--ai-chat-assistant-for-business .aca-faq__item[open] .aca-faq__caret {
    transform: rotate(180deg);
    background: var(--sp-brand-teal);
    color: #ffffff;
}
.static-page--ai-chat-assistant-for-business .aca-faq__a {
    padding: 0 1.3rem 1.2rem;
}
.static-page--ai-chat-assistant-for-business .aca-faq__a p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--sp-ink-soft);
}
/* The one answer that carries a cross-link puts it on its own line, so it reads
   as the next thing to do rather than as a phrase inside a sentence. */
.static-page--ai-chat-assistant-for-business .aca-faq__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.7rem;
    font-weight: 600;
    color: var(--sp-brand-teal);
    text-decoration: none;
}
.static-page--ai-chat-assistant-for-business .aca-faq__link:hover,
.static-page--ai-chat-assistant-for-business .aca-faq__link:focus-visible {
    color: var(--sp-brand-teal-dark);
    text-decoration: underline;
}
.static-page--ai-chat-assistant-for-business .aca-faq__link i {
    font-size: 0.85rem;
}

/* ── Closing statement ─────────────────────────────────────────────────────
   The one place on the page set entirely in the italic display face. It is a
   statement of position rather than a section heading, so it is a <p>: making
   it an <h2> would put a heading in the document outline that no section hangs
   off. */
.static-page--ai-chat-assistant-for-business .aca-statement {
    font-family: var(--sp-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--sp-ink);
    max-width: 54rem;
    margin: 0 auto 1.75rem;
    text-wrap: pretty;
}
/* .sp-accent already sets the italic display face; inside the statement it only
   needs to contribute the colour shift. */
.static-page--ai-chat-assistant-for-business .aca-statement .sp-accent {
    font-size: inherit;
}

/* The page's only motion is the hero's eyebrow dot and the FAQ caret, and both
   resolve to a state that says exactly what they say while moving. The chat
   card's own animations are all gated behind classes the markup already sets,
   and its one ungated animation is turned off above. */
@media (prefers-reduced-motion: reduce) {
    .static-page--ai-chat-assistant-for-business .aca-pulse-dot {
        animation: none;
        opacity: 1;
    }
    .static-page--ai-chat-assistant-for-business .aca-faq__caret {
        transition: none;
    }
}