/* ==========================================================================
   Internal Knowledge Base — layout delta
   --------------------------------------------------------------------------
   Only the components the theme has no class for. Everything else on the page
   is composed from bootstrap.min.css + essentials-min.css + document360-min.css
   (.d360-card, .d360-slider-inner, .py-80, .h1_xxlarge, .text-grey, .btn-*).

   Every new class is prefixed .ikb- so it cannot collide with theme CSS.
   Load after document360-min.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand mesh gradient — the red / magenta / blue panel used by the hero
      visual, the capability table, the "delivered where work happens" header
      and the closing CTA card.
   -------------------------------------------------------------------------- */
.ikb-mesh {
    position: relative;
    background-image:url(/wp-content/themes/document360/images/solutions/new/ikb-footer.svg);
    background-color: #d926b4;
    isolation: isolate;
    background-size: cover;
}
.ikb-mesh1 {
     background-image:url(/wp-content/themes/document360/images/solutions/new/bg-ai-answers.svg);
    background-color: #d926b4;
    isolation: isolate;
background-size: cover;

}
/* Fine grain, as in the comp. Sits above the gradient, below the content. */
.ikb-mesh::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .22;
    mix-blend-mode: overlay;
    border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ikb-mesh > * {
    position: relative;
    z-index: 1;
}
.demo-email .form-control {
    color: #ffffff!important;
}
/* Hero email capture — the comp uses a dark pill, so scope the override to
   this page rather than restyling the shared .demo-email component. */
.ikb-hero-form .demo-email {
    background: #111827;
    border-radius: 999px;
    padding: 5px 5px 5px 0;
    box-shadow: 0 10px 30px rgba(17, 24, 39, .18);
}

.ikb-hero-form .form-control {
    background: transparent;
    border: 0;
    color: #fff;
    box-shadow: none;
    padding-left: 20px;
}

.ikb-hero-form .form-control::placeholder { color: rgba(255, 255, 255, .55); }

/* .demo-email.input-group .btn pins radius with !important — match its
   specificity so the pill shape and dark label both win. */
.ikb-hero-form .demo-email.input-group .btn-primary {
    background: #fff !important;
    color: #111827 !important;
    border: 0;
    border-radius: 999px !important;
    font-weight: 600;
}

.ikb-hero-form .demo-email.input-group .btn-primary:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
}

/* --------------------------------------------------------------------------
   3. Problem section — one bordered bento: a full-height left cell for the
      scattered sources, and a right column split into two stacked cells.
      The theme's .d360-card is borderless and rounded, so this is its own
      grid rather than three cards.
   -------------------------------------------------------------------------- */
.ikb-bento {
    display: grid;
    grid-template-columns: 44% 56%;
    border: 1px solid #ececf0;
    background: #fff;
}

.ikb-bento-cell { padding: 26px 30px 30px; }

.ikb-bento-left {
    border-right: 1px solid #ececf0;
    display: flex;
    flex-direction: column;justify-content: space-between;
}

.ikb-bento-right { display: flex; flex-direction: column; }

.ikb-bento-right .ikb-bento-cell + .ikb-bento-cell { border-top: 1px solid #ececf0; }
.kb-tpl .ab-eyebrow__text { color:#111827}
.kb-tpl .d360-shape_card .d360-card {
    clip-path: none;background: #ffffff;
    border-radius: revert;
    --tw-duration: .6s;
    transition-duration: .6s;
    cursor: pointer;
    position: relative;
    transition: filter 0.4s ease-in-out;
    border-radius: 18px;
}
.kb-tpl .d360-shape_card .d360-card::before {
    border-radius: 18px;
}
.kb-tpl .d360-shape_card .circles {
    width: 3.125rem;
    height: 3.125rem;
    border: none;
    cursor: pointer;
    z-index: 1;
}
.kb-tpl .circle-rel h4 {
    font-size: 25px;
    font-family: "Inter", sans-serif;
    position: absolute;
    left: 0;
    top: 25%;
    font-weight: 700;
    margin-top: 0;
    padding-bottom: 0;
}
.kb-tpl .d360-shape_card .d360-card:hover .circles {
    background-color: transparent;
}
.kb-tpl .d360-shape_card .d360-card:hover .circle-rel h4 {
    color: #ffffff;
}
.ikb-fcard-highlight {background: #fff;
    padding: 20px;
    border-radius: 18px;}

.ikb-fcard-highlight h4 {color:#9c54fd;}
.ikb-fcard-highlight p {color: #000000!important;}
/* Stacked: the bento becomes one column and the two scatter diagrams — which
   are absolutely positioned and nowrap on desktop — flow as wrapped chips.
   Left as-is they push the page wider than the viewport. */
@media (max-width: 991px) {
    .ikb-bento { grid-template-columns: 1fr; }

    .ikb-bento-left {
        border-right: 0;
        border-bottom: 1px solid #ececf0;
    }

    .ikb-bento-left p { max-width: none; }

    .ikb-sources {
        width: 100%;
        margin: 26px 0 0;
    }

    .ikb-flow,
    .ikb-stale-scatter {
        height: auto;
        margin-top: 18px;
    }

    .ikb-flow-svg,
    .ikb-skel,
    .ikb-person { display: none; }

    .ikb-chip,
    .ikb-leaves,
    .ikb-stale {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        display: inline-flex;
        white-space: normal;
        margin: 0 8px 8px 0;
    }

    .ikb-badge-warn { right: 4px; }
}

/* --------------------------------------------------------------------------
   4. Feature cards — cream copy panel bleeding into a per-card gradient,
      scroll-stacked by the theme's existing stack-cards script.

      That script (global, already on every page) looks for .d360-stacking,
      collects its .d360-card children, reads --stack-cards-gap off the
      wrapper, and writes translateY()/scale() as you scroll. It needs two
      things from CSS, both set below:
        * a --stack-cards-gap on the wrapper (it measures the value, and
          treats a missing one as 0 — no offset between stacked cards)
        * a resolvable `top` on the cards, i.e. position:sticky
      Cards must also be equal height: the script reads card 1's height and
      applies it to all of them, so .ikb-fcard-visual is a fixed height.
   -------------------------------------------------------------------------- */
.ikb-fcards {
    --stack-cards-gap: 60px;
}

.ikb-fcards .ikb-fcard {
    position: sticky;
    top: 96px;
    will-change: transform;
background: rgb(246 246 246);
    box-shadow: 0px 0px 12px 0px #00000014;
}
.ikb-fcard-visual img { border-radius: 24px; }
/* narrower desktops: tighten the copy padding so longer blocks keep clearing
   the fixed card height instead of stretching one card out of step */
@media (min-width: 992px) and (max-width: 1299px) {
    .ikb-fcard-copy { padding: 36px 30px; }
}

.ikb-fcard {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: #f6f4ef;
   
}

.ikb-fcard-copy {
    padding: 46px 40px;
}

.ikb-fcard-copy h3 {
    font-size: 22px;
    line-height: 1.35em;
    padding-bottom: 22px;
}

.ikb-fcard-copy h4 {
    font-size: 15px;
    font-weight: 600;
    padding-bottom: 6px;
}

.ikb-fcard-copy p {
    font-size: 15px;
    line-height: 1.6em;
    color: #4b5563;
    padding-bottom: 20px;
}

.ikb-fcard-copy p:last-child {
    padding-bottom: 0;
}

/* tag pill above each card headline */
.ikb-tag {
    display: inline-block;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 20px;
}

.ikb-tag-1 { background: linear-gradient(90deg, #ff9481, #e84680); }
.ikb-tag-2 { background: linear-gradient(
90deg, #d797fd, #a231ed) }
.ikb-tag-3 { background: linear-gradient(90deg, #15db8e, #07a0ea) }
.ikb-tag-4 { background:linear-gradient(90deg, #3a42a7, #ec9ddd); }
.ikb-tag-5 { background: linear-gradient(90deg, #4ac9ff, #3566ff); }

/* --------------------------------------------------------------------------
   5. Capability table — three columns, gradient middle
   -------------------------------------------------------------------------- */
.ikb-cap {
    position: relative;
    display: flex;
    align-items: stretch;
}

.ikb-cap-col {
    flex: 1 1 0;
    min-width: 0;
}

.ikb-cap-col-mid {
       flex: 1.35 1 0;
    border-radius: 22px 22px 0 0;
    margin-top: -40px;
    padding: 40px 34px 30px;
}

.ikb-cap-col-side {
    padding: 10px 24px;
}

/* fixed row height keeps the three columns aligned without a real table */
.ikb-cap-cell {
    min-height: 70px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #4c4c4f;
    line-height: 1.5em;
    font-weight: 600;
}

/* The comp rules only the top and bottom of the table — no row separators —
   and those two rules are a gradient that fades out at both ends. Drawn on
   .ikb-cap so each rule spans the whole table; the gradient column is a later
   positioned sibling, so it paints over the middle of them. */
.ikb-cap::before,
.ikb-cap::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right,
        rgba(215, 215, 222, 0) 0%,
        #d7d7de 12%,
        #d7d7de 88%,
        rgba(215, 215, 222, 0) 100%);
}

.ikb-cap::before { top: 0; }
.ikb-cap::after  { bottom: 0; }

.ikb-cap-col-side .ikb-cap-cell:first-child { font-weight: 700;
    font-size: 18px;  color:#333}

.ikb-cap-col-mid .ikb-cap-cell {
    color: #fff;
    gap: 10px;
    align-items: flex-start;
    padding-top: 20px;    
    font-weight: inherit;
}

.ikb-cap-col-mid .ikb-cap-head {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    min-height: 64px;
    display: flex;
    align-items: center;
}

.ikb-cap-col-mid .ikb-cap-cell i {
    font-size: 12px;
    line-height: 1.6em;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   6. "Knowledge delivered where work happens" — dark block
   -------------------------------------------------------------------------- */
.ikb-deliver {
    border-radius: 22px;
    overflow: hidden;
    background: #0f0f10;
}

.ikb-deliver-head {
    padding: 44px 44px;
}

.ikb-deliver-head h2 {
    color: #fff;
    font-size: 32px;
    line-height: 1.25em;
    padding-bottom: 0;
}

.ikb-deliver-head p {
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
    line-height: 1.6em;
}

/* stacked integration avatars next to the CTA */
.ikb-avatars {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 8px 4px 4px;
}

.ikb-avatars span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-left: -7px;
    border: 2px solid #fff;
    background: #fff;
    box-shadow: 0 0 0 1px #eceef1;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #fff;
    overflow: hidden;
}

.ikb-avatars span:first-child { margin-left: 0; }

.ikb-avatars img {
  max-height: 38px;
}

/* trailing "more" disc — a dot cluster, not a word */
.ikb-avatars .ikb-avatars-more {
    width: 22px;
    height: 22px;
    background: #f3f4f6;
    color: #9ca3af;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 0;
    padding: 0 0 5px;
    box-shadow: none;
}

/* the four columns below the gradient header */
.ikb-deliver-cols {
    display: flex;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.ikb-deliver-col {
    flex: 1 1 0;
    padding: 30px 25px 30px;
    border-right: 1px solid rgba(255, 255, 255, .12);
}

.ikb-deliver-col:last-child { border-right: 0; }

.ikb-deliver-col h4 {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding-bottom: 14px;
}

.ikb-deliver-col p {
    color: rgba(255, 255, 255, .62);
    font-size: 14px;
    line-height: 1.6em;
    padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   7. Dark treatment for the existing .d360-slider-inner scroller
      (markup and JS are the theme's — this only re-skins it)
   -------------------------------------------------------------------------- */
.ikb-dark .d360-slider-inner .slick-prev,
.ikb-dark .d360-slider-inner .slick-next {
    border-color: #d1d5db;
}

.ikb-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #374151;
    margin-bottom: 10px;
}

.ikb-stat img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.ikb-stat strong { color: #111827; }

/* --------------------------------------------------------------------------
   8. Closing CTA card + dark FAQ
   -------------------------------------------------------------------------- */
.ikb-cta-card {
    border-radius: 16px;
    padding: 56px 40px;
    text-align: center;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ikb-cta-card h2 {
    color: #fff;
    line-height: 1.25em;
    padding-bottom: 14px;
}

.ikb-cta-card h2 span { color: rgba(255, 255, 255, .62); }

.ikb-cta-card p {
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
    line-height: 1.6em;
    padding-bottom: 26px;
}

/* the theme resets outline buttons to border:0 — restore it on the CTA */
.ikb-cta-card .btn-outline-light {
    border: 1px solid rgba(255, 255, 255, .9);
    color: #fff;
}

.ikb-cta-card .btn-outline-light:hover {
    background: #fff;
    color: #111827!important;
}

.ikb-faq .accordion-item {
    background: #181818;
    border: 0;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
}

/* .accordion-header is an <h3>, so the theme's h3 line-height (1.3em of 34px)
   is inherited as a computed length and inflates the collapsed row to ~76px.
   Pin it here. */
/* the theme also gives every heading `padding: 0 0 15px`, which the <h3>
   accordion header inherits and adds to each collapsed row */
.ikb-faq .accordion-header {
    line-height: 1.4em;
    padding: 0;
    margin: 0;
}

.ikb-faq .accordion-button {
    background: transparent;
    color: #fff;
    font-size: 14px;
    line-height: 1.4em;
    padding: 12px 24px;
    box-shadow: none;
}

/* the comp has no chevron on these rows */
.ikb-faq .accordion-button::after { filter: invert(1) grayscale(100%) brightness(200%);}

.ikb-faq .accordion-button:not(.collapsed) {
    background: transparent;
    color: #fff;
    box-shadow: none;
}

.ikb-faq .accordion-button:focus {
    border-color: transparent;
    box-shadow: none;
}

.ikb-faq .accordion-body {
    color: rgba(255, 255, 255, .66);
    font-size: 14px;
    line-height: 1.6em;
    padding: 0 25px 16px;
}

/* "Questions, answered" sits well below the section h2 scale in the comp */
.ikb-faq-head {
    color: #fff;
    font-size: 30px;
    padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .ikb-fcard-copy { padding: 34px 26px; }

    /* stacked cards have nowhere to stack on a phone — stand the script down
       (gap 0 means it only ever writes translateY(0)) and let them flow */
    .ikb-fcards { --stack-cards-gap: 0px; }

    .ikb-fcards .ikb-fcard {
        position: static;
        margin-bottom: 24px;
    }

    .ikb-fcard-visual {
        min-height: 0;
        height: auto;
        padding: 26px 20px 30px;
    }

    .ikb-fcard-visual img { width: 100%; }

    /* stacked: the copy sits on flat cream and the gradient moves to the
       visual block, so headings never fall on a mid-gradient hue */
    .ikb-fcard-1,
    .ikb-fcard-2,
    .ikb-fcard-3,
    .ikb-fcard-5 { background: #f6f4ef; }

    .ikb-fcard-4 { background: #0a0a0a; }

    .ikb-fcard-1 .ikb-fcard-visual { background: linear-gradient(120deg, #f59e0b, #f43f5e, #6366f1); }
    .ikb-fcard-2 .ikb-fcard-visual { background: linear-gradient(120deg, #34d399, #22d3ee, #3b82f6); }
    .ikb-fcard-3 .ikb-fcard-visual { background: linear-gradient(120deg, #a78bfa, #8b5cf6, #6366f1); }
    .ikb-fcard-4 .ikb-fcard-visual { background: linear-gradient(120deg, #7c3aed, #d946ef, #ec4899); }
    .ikb-fcard-5 .ikb-fcard-visual { background: linear-gradient(120deg, #fb923c, #f472b6, #818cf8); }

    .ikb-cap {
        display: block;
        overflow-x: auto;
    }

    .ikb-cap-col-mid {
        margin-top: 24px;
        border-radius: 22px;
        padding: 24px;
    }

    .ikb-cap-cell,
    .ikb-cap-col-mid .ikb-cap-head { min-height: 0; }

    .ikb-cap-col-side .ikb-cap-cell { padding: 12px 0; }

    .ikb-deliver-cols { display: block; }

    .ikb-deliver-col {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        padding: 26px 26px 30px;
    }

    .ikb-deliver-head { padding: 32px 26px; }

    .ikb-deliver-head h2 { font-size: 26px; }

    .ikb-cta-card { padding: 44px 26px; }

    .ikb-cta-card h2 { font-size: 28px; }
}

@media (max-width: 767px) {
    /* the theme already restyles .demo-email for mobile (stacked, white input)
       — stand down so the two treatments don't fight */
    .ikb-hero-form .demo-email {
        background: none;
        box-shadow: none;
        padding: 0;
    }

    /* mobile input is white, so put the text back to dark */
    .ikb-hero-form .form-control {
        padding-left: 16px;
        color: #111827;
    }

    .ikb-hero-form .form-control::placeholder { color: #6b7280; }

    .ikb-hero-form .demo-email.input-group .btn-primary {
        background: #111827 !important;
        color: #fff !important;
    }

    .ikb-hero-tabs { gap: 18px; }

    .ikb-ask-chip .ikb-app:nth-child(n+4) { display: none; }
}
/* --------------------------------------------------------------------------
   10. Dark variant — add .kb-tpl--dark next to .kb-tpl on the page wrapper.
       Re-skins only the light sections (hero → capability table). The
       .ikb-dark block below them is already dark and is left as-is.
       Ground and surface values match .mcp-dark (#0a0a0a) and .ikb-faq (#181818).
   -------------------------------------------------------------------------- */
.kb-tpl--dark {
    background: #0a0a0a;
}

/* The header is transparent until .menu-shrink lands on scroll, and its dark
   nav would vanish on a black hero. Give it the scrolled background from the
   top; padding is left alone so the shrink animation still plays. */
body:has(.kb-tpl--dark) .d360-header {
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
}

/* hero: the theme's blue 80px grid, redrawn in white, plus two brand glows */
.kb-tpl--dark .d360-hero {
    background-color: #0a0a0a;
    background-image:
        radial-gradient(circle at 88% 8%, rgba(124, 58, 237, .32), transparent 42%),
        radial-gradient(circle at 6% 96%, rgba(236, 11, 140, .22), transparent 40%),
        linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: auto, auto, 80px 80px, 80px 80px;
}

.kb-tpl--dark .d360-hero h1 { color: #fff; }
.kb-tpl--dark .d360-hero .text-large { color: rgba(255, 255, 255, .72); }

.kb-tpl--dark .ab-eyebrow-announce {
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.kb-tpl--dark .ab-eyebrow__text { color: #fff; }

/* the dark email pill needs an edge to read against a black hero */
.kb-tpl--dark .ikb-hero-form .demo-email {
    background: #181818;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

/* trusted-by: same white-logo treatment the theme uses on its dark pages */
.kb-tpl--dark .d360_trusted_by h5 { color: rgba(255, 255, 255, .62); }

.kb-tpl--dark .d360_trusted_by ul li img {
    filter: brightness(0) invert(1);
    opacity: .72;
}

/* problem cards — .bg-grey carries !important in essentials-min.css */
.kb-tpl--dark .d360-shape_card h2 { color: #fff; }
.kb-tpl--dark .d360-shape_card .bg-grey { background: #141414 !important; }
.kb-tpl--dark .d360-shape_card .d360-card { background: #1f1f1f; }
.kb-tpl--dark .d360-shape_card .d360-card p { color: rgba(255, 255, 255, .72); }
.kb-tpl--dark .d360-shape_card .d360-card:hover p { color: #fff; }
.kb-tpl--dark .circle-rel h4 { color: #fff; }

/* stacking feature cards — opaque, since the cards overlap as they stack */
.kb-tpl--dark .h2_xlarge { color: #fff; }

.kb-tpl--dark .ikb-fcards .ikb-fcard {
    background: #141414;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 48px rgba(0, 0, 0, .45);
}

.kb-tpl--dark .ikb-fcard-copy h3,
.kb-tpl--dark .ikb-fcard-copy h4 { color: #fff!important; }
.kb-tpl--dark .ikb-fcard-copy p { color: rgba(255, 255, 255, .66); }

.kb-tpl--dark .ikb-fcard-highlight {
    background: #1f1f1f;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

/* #9c54fd is too dim on #1f1f1f; the base rule's p colour is !important */
.kb-tpl--dark .ikb-fcard-highlight h4 { color: #c9a6ff!important; }
.kb-tpl--dark .ikb-fcard-highlight p { color: rgba(255, 255, 255, .86) !important; }

/* capability table: side columns and the two fading rules */
.kb-tpl--dark .ikb-cap-col-side .ikb-cap-cell { color: rgba(255, 255, 255, .72); }
.kb-tpl--dark .ikb-cap-col-side .ikb-cap-cell:first-child { color: #fff; }
.kb-tpl--dark .ikb-fcards {
    --stack-cards-gap: 45px;
}
.kb-tpl--dark .ikb-cap::before,
.kb-tpl--dark .ikb-cap::after {
    background: linear-gradient(to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .16) 12%,
        rgba(255, 255, 255, .16) 88%,
        rgba(255, 255, 255, 0) 100%);
}

@media (max-width: 767px) {
    /* the theme turns the mobile email field white — leave that, drop the pill */
    .kb-tpl--dark .ikb-hero-form .demo-email {
        background: none;
        box-shadow: none;
    }
}

/* --------------------------------------------------------------------------
   11a. Capability table, 992–1199px — rows share one fixed height across the
        three columns, so a middle cell that wraps to three lines (the API page
        has several) grows past 70px and pushes every row below it out of line.
        86px holds three lines plus the cell's 20px top padding.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
    .ikb-cap-col-side .ikb-cap-cell:not(:first-child),
    .ikb-cap-col-mid .ikb-cap-cell { min-height: 86px; }
}

/* --------------------------------------------------------------------------
   11b. Capability table — one card per row below 992px
       The markup is column-major (all capabilities, then all answers, then all
       outcomes), so stacking the columns separated each answer from its row.
       The columns and their wrappers become display:contents, which lifts every
       cell into one flex row, and `order` interleaves them back into rows:
       capability → With Document360 → outcome. The three header cells stay as
       a key above the cards, each styled like the card part it names, so the
       comparison keeps its column labels. Covers up to 10 rows.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    section:has(.ikb-cap) .h2_xlarge br { display: none; }

    /* flex-wrap, not grid: the key pills can wrap on a narrow phone while
       every card cell takes a full line */
    .ikb-cap {
        display: flex;
        flex-wrap: wrap;
        column-gap: 6px;
        row-gap: 0;
        overflow: visible;
    }

    .ikb-cap::before,
    .ikb-cap-col-mid::before { display: none; }

    /* the bottom rule becomes the spacer between the key and the first card */
    .ikb-cap::after {
        position: static;
        order: 0;
        flex: 0 0 100%;
        height: 12px;
        background: none;
    }

    /* .d-flex on the side columns is !important in Bootstrap */
    .ikb-cap .ikb-cap-col,
    .ikb-cap .ikb-cap-col-side > div { display: contents !important; }

    .ikb-cap .ikb-cap-cell { flex: 0 0 100%; }

    /* card top: the capability */
    .ikb-cap .ikb-cap-col-side:first-child .ikb-cap-cell {
        background: #f6f6f6;
        border-radius: 18px 18px 0 0;
        padding: 20px 22px 14px;
        font-size: 16px;
        font-weight: 700;
        color: #111827;
    }

    /* card middle: the brand mesh band */
    .ikb-cap .ikb-cap-col-mid .ikb-cap-cell {
        background: #d926b4 url(/wp-content/themes/document360/images/solutions/new/ikb-footer.svg) center / cover;
        padding: 16px 22px;
        font-size: 14px;
    }

    /* card bottom: the outcome, marked with an arrow */
    .ikb-cap .ikb-cap-col-side:last-child .ikb-cap-cell {
        background: #f6f6f6;
        border-radius: 0 0 18px 18px;
        padding: 14px 22px 20px;
        margin-bottom: 16px;
        gap: 10px;
        font-size: 14px;
        color: #111827;
    }

    .ikb-cap .ikb-cap-col-side:last-child .ikb-cap-cell::before {
        content: "\F138";
        font-family: "bootstrap-icons";
        font-weight: 400;
        color: #d926b4;
        flex: 0 0 auto;
    }

    /* the key: Capability · With Document360 · → Business outcome.
       After the card rules, which have the same specificity. */
    .ikb-cap .ikb-cap-col-side .ikb-cap-cell:first-child,
    .ikb-cap .ikb-cap-col-mid .ikb-cap-head {
        flex: 0 0 auto;
        order: 0;
        min-height: 0;
        margin-bottom: 6px;
        padding: 5px 11px;
        gap: 5px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4em;
        white-space: nowrap;
    }

    .ikb-cap .ikb-cap-col-mid .ikb-cap-head {
        background: #d926b4 url(/wp-content/themes/document360/images/solutions/new/ikb-footer.svg) center / cover;
        color: #fff;
    }

    .ikb-cap-col-side:first-child .ikb-cap-cell:nth-child(2)  { order: 1; }
    .ikb-cap-col-mid .ikb-cap-cell:nth-child(2)               { order: 2; }
    .ikb-cap-col-side:last-child .ikb-cap-cell:nth-child(2)   { order: 3; }
    .ikb-cap-col-side:first-child .ikb-cap-cell:nth-child(3)  { order: 4; }
    .ikb-cap-col-mid .ikb-cap-cell:nth-child(3)               { order: 5; }
    .ikb-cap-col-side:last-child .ikb-cap-cell:nth-child(3)   { order: 6; }
    .ikb-cap-col-side:first-child .ikb-cap-cell:nth-child(4)  { order: 7; }
    .ikb-cap-col-mid .ikb-cap-cell:nth-child(4)               { order: 8; }
    .ikb-cap-col-side:last-child .ikb-cap-cell:nth-child(4)   { order: 9; }
    .ikb-cap-col-side:first-child .ikb-cap-cell:nth-child(5)  { order: 10; }
    .ikb-cap-col-mid .ikb-cap-cell:nth-child(5)               { order: 11; }
    .ikb-cap-col-side:last-child .ikb-cap-cell:nth-child(5)   { order: 12; }
    .ikb-cap-col-side:first-child .ikb-cap-cell:nth-child(6)  { order: 13; }
    .ikb-cap-col-mid .ikb-cap-cell:nth-child(6)               { order: 14; }
    .ikb-cap-col-side:last-child .ikb-cap-cell:nth-child(6)   { order: 15; }
    .ikb-cap-col-side:first-child .ikb-cap-cell:nth-child(7)  { order: 16; }
    .ikb-cap-col-mid .ikb-cap-cell:nth-child(7)               { order: 17; }
    .ikb-cap-col-side:last-child .ikb-cap-cell:nth-child(7)   { order: 18; }
    .ikb-cap-col-side:first-child .ikb-cap-cell:nth-child(8)  { order: 19; }
    .ikb-cap-col-mid .ikb-cap-cell:nth-child(8)               { order: 20; }
    .ikb-cap-col-side:last-child .ikb-cap-cell:nth-child(8)   { order: 21; }
    .ikb-cap-col-side:first-child .ikb-cap-cell:nth-child(9)  { order: 22; }
    .ikb-cap-col-mid .ikb-cap-cell:nth-child(9)               { order: 23; }
    .ikb-cap-col-side:last-child .ikb-cap-cell:nth-child(9)   { order: 24; }
    .ikb-cap-col-side:first-child .ikb-cap-cell:nth-child(10) { order: 25; }
    .ikb-cap-col-mid .ikb-cap-cell:nth-child(10)              { order: 26; }
    .ikb-cap-col-side:last-child .ikb-cap-cell:nth-child(10)  { order: 27; }
    .ikb-cap-col-side:first-child .ikb-cap-cell:nth-child(11) { order: 28; }
    .ikb-cap-col-mid .ikb-cap-cell:nth-child(11)              { order: 29; }
    .ikb-cap-col-side:last-child .ikb-cap-cell:nth-child(11)  { order: 30; }

    /* dark variant */
    .kb-tpl--dark .ikb-cap .ikb-cap-col-side:first-child .ikb-cap-cell,
    .kb-tpl--dark .ikb-cap .ikb-cap-col-side:last-child .ikb-cap-cell { background: #141414; }

    .kb-tpl--dark .ikb-cap .ikb-cap-col-side:first-child .ikb-cap-cell { color: #fff; }
    .kb-tpl--dark .ikb-cap .ikb-cap-col-side:last-child .ikb-cap-cell { color: rgba(255, 255, 255, .86); }
    .kb-tpl--dark .ikb-cap .ikb-cap-col-side:last-child .ikb-cap-cell::before { color: #ff7ac3; }
}
.faq {display:none}