/* AI-Powered Team Knowledge Base for Employees — page-specific styles only.
 *
 * Everything reusable (type scale, cards, dark panel, badges, rule grids,
 * buttons, feature-icon discs) comes from shared.css. What is left here is
 * either a composition this page invents — the ask/answer hero mock, the
 * retrieve row, the permission comparison, the FAQ list — or a value genuinely
 * tuned to this page's content.
 *
 * Surfaces, hairlines, metric strip, trust line and pulse dot are deliberately
 * the same values as the voice-to-text page rather than approximations of
 * them: the two pages are siblings in a product section, and a reader moving
 * between them should not be able to see a seam.
 *
 * All selectors are scoped to
 * .static-page--ai-powered-team-knowledge-base-for-employees so nothing can
 * leak into the home, integrations or voice pages.
 */

/* ── 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-powered-team-knowledge-base-for-employees .kb-surface-soft {
    background: #FBFDFC;
}
.static-page--ai-powered-team-knowledge-base-for-employees .kb-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. */
.static-page--ai-powered-team-knowledge-base-for-employees .kb-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-powered-team-knowledge-base-for-employees .kb-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sp-brand-teal);
    flex-shrink: 0;
    animation: kbPulse 1.8s ease-in-out infinite;
}
@keyframes kbPulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}

/* Trust line under the hero CTAs. A <ul> for meaning; the middot separators
   are drawn with ::before on every item but the first, so no separator glyph
   is in the text for a screen reader to read out. */
.static-page--ai-powered-team-knowledge-base-for-employees .kb-trust-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 1.6rem 0 0;
    border-top: 1px solid #E7EEEC;
    font-size: 0.85rem;
    color: var(--sp-ink-faint);
}
.static-page--ai-powered-team-knowledge-base-for-employees .kb-trust-line li {
    display: flex;
    align-items: center;
    margin: 0;
}
.static-page--ai-powered-team-knowledge-base-for-employees .kb-trust-line li + li::before {
    content: "·";
    margin-right: 1.25rem;
    color: #CFDAD7;
}
/* Below the point where three items cannot share a line, stack them and drop
   the separators. A middot only separates while both things it sits between
   are on the same line; carried onto a new line by a wrapping item it becomes
   a bullet the list never asked for. Stacking removes the need for it rather
   than trying to suppress it, which CSS cannot do — there is no selector for
   "first on its line". */
@media (max-width: 600px) {
    .static-page--ai-powered-team-knowledge-base-for-employees .kb-trust-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .static-page--ai-powered-team-knowledge-base-for-employees .kb-trust-line li + li::before {
        content: none;
    }
}

/* ── Metric strip ──────────────────────────────────────────────────────── */
.static-page--ai-powered-team-knowledge-base-for-employees .kb-metric__value {
    font-size: clamp(2rem, 3.2vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--sp-brand-teal);
    margin-bottom: 0.6rem;
}
.static-page--ai-powered-team-knowledge-base-for-employees .kb-metric__label {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--sp-ink-muted);
    max-width: 12rem;
}

/* ══ Hero figure ═══════════════════════════════════════════════════════════
   Positions the shared Living Knowledge Base animation in the hero's right
   column. It does nothing else on purpose: the animation's mechanics live in
   static-pages/anim-knowledge-base.css and are shared with the homepage
   section that links here, so restyling it from this page would reintroduce
   exactly the divergence sharing the file removes. If the animation needs to
   look different, it changes in that file, for both pages.

   The stage caps itself at 480px, so this is centring, not sizing. */
.static-page--ai-powered-team-knowledge-base-for-employees .kb-hero-figure {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ── Citation rows ─────────────────────────────────────────────────────────
   Used by the agent card's sources. Two columns: a channel icon, then the
   entry itself with its provenance beneath.

   Stacked rather than three things on one line, because the card is 340px
   wide. On one line the entry title had roughly 180px to live in and the
   longest one took an ellipsis — which costs the row the only thing it is
   there for, a citation specific enough to go and check. Given its own line
   it simply wraps.

   The label above them is what turns two rows of small text into evidence:
   without it they read as related links, with it they read as the answer's
   working. */
.static-page--ai-powered-team-knowledge-base-for-employees .kb-cites__label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--sp-font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sp-ink-faint);
}
.static-page--ai-powered-team-knowledge-base-for-employees .kb-cite {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--sp-ink-soft);
}
/* The channel, as an icon in a tinted disc. Same treatment as the row icons in
   the tool chips above it, at the same teal, so the card reads as one object
   rather than as a citation list bolted to a chat. Fixed width keeps both
   entries on one left edge whatever icon each carries. */
.static-page--ai-powered-team-knowledge-base-for-employees .kb-cite__src {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    font-size: 0.68rem;
    line-height: 1;
}
/* One tint per channel, so the two rows are told apart by colour before either
   is read — which is the job the removed text tag used to do. The pairing is
   not arbitrary: teal is the brand's action colour and voice is the product's
   primary source, blue is the colour the palette already assigns to connected
   data, and both tints are pale enough to sit under a full-colour brand mark
   without fighting it. A third channel would take the gold tint, the same
   order the palette uses elsewhere. */
.static-page--ai-powered-team-knowledge-base-for-employees .kb-cite__src--voice {
    background: var(--sp-brand-teal-tint);
    color: var(--sp-brand-teal);
}
.static-page--ai-powered-team-knowledge-base-for-employees .kb-cite__src--slack {
    background: var(--sp-brand-blue-tint);
}
/* Slack gets its own mark rather than a generic speech bubble — the same SVG
   the connected-sources card and the integrations page use, so one service is
   drawn one way across the site. 13px inside a 20px disc keeps the same
   optical margin the .kb-source-chip pairing uses. */
.static-page--ai-powered-team-knowledge-base-for-employees .kb-cite__src svg {
    display: block;
    width: 13px;
    height: 13px;
}
.static-page--ai-powered-team-knowledge-base-for-employees .kb-cite__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.static-page--ai-powered-team-knowledge-base-for-employees .kb-cite__text {
    color: var(--sp-ink);
}
/* Carries the channel name as well as the author and date, so the fact the
   icon shows is also stated in words for anyone who cannot see the icon. */
.static-page--ai-powered-team-knowledge-base-for-employees .kb-cite__meta {
    font-size: 0.66rem;
    line-height: 1.45;
    color: var(--sp-ink-faint);
}

@media (prefers-reduced-motion: reduce) {
    .static-page--ai-powered-team-knowledge-base-for-employees .kb-pulse-dot {
        animation: none;
        opacity: 1;
    }
}

/* ══ Retrieve row (dark band) ══════════════════════════════════════════════
   Three columns — the question asked, an arrow, the answer built from it —
   because the whole claim of the section is that the one becomes the other.

   The columns stay 1fr/44px/1fr, but neither card fills its column: the photo
   caps at 440px and hugs the arrow from the left, the agent card caps at 340px
   and hugs it from the right. So the gap between the two is exactly the
   arrow's 44px column and nothing else. Left to fill their columns they sat
   151px apart — the arrow floating in the middle of a gap rather than joining
   two things — and the pair stopped reading as one transformation.

   440px is chosen against the 340px card rather than picked: at that width the
   photo's own height lands within ~30px of the agent card's, so the two sit as
   a matched pair without either being pinned to the other's height.

   Below `lg` the arrow rotates to point down and the columns stack, which
   keeps the same reading order (question → answer) on a phone. */
.static-page--ai-powered-team-knowledge-base-for-employees .kb-retrieve {
    display: grid;
    grid-template-columns: 1fr 56px 1fr;
    align-items: center;
}
.static-page--ai-powered-team-knowledge-base-for-employees .kb-retrieve__arrow {
    display: flex;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--sp-brand-blue);
}
@media (max-width: 1023px) {
    .static-page--ai-powered-team-knowledge-base-for-employees .kb-retrieve {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .static-page--ai-powered-team-knowledge-base-for-employees .kb-retrieve__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-powered-team-knowledge-base-for-employees .kb-photo-card,
    .static-page--ai-powered-team-knowledge-base-for-employees .kb-agent {
        margin-inline: auto;
    }
}

/* The zoom has to come off before the card outgrows the screen. Zoom scales
   the resolved width, so `width:100%` fills the container and is *then*
   multiplied: at a 480px viewport the card would resolve to 432px and render
   at 562px, pushing the page sideways. 340 x 1.3 = 442px, so any viewport
   whose content box is narrower than that has to drop back to 1x — 559px is
   the last width where the container (511px) still clears it. */
@media (max-width: 559px) {
    .static-page--ai-powered-team-knowledge-base-for-employees .kb-agent {
        zoom: 1;
    }
}

/* The photo card is white inside the dark band, and the heavy drop shadow is
   what makes it read as lifted off the panel rather than as a hole cut in it.
   The agent card opposite gets the same shadow further down — it brings its
   own white, radius and border from the shared stylesheet, so only the shadow
   has to be restated for the dark background it now sits on. */
.static-page--ai-powered-team-knowledge-base-for-employees .kb-photo-card {
    /* 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 made this card 377px wide
       and, worse, made its width depend on how long the question underneath
       happened to be. Stating the width restores "fill the column, then cap". */
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    background: #ffffff;
    border-radius: 16px;
    padding: 1.5rem;
    color: var(--sp-ink);
    line-height: 1.4;
    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 voice page gives its photo, for the
   same reason. */
.static-page--ai-powered-team-knowledge-base-for-employees .kb-photo-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* The question, set as the field it was typed into. It sits under the photo
   where the voice page puts its transcript line, separated by the same
   hairline, so the two pages read as one family. */
.static-page--ai-powered-team-knowledge-base-for-employees .kb-photo-card__q {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 1.1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid #EEF2F1;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--sp-ink);
}
.static-page--ai-powered-team-knowledge-base-for-employees .kb-photo-card__q i {
    flex: none;
    font-size: 0.88rem;
    color: var(--sp-brand-teal);
}

/* ── Agent card (dark band, answer side) ──────────────────────────────────
   The card is drawn entirely by static-pages/anim-agent-chat.css, the same
   stylesheet the homepage 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 moved onto a dark panel and stopped moving.

   Width: 340px, the same cap the homepage puts on it with max-w-[340px]. The
   card's whole visual language — 11px type, 20px avatars, tight tool chips —
   is drawn for that width, and stretched to fill this 554px column it stopped
   reading as a phone-sized assistant and started reading as a wide panel with
   small text in it. Centred, because the arrow points at the card rather than
   at the column. The homepage's aspect-square is deliberately NOT copied: this
   one holds tools, an answer and sources, and squaring it would force them
   into a box shorter than they need.

   Shadow: the homepage gives it Tailwind's shadow-xl, tuned for a white
   section and all but invisible on the dark panel. This is the same shadow the
   photo card opposite uses, so the pair reads as two objects lifted off the
   same surface. */
.static-page--ai-powered-team-knowledge-base-for-employees .kb-agent {
    width: 100%;
    max-width: 340px;
    margin-right: auto;
    /* Scaled as a whole rather than widened. Every dimension inside this card
       — 11px type, 20px avatars, 6px gaps, 32 px-fixed declarations in all —
       is drawn for a 340px width in the shared stylesheet. Widening the box
       leaves all of that at its original size, which is exactly how it came to
       read as a wide panel with small text in it before it was capped.

       zoom scales layout as well as paint, so one number moves the whole
       component and the card stays sharp (it is not a raster transform). The
       alternative was overriding all 32 values here, which would copy the
       design out of the shared file and let this page's card drift from the
       homepage's — the thing sharing the file exists to prevent.

       1.3 is chosen against the photo, not picked: at 560px the photo card
       stands 487px tall and this lands within a few pixels of it, so the pair
       reads as matched without either being pinned to the other. */
    zoom: 1.3;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}

/* Stillness: every other animation in that file is gated behind a state class
   the script adds, so writing the finished markup is enough to stop it. The
   header dot is the exception — its pulse runs off the base rule, with no
   class to withhold — so it is the one thing turned off by hand. */
.static-page--ai-powered-team-knowledge-base-for-employees .kb-agent .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 read as a bug. */
.static-page--ai-powered-team-knowledge-base-for-employees .kb-agent__gutter {
    width: 20px;
    flex-shrink: 0;
}
.static-page--ai-powered-team-knowledge-base-for-employees .kb-agent__sources {
    flex: 1;
    min-width: 0;
    padding-top: 0.55rem;
    border-top: 1px solid #EEF2F1;
}
/* Stepped down to the chat's scale so the citations read as part of the card
   rather than as something pasted into it. */
.static-page--ai-powered-team-knowledge-base-for-employees .kb-agent__sources .kb-cite {
    font-size: 0.7rem;
    padding: 0.12rem 0;
}
.static-page--ai-powered-team-knowledge-base-for-employees .kb-agent__sources .kb-cite__meta {
    font-size: 0.6rem;
}
.static-page--ai-powered-team-knowledge-base-for-employees .kb-agent__sources .kb-cites__label {
    margin-bottom: 0.35rem;
    font-size: 0.57rem;
}

/* ── Permission rule rows ──────────────────────────────────────────────── */
.static-page--ai-powered-team-knowledge-base-for-employees .kb-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-powered-team-knowledge-base-for-employees .kb-rule-row__what {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sp-ink);
}
.static-page--ai-powered-team-knowledge-base-for-employees .kb-rule-row__value {
    font-family: var(--sp-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sp-brand-teal);
    text-align: right;
}

/* ── Connected-source chips (dark card) ────────────────────────────────────
   Each chip is a fixed 34px square holding one service's brand mark. The
   square is what makes a four-logo row read as one set: the marks have wildly
   different aspect ratios and visual weights — Slack's lattice is airy,
   Trello's is a solid filled tile — so loose in a flex row they would show
   four different apparent sizes. The chip normalises them.

   The fill is translucent white rather than solid so the chips sit *on* the
   dark card's gradient instead of punching flat holes in it. */
.static-page--ai-powered-team-knowledge-base-for-employees .kb-source-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.09);
    color: var(--sp-ink-on-dark-accent);
}
/* 18px inside a 34px chip: the same 8px optical margin the .sp-feature-icon
   disc uses, so the two icon treatments on this page share one ratio. */
.static-page--ai-powered-team-knowledge-base-for-employees .kb-source-chip svg {
    display: block;
    width: 18px;
    height: 18px;
}
/* Trello's mark is a filled tile that reaches its own edges, where Slack and
   GitHub are open shapes with built-in breathing room. Left at 18px it reads a
   size larger than the other three, so it is trimmed to match by eye. */
.static-page--ai-powered-team-knowledge-base-for-employees .kb-source-chip[title="Trello"] svg {
    width: 16px;
    height: 16px;
}
.static-page--ai-powered-team-knowledge-base-for-employees .kb-source-chip i {
    font-size: 1.05rem;
}
/* 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-powered-team-knowledge-base-for-employees .kb-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-powered-team-knowledge-base-for-employees .kb-faq {
    max-width: 52rem;
    margin-inline: auto;
}
.static-page--ai-powered-team-knowledge-base-for-employees .kb-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-powered-team-knowledge-base-for-employees .kb-faq__item + .kb-faq__item {
    margin-top: 0.7rem;
}
.static-page--ai-powered-team-knowledge-base-for-employees .kb-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-powered-team-knowledge-base-for-employees .kb-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-powered-team-knowledge-base-for-employees .kb-faq__q::-webkit-details-marker { display: none; }
.static-page--ai-powered-team-knowledge-base-for-employees .kb-faq__q::marker { content: ""; }
.static-page--ai-powered-team-knowledge-base-for-employees .kb-faq__item[open] .kb-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-powered-team-knowledge-base-for-employees .kb-faq__q:focus-visible {
    outline: 2px solid var(--sp-brand-teal);
    outline-offset: -2px;
    border-radius: 14px;
}
/* A solid teal disc, 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 the
   open and closed states obviously the same button. */
.static-page--ai-powered-team-knowledge-base-for-employees .kb-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-powered-team-knowledge-base-for-employees .kb-faq__item[open] .kb-faq__caret {
    transform: rotate(180deg);
    background: var(--sp-brand-teal);
    color: #ffffff;
}
.static-page--ai-powered-team-knowledge-base-for-employees .kb-faq__a {
    padding: 0 1.3rem 1.2rem;
}
.static-page--ai-powered-team-knowledge-base-for-employees .kb-faq__a p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--sp-ink-soft);
}
@media (prefers-reduced-motion: reduce) {
    .static-page--ai-powered-team-knowledge-base-for-employees .kb-faq__caret {
        transition: none;
    }
}

/* ── 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-powered-team-knowledge-base-for-employees .kb-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 color shift. */
.static-page--ai-powered-team-knowledge-base-for-employees .kb-statement .sp-accent {
    font-size: inherit;
}

/* Trello mark on a hero funnel card. The funnel badge palette lives in the
   shared static-pages/anim-knowledge-base.css, which home loads too, so the
   one class this page needs and that file does not define is added here
   rather than there — page-scoped, so home is untouched. White ground for
   the same reason as --slack: the mark carries its own brand color. */
.static-page--ai-powered-team-knowledge-base-for-employees .funnel__badge--trello {
    background: #fff;
}

/* ── Diagram labels on phones ──────────────────────────────────────────────
   Below 600px the shared stage (anim-knowledge-base.css) keeps its 480px
   design width and is scaled down to fit, so its 9.5px labels shrink with it.
   At 390px the frame was capped at 280px (scale 0.58), which drew the labels
   at about 5.5px. Two page-scoped changes, both inside that scaled range:
   the frame on small phones spans the screen between its 16px gutters (358px
   at 390), and the labels are drawn at 12.25px in design space.
   Together they render at about 9px at 390 and 9.7px at 500. The label
   positions, widths and wording are the shared file's; only the size moves.
   The homepage copy of this animation is not affected. */
@media (max-width: 599px) {
    .static-page--ai-powered-team-knowledge-base-for-employees .kb-stage .kb-sec__label {
        font-size: 12.25px;
    }
}
@media (max-width: 450px) {
    .static-page--ai-powered-team-knowledge-base-for-employees .kb-scale-frame {
        --kb-frame-width: min(380px, calc(100vw - 32px));
        /* The hero column is 24px in from each edge, 16px narrower than the
           frame; equal negative margins centre the frame on the 16px gutters. */
        margin-inline: calc((100% - var(--kb-frame-width)) / 2);
    }
}