/* =========================================================
   FinTruction — Bookkeeping service page
   Reuses the QuickBooks-integration design system (integrations.css,
   scoped to .qb-int-page). This file adds the page-specific
   components: hero chips, two-column blocks, the 10-card service
   grid, the monthly-close timeline, the systems strip, the
   audience cards and the pricing panel.
   Scope: .qb-int-page.bk-page
   ========================================================= */

/* Insurance: a decorative badge or shadow must never create a
   page-wide horizontal scrollbar. clip leaves fixed CTAs unaffected. */
.qb-int-page.bk-page {
    overflow-x: clip;
}

/* contact.css ships `.lp-nav { background: unset !important }` which
   blanks the nav background for the contact form. Service pages load
   contact.css too, so it leaks here and the body's light gradient
   shows through the transparent nav. !important reclaims the bg so
   the nav reads as a solid white bar over the dark hero. */
body.bookkeeping-page .lp-nav {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

/* ============================================
   TYPOGRAPHY — round, readable, conversion-friendly
   Manrope as the single family for body + headings.
   The site default body stack starts with Helvetica Neue (absent on
   Windows -> falls back to Arial, the "Calibri-like" feel). We pin
   Manrope here for the redesigned page only.
   ============================================ */
.qb-int-page.bk-page,
.qb-int-page.bk-page input,
.qb-int-page.bk-page button,
.qb-int-page.bk-page select,
.qb-int-page.bk-page textarea {
    font-family: Manrope, 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Body text — clear, comfortable, with a touch of weight so it
   doesn't read as a thin sans on light backgrounds */
.qb-int-page.bk-page p,
.qb-int-page.bk-page li,
.qb-int-page.bk-page summary,
.qb-int-page.bk-page label,
.qb-int-page.bk-page .qbi-section-lead,
.qb-int-page.bk-page .qbi-builtfor-body,
.qb-int-page.bk-page .qbi-faq-a,
.qb-int-page.bk-page .bk-twocol-text p,
.qb-int-page.bk-page .bk-lead,
.qb-int-page.bk-page .bk-note,
.qb-int-page.bk-page .bk-pricing p,
.qb-int-page.bk-page .bk-tl-card li,
.qb-int-page.bk-page .bk-service-card li,
.qb-int-page.bk-page .bk-aud-card li,
.qb-int-page.bk-page .bk-feature-changes li,
.qb-int-page.bk-page .qbi-fix-text,
.qb-int-page.bk-page .qbi-why-card-body,
.qb-int-page.bk-page .qbi-testi-card p {
    font-weight: 600;
}

/* Stronger emphasis where the integration default felt light */
.qb-int-page.bk-page strong,
.qb-int-page.bk-page b {
    font-weight: 700;
}

/* Microcopy + small labels: keep readable */
.qb-int-page.bk-page .qbi-hero-pill,
.qb-int-page.bk-page .bk-chip,
.qb-int-page.bk-page .proof-copy {
    font-weight: 600;
}

/* Eyebrows — keep the tracked-out feel but on Manrope */
.qb-int-page.bk-page .qbi-eyebrow {
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 1.6px;
}

/* Card-level + small headings — Manrope ExtraBold, with a touch of
   negative tracking at display sizes to keep them looking
   intentional, not just big */
.qb-int-page.bk-page h3,
.qb-int-page.bk-page h4,
.qb-int-page.bk-page h5,
.qb-int-page.bk-page h6,
.qb-int-page.bk-page .qbi-why-card-title,
.qb-int-page.bk-page .qbi-testi-name,
.qb-int-page.bk-page .bk-tl-card h3,
.qb-int-page.bk-page .bk-service-card h3,
.qb-int-page.bk-page .bk-aud-head h3,
.qb-int-page.bk-page .bk-pricing h3 {
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.015em;
}

/* Major section headings — Lexend Black for genuine display weight.
   Manrope maxes at 800; Lexend goes to 900 and shares the same round,
   soft-edged feel, so the family change reads as "thicker", not
   "different". */
.qb-int-page.bk-page h1,
.qb-int-page.bk-page h2,
.qb-int-page.bk-page .qbi-h2,
.qb-int-page.bk-page .qbi-h2-center,
.qb-int-page.bk-page .qbi-final-cta h2,
.qb-int-page.bk-page .qbi-builtfor .qbi-h2,
.qb-int-page.bk-page .bk-systems h2 {
    font-family: Lexend, Manrope, system-ui, sans-serif;
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.qb-int-page.bk-page .qbi-hero h1 {
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

/* Buttons + decorative numerics — kept Manrope (was Outfit) so
   weights and shapes match the rest of the page. ExtraBold (800) on
   CTAs so the call-to-action visually outweighs body copy. */
.qb-int-page.bk-page .qbi-hero-cta,
.qb-int-page.bk-page .qbi-sticky-cta__btn {
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.qb-int-page.bk-page .qbi-cta-free-flag {
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.qb-int-page.bk-page .qbi-why-card-num,
.qb-int-page.bk-page .bk-tl-num,
.qb-int-page.bk-page .qbi-process-num {
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 800;
}

/* FAQ summary — was inheriting the thin body weight */
.qb-int-page.bk-page .qbi-faq-q {
    font-weight: 700;
}

/* ============================================
   HERO — left copy + right illustration, centered CTA below
   (matches the integration-page pattern)
   ============================================ */
.qb-int-page.bk-page .qbi-hero {
    min-height: auto;
}

.qb-int-page.bk-page .qbi-hero-inner {
    min-height: auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 42px 24px 48px;
}

/* Two-column row — content wide, illustration narrower and pushed
   right so it reads as an ambient backdrop instead of a competing
   visual. */
.qb-int-page .bk-hero-row {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.9fr);
    gap: 24px;
    align-items: center;
    width: 100%;
}

.qb-int-page.bk-page .qbi-hero-content {
    max-width: 760px;
    min-width: 0;
}

.qb-int-page.bk-page .qbi-hero-pill {
    margin-bottom: 16px;
}

.qb-int-page.bk-page .qbi-hero h1 {
    font-size: 40px;
    line-height: 1.12;
    margin-bottom: 22px;
}

.qb-int-page.bk-page .qbi-hero-desc {
    font-size: 15.5px;
    line-height: 1.6;
    margin: 0 0 28px;
    max-width: 620px;
}

/* Centered CTA below the row */
.qb-int-page.bk-page .qbi-hero-cta-wrap {
    margin-top: 26px;
    align-self: center;
    display: flex;
    justify-content: center;
}

/* Hero illustration — pushed right to give the copy more room while
   keeping the cards solid and legible. */
.qb-int-page .bk-hero-visual {
    position: relative;
    min-width: 0;
    transform: translateX(40px) scale(1.02);
    pointer-events: none;
}

.qb-int-page .bk-hero-visual svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ----- Hero trust chips — compact, single line ----- */
.qb-int-page .bk-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 18px;
}

.qb-int-page .bk-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 6px 12px 6px 9px;
    color: #eafdfd;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1px;
    white-space: nowrap;
}

.qb-int-page .bk-chip svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--qbi-bright-teal);
}


/* ----- Hero trust bar ----- */
.qb-int-page.bk-page .qbi-hero-trust {
    margin: 0;
}

/* ============================================
   Two-column section (intro "What We Do")
   ============================================ */
.qb-int-page .bk-twocol {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.qb-int-page .bk-twocol-text p {
    color: var(--qbi-text-grey);
    font-size: 16px;
    line-height: 1.75;
    margin: 0 0 16px;
}

.qb-int-page .bk-twocol-text p:last-child { margin-bottom: 0; }

.qb-int-page .bk-twocol-text strong { color: var(--qbi-dark); }

.qb-int-page .bk-twocol-text .qbi-eyebrow { margin-bottom: 10px; }

/* Illustration frame on the right of the two-column block */
.qb-int-page .bk-illus-card {
    position: relative;
    border-radius: 20px;
    background: linear-gradient(150deg, var(--qbi-darker) 0%, var(--qbi-deep-teal) 100%);
    padding: 26px;
    box-shadow: 0 24px 50px rgba(0, 41, 58, 0.22);
    overflow: hidden;
}

.qb-int-page .bk-illus-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(420px 240px at 80% 10%, rgba(14, 175, 160, 0.32), transparent 65%);
    pointer-events: none;
}

.qb-int-page .bk-illus-card svg {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   Section intro helper (left aligned variant)
   ============================================ */
.qb-int-page .bk-center { text-align: center; }

.qb-int-page .bk-lead {
    color: var(--qbi-text-grey);
    font-size: 16.5px;
    line-height: 1.7;
    max-width: 760px;
    margin: 0 auto 36px;
    text-align: center;
}

.qb-int-page .bk-note {
    max-width: 820px;
    margin: 32px auto 0;
    padding: 18px 22px;
    background: color-mix(in srgb, var(--qbi-teal) 7%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--qbi-teal) 22%, transparent);
    border-radius: 12px;
    color: var(--qbi-dark);
    font-size: 15px;
    line-height: 1.65;
    text-align: center;
}

.qb-int-page .bk-note strong { color: var(--qbi-teal); }

/* ============================================
   10-card service grid
   ============================================ */
.qb-int-page .bk-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1140px;
    margin: 0 auto;
}

/* If the last card is alone on its row (e.g. 10 cards in a 3-col
   grid), drop it into the middle column so it reads as centered. */
.qb-int-page .bk-service-grid > :last-child:nth-child(3n + 1) {
    grid-column: 2;
}

.qb-int-page .bk-service-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e6eef0;
    border-radius: 16px;
    padding: 26px 24px;
    box-shadow: 0 4px 14px rgba(0, 41, 58, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
}

.qb-int-page .bk-service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--qbi-bright-teal), var(--qbi-teal));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.qb-int-page .bk-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(0, 41, 58, 0.12);
    border-color: color-mix(in srgb, var(--qbi-teal) 35%, #e6eef0);
}

.qb-int-page .bk-service-card:hover::before { transform: scaleX(1); }

.qb-int-page .bk-service-icon {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--qbi-bright-teal) 18%, #ffffff), color-mix(in srgb, var(--qbi-teal) 14%, #ffffff));
    color: var(--qbi-teal);
    border: 1px solid color-mix(in srgb, var(--qbi-teal) 20%, transparent);
}

.qb-int-page .bk-service-icon svg { width: 26px; height: 26px; }

.qb-int-page .bk-service-card h3 {
    color: var(--qbi-dark);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.2px;
    margin: 0 0 14px;
}

.qb-int-page .bk-service-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.qb-int-page .bk-service-card li {
    position: relative;
    padding-left: 24px;
    color: var(--qbi-text-grey);
    font-size: 14.5px;
    line-height: 1.5;
}

.qb-int-page .bk-service-card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E") center / 11px no-repeat,
        var(--qbi-teal);
}

/* ============================================
   Monthly-close vertical timeline
   ============================================ */
.qb-int-page .bk-timeline {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    padding-left: 8px;
}

.qb-int-page .bk-timeline::before {
    content: '';
    position: absolute;
    left: 25px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: linear-gradient(180deg, var(--qbi-bright-teal), color-mix(in srgb, var(--qbi-teal) 30%, transparent));
}

.qb-int-page .bk-tl-step {
    position: relative;
    padding: 0 0 26px 76px;
}

.qb-int-page .bk-tl-step:last-child { padding-bottom: 0; }

.qb-int-page .bk-tl-num {
    position: absolute;
    left: 0;
    top: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Outfit, sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, var(--qbi-bright-teal), var(--qbi-teal));
    box-shadow: 0 6px 16px rgba(0, 146, 130, 0.35);
    z-index: 1;
}

.qb-int-page .bk-tl-card {
    background: #ffffff;
    border: 1px solid #e6eef0;
    border-radius: 14px;
    padding: 20px 24px;
    box-shadow: 0 4px 14px rgba(0, 41, 58, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.qb-int-page .bk-tl-card:hover {
    transform: translateX(3px);
    box-shadow: 0 10px 26px rgba(0, 41, 58, 0.1);
}

.qb-int-page .bk-tl-card h3 {
    color: var(--qbi-dark);
    font-size: 17.5px;
    font-weight: 800;
    margin: 0 0 12px;
}

.qb-int-page .bk-tl-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qb-int-page .bk-tl-card li {
    position: relative;
    padding-left: 22px;
    color: var(--qbi-text-grey);
    font-size: 14.5px;
    line-height: 1.55;
}

.qb-int-page .bk-tl-card li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--qbi-bright-teal);
}

/* ============================================
   Systems we support — logo strip
   ============================================ */
.qb-int-page .bk-systems {
    background: linear-gradient(135deg, var(--qbi-darker) 0%, var(--qbi-deep-teal) 100%);
    padding: 72px 0;
    position: relative;
    overflow: hidden;
}

.qb-int-page .bk-systems::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(700px 360px at 50% -10%, rgba(14, 175, 160, 0.2), transparent 65%);
    pointer-events: none;
}

.qb-int-page .bk-systems .qbi-container { position: relative; z-index: 1; }

.qb-int-page .bk-systems .qbi-eyebrow { color: var(--qbi-bright-teal); }

.qb-int-page .bk-systems h2 {
    color: #ffffff;
    font-size: 32px;
    font-weight: 800;
    text-align: center;
    margin: 0 0 8px;
}

.qb-int-page .bk-systems-sub {
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    font-size: 15px;
    margin: 0 0 34px;
}

.qb-int-page .bk-systems .item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 84px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.qb-int-page .bk-systems .item img {
    max-width: 100%;
    max-height: 46px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ============================================
   Audience cards (who this is / is not for)
   ============================================ */
.qb-int-page .bk-audience {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 1000px;
    margin: 0 auto;
}

.qb-int-page .bk-aud-card {
    background: #ffffff;
    border: 1px solid #e6eef0;
    border-radius: 16px;
    padding: 30px 28px;
    box-shadow: 0 6px 18px rgba(0, 41, 58, 0.06);
}

.qb-int-page .bk-aud-card--yes { border-top: 4px solid #16a34a; }
.qb-int-page .bk-aud-card--no  { border-top: 4px solid #dc2626; }

.qb-int-page .bk-aud-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
}

.qb-int-page .bk-aud-badge {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.qb-int-page .bk-aud-card--yes .bk-aud-badge { background: #dcfce7; color: #16a34a; }
.qb-int-page .bk-aud-card--no  .bk-aud-badge { background: #fee2e2; color: #dc2626; }

.qb-int-page .bk-aud-badge svg { width: 22px; height: 22px; }

.qb-int-page .bk-aud-head h3 {
    margin: 0;
    color: var(--qbi-dark);
    font-size: 19px;
    font-weight: 800;
}

.qb-int-page .bk-aud-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qb-int-page .bk-aud-card li {
    position: relative;
    padding-left: 28px;
    color: var(--qbi-text-grey);
    font-size: 15px;
    line-height: 1.55;
}

.qb-int-page .bk-aud-card li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 800;
}

.qb-int-page .bk-aud-card--yes li::before { content: '✓'; color: #16a34a; }
.qb-int-page .bk-aud-card--no  li::before { content: '✕'; color: #dc2626; }

/* ============================================
   Pricing panel
   ============================================ */
.qb-int-page .bk-pricing {
    position: relative;
    max-width: 1000px;
    margin: 30px auto 0;
    background: linear-gradient(135deg, var(--qbi-darker) 0%, var(--qbi-deep-teal) 100%);
    border-radius: 22px;
    padding: 52px 44px;
    color: #ffffff;
    overflow: hidden;
    text-align: center;
}

/* Layered radial glows + a faint outlined ring in the top-right
   corner so the panel reads as a designed surface rather than a flat
   dark block. */
.qb-int-page .bk-pricing::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(620px 320px at 100% 0%, rgba(14, 175, 160, 0.34), transparent 60%),
        radial-gradient(420px 380px at -8% 110%, rgba(0, 146, 130, 0.24), transparent 65%);
    pointer-events: none;
}

.qb-int-page .bk-pricing::after {
    content: '';
    position: absolute;
    top: -90px;
    right: -90px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 1.5px solid rgba(154, 255, 255, 0.14);
    box-shadow:
        0 0 0 30px rgba(154, 255, 255, 0.04),
        inset 0 0 0 30px rgba(154, 255, 255, 0.05);
    pointer-events: none;
}

.qb-int-page .bk-pricing-inner {
    position: relative;
    z-index: 1;
    max-width: 740px;
    margin: 0 auto;
}

.qb-int-page .bk-pricing h3 {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.qb-int-page .bk-pricing h3::after {
    content: '';
    width: 64px;
    height: 3px;
    background: linear-gradient(90deg, var(--qbi-bright-teal), var(--qbi-teal));
    border-radius: 2px;
}

.qb-int-page .bk-pricing h3 svg { width: 34px; height: 34px; color: var(--qbi-bright-teal); }

.qb-int-page .bk-pricing p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 15.5px;
    line-height: 1.7;
    margin: 0 0 14px;
}

.qb-int-page .bk-pricing p:last-child { margin-bottom: 0; }

.qb-int-page .bk-pricing strong { color: #ffffff; }

/* ============================================
   Mid-page & section CTA blocks
   ============================================ */
.qb-int-page .bk-cta-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    margin-top: 44px;
}

.qb-int-page .bk-cta-row .social-proof {
    background: #ffffff;
    border: 1px solid #e6eef0;
    box-shadow: 0 6px 18px rgba(0, 41, 58, 0.07);
    border-radius: 14px;
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.qb-int-page .bk-cta-row .avatars--brands { display: inline-flex; align-items: center; }

.qb-int-page .bk-cta-row .brand-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #e6eef0;
    box-shadow: 0 2px 6px rgba(0, 41, 58, 0.12);
    padding: 4px;
    box-sizing: border-box;
    transition: transform 0.2s ease;
}

.qb-int-page .bk-cta-row .brand-cell:not(:first-child) { margin-left: -10px; }
.qb-int-page .bk-cta-row .brand-cell:hover { transform: translateY(-2px) scale(1.06); z-index: 6; }
.qb-int-page .bk-cta-row .brand-cell[data-tip*="B&"] { padding: 0; }

.qb-int-page .bk-cta-row .brand-cell img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    display: block;
}

.qb-int-page .bk-cta-row .brand-cell::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 9px);
    transform: translateX(-50%) translateY(4px);
    background: #00293a;
    color: #ffffff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 100;
}

.qb-int-page .bk-cta-row .brand-cell:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.qb-int-page .bk-cta-row .sp-divider { width: 1px; height: 26px; background: #e0e8ea; }
.qb-int-page .bk-cta-row .stars { display: inline-flex; gap: 2px; }
.qb-int-page .bk-cta-row .star { width: 16px; height: 16px; }

.qb-int-page .bk-cta-row .proof-copy {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--qbi-dark);
}

/* Featured testimonial (the one with the long quote) */
.qb-int-page .bk-feature-testi {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 28px;
    align-items: stretch;
    max-width: 1000px;
    margin: 0 auto 40px;
}

.qb-int-page .bk-feature-photo {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 260px;
    background: var(--qbi-darker);
}

.qb-int-page .bk-feature-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.qb-int-page .bk-feature-photo figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 20px 16px;
    background: linear-gradient(180deg, transparent, rgba(0, 22, 32, 0.92));
    color: #ffffff;
}

.qb-int-page .bk-feature-photo figcaption strong { display: block; font-size: 16px; }
.qb-int-page .bk-feature-photo figcaption span { font-size: 13px; opacity: 0.85; }

.qb-int-page .bk-feature-quote {
    background: linear-gradient(135deg, var(--qbi-darker) 0%, var(--qbi-deep-teal) 100%);
    border-radius: 16px;
    padding: 36px 38px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.qb-int-page .bk-feature-quote::before {
    content: '\201C';
    position: absolute;
    top: -10px;
    left: 22px;
    font-family: Georgia, serif;
    font-size: 120px;
    color: rgba(14, 175, 160, 0.28);
    line-height: 1;
}

.qb-int-page .bk-feature-quote .bk-fq-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 14px;
    position: relative;
}

.qb-int-page .bk-feature-quote .bk-fq-stars img { width: 18px; height: 18px; }

.qb-int-page .bk-feature-quote p {
    position: relative;
    font-size: 17px;
    line-height: 1.7;
    margin: 0;
    color: rgba(255, 255, 255, 0.96);
}

.qb-int-page .bk-feature-changes {
    list-style: none;
    margin: 18px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.qb-int-page .bk-feature-changes li {
    position: relative;
    padding-left: 24px;
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
}

.qb-int-page .bk-feature-changes li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E") center / 11px no-repeat,
        var(--qbi-bright-teal);
}

/* 3-up testimonial grid (overrides the 4-up integration default) */
.qb-int-page .qbi-testi-grid.bk-testi-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1023px) {
    .qb-int-page .bk-service-grid { grid-template-columns: repeat(2, 1fr); }
    .qb-int-page .bk-twocol { grid-template-columns: 1fr; gap: 28px; }
    .qb-int-page .bk-feature-testi { grid-template-columns: 1fr; }
    .qb-int-page .bk-feature-photo { min-height: 320px; }
    .qb-int-page .qbi-testi-grid.bk-testi-grid-3 { grid-template-columns: 1fr 1fr; }

    /* "What We Do" illustration card on mobile: keep it in the
       normal flow below the copy, just at a smaller size so it
       doesn't dominate the section. */
    .qb-int-page .bk-illus-card {
        max-width: 380px;
        margin: 0 auto;
        padding: 18px;
    }
}

@media (max-width: 600px) {
    .qb-int-page .bk-illus-card {
        max-width: 280px;
        padding: 14px;
    }
}

@media (max-width: 1023px) {

    /* Hero stacks below 1024: copy on top, illustration centered
       below at full opacity — same look as desktop, just narrower. */
    .qb-int-page.bk-page .qbi-hero-inner {
        padding: 48px 24px 56px;
    }
    .qb-int-page .bk-hero-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }
    .qb-int-page.bk-page .qbi-hero-content {
        max-width: 640px;
        min-width: 0;
    }
    .qb-int-page .bk-hero-visual {
        width: 100%;
        max-width: 500px;
        min-width: 0;
        margin: 0 auto;
        transform: none; /* drop the desktop translateX */
    }
}

@media (max-width: 600px) {
    .qb-int-page .bk-hero-visual {
        max-width: 360px;
    }
}

@media (max-width: 767px) {
    .qb-int-page .bk-service-grid { grid-template-columns: 1fr; }
    .qb-int-page .bk-audience { grid-template-columns: 1fr; }
    .qb-int-page .qbi-testi-grid.bk-testi-grid-3 { grid-template-columns: 1fr; }
    .qb-int-page .bk-systems h2 { font-size: 25px; }
    .qb-int-page .bk-pricing { padding: 30px 24px; }
    .qb-int-page .bk-feature-changes { grid-template-columns: 1fr; }
    .qb-int-page .bk-feature-quote { padding: 28px 24px; }
    .qb-int-page .bk-tl-step { padding-left: 64px; }
    .qb-int-page .bk-timeline::before { left: 21px; }
    .qb-int-page .bk-tl-num { width: 44px; height: 44px; font-size: 18px; }

    .qb-int-page.bk-page .qbi-hero h1 { font-size: 29px; line-height: 1.2; }
    .qb-int-page.bk-page .bk-h1-br { display: none; }
    .qb-int-page.bk-page .qbi-hero-desc { font-size: 15px; }
    .qb-int-page .bk-hero-chips { gap: 8px; }
    .qb-int-page .bk-chip { font-size: 12px; padding: 7px 12px 7px 9px; }
    .qb-int-page.bk-page .qbi-hero-cta-wrap { margin-top: 24px; }
    .qb-int-page.bk-page .qbi-hero-cta {
        font-size: 16px;
        padding: 15px 28px;
    }
    /* Keep the FREE badge inside the button edge on phones so it
       never pokes past the viewport. */
    .qb-int-page.bk-page .qbi-cta-free-flag {
        right: 0;
        top: -13px;
    }
}