/* =====================================================================
   The older section templates (svc-detail, stats, process, faq, the
   integration blocks) drawn in the v4 look. Pages keep their markup and
   their copy; body.s4x switches them onto this skin. Each section gets a
   surface class from the transform: s4x-paper, s4x-alt or s4x-night.
   ===================================================================== */

body.s4x section.s4x { position: relative; padding: clamp(80px, 10vw, 128px) 0; overflow: clip; border-top: 0 !important; border-bottom: 0 !important; }
body.s4x .s4x-paper { background: var(--s4-paper) !important; color: var(--s4-ink) !important; }
body.s4x .s4x-alt { background: #fbfaf7 !important; color: var(--s4-ink) !important; box-shadow: 0 1px 0 var(--s4-line) inset, 0 -1px 0 var(--s4-line) inset; }
body.s4x .s4x-night { background: var(--s4-night) !important; color: var(--s4-on) !important; }
body.s4x .s4x-night::before { content: ""; position: absolute; right: -15%; top: -20%; width: 70%; height: 90%; background: radial-gradient(closest-side, rgba(109,92,246,.2), transparent 75%); pointer-events: none; }
body.s4x section.s4x .shell { position: relative; width: min(1200px, calc(100% - 48px)); max-width: none; margin-inline: auto; }

/* ---------- type ---------- */
body.s4x section.s4x h2, body.s4x section.s4x .svc-detail-h2, body.s4x section.s4x .section-h2 {
  font-family: var(--s4-display) !important; font-weight: 700 !important; font-size: clamp(32px, 4vw, 54px) !important;
  line-height: 1.04 !important; letter-spacing: -0.04em !important; color: inherit !important; text-wrap: balance;
  background: none !important; -webkit-text-fill-color: currentColor !important; margin: 14px 0 18px;
}
body.s4x section.s4x h2 br { display: none; }
body.s4x section.s4x h3 { font-family: var(--s4-display) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: inherit !important; }
body.s4x section.s4x p { color: var(--s4-ink-2); font-size: 17px; line-height: 1.65; letter-spacing: -0.005em; }
body.s4x section.s4x.s4x-night p, body.s4x section.s4x.s4x-night li { color: var(--s4-on-2); }
body.s4x section.s4x p strong, body.s4x section.s4x li strong { color: var(--s4-ink); font-weight: 600; }
body.s4x section.s4x.s4x-night p strong, body.s4x section.s4x.s4x-night li strong { color: #fff; }
body.s4x section.s4x a:not([class]) { color: var(--s4-violet-ink); text-decoration: underline; text-decoration-color: rgba(76,61,214,.35); text-underline-offset: 3px; }
body.s4x section.s4x.s4x-night a:not([class]) { color: #c9c2ff; }
body.s4x section.s4x .overline-tag {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px 6px 10px; border-radius: 999px;
  font-family: var(--s4-body) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--s4-violet-ink) !important; background: var(--s4-violet-soft) !important; -webkit-text-fill-color: currentColor !important;
}
body.s4x section.s4x .overline-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
body.s4x section.s4x.s4x-night .overline-tag { color: #d6d0ff !important; background: rgba(139,123,255,.16) !important; }
body.s4x section.s4x .section-head { text-align: center; max-width: 820px; margin: 0 auto clamp(40px, 5vw, 64px); }

/* ---------- svc-detail: text beside a list, an image or numbers ---------- */
body.s4x .svc-detail-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
body.s4x .svc-detail-grid.svc-detail-split { align-items: start; }
body.s4x .svc-detail-reverse .svc-detail-grid > :first-child { order: 2; }
body.s4x .svc-detail-text > p { max-width: 600px; }
body.s4x .svc-detail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
body.s4x .svc-detail-list li {
  position: relative; margin: 0; padding: 16px 18px 16px 52px; border-radius: 18px; font-size: 15.5px; line-height: 1.55; color: var(--s4-ink-2);
  background: var(--s4-card); box-shadow: 0 0 0 1px var(--s4-line), 0 14px 30px -24px rgba(40,30,90,.35);
}
body.s4x .svc-detail-list li::before {
  content: ""; position: absolute; left: 16px; top: 17px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--s4-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat;
}
body.s4x .svc-detail-list li strong { display: block; font-family: var(--s4-display); font-size: 16.5px; letter-spacing: -0.01em; margin-bottom: 2px; }
body.s4x .s4x-night .svc-detail-list li { background: rgba(255,255,255,.05); box-shadow: 0 0 0 1px var(--s4-line-d) inset; color: var(--s4-on-2); }
/* amx-fx turns long lists on /services/ pages into an icon grid (.amx-cap);
   its colours assume the dark theme, so draw it on the v4 surfaces here */
body.s4x section.s4x .amx-cap-grid .amx-cap {
  border: 0; border-radius: 18px; background: var(--s4-card); color: var(--s4-ink-2);
  box-shadow: 0 0 0 1px var(--s4-line), 0 14px 30px -24px rgba(40,30,90,.35); font-size: 15px;
}
body.s4x section.s4x .amx-cap .amx-cap-t { color: var(--s4-ink-2); }
body.s4x section.s4x .amx-cap-ic { background: var(--s4-violet-soft); border-color: transparent; color: var(--s4-violet-ink); }
body.s4x section.s4x.s4x-night .amx-cap-grid .amx-cap { background: rgba(255,255,255,.05); box-shadow: 0 0 0 1px var(--s4-line-d) inset; color: var(--s4-on-2); }
body.s4x section.s4x.s4x-night .amx-cap .amx-cap-t { color: var(--s4-on-2); }
body.s4x section.s4x.s4x-night .amx-cap-ic { background: rgba(139,123,255,.16); color: #d6d0ff; }
body.s4x .svc-detail-visual { position: relative; }
body.s4x .svc-detail-visual img { width: 100%; height: auto; border-radius: 26px; box-shadow: 0 40px 80px -40px rgba(30,20,70,.55), 0 0 0 1px var(--s4-line); }
body.s4x .s4x-night .svc-detail-visual img { box-shadow: 0 50px 100px -40px rgba(0,0,0,.85), 0 0 0 1px var(--s4-line-d); }
body.s4x .svc-img-overlay { border-radius: 26px; }

/* buttons inside sections */
body.s4x section.s4x .btn-ghost, body.s4x section.s4x .btn-primary {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; height: 48px; padding: 0 22px; border-radius: 999px;
  font-family: var(--s4-display) !important; font-weight: 700 !important; font-size: 15.5px !important; text-decoration: none !important;
  background: var(--s4-ink) !important; color: #fff !important; border: 0 !important; box-shadow: none !important; transition: transform .4s var(--s4-snap);
}
body.s4x section.s4x .btn-ghost { background: transparent !important; color: var(--s4-ink) !important; box-shadow: 0 0 0 1.5px var(--s4-ink) inset !important; }
body.s4x section.s4x.s4x-night .btn-ghost { color: #fff !important; box-shadow: 0 0 0 1.5px rgba(255,255,255,.4) inset !important; }
body.s4x section.s4x.s4x-night .btn-primary { background: #fff !important; color: var(--s4-ink) !important; }
body.s4x section.s4x .btn-ghost:hover, body.s4x section.s4x .btn-primary:hover { transform: translateY(-2px); }

/* ---------- numbers: stats strip and case outcomes ---------- */
body.s4x .stats-grid { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 16px; }
body.s4x .stat-item { padding: 28px 26px; border-radius: 24px; background: var(--s4-card); box-shadow: 0 0 0 1px var(--s4-line), 0 20px 40px -32px rgba(40,30,90,.35); text-align: left; }
body.s4x .stat-num { display: block; font-family: var(--s4-display) !important; font-weight: 700 !important; font-size: clamp(40px, 4vw, 56px) !important; line-height: 1; letter-spacing: -0.045em; color: var(--s4-violet-ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
body.s4x .stat-label { display: block; margin-top: 14px; font-family: var(--s4-display); font-weight: 700; font-size: 16px; color: var(--s4-ink); }
body.s4x .stat-sub { display: block; margin-top: 4px; font-size: 14px; color: var(--s4-ink-3); }
body.s4x .cs-outcomes { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 20px; }
body.s4x .cs-outcome { padding: 22px 20px; border-radius: 20px; background: rgba(255,255,255,.05); box-shadow: 0 0 0 1px var(--s4-line-d) inset; }
body.s4x .s4x-paper .cs-outcome, body.s4x .s4x-alt .cs-outcome { background: var(--s4-card); box-shadow: 0 0 0 1px var(--s4-line); }
body.s4x .cs-outcome-num { display: block; font-family: var(--s4-display) !important; font-weight: 700; font-size: 34px; letter-spacing: -0.04em; line-height: 1; color: inherit !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
body.s4x .cs-outcome-label { display: block; margin-top: 8px; font-size: 13.5px; opacity: .75; }

/* ---------- process ---------- */
body.s4x .process-grid { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 16px; }
body.s4x .process-grid.process-grid-3 { grid-template-columns: repeat(3, 1fr); }
body.s4x .process-step { position: relative; padding: 28px 24px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); box-shadow: 0 0 0 1px var(--s4-line-d) inset; }
body.s4x .s4x-paper .process-step, body.s4x .s4x-alt .process-step { background: var(--s4-card); box-shadow: 0 0 0 1px var(--s4-line), 0 20px 40px -32px rgba(40,30,90,.35); }
body.s4x .process-num { font-family: var(--s4-mono); font-size: 13px; color: var(--s4-violet-2); padding: 4px 9px; border-radius: 8px; background: rgba(139,123,255,.14); display: inline-block; }
body.s4x .process-line { display: none !important; }
body.s4x .process-step h3 { font-size: 21px; margin: 16px 0 8px; }
body.s4x .process-step p { font-size: 15px; }
body.s4x .process-list { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--s4-line-d); display: grid; gap: 7px; }
body.s4x .s4x-paper .process-list, body.s4x .s4x-alt .process-list { border-color: var(--s4-line); }
body.s4x .process-list li { position: relative; padding-left: 22px; font-size: 14px; opacity: .85; }
body.s4x .process-list li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--s4-green); border-bottom: 2px solid var(--s4-green); transform: rotate(-45deg); }

/* ---------- cards from the v2 flagship and Framer templates ----------
   Their own colours are written for a dark page, so on the light v4 surfaces
   the text disappears. Light cards on paper, glass cards on night. */
body.s4x section.s4x :is(.svc-card, .approach-feature, .ind-card, .integration-card) {
  background: var(--s4-card) !important; border: 0 !important; border-radius: 22px !important; color: var(--s4-ink-2) !important;
  box-shadow: 0 0 0 1px var(--s4-line), 0 20px 40px -32px rgba(40,30,90,.35) !important;
}
body.s4x section.s4x .svc-card.svc-featured { background: linear-gradient(150deg, #f1eeff, var(--s4-card) 60%) !important; }
body.s4x section.s4x :is(.svc-card, .approach-feature, .ind-card, .integration-card) h3 { color: var(--s4-ink) !important; }
body.s4x section.s4x :is(.svc-card, .approach-feature, .ind-card, .integration-card) p,
body.s4x section.s4x .svc-pill { color: var(--s4-ink-2) !important; }
body.s4x section.s4x :is(.af-icon, .svc-icon, .ind-icon) { background: var(--s4-violet-soft) !important; border-color: transparent !important; color: var(--s4-violet-ink) !important; }
body.s4x section.s4x .svc-tag { background: var(--s4-violet-soft) !important; border-color: transparent !important; color: var(--s4-violet-ink) !important; }
body.s4x section.s4x :is(.svc-link, .ind-proof) { color: var(--s4-violet-ink) !important; }
body.s4x section.s4x .svc-pill svg { color: var(--s4-green) !important; }
body.s4x section.s4x .svc-card::before, body.s4x section.s4x .svc-card::after, body.s4x section.s4x .svc-card-sparkle, body.s4x section.s4x .wave-bg { display: none !important; }
body.s4x section.s4x .int-band { background: var(--s4-card) !important; border: 0 !important; border-radius: 22px !important; box-shadow: 0 0 0 1px var(--s4-line) !important; }
body.s4x section.s4x .int-label { color: var(--s4-ink-3) !important; }
body.s4x section.s4x .int-chip { background: #f3f1fb !important; border-color: transparent !important; color: var(--s4-ink) !important; }
body.s4x section.s4x .int-chip-more { background: var(--s4-violet-soft) !important; color: var(--s4-violet-ink) !important; }
body.s4x section.s4x .approach-showcase { border-radius: 26px !important; border: 0 !important; box-shadow: 0 40px 80px -40px rgba(30,20,70,.55), 0 0 0 1px var(--s4-line) !important; }
body.s4x section.s4x .section-sub { color: var(--s4-ink-2) !important; }
body.s4x section.s4x .section-head .section-sub { margin-inline: auto; }
/* the same cards on a night surface */
body.s4x section.s4x.s4x-night :is(.svc-card, .approach-feature, .ind-card, .integration-card) { background: rgba(255,255,255,.05) !important; box-shadow: 0 0 0 1px var(--s4-line-d) inset !important; color: var(--s4-on-2) !important; }
body.s4x section.s4x.s4x-night .svc-card.svc-featured { background: linear-gradient(150deg, rgba(139,123,255,.16), rgba(255,255,255,.04) 60%) !important; }
body.s4x section.s4x.s4x-night :is(.svc-card, .approach-feature, .ind-card, .integration-card) h3 { color: #fff !important; }
body.s4x section.s4x.s4x-night :is(.svc-card, .approach-feature, .ind-card, .integration-card) p,
body.s4x section.s4x.s4x-night .svc-pill, body.s4x section.s4x.s4x-night .section-sub { color: var(--s4-on-2) !important; }
body.s4x section.s4x.s4x-night :is(.af-icon, .svc-icon, .ind-icon), body.s4x section.s4x.s4x-night .svc-tag { background: rgba(139,123,255,.16) !important; color: #d6d0ff !important; }
body.s4x section.s4x.s4x-night :is(.svc-link, .ind-proof) { color: #c9c2ff !important; }

/* ---------- FAQ (converted to details by the transform) ---------- */
body.s4x .s4x-faq .s4-faq-list { max-width: 900px; margin: 0 auto; }

/* ---------- integration pages: steps, pairs and cards ---------- */
body.s4x .amx-step-lead { max-width: 760px; margin: 0 auto 30px !important; text-align: center; font-size: 18px !important; }
body.s4x .amx-steps { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
body.s4x .amx-step { padding: 26px 24px; border-radius: 22px; background: var(--s4-card); box-shadow: 0 0 0 1px var(--s4-line), 0 20px 40px -32px rgba(40,30,90,.35); }
body.s4x .s4x-night .amx-step { background: rgba(255,255,255,.05); box-shadow: 0 0 0 1px var(--s4-line-d) inset; }
body.s4x .amx-step h3 { font-size: 19px; margin: 0 0 8px; }
body.s4x .amx-step p { font-size: 15px; margin: 0; }
body.s4x .svcx-card { display: block; padding: 26px; border-radius: 22px; text-decoration: none !important; color: inherit !important; background: var(--s4-card) !important; box-shadow: 0 0 0 1px var(--s4-line), 0 20px 40px -32px rgba(40,30,90,.35) !important; transition: transform .45s var(--s4-snap), box-shadow .3s; }
body.s4x .svcx-card:hover { transform: translateY(-4px); }
body.s4x .s4x-night .svcx-card { background: rgba(255,255,255,.05) !important; box-shadow: 0 0 0 1px var(--s4-line-d) inset !important; }
body.s4x .svcx-card h3 { font-size: 20px; margin: 14px 0 8px; }
body.s4x .svcx-card p { font-size: 15px; }
body.s4x .amx-pair { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--s4-violet-soft); color: var(--s4-violet-ink); font-size: 13px; }
body.s4x .amx-pair svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; }
body.s4x .s4x-night .amx-pair { background: rgba(139,123,255,.16); color: #d6d0ff; }
body.s4x .amx-int-more { color: var(--s4-violet-ink) !important; }
body.s4x .s4x-night .amx-int-more { color: #c9c2ff !important; }

@media (max-width: 960px) {
  body.s4x .svc-detail-grid, body.s4x .stats-grid { grid-template-columns: 1fr 1fr; }
  body.s4x .svc-detail-grid { grid-template-columns: 1fr; }
  body.s4x .svc-detail-reverse .svc-detail-grid > :first-child { order: 0; }
  body.s4x .process-grid, body.s4x .process-grid.process-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  body.s4x .stats-grid, body.s4x .process-grid, body.s4x .process-grid.process-grid-3 { grid-template-columns: 1fr; }
  body.s4x section.s4x .shell { width: calc(100% - 32px); }
}

/* ---------- the floating audit bar from script.js, in the v4 look ---------- */
body.svc4 .v2-float-cta.s4-float {
  background: rgba(16, 14, 28, .86) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 24px 60px -20px rgba(0,0,0,.7) !important; border: 0 !important;
  border-radius: 999px !important; color: var(--s4-on) !important; font-family: var(--s4-body);
}
body.svc4 .v2-float-cta.s4-float a { background: #fff !important; color: var(--s4-ink) !important; box-shadow: none !important; border-radius: 999px !important; font-family: var(--s4-display); font-weight: 700; }
body.svc4 .v2-float-cta.s4-float.s4-hide { opacity: 0 !important; transform: translate(-50%, 20px) !important; pointer-events: none !important; }
body.svc4 .v2-float-cta.s4-float span { color: var(--s4-on) !important; }