/* Shopify-specific composition; shared service components remain in service-system.css. */
.svc-shop { overflow-x: clip; }
.svc-shop figure:not(.svc-shop-media-frame) { margin: 0; }
.svc-shop [data-svc-section] { scroll-margin-top: calc(var(--asfit-header-height, 78px) + 20px); }
.svc-shop-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.svc-shop-hero { padding: 44px 0 68px; background: #081426; }
.svc-shop-breadcrumbs { margin-bottom: 36px; }
.svc-shop-breadcrumbs .breadcrumbs { margin: 0; padding: 0; background: transparent; }
.svc-shop-breadcrumbs .breadcrumbs ol { width: auto; max-width: none; margin: 0; padding: 0; }
.svc-shop-breadcrumbs :where(a, li, span) { color: #b6c8dd; font-size: 0.8125rem; }
.svc-shop-hero-grid { display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); gap: 52px; align-items: center; }
.svc-shop-hero-copy { min-width: 0; }
.svc-shop-hero-copy > p:not(.asfs-svc-eyebrow) { max-width: 660px; margin: 20px 0 0; font-size: 1.0625rem; }
.svc-shop-hero-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 28px; max-width: 690px; margin: 24px 0 0; padding: 0; list-style: none; }
.svc-shop-hero-points li { position: relative; padding-left: 21px; color: #d7e5f4; font-size: 0.875rem; font-weight: 650; }
.svc-shop-hero-points li::before { position: absolute; top: 0.18em; left: 0; content: "✓"; color: #34d399; font-weight: 800; }

.svc-shop-media-frame { width: min(100%, var(--svc-shop-media-max, 1000px)); margin: 32px auto 0; overflow: hidden; border: 1px solid var(--svc-shop-media-border, #cad8e4); border-radius: 8px; background: var(--svc-shop-media-bg, #f7fafc); box-shadow: 0 16px 34px rgba(8, 24, 45, 0.12); }
.svc-shop-media-frame img { display: block; width: 100%; height: auto; aspect-ratio: 1376 / 768; object-fit: contain; }
.svc-shop-media-frame--hero { --svc-shop-media-max: 620px; --svc-shop-media-border: #354962; --svc-shop-media-bg: #07152a; margin: 0; }
.svc-shop-media-frame--architecture { --svc-shop-media-max: 1020px; margin-top: 0; }
.svc-shop-media-frame--audience { --svc-shop-media-max: 960px; --svc-shop-media-border: #334864; --svc-shop-media-bg: #07152a; margin-top: 38px; }
.svc-shop-media-frame--challenges { --svc-shop-media-max: 960px; }
.svc-shop-media-frame--journey { --svc-shop-media-max: 980px; }
.svc-shop-media-frame--cart { --svc-shop-media-max: 960px; --svc-shop-media-border: #324760; --svc-shop-media-bg: #f7f8f5; }
.svc-shop-media-frame--mobile { --svc-shop-media-max: 660px; --svc-shop-media-border: #324760; --svc-shop-media-bg: #07152a; margin: 0; }
.svc-shop-media-frame--capabilities { --svc-shop-media-max: 960px; --svc-shop-media-border: #324760; --svc-shop-media-bg: #07152a; }
.svc-shop-media-frame--process { --svc-shop-media-max: 920px; --svc-shop-media-border: #324760; --svc-shop-media-bg: #07152a; }
.svc-shop-media-support { margin-top: 44px; }
.svc-shop-process-grid.svc-shop-media-support { margin-top: 48px; }
.svc-shop-architecture { padding-block: 56px; }
.svc-shop [data-svc-section="audience"] { padding-bottom: 48px; }

.svc-shop-audience-controls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.svc-shop-audience-controls button { min-width: 0; min-height: 46px; padding: 10px 13px; color: #c9d8e8; border: 1px solid #344a66; border-radius: 6px; background: #111f34; font: inherit; font-size: 0.8125rem; font-weight: 700; text-align: left; cursor: pointer; }
.svc-shop-audience-controls button[aria-selected="true"] { color: #fff; border-color: #4f87f7; background: #2563eb; }
.svc-shop-audience-controls button:hover { border-color: #6da4ff; }
.svc-shop-audience-controls button:focus-visible { outline: 3px solid #67e8f9; outline-offset: 3px; }
.svc-shop-audience article { padding: 22px 24px; margin-top: 16px; border: 1px solid #334862; border-radius: 8px; background: #0d1a2d; }
.svc-shop-audience article h3 { margin: 0; }
.svc-shop-audience article p { max-width: 1080px; margin: 8px 0 0; }
.svc-shop-audience[data-enhanced] article { margin-top: 16px; }

.svc-shop-stage-grid,
.svc-shop-process-grid { display: grid; gap: 18px; margin-bottom: 0; padding: 0; list-style: none; }
.svc-shop-stage-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc-shop-stage-grid--cart { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.svc-shop-stage-grid li,
.svc-shop-process-grid li { min-width: 0; padding: 18px; border: 1px solid #d4e0ea; border-radius: 8px; background: #f8fafc; }
.svc-shop-stage-grid span,
.svc-shop-process-grid span,
.svc-shop-management article > span { display: block; color: #2563eb; font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; }
.svc-shop-stage-grid h3,
.svc-shop-process-grid h3 { margin: 8px 0 0; font-size: 1rem; line-height: 1.35; }
.svc-shop-stage-grid p,
.svc-shop-process-grid p { margin: 8px 0 0; font-size: 0.8125rem; line-height: 1.55; }
.asfs-svc-dark .svc-shop-stage-grid li,
.asfs-svc-dark .svc-shop-process-grid li { border-color: #32445e; background: #0c192c; }
.asfs-svc-dark .svc-shop-stage-grid span,
.asfs-svc-dark .svc-shop-process-grid span { color: #35e6ba; }
.svc-shop-stage-grid--cart li { text-align: center; }
.svc-shop-stage-grid--cart h3 { font-size: 0.875rem; }

.svc-shop-split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 54px; align-items: center; }
.svc-shop-split .asfs-svc-heading { margin-bottom: 26px; }
.svc-shop-mobile-points { display: grid; gap: 12px; }
.svc-shop-mobile-points article { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 14px 16px; border: 1px solid #334962; border-radius: 8px; background: #0d1a2d; }
.svc-shop-mobile-points svg { width: 22px; height: 22px; color: #49ddf1; }
.svc-shop-mobile-points h3 { margin: 0; font-size: 0.9375rem; }
.svc-shop-mobile-points p { margin: 5px 0 0; font-size: 0.8125rem; }

.svc-shop-capability-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.svc-shop-capability-grid article { min-width: 0; padding: 20px; border: 1px solid #d5e0e9; border-radius: 8px; background: #f8fafc; }
.svc-shop-capability-grid h3 { margin: 14px 0 0; font-size: 1rem; }
.svc-shop-capability-grid ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.svc-shop-capability-grid li { position: relative; padding-left: 12px; color: #52637a; font-size: 0.8125rem; line-height: 1.5; }
.svc-shop-capability-grid li::before { position: absolute; left: 0; content: "•"; color: #2563eb; }

.svc-shop-management { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.svc-shop-management article { min-width: 0; padding: 24px; border: 1px solid #cedbe6; border-radius: 8px; background: #fff; box-shadow: 0 8px 18px rgba(8, 24, 45, 0.05); }
.svc-shop-management article.is-primary { color: #fff; border-color: #243b5b; background: #071426; }
.svc-shop-management article.is-primary > span { color: #34d399; }
.svc-shop-management h3 { margin: 10px 0 0; font-size: 1.125rem; }
.svc-shop-management p { margin: 10px 0 0; font-size: 0.875rem; }
.svc-shop-management .is-primary p { color: #c3d2e5; }

.svc-shop-process-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc-shop-process-grid li:last-child { grid-column: span 2; }
.svc-shop-foundations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.svc-shop-foundations article { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 22px; border: 1px solid #d5e0e9; border-radius: 8px; background: #f8fafc; }
.svc-shop-foundations svg { width: 18px; height: 18px; color: #08a47e; }
.svc-shop-foundations h3 { margin: 0; font-size: 0.9375rem; }
.svc-shop-foundations p { margin: 8px 0 0; color: #52637a; font-size: 0.8125rem; }

.svc-shop [data-svc-section="related"] .asfs-svc-related article { border-color: #30445f; background: #0b182a; }
.svc-shop [data-svc-section="related"] .asfs-svc-related h3 { color: #fff; }

@media (max-width: 1100px) {
  .svc-shop-hero { padding-top: calc(var(--asfit-header-height, 78px) + 34px); }
  .svc-shop-hero-grid { gap: 32px; }
  .svc-shop-media-support { margin-top: 32px; }
  .svc-shop-process-grid.svc-shop-media-support { margin-top: 36px; }
  .svc-shop-audience-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc-shop-capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-shop-stage-grid--cart { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc-shop-process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc-shop-process-grid li:last-child { grid-column: auto; }
  .svc-shop [data-svc-section="audience"] { padding-bottom: 44px; }
}

@media (max-width: 900px) {
  .svc-shop-hero-grid,
  .svc-shop-split { grid-template-columns: minmax(0, 1fr); }
  .svc-shop-hero-copy { max-width: 760px; }
  .svc-shop-media-frame--hero,
  .svc-shop-media-frame--mobile { margin-inline: auto; }
  .svc-shop-stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-shop-stage-grid--cart { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc-shop-management,
  .svc-shop-foundations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .svc-shop-hero { padding: calc(var(--asfit-header-height, 78px) + 28px) 0 54px; }
  .svc-shop-breadcrumbs { margin-bottom: 28px; }
  .svc-shop-hero-grid { gap: 36px; }
  .svc-shop-media-frame { margin-top: 26px; }
  .svc-shop-media-frame--hero,
  .svc-shop-media-frame--architecture,
  .svc-shop-media-frame--mobile { margin-top: 0; }
  .svc-shop-media-support,
  .svc-shop-process-grid.svc-shop-media-support { margin-top: 28px; }
  .svc-shop-architecture { padding-block: 44px; }
  .svc-shop-audience-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-shop-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-shop-capability-grid { gap: 18px; }
  .svc-shop [data-svc-section="audience"] { padding-bottom: 40px; }
}

@media (max-width: 540px) {
  .svc-shop-hero-points,
  .svc-shop-audience-controls,
  .svc-shop-stage-grid,
  .svc-shop-stage-grid--cart,
  .svc-shop-capability-grid,
  .svc-shop-management,
  .svc-shop-process-grid,
  .svc-shop-foundations { grid-template-columns: minmax(0, 1fr); }
  .svc-shop-hero-copy > p:not(.asfs-svc-eyebrow) { font-size: 1rem; }
  .svc-shop-stage-grid--cart li { text-align: left; }
  .svc-shop-audience-controls button { min-height: 44px; }
  .svc-shop-audience article,
  .svc-shop-management article,
  .svc-shop-foundations article { padding: 18px; }
}