/* Opt-in service foundations. Component classes do not restyle unrelated service sections. */
.asfs-svc {
  --svc-ink: #101828;
  --svc-muted: #53627a;
  --svc-border: #dce4ef;
  --svc-blue: #0052ff;
  --svc-cyan: #22d3ee;
  --svc-violet: #7c3aed;
  --svc-surface: #fff;
  color: var(--svc-ink);
  background: #fff;
  letter-spacing: 0;
}

.asfs-svc-container {
  width: min(1280px, calc(100% - 64px));
  margin-inline: auto;
  min-width: 0;
}

.asfs-svc-section {
  padding: 80px 0;
  background: var(--svc-surface);
}

.asfs-svc-soft { --svc-surface: #f5f8fc; }
.asfs-svc-dark {
  --svc-ink: #f8fafc;
  --svc-muted: #b4c3d8;
  --svc-border: #293850;
  --svc-surface: #0b1426;
  color: var(--svc-ink);
}

.asfs-svc :where(h1, h2, h3, h4) {
  margin: 0;
  color: var(--svc-ink);
  letter-spacing: 0;
}

.asfs-svc h1 { font-size: 3.25rem; line-height: 1.08; }
.asfs-svc h2 { font-size: 2.25rem; line-height: 1.18; }
.asfs-svc h3 { font-size: 1.125rem; line-height: 1.4; }
.asfs-svc p { color: var(--svc-muted); font-size: 1rem; line-height: 1.7; }
.asfs-svc-heading { max-width: 850px; margin-bottom: 36px; }
.asfs-svc-heading > p:last-child:not(:first-child) { margin: 16px 0 0; }
.asfs-svc .asfs-svc-eyebrow {
  margin: 0 0 12px;
  color: #1755d6;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
}
.asfs-svc-dark .asfs-svc-eyebrow { color: #67e8f9; }

.asfs-svc-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.asfs-svc-icon { display: inline-flex; flex: 0 0 auto; width: 42px; height: 42px; align-items: center; justify-content: center; color: #2563eb; background: #edf3ff; border-radius: 8px; }
.asfs-svc-icon svg, .asfs-svc-icon img { width: 26px; height: 26px; flex: 0 0 auto; object-fit: contain; }
.asfs-svc-dark .asfs-svc-icon { color: #67e8f9; background: #152b42; }
.asfs-svc-links { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 24px; }

/* WordPress compatibility selectors share its approved summary geometry without changing its markup. */
.asfs-svc-summary { --svc-border: #dce4ef; color: #101828; }
.asfs-svc-summary :where(h2, h3) { margin: 0; color: #101828; letter-spacing: 0; }
.asfs-svc-summary h2 { font-size: 2.25rem; line-height: 1.18; }
.asfs-svc-summary h3 { line-height: 1.4; }
.asfs-svc-summary p { color: #53627a; font-size: 1rem; line-height: 1.7; }
.asfs-svc-summary-heading { max-width: 850px; margin-bottom: 36px; }
.asfs-svc-summary .asfs-svc-summary-eyebrow { margin: 0 0 12px; color: #1755d6; font-size: 0.75rem; font-weight: 700; line-height: 1.4; text-transform: uppercase; }
.asfs-svc-summary-layout, .svc-wp-summary-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr); gap: 60px; align-items: start; }
.asfs-svc-summary-copy > p, .svc-wp-summary-copy > p { margin: 0 0 16px; }
.asfs-svc-summary-panel, .svc-wp-cms-value { border-left: 3px solid #0e96b0; padding-left: 28px; }
.asfs-svc-summary-panel h3, .svc-wp-cms-value h3 { margin: 18px 0 12px; font-size: 1.375rem; }
.asfs-svc-summary-panel p, .svc-wp-cms-value p { margin: 0; }
.asfs-svc-summary-panel p + p, .svc-wp-cms-value p + p { margin-top: 16px; }
.asfs-svc-summary-signals, .svc-wp-editing-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--svc-border); }
.asfs-svc-summary-signals article, .svc-wp-editing-features article { display: flex; align-items: center; gap: 14px; }
.asfs-svc-summary-signals h3, .svc-wp-editing-features h3 { font-size: 0.9375rem; }
.asfs-svc-summary-signals p, .svc-wp-editing-features p { margin: 4px 0 0; font-size: 0.8125rem; line-height: 1.5; }

@media (max-width: 1100px) {
  .asfs-svc-summary-layout, .svc-wp-summary-layout { gap: 40px; }
  .asfs-svc-summary-signals, .svc-wp-editing-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .asfs-svc-summary-layout, .svc-wp-summary-layout { grid-template-columns: minmax(0, 1fr); }
  .asfs-svc-summary-panel, .svc-wp-cms-value { max-width: 650px; }
}
@media (max-width: 767px) {
  .asfs-svc-summary h2 { font-size: 1.875rem; }
  .asfs-svc-summary-heading { margin-bottom: 28px; }
}
@media (max-width: 540px) {
  .asfs-svc-summary-panel, .svc-wp-cms-value { padding-left: 22px; }
  .asfs-svc-summary-signals, .svc-wp-editing-features { gap: 24px 18px; }
  .asfs-svc-summary-signals article, .svc-wp-editing-features article { display: block; }
  .asfs-svc-summary-signals .asfs-svc-icon, .svc-wp-editing-features .asfs-svc-icon { margin-bottom: 12px; }
}

.asfs-svc-audience { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
.asfs-svc-audience article { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; padding-top: 22px; border-top: 1px solid var(--svc-border); }
.asfs-svc-audience p { margin: 8px 0 0; font-size: 0.875rem; }

.asfs-svc-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.asfs-svc-comparison > div { padding: 28px; border-left: 3px solid #dc6578; background: #fff; }
.asfs-svc-comparison > div + div { border-color: #089b87; background: #edf8f6; }
.asfs-svc-comparison h3 { margin-bottom: 22px; }
.asfs-svc-comparison ul { display: grid; gap: 19px; list-style: none; padding: 0; margin: 0; }
.asfs-svc-comparison li { display: flex; gap: 12px; color: #34445b; font-size: 0.9375rem; line-height: 1.65; }
.asfs-svc-comparison li > span:first-child { width: 19px; flex: 0 0 19px; color: #a72b43; font-weight: 700; }
.asfs-svc-comparison li svg { width: 19px; height: 19px; margin-top: 3px; color: #047b6e; }

.asfs-svc-capabilities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.asfs-svc-capability { padding: 24px 0 0; border-top: 3px solid #2563eb; }
.asfs-svc-capability:nth-child(2) { border-color: #8b5cf6; }
.asfs-svc-capability:nth-child(3) { border-color: #0891b2; }
.asfs-svc-capability:nth-child(4) { border-color: #059669; }
.asfs-svc-capability > h3 { margin: 14px 0 20px; }
.asfs-svc-capability ul { display: grid; gap: 18px; list-style: none; margin: 0; padding: 0; }
.asfs-svc-capability li { border-top: 1px solid var(--svc-border); padding-top: 14px; }
.asfs-svc-capability h4 { font-size: 0.9375rem; line-height: 1.45; }
.asfs-svc-capability p { margin: 6px 0 0; font-size: 0.8125rem; line-height: 1.65; }

/* Intrinsic columns support any number of steps, with a tablet rail and mobile vertical flow. */
.asfs-svc-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(152px, 1fr);
  gap: 20px;
  padding: 8px 4px 18px;
  margin: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #8ca5ca transparent;
}
.asfs-svc-track > li { position: relative; min-width: 0; scroll-snap-align: start; }
.asfs-svc-track > li:not(:last-child)::after { position: absolute; z-index: 0; top: 20px; left: 50%; width: calc(100% + 20px); content: ""; border-top: 2px solid #8caee8; }
.asfs-svc-step-number { position: relative; z-index: 1; display: grid; width: 40px; height: 40px; margin: 0 auto 22px; place-items: center; color: #fff; font-size: 0.8125rem; font-weight: 700; border-radius: 50%; background: #245de1; box-shadow: 0 0 0 6px var(--svc-surface); }
.asfs-svc-step-copy { padding: 0 8px; }
.asfs-svc-step-copy h3 { font-size: 0.9375rem; }
.asfs-svc-step-copy p { margin: 10px 0 0; font-size: 0.8125rem; line-height: 1.65; }
.asfs-svc-step-copy > .asfs-svc-icon { margin-bottom: 16px; }
.asfs-svc-track--workflow { grid-auto-columns: minmax(210px, 1fr); gap: 32px; }
.asfs-svc-track--workflow > li:not(:last-child)::after { width: calc(100% + 32px); border-color: #287b98; }
.asfs-svc-track--workflow .asfs-svc-step-number { background: #155e75; }
.asfs-svc-track--workflow .asfs-svc-step-copy { padding: 22px; background: #101d31; border: 1px solid var(--svc-border); border-radius: 8px; }
.asfs-svc-track--workflow h3 { font-size: 1.0625rem; }
.asfs-svc-track--workflow p { font-size: 0.9375rem; }

.asfs-svc-projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 32px; }
.asfs-svc-project { min-width: 0; }
.asfs-svc-project-image { display: block; overflow: hidden; border: 1px solid var(--svc-border); border-radius: 8px; background: #edf2f8; }
.asfs-svc-project-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.asfs-svc-project-copy { padding: 22px 0 0; }
.asfs-svc-classification { display: inline-block; padding: 5px 9px; color: #155648; font-size: 0.75rem; font-weight: 700; line-height: 1.4; background: #e9f8f2; border: 1px solid #b8e0d0; border-radius: 4px; }
.asfs-svc .asfs-svc-project-category { margin: 14px 0 5px; font-size: 0.75rem; color: #52698c; text-transform: uppercase; }
.asfs-svc-project h3 { font-size: 1.375rem; }
.asfs-svc-project h3 a { color: inherit; text-decoration: none; }
.asfs-svc-project-copy > p:not(.asfs-svc-project-category) { margin: 10px 0 18px; font-size: 0.9375rem; }
.asfs-svc-project h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }

.asfs-svc-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; }
.asfs-svc-related article { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; background: #fff; border: 1px solid var(--svc-border); border-radius: 8px; }
.asfs-svc-related h3 { font-size: 1rem; }
.asfs-svc-related .nw-master-text-link { margin-top: auto; }

/* Match the approved SVC-01 FAQ/CTA composition without loading or changing its page stylesheet. */
.asfs-svc-faq-section, .asfs-svc-final { padding: 88px 0; }
.asfs-svc-faq-section .asfs-svc-heading { max-width: 760px; margin: 0 0 38px; text-align: left; }
.asfs-svc-faq-section .asfs-svc-eyebrow { margin-bottom: 10px; color: #2563eb; font-size: 0.76rem; font-weight: 800; }
.asfs-svc-faq-section h2 { color: #0f172a; font-size: 2.75rem; line-height: 1.08; }
.asfs-svc-faq-section .asfs-svc-heading > p:last-child:not(:first-child) { max-width: 680px; color: #5b6b82; }
.asfs-svc-faq-section h2, .asfs-svc-final h2 { scroll-margin-top: calc(var(--asfit-header-height, 78px) + 24px); }
.asfs-svc-faq { display: grid; gap: 10px; width: 100%; }
.asfs-svc-faq article { overflow: hidden; border: 1px solid var(--svc-border); border-radius: 8px; background: #f8fafc; }
.asfs-svc-faq h3 { margin: 0; }
.asfs-svc-faq button { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; min-height: 54px; padding: 14px 18px; color: #0f172a; font: inherit; font-size: 0.95rem; font-weight: 750; text-align: left; line-height: 1.5; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.asfs-svc-faq button > span:first-child { min-width: 0; }
.asfs-svc-faq button > span:last-child { position: relative; flex: 0 0 24px; width: 24px; height: 24px; color: currentColor; }
.asfs-svc-faq button > span:last-child::before, .asfs-svc-faq button > span:last-child::after { position: absolute; content: ""; background: currentColor; }
.asfs-svc-faq button > span:last-child::before { top: 11px; left: 6px; width: 12px; height: 2px; }
.asfs-svc-faq button > span:last-child::after { top: 6px; left: 11px; width: 2px; height: 12px; }
.asfs-svc-faq button[aria-expanded="true"] > span:last-child::after { display: none; }
.asfs-svc-faq article > div { padding: 0 18px 18px; }
.asfs-svc-faq p { max-width: 850px; margin: 0; color: #5b6b82; font-size: 1rem; line-height: 1.7; }
.asfs-svc [hidden] { display: none; }
.asfs-svc-track:focus-visible,
.asfs-svc-project a:focus-visible { outline: 3px solid #60a5fa; outline-offset: 4px; }
.asfs-svc-faq button:focus-visible { outline: 3px solid #60a5fa; outline-offset: -3px; }
.asfs-svc-faq button:hover { color: #2563eb; background: #f1f5f9; }

.asfs-svc-final { text-align: left; background: linear-gradient(110deg, #0b2b67 0%, #172554 48%, #3b146c 100%); border-top: 1px solid rgba(96, 165, 250, 0.4); }
.asfs-svc-final-shell { display: flex; align-items: center; justify-content: space-between; gap: 42px; }
.asfs-svc-final .asfs-svc-heading { min-width: 0; margin: 0; }
.asfs-svc-final .asfs-svc-eyebrow { margin: 0 0 9px; color: #67e8f9; font-size: 0.78rem; font-weight: 800; }
.asfs-svc-final h2 { color: #fff; font-size: 2.75rem; line-height: 1.1; }
.asfs-svc-final .asfs-svc-heading > p:last-child:not(:first-child) { max-width: 640px; margin: 13px 0 0; color: #c6d4e9; line-height: 1.65; }
.asfs-svc-final .asfs-svc-actions { flex: 0 0 auto; justify-content: flex-end; margin-top: 0; }

@media (max-width: 1180px) {
  .asfs-svc-final-shell { display: block; }
  .asfs-svc-final .asfs-svc-actions { justify-content: flex-start; margin-top: 28px; }
  .asfs-svc-faq-section h2, .asfs-svc-final h2 { font-size: 2rem; }
}

@media (max-width: 1100px) {
  .asfs-svc-capabilities, .asfs-svc-audience { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asfs-svc h1 { font-size: 2.75rem; }
}
@media (max-width: 767px) {
  .asfs-svc-container { width: calc(100% - 40px); }
  .asfs-svc-section { padding: 56px 0; }
  .asfs-svc-faq-section, .asfs-svc-final { padding: 58px 0; }
  .asfs-svc-faq-section .asfs-svc-heading { margin-bottom: 28px; }
  .asfs-svc h1 { font-size: 2.375rem; }
  .asfs-svc h2 { font-size: 1.875rem; }
  .asfs-svc-heading { margin-bottom: 28px; }
  .asfs-svc-audience, .asfs-svc-comparison { grid-template-columns: minmax(0, 1fr); }
  .asfs-svc-comparison { gap: 20px; }
  .asfs-svc-comparison > div { padding: 22px; }
  .asfs-svc-track, .asfs-svc-track--workflow { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); gap: 28px; overflow: visible; padding: 4px; }
  .asfs-svc-track > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 20px; }
  .asfs-svc-track > li:not(:last-child)::after { top: 40px; bottom: -28px; left: 19px; width: 0; height: auto; border-top: 0; border-left: 2px solid #8caee8; }
  .asfs-svc-step-number { margin: 0; }
  .asfs-svc-step-copy { padding: 7px 0 0; }
  .asfs-svc-step-copy h3 { font-size: 1.0625rem; }
  .asfs-svc-step-copy p { font-size: 0.9375rem; }
  .asfs-svc-track--workflow .asfs-svc-step-copy { padding: 18px; }
  .asfs-svc-projects { gap: 36px; }
}
@media (max-width: 540px) {
  .asfs-svc-container { width: calc(100% - 32px); }
  .asfs-svc h1 { font-size: 2rem; }
  .asfs-svc-capabilities, .asfs-svc-related { grid-template-columns: minmax(0, 1fr); }
  .asfs-svc-capabilities { gap: 32px; }
  .asfs-svc-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .asfs-svc-actions > a { width: 100%; }
  .asfs-svc-faq button { gap: 12px; }
  .asfs-svc-track > li { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .asfs-svc-track { scroll-behavior: auto; scroll-snap-type: none; }
}