/* Native service detail composition. Shared design tokens/components stay authoritative. */
.kb-native-service { padding-top: 76px; }
/* Estimated off-screen section heights move native anchors and disclosures when revealed. */
.kb-native-service > .kb-section { content-visibility: visible; contain-intrinsic-size: none; }
.kb-native-service [id] { scroll-margin-top: 94px; }
body.admin-bar .kb-native-service [id] { scroll-margin-top: calc(94px + var(--wp-admin--admin-bar--height, 32px)); }
.kb-native-service :is(h1,h2,h3,p,li,a) { overflow-wrap: break-word; }
.kb-native-service .kb-service-hero__grid { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 56px; }
.kb-native-service .kb-service-actions .button-ghost { background: #fff; border-color: var(--kb-action-blue); color: var(--kb-action-blue); }
.kb-native-service .kb-service-actions .button-ghost:is(:hover,:focus-visible) { background: #edf4ff; color: var(--kb-action-blue-hover); }
.kb-native-service__visual { min-width: 0; max-width: 640px; width: 100%; margin: 0; justify-self: end; }
.kb-native-service__image { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: var(--kb-card-radius); }
.kb-native-service__result { padding-top: 24px; }
.kb-native-service .kb-native-service__result h2 { margin: 0 0 12px; font-size: var(--kb-heading-item); }
.kb-native-service .kb-native-service__result p { margin: 0; }
.kb-native-service__nav { border-block: 1px solid var(--kb-divider); background: #fff; }
.kb-native-service__nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; list-style: none; margin: 0; padding: 16px 0; }
.kb-native-service__nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--kb-divider); border-radius: var(--kb-card-radius); color: var(--navy); font-size: 14px; font-weight: 600; text-decoration: none; }
.kb-native-service__nav a:is(:hover,[aria-current]) { color: var(--kb-component-accent, var(--kb-action-blue)); border-color: currentColor; background: var(--kb-component-tint, #edf4ff); }
.kb-native-service__nav [aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.kb-native-service__nav .kb-native-service__all { background: var(--navy); border-color: var(--navy); color: #fff; }
.kb-native-service__nav .kb-native-service__all:is(:hover,:focus-visible) { background: var(--kb-action-blue); border-color: var(--kb-action-blue); color: #fff; }
.kb-native-service__all .button-icon, .kb-native-service__all svg { width: 18px; height: 18px; }
.kb-native-service__nav-number { color: var(--kb-component-accent); font-size: 12px; }
.kb-native-service .component-tone--navy { --kb-component-accent: var(--navy); --kb-component-tint: #edf2f7; }
.kb-native-service .kb-service-process { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 28px; margin: 0; padding: 0; list-style: none; }
.kb-service-process > li { position: relative; min-width: 0; }
.kb-service-process__visual { position: relative; width: 100%; max-width: 190px; aspect-ratio: 220 / 170; margin: 0 auto 20px; }
.kb-service-process__visual img { display: block; width: 100%; height: auto; }
.kb-service-process__visual .component-step-number { position: absolute; top: 0; left: 0; width: 28px; height: 28px; color: var(--kb-component-accent); background: var(--kb-component-tint); font-size: 13px; }
.kb-service-process__copy { min-width: 0; color: #435165; font-size: 15px; line-height: 1.65; }
.kb-service-process__copy strong { display: block; margin-bottom: 10px; color: var(--navy); font-size: 16px; line-height: 1.45; font-weight: 600; }
.kb-service-process__connector { position: absolute; top: 65px; right: -24px; width: 20px; height: 20px; color: #91a5be; }
.kb-service-process__connector .button-icon { width: 20px; height: 20px; }
.kb-service-process__connector svg { width: 20px; height: 20px; }
@media (max-width: 1100px) {
  .kb-native-service .kb-service-process { grid-template-columns: 1fr; grid-auto-flow: row; gap: 32px; }
  .kb-service-process > li { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 32px; align-items: center; }
  .kb-service-process__visual { width: 180px; margin: 0; }
  .kb-service-process__connector { top: auto; bottom: -25px; left: 80px; right: auto; transform: rotate(90deg); }
}
.kb-native-service__terms { padding-top: 24px; }
.kb-native-service .kb-native-service__terms p { margin: 0; font-size: 14px; }
.kb-native-service__workflow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; list-style: none; margin: 0; padding: 0; }
.kb-native-service__workflow li { min-width: 0; }
.kb-native-service__step-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.kb-native-service__step-heading .component-step-number { flex: 0 0 44px; width: 44px; height: 44px; color: var(--kb-component-accent); background: var(--kb-component-tint); }
.kb-native-service .kb-native-service__step-heading h3 { margin: 0; }
.kb-native-service .kb-native-service__workflow p { margin: 0; }
.kb-native-service__comparison { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.kb-native-service__comparison-panel--illustrated { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); align-items: center; gap: 24px; }
.kb-native-service__comparison-visual { min-width: 0; width: 100%; max-width: 280px; justify-self: center; }
.kb-native-service__comparison-visual img { display: block; width: 100%; height: auto; aspect-ratio: 380 / 240; }
.kb-native-service__comparison-copy { min-width: 0; }
.kb-native-service .kb-native-service__comparison h3 { margin: 0 0 20px; }
.kb-native-service__comparison-panel.component-tone--green { border-color: #b9d9d4; background: #f7fbfa; }
.kb-native-service .kb-list li::before { background: var(--kb-component-accent, var(--kb-action-blue)); }
.kb-native-service .kb-native-service__benefit { margin: 24px 0; }
.kb-native-service__faq, .kb-native-service__method { overflow-anchor: none; }
.kb-native-service .home-faq-item { margin: 0; transform: none; opacity: 1; transition: none; }
.kb-native-service .home-faq-item summary h3 { margin: 0; font-size: 16px; line-height: 1.5; text-wrap: initial; }
.kb-native-service__answer { padding: 0 20px 20px; }
.kb-native-service .kb-native-service__answer p { margin: 0 0 16px; padding: 0; }
.kb-native-service .kb-native-service__answer p:last-child { margin-bottom: 0; }
.kb-native-service .kb-section-head { max-width: none; }
.kb-native-service__related-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.kb-native-service__related-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.kb-native-service .kb-native-service__related-card :is(h3,p) { margin: 0; }
.kb-native-service__related-card .button { margin-top: auto; }
.kb-native-service__related-note { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--kb-divider); }
.kb-native-service .kb-native-service__related-note p { margin: 0; }
.kb-native-service .button-label { white-space: normal; text-align: center; }
.kb-native-service :is(a,summary):focus-visible { outline: 2px solid var(--kb-action-blue); outline-offset: 3px; }
@media (max-width: 900px) {
  .kb-native-service .kb-service-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .kb-native-service__visual { justify-self: center; max-width: 600px; }
  .kb-native-service__workflow { grid-template-columns: 1fr; gap: 28px; }
  .kb-native-service__workflow li { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--kb-divider); }
  .kb-native-service__step-heading { margin-bottom: 0; align-items: flex-start; }
  .kb-native-service__comparison { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .kb-native-service { padding-top: 69px; }
  .kb-native-service [id] { scroll-margin-top: 89px; }
  body.admin-bar .kb-native-service [id] { scroll-margin-top: calc(89px + var(--wp-admin--admin-bar--height, 46px)); }
}
@media (max-width: 600px) { body.admin-bar .kb-native-service [id] { scroll-margin-top: 89px; } }
@media (max-width: 720px) {
  .kb-native-service__related-grid, .kb-native-service__related-note { grid-template-columns: 1fr; }
  .kb-native-service__nav ul { gap: 6px; padding-block: 12px; }
  .kb-native-service__nav a { padding: 8px; font-size: 13px; }
  .kb-native-service__workflow li { grid-template-columns: 1fr; gap: 16px; }
  .kb-native-service__comparison { grid-template-columns: 1fr; gap: 16px; }
  .kb-native-service__comparison-panel--illustrated { grid-template-columns: 1fr; gap: 16px; }
  .kb-native-service__comparison-visual { max-width: 230px; }
  .kb-service-process > li { grid-template-columns: 96px minmax(0,1fr); gap: 20px; align-items: start; }
  .kb-service-process__visual { width: 96px; }
  .kb-service-process__visual .component-step-number { width: 22px; height: 22px; font-size: 12px; }
  .kb-service-process__connector { left: 38px; }
  .kb-native-service .home-final-cta-actions { width: 100%; }
}
@media (max-width: 380px) {
  .kb-service-process > li { grid-template-columns: 80px minmax(0,1fr); gap: 16px; }
  .kb-service-process__visual { width: 80px; }
  .kb-service-process__connector { left: 30px; }
}

/* CMS-owned invoice/Stripe bodies. Do not alter the five editorial detail pages. */
.kb-service-document .kb-service-document__note { margin: 20px 0 0; color: #536273; font-size: 14px; line-height: 1.55; }
.kb-service-document .kb-service-document__back { display: inline-block; margin-bottom: 20px; font-size: 14px; }
.kb-service-document .kb-service-hero__copy > p:not([class]) { margin-bottom: 24px; }
.kb-service-document .kb-native-service__visual > img { display: block; width: 100%; height: auto; object-fit: contain; }
.kb-service-document .kb-service-document__caption { margin-top: 16px; color: #536273; font-size: 14px; line-height: 1.55; }
.kb-service-document .kb-service-document__options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; margin-bottom: 24px; }
.kb-service-document .kb-service-document__options--two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.kb-service-document .kb-service-document__option { min-width: 0; padding-top: 20px; border-top: 2px solid var(--kb-action-blue); }
.kb-service-document .kb-service-document__option:nth-child(2) { border-color: var(--kb-accent-green); }
.kb-service-document .kb-service-document__option:nth-child(3) { border-color: var(--kb-accent-violet); }
.kb-service-document .kb-service-document__option h3 { margin: 0 0 16px; font-size: var(--kb-heading-item); }
.kb-service-document .kb-service-document__option p:last-child { margin-bottom: 0; }
.kb-service-document .kb-service-process--six { grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-flow: row; grid-auto-columns: auto; gap: 40px 32px; }
.kb-service-document .kb-service-process--six > li { display: block; }
.kb-service-document .kb-service-process--six .kb-service-process__visual { width: 100%; max-width: 190px; margin: 0 auto 20px; }
.kb-service-document .kb-service-process__visual .component-step-number { min-width: 28px; min-height: 28px; }
.kb-service-document .kb-service-document__results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 40px; }
.kb-service-document .kb-service-document__results li { margin: 0; }
.kb-service-document .kb-service-document__price { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--kb-divider); }
.kb-service-document .kb-service-document__price h3 { margin: 0 0 16px; font-size: var(--kb-heading-item); }
.kb-service-document .kb-service-document__price p { margin-bottom: 0; }
.kb-service-document .kb-service-document__closing-note { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 1.65; }

/* The original branching SVG remains intact; nodes are unframed and aligned. */
.kb-service-document .kb-payment-map { --kb-payment-row: 104px; width: 100%; min-width: 0; margin: 0; justify-self: center; }
.kb-service-document .kb-payment-map > figcaption { margin: 0 0 20px; color: #435165; font-size: 14px; font-weight: 600; line-height: 1.5; }
.kb-service-document .kb-payment-flow { display: grid; grid-template-columns: minmax(0,1fr) 40px minmax(0,1.45fr); align-items: center; }
.kb-service-document .kb-payment-inputs { position: relative; height: calc(var(--kb-payment-row) * 3 + 24px); min-width: 0; }
.kb-service-document .kb-payment-customer { position: absolute; inset: 0 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; height: var(--kb-payment-row); min-width: 0; text-align: center; }
.kb-service-document .kb-payment-customer > svg { width: 24px; height: 24px; flex: 0 0 24px; fill: none; stroke: var(--kb-action-blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kb-service-document .kb-payment-customer strong { color: var(--navy); font-size: 15px; font-weight: 600; line-height: 1.4; }
.kb-service-document .kb-payment-customer > span { color: #435165; font-size: 13px; line-height: 1.5; }
.kb-service-document .kb-payment-incoming { position: absolute; top: var(--kb-payment-row); left: calc(50% - 12px); width: 24px; height: 12px; fill: none; stroke: #8195ac; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kb-service-document .kb-payment-stripe { position: absolute; inset: calc(var(--kb-payment-row) + 12px) 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; height: var(--kb-payment-row); padding: 8px; border-radius: var(--kb-card-radius); color: #fff; background: var(--kb-accent-violet); }
.kb-service-document .kb-payment-stripe-name { color: #fff; font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: 0; }
.kb-service-document .kb-payment-confirmed { display: flex; justify-content: center; align-items: center; gap: 4px; color: #fff; font-size: 12px; line-height: 1.5; text-align: center; }
.kb-service-document .kb-payment-confirmed svg { flex: 0 0 15px; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kb-service-document .kb-payment-connections { display: block; width: 100%; height: calc(var(--kb-payment-row) * 3 + 24px); fill: none; stroke: #8195ac; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.kb-service-document .kb-payment-connections circle { fill: var(--kb-accent-green); stroke: #fff; stroke-width: 2; }
.kb-service-document .kb-payment-results { display: grid; grid-template-rows: repeat(3,var(--kb-payment-row)); gap: 12px; min-width: 0; }
.kb-service-document .kb-payment-result { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 0 8px 12px; border-left: 2px solid var(--kb-action-blue); }
.kb-service-document .kb-payment-result > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kb-service-document .kb-payment-result strong { color: var(--navy); font-size: 15px; font-weight: 600; line-height: 1.4; }
.kb-service-document .kb-payment-result div > span { color: #435165; font-size: 13px; line-height: 1.5; }
.kb-service-document .kb-payment-result-icon { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; color: var(--kb-action-blue); }
.kb-service-document .kb-payment-result-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kb-service-document .kb-payment-systems { border-color: var(--kb-accent-green); }
.kb-service-document .kb-payment-systems .kb-payment-result-icon { color: var(--kb-accent-green); }
.kb-service-document .kb-payment-accounting { border-color: var(--kb-accent-violet); }
.kb-service-document .kb-payment-accounting .kb-payment-result-icon { color: var(--kb-accent-violet); }
@media (min-width: 901px) and (max-width: 1200px) {
  .kb-service-document .kb-service-hero__grid { gap: 32px; }
  .kb-service-document .kb-payment-flow { grid-template-columns: minmax(0,1fr) 28px minmax(0,1.4fr); }
  .kb-service-document .kb-payment-result { display: grid; grid-template-columns: minmax(0,1fr); gap: 4px; align-content: center; }
  .kb-service-document .kb-payment-result-icon { width: 20px; height: 20px; }
  .kb-service-document .kb-payment-result-icon svg { width: 18px; height: 18px; }
}
@media (max-width: 1100px) {
  .kb-service-document .kb-service-process--six { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .kb-service-document .kb-payment-map { max-width: 600px; }
  .kb-service-document .kb-service-document__options { grid-template-columns: 1fr; gap: 28px; }
  .kb-service-document .kb-service-process--six { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 24px; }
  .kb-service-document .kb-service-document__results { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .kb-service-document .kb-service-process--six { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .kb-service-document .kb-service-process--six > li { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 20px; align-items: start; }
  .kb-service-document .kb-service-process--six .kb-service-process__visual { width: 96px; margin: 0; }
  .kb-service-document .kb-service-process__visual .component-step-number { min-width: 22px; min-height: 22px; }
  .kb-service-document .kb-payment-map { --kb-payment-row: 136px; }
  .kb-service-document .kb-payment-flow { grid-template-columns: minmax(0,.9fr) 28px minmax(0,1.4fr); }
  .kb-service-document .kb-payment-customer { gap: 4px; }
  .kb-service-document .kb-payment-customer > svg { width: 20px; height: 20px; flex-basis: 20px; }
  .kb-service-document .kb-payment-result { display: grid; grid-template-columns: minmax(0,1fr); gap: 4px; align-content: center; padding-left: 10px; }
  .kb-service-document .kb-payment-result-icon, .kb-service-document .kb-payment-result-icon svg { width: 18px; height: 18px; }
  .kb-service-document .kb-payment-confirmed { flex-direction: column; gap: 4px; }
  .kb-service-document .kb-payment-stripe-name { font-size: 28px; }
}
@media (max-width: 380px) {
  .kb-service-document .kb-service-process--six > li { grid-template-columns: 80px minmax(0,1fr); gap: 16px; }
  .kb-service-document .kb-service-process--six .kb-service-process__visual { width: 80px; }
}
@media (forced-colors: active) {
  .kb-service-document .kb-payment-stripe { outline: 1px solid CanvasText; }
  .kb-service-document .kb-payment-connections { stroke: CanvasText; }
}