/* =========================================================
   FinTruction — Shared service-page design system
   Reuses the QuickBooks-integration design system (integrations.css,
   scoped to .qb-int-page). Adds page components used across the
   service pages (controller / cfo / tax / systems): hero chips,
   two-column blocks, service-card grid, timeline, systems strip,
   audience cards and pricing panel.
   Scope: .qb-int-page.svc-page (the redesigned service pages opt in
   by adding `svc-page` to the .qb-int-page wrapper and `svc-redesign`
   to the body). Bookkeeping continues to use its own bookkeeping.css
   on .bk-page so it stays insulated from changes here.
   ========================================================= */

/* Insurance: a decorative badge or shadow must never create a
   page-wide horizontal scrollbar. clip leaves fixed CTAs unaffected. */
.qb-int-page.svc-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.svc-redesign .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.svc-page,
.qb-int-page.svc-page input,
.qb-int-page.svc-page button,
.qb-int-page.svc-page select,
.qb-int-page.svc-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.svc-page p,
.qb-int-page.svc-page li,
.qb-int-page.svc-page summary,
.qb-int-page.svc-page label,
.qb-int-page.svc-page .qbi-section-lead,
.qb-int-page.svc-page .qbi-builtfor-body,
.qb-int-page.svc-page .qbi-faq-a,
.qb-int-page.svc-page .bk-twocol-text p,
.qb-int-page.svc-page .bk-lead,
.qb-int-page.svc-page .bk-note,
.qb-int-page.svc-page .bk-pricing p,
.qb-int-page.svc-page .bk-tl-card li,
.qb-int-page.svc-page .bk-service-card li,
.qb-int-page.svc-page .bk-aud-card li,
.qb-int-page.svc-page .bk-feature-changes li,
.qb-int-page.svc-page .qbi-fix-text,
.qb-int-page.svc-page .qbi-why-card-body,
.qb-int-page.svc-page .qbi-testi-card p {
    font-weight: 600;
}

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

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

/* Eyebrows — keep the tracked-out feel but on Manrope */
.qb-int-page.svc-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.svc-page h3,
.qb-int-page.svc-page h4,
.qb-int-page.svc-page h5,
.qb-int-page.svc-page h6,
.qb-int-page.svc-page .qbi-why-card-title,
.qb-int-page.svc-page .qbi-testi-name,
.qb-int-page.svc-page .bk-tl-card h3,
.qb-int-page.svc-page .bk-service-card h3,
.qb-int-page.svc-page .bk-aud-head h3,
.qb-int-page.svc-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.svc-page h1,
.qb-int-page.svc-page h2,
.qb-int-page.svc-page .qbi-h2,
.qb-int-page.svc-page .qbi-h2-center,
.qb-int-page.svc-page .qbi-final-cta h2,
.qb-int-page.svc-page .qbi-builtfor .qbi-h2,
.qb-int-page.svc-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.svc-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.svc-page .qbi-hero-cta,
.qb-int-page.svc-page .qbi-sticky-cta__btn {
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: 0.2px;
}

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

.qb-int-page.svc-page .qbi-why-card-num,
.qb-int-page.svc-page .bk-tl-num,
.qb-int-page.svc-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.svc-page .qbi-faq-q {
    font-weight: 700;
}

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

.qb-int-page.svc-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.svc-page .qbi-hero-content {
    max-width: 760px;
    min-width: 0;
}

/* Kicker subtitle — short positioning line that uses the vertical
   space reclaimed when the H1 fits on a single line. Sits between
   H1 and the longer description, on the bright accent color. */
.qb-int-page.svc-page .bk-hero-kicker {
    color: #9affff;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 700;
    font-size: 16.5px;
    line-height: 1.45;
    letter-spacing: 0.1px;
    margin: 0 0 16px;
    max-width: 640px;
}

@media (max-width: 767px) {
    .qb-int-page.svc-page .bk-hero-kicker {
        font-size: 14.5px;
        margin-bottom: 14px;
    }
}

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

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

.qb-int-page.svc-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.svc-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.svc-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;
}

/* "We do this so:" outcomes strip on the Systems & Integration page.
   A compact 5-up checkmark row that sits below the two-column "What
   This Service Does" block. Wraps to 2-up on tablet, 1-up on phone. */
.qb-int-page .svc-do-heading {
    text-align: center;
    font-family: Manrope, system-ui, sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--qbi-dark);
    margin: 44px 0 18px;
    letter-spacing: -0.005em;
}

.qb-int-page .qbi-fix-grid.svc-do-grid {
    grid-template-columns: repeat(5, 1fr);
    max-width: 1180px;
    gap: 12px;
}

.qb-int-page .qbi-fix-grid.svc-do-grid .qbi-fix-card {
    padding: 14px 14px;
}

.qb-int-page .qbi-fix-grid.svc-do-grid .qbi-fix-text {
    font-size: 14px;
    line-height: 1.45;
}

@media (max-width: 1023px) {
    .qb-int-page .qbi-fix-grid.svc-do-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .qb-int-page .qbi-fix-grid.svc-do-grid { grid-template-columns: 1fr; }
}

/* 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.
   Same fix applied to the .qbi-fix-grid (checkmark grid) and to
   .qbi-why-grid (the reason cards) when their last row has one
   orphan. The 2-col why-grid uses :nth-child(2n+1). */
.qb-int-page .bk-service-grid > :last-child:nth-child(3n + 1),
.qb-int-page .qbi-fix-grid > :last-child:nth-child(3n + 1) {
    grid-column: 2;
}
.qb-int-page .qbi-why-grid > :last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
    max-width: 540px;
    margin: 0 auto;
}

.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;
}

/* Decorative — bright teal glow top-right + soft teal glow bottom-left.
   Layered radials give the panel depth instead of reading as a flat
   dark slab. */
.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;
}

/* Faint outlined ring decoration in the top-right corner */
.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;
}

/* Accent line below the title — small teal gradient bar */
.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: copy on top, illustration below at full clarity,
       then CTA. The illustration is just smaller — same look as
       desktop, just sized for the narrower viewport. */
    .qb-int-page.svc-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.svc-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.svc-page .qbi-hero h1 { font-size: 29px; line-height: 1.2; }
    .qb-int-page.svc-page .bk-h1-br { display: none; }
    .qb-int-page.svc-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.svc-page .qbi-hero-cta-wrap { margin-top: 24px; }
    .qb-int-page.svc-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.svc-page .qbi-cta-free-flag {
        right: 0;
        top: -13px;
    }
}