/* Service single-page template — shared across /service/{slug}/ pages (first built for Live Chat Support).
   Independent from industry-page.css (separate .pg-svcp-* namespace, own file) per explicit instruction — not an @import,
   though it reuses the same site-wide design tokens (colors/fonts/spacing) every bespoke stylesheet on this theme shares. */
.pg-svcp-body { color: #14161E; }

/* ---------- Generic responsive grid utilities ---------- */
/* Use for any ad-hoc multi-column grid (card rows, stat rows, comparison panels, etc.)
   instead of an unclassed inline grid-template-columns — keeps mobile collapse working
   even when a per-instance column count is needed. Keep gap/margin/etc. inline as usual. */
.pg-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); }
.pg-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); }
.pg-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); }
.pg-grid-5 { display: grid; grid-template-columns: repeat(5,1fr); }
.pg-grid-6 { display: grid; grid-template-columns: repeat(6,1fr); }
@media (max-width: 900px) {
	.pg-grid-3, .pg-grid-4, .pg-grid-5, .pg-grid-6 { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 560px) {
	.pg-grid-2, .pg-grid-3, .pg-grid-4, .pg-grid-5, .pg-grid-6 { grid-template-columns: 1fr !important; }
}

/* ---------- Hero ---------- */
.pg-svcp-hero {
	background: radial-gradient(130% 120% at 84% -10%, #16294C 0%, #0E1B3A 42%, #0A1430 100%);
	border-bottom: 1px solid #0A1430; color: #fff;
}
.pg-svcp-hero-inner {
	max-width: 1240px; margin: 0 auto; padding: 72px 64px 80px;
	display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 60px; align-items: center;
}
@media (max-width: 900px) { .pg-svcp-hero-inner { grid-template-columns: 1fr !important; } }
/* Matches .pg-home-hero-kicker's styling exactly (home-page.css), but white instead of that
   kicker's #FF6477 accent — a plain label, no pill/background/border/padding. */
.pg-svcp-eyebrow-pill {
	font: 700 12.5px/1.5 'Hanken Grotesk', sans-serif;
	letter-spacing: .16em;
	color: #fff;
	margin-bottom: 24px;
}
.pg-svcp-h1 { font: 700 64px/1.02 'Bricolage Grotesque', sans-serif !important; letter-spacing: -0.025em; margin: 0 0 26px !important; color: #fff !important; }
.pg-svcp-h1 .accent { color: #FF6477; }
.pg-svcp-hero-sub { font: 400 20px/1.6 'Hanken Grotesk', sans-serif !important; color: #B8C0D2 !important; max-width: 560px; margin: 0 0 38px !important; }
.pg-svcp-hero-sub strong { color: #fff; font-weight: 700; }
.pg-svcp-hero-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 42px; }
.pg-svcp-btn-solid {
	display: flex; align-items: center; gap: 9px; white-space: nowrap; flex-shrink: 0;
	background: #CB0E2A; color: #fff; padding: 17px 30px; border-radius: 4px; font: 700 15.5px/1 'Hanken Grotesk', sans-serif;
	text-decoration: none; box-shadow: 0 12px 30px rgba(203,14,42,.32); transition: transform .16s ease, box-shadow .16s ease;
}
.pg-svcp-btn-solid:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(203,14,42,.4); color: #fff; }
.pg-svcp-btn-ghost {
	display: flex; align-items: center; gap: 9px; white-space: nowrap; flex-shrink: 0; color: #fff;
	padding: 17px 24px; border-radius: 4px; border: 1px solid rgba(255,255,255,.22); font: 600 15px/1 'Hanken Grotesk', sans-serif;
	text-decoration: none; background: transparent; transition: border-color .16s ease;
}
.pg-svcp-btn-ghost:hover { border-color: #fff; color: #fff; }
.pg-svcp-hero-meta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; font: 500 13px/1.5 'Hanken Grotesk', sans-serif; color: #fff; }
.pg-svcp-hero-meta strong { color: #fff; font-weight: 700; }
.pg-svcp-hero-meta .sep { width: 4px; height: 4px; background: #CB0E2A; border-radius: 50%; }

.pg-svcp-hero-card { background: #0C1A3A; border-radius: 3px; padding: 32px; box-shadow: 0 30px 70px rgba(14,16,22,.28); position: relative; }
.pg-svcp-hero-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.pg-svcp-hero-card-head .label { font: 500 12.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .12em; color: #C2C8D4; }
.pg-svcp-hero-card-head .live { display: flex; align-items: center; gap: 7px; font: 500 12.5px/1 'Hanken Grotesk', sans-serif; color: #46C2A8; }
.pg-svcp-hero-card-head .live .dot { width: 6px; height: 6px; background: #46C2A8; border-radius: 50%; animation: pgSvcpLivePulse 2s ease-in-out infinite; }
.pg-svcp-hero-chart { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.pg-svcp-hero-chart svg { width: 100%; max-width: 240px; height: auto; }
.pg-svcp-hero-legend { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.pg-svcp-hero-legend-row { display: flex; align-items: center; gap: 9px; }
.pg-svcp-hero-legend-row .swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.pg-svcp-hero-legend-row .lbl { font: 600 11.5px/1.2 'Hanken Grotesk', sans-serif; color: #E7EAF1; }
.pg-svcp-hero-legend-row .val { font: 700 13px/1 'Hanken Grotesk', sans-serif; color: #8FA0BE; margin-left: auto; }
.pg-svcp-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.pg-svcp-hero-stats .lbl { font: 500 11px/1.3 'Hanken Grotesk', sans-serif; color: #C2C8D4; margin-bottom: 8px; }
.pg-svcp-hero-stats .val { font: 700 30px/0.9 'Bricolage Grotesque', sans-serif; }
.pg-svcp-hero-stats .val small { font-size: 16px; }

/* ---------- Hero: big-stat callout + boxed 2-stat grid (variant of hero-card body, first built for Banking) ---------- */
.pg-svcp-hero-bigstat { background: linear-gradient(135deg,#14B981 0%,#0E9468 100%); border-radius: 3px; padding: 24px 26px; margin-bottom: 14px; }
.pg-svcp-hero-bigstat .label { font: 500 12.5px/1 'Hanken Grotesk', sans-serif; color: #CFF3E5; margin-bottom: 10px; }
.pg-svcp-hero-bigstat-row { display: flex; align-items: flex-end; justify-content: space-between; }
.pg-svcp-hero-bigstat .value { font: 700 52px/0.9 'Bricolage Grotesque', sans-serif; color: #fff; letter-spacing: -0.02em; }
.pg-svcp-hero-bigstat .value small { font-size: 26px; }
.pg-svcp-hero-bigstat-bars { display: flex; gap: 4px; align-items: flex-end; height: 42px; }
.pg-svcp-hero-bigstat-bars div { width: 7px; background: rgba(255,255,255,.45); border-radius: 2px; }
.pg-svcp-hero-boxstats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pg-svcp-hero-boxstats > div { background: #15294F; border: 1px solid rgba(255,255,255,.06); border-radius: 3px; padding: 20px; }
.pg-svcp-hero-boxstats .lbl { font: 500 11.5px/1.3 'Hanken Grotesk', sans-serif; color: #C2C8D4; margin-bottom: 12px; }
.pg-svcp-hero-boxstats .val { font: 700 38px/0.9 'Bricolage Grotesque', sans-serif; letter-spacing: -0.02em; }
.pg-svcp-hero-boxstats .val small { font-size: 20px; }
.pg-svcp-hero-boxstats .sub { font: 500 11px/1.4 'Hanken Grotesk', sans-serif; color: #C2C8D4; margin-top: 8px; }
.pg-svcp-hero-footnote { font: 400 11px/1.4 'Hanken Grotesk', sans-serif; color: #7C88A0; margin-top: 12px; }

/* ---------- Inline CTA banner ---------- */
.pg-svcp-inline-cta-wrap { max-width: 1240px; margin: 0 auto; padding: 30px 64px 0; }
.pg-svcp-inline-cta {
	display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
	background: linear-gradient(100deg,#CB0E2A,#E11D33); border-radius: 12px; padding: 26px 34px;
}
.pg-svcp-inline-cta .tag { flex-shrink: 0; font: 700 12.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .06em; color: #fff; background: rgba(255,255,255,.16); padding: 9px 13px; border-radius: 6px; }
.pg-svcp-inline-cta .msg { flex: 1; min-width: 220px; font: 700 19px/1.4 'Bricolage Grotesque', sans-serif; color: #fff; }
.pg-svcp-inline-cta .go { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #CB0E2A; padding: 14px 26px; border-radius: 5px; font: 700 14px/1 'Hanken Grotesk', sans-serif; white-space: nowrap; }
/* Three-item red band (tag + msg + go) stacks to one column on phones — same rule as the
   industry template's .pg-indp-inline-cta. Client request 2026-08-07. */
@media (max-width: 700px) {
	.pg-svcp-inline-cta { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
	.pg-svcp-inline-cta .msg { min-width: 0 !important; }
}
/* Aug-6 John-band redesign: former light band is now the red gradient band */
.pg-svcp-inline-cta.light { background: linear-gradient(90deg,#CB0E2A,#E11D33); border: none; border-radius: 8px; padding: 18px 28px; gap: 24px; box-shadow: none; justify-content: space-between; }
.pg-svcp-inline-cta.light .msg { font: 700 19px/1.4 'Bricolage Grotesque', sans-serif; color: #fff; flex: 1; min-width: 220px; }
.pg-svcp-inline-cta.light .go { background: #fff; }
/* Aug-6 John-band redesign: CTA button + John Maczynski headshot unit */
.pg-svcp-johnwrap { display: flex; align-items: center; gap: 16px; flex-shrink: 0; white-space: nowrap; }
.pg-svcp-johnwrap img { flex-shrink: 0; width: 58px; height: 58px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; border: 2px solid rgba(255,255,255,.35); }
.pg-svcp-johnwrap.sm img { width: 52px; height: 52px; }
/* Aug-7 converted band: navy 'real cost' bands become the red gradient, but with a
   SOLID white tag pill (red text) — distinct from the base red band, whose tag is a
   translucent chip. Applied per-page via the .redconv modifier. */
.pg-svcp-threshold.redconv .pg-svcp-threshold-tag { color: #CB0E2A; background: #fff; border-color: #fff; }
.pg-svcp-threshold.redconv p { color: #FFE1E5; }
.pg-svcp-threshold.redconv p strong { color: #fff; }

.pg-svcp-threshold.dark { background: #0C1A3A; color: #D4D8E2; border-top: none; border-bottom: none; }
.pg-svcp-threshold.dark .pg-svcp-threshold-tag { color: #FF5468; background: transparent; border: 1px solid rgba(225,29,51,.4); }
.pg-svcp-threshold.dark p { color: #CDD2DC; }
.pg-svcp-threshold.dark p strong { color: #FF5468; }

/* ---------- Credential strip ---------- */
.pg-svcp-cred { background: #fff; border-bottom: 1px solid #EEF0F4; }
.pg-svcp-cred-inner { max-width: 1240px; margin: 0 auto; padding: 24px 64px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.pg-svcp-cred-label { font: 500 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .14em; color: #646B7B; flex-shrink: 0; }
.pg-svcp-cred-list { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.pg-svcp-cred-list > span {
	display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px/1 'Hanken Grotesk', sans-serif; color: #42475A;
	background: #F7F8FA; border: 1px solid #E8EAEF; padding: 9px 14px; border-radius: 8px;
}
.pg-svcp-cred-list > span .dot { width: 6px; height: 6px; border-radius: 50%; background: #12996B; flex-shrink: 0; }
/* Smaller screens: stack to one column — label above the pill list (same 680px
   tier as the industry cred strip and capabilities compliance strip). */
@media (max-width: 680px) {
	.pg-svcp-cred-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- Scale band ---------- */
.pg-svcp-scale { background: #fff; border-bottom: 1px solid #EEF0F4; }
.pg-svcp-scale-inner { max-width: 1240px; margin: 0 auto; padding: 60px 64px; display: grid; grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 900px) { .pg-svcp-scale-inner { grid-template-columns: 1fr !important; } }
.pg-svcp-scale-item { padding: 8px 40px 8px 0; }
.pg-svcp-scale-item:not(:first-child) { border-left: 1px solid #ECEEF2; padding-left: 40px; }
.pg-svcp-scale-num-row { display: flex; align-items: flex-start; gap: 14px; }
.pg-svcp-scale-num { font: 800 76px/0.82 'Bricolage Grotesque', sans-serif; color: #15294F; letter-spacing: -0.03em; }
.pg-svcp-scale-num small { font-size: 34px; }
.pg-svcp-scale-label { font: 700 15px/1.18 'Hanken Grotesk', sans-serif; color: #CB0E2A; text-transform: uppercase; letter-spacing: .02em; padding-top: 6px; }
.pg-svcp-scale-desc { font: 400 14.5px/1.55 'Hanken Grotesk', sans-serif; color: #5A5F6E; margin-top: 16px; max-width: 280px; }

/* ---------- Threshold bar ---------- */
.pg-svcp-threshold { background: linear-gradient(100deg,#CB0E2A,#E11D33); border-top: 1px solid #B00C24; border-bottom: 1px solid #B00C24; color: #fff; }
.pg-svcp-threshold-inner { max-width: 1240px; margin: 0 auto; padding: 34px 64px; display: flex; align-items: center; gap: 30px; flex-wrap: nowrap; }
.pg-svcp-threshold-tag { flex-shrink: 0; font: 500 12.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32); padding: 8px 13px; border-radius: 7px; }
.pg-svcp-threshold p { margin: 0; font: 400 16.5px/1.55 'Hanken Grotesk', sans-serif; color: #FDE7EA; }
.pg-svcp-threshold p strong { color: #fff; font-weight: 600; }
@media (max-width: 680px) {
  .pg-svcp-threshold-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- Shared section shell ---------- */
.pg-svcp-section { max-width: 1240px; margin: 0 auto; padding: 80px 64px; }
.pg-svcp-section.tint { background: #EEF2F8; border-top: 1px solid #DEE5F0; border-bottom: 1px solid #DEE5F0; }
.pg-svcp-section-tint-wrap { background: #EEF2F8; border-top: 1px solid #DEE5F0; border-bottom: 1px solid #DEE5F0; }
.pg-svcp-section.dark { background: #0C1A3A; color: #D4D8E2; }
.pg-svcp-section.dark .pg-svcp-badge-label, .pg-svcp-section-dark-wrap .pg-svcp-badge-label { color: #fff !important; }
.pg-svcp-section.dark .pg-svcp-h2, .pg-svcp-section-dark-wrap .pg-svcp-h2 { color: #fff !important; }
.pg-svcp-section.dark .pg-svcp-h2 .accent, .pg-svcp-section-dark-wrap .pg-svcp-h2 .accent { color: #FF6E80; }
.pg-svcp-section.dark .pg-svcp-h3, .pg-svcp-section-dark-wrap .pg-svcp-h3 { color: #fff !important; }
.pg-svcp-section.dark .pg-svcp-lede, .pg-svcp-section-dark-wrap .pg-svcp-lede { color: #AEB6C8 !important; }
.pg-svcp-section.dark .pg-svcp-lede strong, .pg-svcp-section-dark-wrap .pg-svcp-lede strong { color: #fff !important; }
/* Outer full-bleed wrapper for dark sections — same pattern as .pg-svcp-section-tint-wrap.
   .pg-svcp-section.dark (inner, max-width:1240px) boxes the background instead of letting it
   run edge to edge; this class goes on the outer wp:group instead. Mirrors the same fix in
   industry-page.css (see feedback_darksection_fullwidth_bug / the section-spacing-fix skill). */
.pg-svcp-section-dark-wrap { background: #0C1A3A; color: #D4D8E2; }

/* ---------- Adjacent-white-section spacing ----------
   When two plain-white .pg-svcp-section wrappers stack directly on top of each other (no
   tint/dark background to separate them), the combined 80px+80px padding reads as too big
   a gap since there's no color change to justify it. Mark each white section's outer
   wp:group with this class; when two land back to back, halve the shared gap: the first
   section's bottom padding and the second's top padding both drop to 40px (160px -> 80px
   total). Sections with a tint/dark background are unaffected — they already have their
   own visual separation and keep the full 80px. Mirrors the same fix in industry-page.css. */
.pg-svcp-section-white-wrap + .pg-svcp-section-white-wrap .pg-svcp-section,
.pg-svcp-section-white-wrap + .pg-svcp-section-white-wrap.pg-svcp-section { padding-top: 40px; }
.pg-svcp-section-white-wrap:has(+ .pg-svcp-section-white-wrap) .pg-svcp-section,
.pg-svcp-section-white-wrap.pg-svcp-section:has(+ .pg-svcp-section-white-wrap) { padding-bottom: 40px; }
/* Compound-selector alternates for the rare case where wp:group IS .pg-svcp-section directly
   with no separate outer wrapper — see the matching comment in industry-page.css. */
.pg-svcp-badge-row { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pg-svcp-badge-num { flex-shrink: 0; width: 30px; height: 30px; background: #CB0E2A; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 3px; font: 800 13px/1 'Hanken Grotesk', sans-serif; }
.pg-svcp-badge-label { font: 700 11.5px/1.5 'Hanken Grotesk', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #0C1A3A; }
.pg-svcp-h2 { font: 700 40px/1.1 'Bricolage Grotesque', sans-serif !important; letter-spacing: -0.024em; margin: 0 0 22px !important; max-width: 960px; color: #14161E !important; }
.pg-svcp-h2 .accent { color: #CB0E2A; }
.pg-svcp-h3 { font: 700 34px/1.12 'Bricolage Grotesque', sans-serif !important; letter-spacing: -0.02em; margin: 0 0 20px !important; max-width: 880px; color: #14161E !important; }
.pg-svcp-lede { font: 400 18.5px/1.62 'Hanken Grotesk', sans-serif !important; color: #4D5260 !important; max-width: 880px; margin: 0 0 46px !important; }
.pg-svcp-lede strong { color: #14161E; }
.pg-svcp-lede-note { font: 500 12.5px/1.5 'Hanken Grotesk', sans-serif; color: #8A90A0; background: #F7F8FA; border: 1px solid #ECEEF2; border-radius: 6px; padding: 12px 16px; max-width: 880px; margin-bottom: 44px; }

/* ---------- Who we serve — profile cards ---------- */
.pg-svcp-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .pg-svcp-profile-grid { grid-template-columns: minmax(0, 1fr) !important; } }
.pg-svcp-profile-card { background: #fff; border: 1px solid #E8EAEF; border-radius: 3px; padding: 32px; box-shadow: 0 12px 34px rgba(20,22,30,.05); }
.pg-svcp-profile-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pg-svcp-profile-head .n { font: 700 13px/1 'Hanken Grotesk', sans-serif; color: #CB0E2A; }
.pg-svcp-profile-head .t { font: 700 18px/1.25 'Bricolage Grotesque', sans-serif; color: #14161E; }
.pg-svcp-profile-tag { font: 600 12px/1.5 'Hanken Grotesk', sans-serif; padding: 8px 12px; border-radius: 6px; display: inline-block; margin-bottom: 16px; }
.pg-svcp-profile-card p { font: 400 14.5px/1.6 'Hanken Grotesk', sans-serif; color: #4D5260; margin: 0 0 16px; }
.pg-svcp-profile-anchor { font: 600 12.5px/1.4 'Hanken Grotesk', sans-serif; color: #15294F; padding-top: 14px; border-top: 1px solid #EEF0F4; }
.pg-svcp-profile-anchor .arrow { color: #CB0E2A; }
.pg-svcp-profile-card a { color: #CB0E2A; text-decoration: none; font-weight: 600; }

/* ---------- Control towers (icon-card grid, first built for Banking) ---------- */
.pg-svcp-tower-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 40px; }
@media (max-width: 800px) { .pg-svcp-tower-grid { grid-template-columns: 1fr !important; } }
.pg-svcp-tower-card { background: #fff; border: 1px solid #ECEEF2; border-radius: 3px; padding: 34px; transition: all .2s ease; }
.pg-svcp-tower-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,22,30,.08); }
.pg-svcp-tower-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.pg-svcp-tower-icon { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font: 700 16px/1 'Bricolage Grotesque', sans-serif; flex-shrink: 0; }
.pg-svcp-tower-head .eyebrow { font: 500 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .12em; }
.pg-svcp-tower-title { font: 700 22px/1.2 'Bricolage Grotesque', sans-serif; margin-bottom: 12px; letter-spacing: -0.01em; }
.pg-svcp-tower-desc { font: 400 15px/1.6 'Hanken Grotesk', sans-serif; color: #5A5F6E; margin-bottom: 20px; }
.pg-svcp-tower-tag { display: inline-block; font: 600 12px/1 'Hanken Grotesk', sans-serif; padding: 9px 14px; border-radius: 4px; }

/* ---------- Benchmark compare bars (two-layer: baseline + new-standard fill) ---------- */
.pg-svcp-benchmarks { background: #0C1A3A; border-radius: 3px; padding: 38px 40px; }
.pg-svcp-benchmarks-label { font: 500 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #C2C8D4; margin-bottom: 30px; }
.pg-svcp-benchmarks-list { display: flex; flex-direction: column; gap: 24px; }
.pg-svcp-benchmark-row-head { display: flex; justify-content: space-between; font: 600 13.5px/1 'Hanken Grotesk', sans-serif; margin-bottom: 11px; color: #E7EAF1; }
.pg-svcp-benchmark-row-head .now { color: #46C2A8; }
.pg-svcp-benchmark-row-head .now .was { color: #C2C8D4; font-weight: 400; }
.pg-svcp-benchmark-track { position: relative; height: 10px; background: rgba(255,255,255,.06); border-radius: 6px; overflow: hidden; }
.pg-svcp-benchmark-track.lg { height: 13px; border-radius: 7px; }
.pg-svcp-benchmark-baseline { position: absolute; inset: 0; background: #414B5E; border-radius: 6px; }
.pg-svcp-benchmark-fill { position: absolute; inset: 0; height: 100%; background: linear-gradient(90deg,#12996B,#46C2A8); border-radius: 6px; }
.pg-svcp-benchmarks-source { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.07); font: 400 13px/1.5 'Hanken Grotesk', sans-serif; color: #C2C8D4; }

/* ---------- Generic tab-toggle (click a trigger, swap a pre-rendered panel) — reusable widget behavior, see tab-panel-toggle.js ---------- */
.pg-svcp-tabtoggle-panel { display: none; }
.pg-svcp-tabtoggle-panel.is-active { display: block; }

/* ---------- Maturity / evolution spectrum (3-state tab toggle) ---------- */
.pg-svcp-spectrum { background: #fff; border: 1px solid #E8EAEF; border-radius: 3px; padding: 34px; margin-bottom: 40px; box-shadow: 0 10px 30px rgba(20,22,30,.04); }
.pg-svcp-spectrum-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; }
.pg-svcp-spectrum-head .label { font: 500 12.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .12em; color: #646B7B; }
.pg-svcp-spectrum-tabs { display: flex; gap: 8px; background: #F2F3F6; padding: 5px; border-radius: 4px; }
.pg-svcp-spectrum-tabs .pg-svcp-tabtoggle-trigger {
	cursor: pointer; border: none; background: transparent; padding: 9px 15px; border-radius: 3px;
	font: 600 12.5px/1 'Hanken Grotesk', sans-serif; color: #646B7B; transition: all .15s ease;
}
.pg-svcp-spectrum-tabs .pg-svcp-tabtoggle-trigger.is-active { background: #fff; color: #14161E; box-shadow: 0 2px 8px rgba(20,22,30,.1); }
.pg-svcp-spectrum-flow { display: flex; align-items: stretch; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.pg-svcp-spectrum-flow-step { flex: 1; min-width: 130px; border-radius: 3px; padding: 20px 16px; }
.pg-svcp-spectrum-flow-step .k { font: 600 12px/1 'Hanken Grotesk', sans-serif; margin-bottom: 10px; }
.pg-svcp-spectrum-flow-step .t { font: 700 15px/1.2 'Bricolage Grotesque', sans-serif; margin-bottom: 6px; }
.pg-svcp-spectrum-flow-step .d { font: 400 12.5px/1.45 'Hanken Grotesk', sans-serif; }
.pg-svcp-spectrum-flow-arrow { display: flex; align-items: center; font-size: 22px; font-weight: 700; }
.pg-svcp-spectrum-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.pg-svcp-spectrum-tags span { font: 600 12.5px/1 'Hanken Grotesk', sans-serif; padding: 9px 14px; border-radius: 8px; }

/* ---------- Supervised process loop (dark, zero-trust perimeter diagram) ---------- */
.pg-svcp-loop { background: #0C1A3A; color: #fff; position: relative; overflow: hidden; }
.pg-svcp-loop-glow { position: absolute; top: -120px; left: -90px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(203,14,42,.20), transparent 70%); border-radius: 50%; }
.pg-svcp-loop-eyebrow { font: 700 11.5px/1.5 'Hanken Grotesk', sans-serif; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; }
.pg-svcp-loop-panel { border: 1px solid rgba(255,255,255,.16); border-radius: 6px; padding: 14px; }
.pg-svcp-loop-perimeter { text-align: center; font: 600 11.5px/1.4 'Hanken Grotesk', sans-serif; letter-spacing: .08em; color: #8FA0C4; padding: 8px 10px 16px; }
.pg-svcp-loop-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; align-items: stretch; }
@media (max-width: 900px) { .pg-svcp-loop-grid { grid-template-columns: 1fr 1fr !important; } }
.pg-svcp-loop-grid > div { background: #15294F; border: 1px solid rgba(255,255,255,.07); border-radius: 4px; padding: 22px; }
.pg-svcp-loop-grid .k { font: 600 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; margin-bottom: 12px; }
.pg-svcp-loop-grid .d { font: 400 13.5px/1.5 'Hanken Grotesk', sans-serif; color: #E7EAF1; }
.pg-svcp-loop-rail { text-align: center; font: 600 11.5px/1.4 'Hanken Grotesk', sans-serif; letter-spacing: .06em; color: #F3B9C0; background: rgba(203,14,42,.14); border: 1px solid rgba(203,14,42,.3); border-radius: 4px; padding: 12px 10px; margin-top: 12px; }
.pg-svcp-loop-sub { font: 400 15px/1.65 'Hanken Grotesk', sans-serif; color: #B8C0D2; max-width: 920px; margin: 24px 0 52px; }
.pg-svcp-loop-sub strong { color: #fff; }
.pg-svcp-loop-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width: 900px) { .pg-svcp-loop-steps { grid-template-columns: 1fr !important; } }
.pg-svcp-loop-steps > div { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 4px; padding: 26px; }
.pg-svcp-loop-steps .k { font: 700 13px/1 'Hanken Grotesk', sans-serif; margin-bottom: 14px; }
.pg-svcp-loop-steps .d { font: 400 14px/1.6 'Hanken Grotesk', sans-serif; color: #C2C8D4; }
/* .pg-svcp-loop is a dark full-bleed section wrapper like .pg-svcp-section.dark, but under its own
   name — the generic .pg-svcp-h2/.pg-svcp-h3/.pg-svcp-lede/.pg-svcp-badge-label rules all force a dark
   (#14161E/#0C1A3A) color with !important, which beats even an explicit inline color:#fff since it has
   no !important of its own. Same fix as .pg-svcp-section.dark, scoped to this class instead. */
.pg-svcp-loop .pg-svcp-badge-label { color: #fff !important; }
.pg-svcp-loop .pg-svcp-h2 { color: #fff !important; }
.pg-svcp-loop .pg-svcp-h2 .accent { color: #FF6477; }
.pg-svcp-loop .pg-svcp-h3 { color: #fff !important; }
.pg-svcp-loop .pg-svcp-lede { color: #B8C0D2 !important; }
.pg-svcp-loop .pg-svcp-lede strong { color: #fff !important; }

/* ---------- Delta / matrix table 4-column modifier ---------- */
.pg-svcp-matrix.cols-4 .pg-svcp-matrix-head,
.pg-svcp-matrix.cols-4 .pg-svcp-matrix-row { grid-template-columns: 1.1fr 1.2fr 1.3fr 1.1fr; }
@media (max-width: 900px) { .pg-svcp-matrix.cols-4 .pg-svcp-matrix-head, .pg-svcp-matrix.cols-4 .pg-svcp-matrix-row { grid-template-columns: 1fr !important; } }

/* ---------- Delta / matrix table 4-column modifier B (first: Life Sciences compliance comparison) ---------- */
.pg-svcp-matrix.cols-4b .pg-svcp-matrix-head,
.pg-svcp-matrix.cols-4b .pg-svcp-matrix-row { grid-template-columns: 1.1fr 1.2fr 1.2fr 1.3fr; }
@media (max-width: 900px) { .pg-svcp-matrix.cols-4b .pg-svcp-matrix-head, .pg-svcp-matrix.cols-4b .pg-svcp-matrix-row { grid-template-columns: 1fr !important; } }

/* ---------- Risk-gated framework (phase band + week strip + interactive explorer) ---------- */
.pg-svcp-framework-band { background: #0C1A3A; border-radius: 3px; padding: 38px 40px; margin-bottom: 30px; }
.pg-svcp-framework-label { font: 500 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #C2C8D4; margin-bottom: 26px; }
.pg-svcp-framework-phases { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.pg-svcp-framework-phases > div { flex: 1; background: #1E3460; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 16px 18px; }
.pg-svcp-framework-phases .wk { font: 600 11.5px/1 'Hanken Grotesk', sans-serif; margin-bottom: 8px; }
.pg-svcp-framework-phases .nm { font: 700 15px/1.2 'Bricolage Grotesque', sans-serif; color: #fff; }
.pg-svcp-framework-weeks { display: flex; gap: 3px; flex-wrap: wrap; }
.pg-svcp-framework-weeks > div { flex: 1; min-width: 40px; text-align: center; padding: 9px 0; border-radius: 6px; font: 600 11px/1 'Hanken Grotesk', sans-serif; color: #AAB2C0; }
.pg-svcp-phase-explorer { background: #fff; border: 1px solid #E8EAEF; border-radius: 3px; padding: 30px; box-shadow: 0 10px 30px rgba(20,22,30,.04); }
.pg-svcp-phase-explorer-label { font: 500 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #646B7B; margin-bottom: 20px; }
.pg-svcp-phase-chips { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-bottom: 26px; }
@media (max-width: 800px) { .pg-svcp-phase-chips { grid-template-columns: 1fr 1fr !important; } }
.pg-svcp-phase-chips .pg-svcp-tabtoggle-trigger {
	cursor: pointer; text-align: left; border: 1px solid #E8EAEF; border-left: 3px solid #C6CBD4; background: #FAFBFC;
	border-radius: 4px; padding: 12px 14px; font-family: inherit;
}
.pg-svcp-phase-chips .pg-svcp-tabtoggle-trigger.is-active { background: #F7F8FA; border-left-color: #CB0E2A; }
.pg-svcp-phase-chips .wk { display: block; font: 600 11px/1 'Hanken Grotesk', sans-serif; color: #9097A4; margin-bottom: 6px; }
.pg-svcp-phase-chips .lb { display: block; font: 600 12.5px/1.3 'Hanken Grotesk', sans-serif; color: #14161E; }
.pg-svcp-phase-detail { display: flex; gap: 24px; align-items: flex-start; padding: 30px; background: #F7F8FA; border-radius: 3px; }
.pg-svcp-phase-detail-badge { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: #CB0E2A; color: #fff; display: flex; align-items: center; justify-content: center; font: 700 17px/1 'Bricolage Grotesque', sans-serif; }
.pg-svcp-phase-detail-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.pg-svcp-phase-detail-title { font: 700 20px/1.2 'Bricolage Grotesque', sans-serif; }
.pg-svcp-phase-detail-weeks { font: 500 13px/1 'Hanken Grotesk', sans-serif; color: #646B7B; }
.pg-svcp-phase-detail-items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; margin-bottom: 18px; }
@media (max-width: 700px) { .pg-svcp-phase-detail-items { grid-template-columns: 1fr !important; } }
.pg-svcp-phase-detail-items > div { display: flex; gap: 10px; font: 400 14px/1.5 'Hanken Grotesk', sans-serif; color: #4D5260; }
.pg-svcp-phase-detail-items .check { color: #12996B; font-weight: 700; }
.pg-svcp-phase-detail-gate { display: inline-block; font: 600 11.5px/1.4 'Hanken Grotesk', sans-serif; padding: 8px 14px; border-radius: 6px; }

/* ---------- Simple two-line card (title + paragraph, no icon header) — first built for EdTech's safeguarding/educator-desk/calendar-protocol 4-card grids ---------- */
.pg-svcp-simplecard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .pg-svcp-simplecard-grid { grid-template-columns: 1fr !important; } }
.pg-svcp-simplecard { background: #fff; border: 1px solid #E8EAEF; border-radius: 3px; padding: 30px 32px; box-shadow: 0 12px 34px rgba(20,22,30,.05); }
.pg-svcp-simplecard .t { font: 700 16px/1.28 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 9px; }
.pg-svcp-simplecard .k { font: 600 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #CB0E2A; margin-bottom: 13px; }
.pg-svcp-simplecard p { font: 400 14.5px/1.6 'Hanken Grotesk', sans-serif; color: #4D5260; margin: 0; }
.pg-svcp-darkbanner { background: #0C1A3A; border-radius: 3px; padding: 24px 30px; }
.pg-svcp-darkbanner p { margin: 0; font: 400 15px/1.6 'Hanken Grotesk', sans-serif; color: #C2C8D4; }
.pg-svcp-darkbanner p strong { color: #fff; }

/* ---------- Ledger row (3-col: label | risk (red x) | protection (green check)) ---------- */
.pg-svcp-ledger { display: flex; flex-direction: column; gap: 10px; }
.pg-svcp-ledger-row { display: grid; grid-template-columns: 200px 1fr 1fr; align-items: stretch; background: #fff; border: 1px solid #ECEEF2; border-radius: 10px; overflow: hidden; }
@media (max-width: 700px) { .pg-svcp-ledger-row { grid-template-columns: 1fr !important; } }
.pg-svcp-ledger-row .label { padding: 18px 22px; font: 700 13.5px/1.3 'Hanken Grotesk', sans-serif; color: #14161E; background: #FAFBFC; display: flex; align-items: center; }
.pg-svcp-ledger-row .risk { padding: 18px 22px; font: 400 14px/1.4 'Hanken Grotesk', sans-serif; color: #E5484D; display: flex; align-items: center; gap: 10px; border-left: 1px solid #F1F2F5; }
.pg-svcp-ledger-row .protect { padding: 18px 22px; font: 600 14px/1.4 'Hanken Grotesk', sans-serif; color: #0E7A56; display: flex; align-items: center; gap: 10px; border-left: 1px solid #F1F2F5; }
.pg-svcp-ledger-row .protect .ic { color: #12996B; }

/* ---------- Runway, corner-numeral variant (big faded number top-right, first built for EdTech) ---------- */
.pg-svcp-runway2-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
@media (max-width: 900px) { .pg-svcp-runway2-grid { grid-template-columns: 1fr 1fr !important; } }
.pg-svcp-runway2-card { position: relative; background: #fff; border: 1px solid #ECEEF2; border-top: 4px solid; border-radius: 3px; padding: 28px 26px 26px; overflow: hidden; }
.pg-svcp-runway2-num { position: absolute; top: -12px; right: 8px; font: 800 88px/1 'Bricolage Grotesque', sans-serif; opacity: .07; }
.pg-svcp-runway2-body { position: relative; }
.pg-svcp-runway2-body .wk { font: 600 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; margin-bottom: 10px; }
.pg-svcp-runway2-body .t { font: 700 17px/1.2 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 12px; }
.pg-svcp-runway2-body .d { font: 400 13px/1.55 'Hanken Grotesk', sans-serif; color: #5A5F6E; }

/* ---------- Who-we-serve card with a colored context badge (variant of profile-card) ---------- */
.pg-svcp-profile-card .badge { font: 600 12px/1.5 'Hanken Grotesk', sans-serif; padding: 8px 12px; border-radius: 6px; display: inline-block; margin-bottom: 16px; }

/* ---------- Mid-page pill CTA (centered rounded banner, first built for EdTech) ---------- */
.pg-svcp-pillcta-wrap { max-width: 1240px; margin: 0 auto; padding: 8px 64px 80px; }
/* Aug-6 John-band redesign: former white pill is now the red gradient band */
.pg-svcp-pillcta { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; background: linear-gradient(90deg,#CB0E2A,#E11D33); border: none; border-radius: 12px; padding: 30px 38px; box-shadow: 0 8px 28px rgba(20,30,55,.06); }
.pg-svcp-pillcta .tag { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .14em; color: rgba(255,255,255,.85); }
.pg-svcp-pillcta .msg { font: 600 16px/1.4 'Hanken Grotesk', sans-serif; color: #fff; }
.pg-svcp-pillcta .go { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #CB0E2A; padding: 13px 26px; border-radius: 5px; font: 700 14px/1 'Hanken Grotesk', sans-serif; }

/* ---------- Balance map / quadrant ---------- */
.pg-svcp-map-panel { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; background: #0C1A3A; border-radius: 3px; padding: 44px; box-shadow: 0 24px 60px rgba(14,16,22,.26); }
@media (max-width: 900px) { .pg-svcp-map-panel { grid-template-columns: 1fr !important; } }
.pg-svcp-map-panel svg { width: 100%; height: auto; }
.pg-svcp-map-legend { display: flex; flex-direction: column; gap: 14px; }
.pg-svcp-map-legend-row { display: flex; gap: 14px; align-items: flex-start; }
.pg-svcp-map-legend-icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; color: #0C1A3A; display: flex; align-items: center; justify-content: center; font: 700 12px/1 'Hanken Grotesk', sans-serif; }
.pg-svcp-map-legend-row .title { font: 700 13.5px/1.3 'Hanken Grotesk', sans-serif; color: #fff; }
.pg-svcp-map-legend-row .desc { font: 400 12.5px/1.45 'Hanken Grotesk', sans-serif; color: #C2C8D4; margin-top: 3px; }
.pg-svcp-quote-card { display: flex; gap: 26px; padding: 36px 40px; background: #F7F8FA; border: 1px solid #E8EAEF; border-radius: 3px; margin-top: 40px; }
.pg-svcp-quote-card img { flex-shrink: 0; width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }
.pg-svcp-quote-tag { display: inline-block; font: 600 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #fff; background: #CB0E2A; padding: 6px 11px; border-radius: 6px; margin-bottom: 16px; }
.pg-svcp-quote-card blockquote, .pg-svcp-quote-card p.q { font: 500 22px/1.5 'Bricolage Grotesque', sans-serif; letter-spacing: -0.01em; color: #14161E; margin: 0 0 16px; max-width: 880px; }
.pg-svcp-quote-attr { font: 600 13.5px/1.4 'Hanken Grotesk', sans-serif; }
.pg-svcp-quote-attr span { font-weight: 400; color: #5F6675; }
/* dark variant (used on Licence Test section) */
.pg-svcp-quote-card.dark { background: #15294F; border-color: rgba(255,255,255,.08); }
.pg-svcp-quote-card.dark .pg-svcp-quote-tag { background: #15294F; }
.pg-svcp-quote-card.dark blockquote, .pg-svcp-quote-card.dark p.q { color: #fff; }
.pg-svcp-quote-card.dark .pg-svcp-quote-attr { color: #E7ECF3; }
.pg-svcp-quote-card.dark .pg-svcp-quote-attr span { color: #C2C8D4; }

/* ---------- Competitive delta / card pair ---------- */
.pg-svcp-pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 800px) { .pg-svcp-pair-grid { grid-template-columns: 1fr !important; } }
.pg-svcp-pair-card { background: #fff; border: 1px solid #ECEEF2; border-top: 4px solid #E5484D; border-radius: 3px; padding: 32px 34px; }
.pg-svcp-pair-card.win { border-top-color: #46C2A8; background: #0C1A3A; }
.pg-svcp-pair-title { font: 700 15px/1 'Hanken Grotesk', sans-serif; letter-spacing: .06em; color: #E5484D; margin-bottom: 6px; }
.pg-svcp-pair-card.win .pg-svcp-pair-title { color: #46C2A8; }
.pg-svcp-pair-sub { font: 400 13px/1.5 'Hanken Grotesk', sans-serif; color: #5A5F6E; margin-bottom: 22px; }
.pg-svcp-pair-card.win .pg-svcp-pair-sub { color: #C2C8D4; }
.pg-svcp-pair-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #F1F2F5; }
.pg-svcp-pair-card.win .pg-svcp-pair-row { border-bottom-color: rgba(255,255,255,.08); }
.pg-svcp-pair-row:last-child { border-bottom: none; }
.pg-svcp-pair-row .ic { flex-shrink: 0; color: #E5484D; font-size: 15px; }
.pg-svcp-pair-card.win .pg-svcp-pair-row .ic { color: #46C2A8; }
.pg-svcp-pair-row .k { font: 700 12.5px/1.3 'Hanken Grotesk', sans-serif; color: #14161E; width: 140px; flex-shrink: 0; }
.pg-svcp-pair-card.win .pg-svcp-pair-row .k { color: #fff; }
.pg-svcp-pair-row .v { font: 400 13px/1.3 'Hanken Grotesk', sans-serif; color: #E5484D; }
.pg-svcp-pair-card.win .pg-svcp-pair-row .v { color: #46C2A8; }

/* ---------- Risk matrix table ---------- */
.pg-svcp-matrix { border-radius: 3px; overflow: hidden; border: 1px solid #E8EAEF; box-shadow: 0 12px 34px rgba(20,22,30,.06); background: #fff; }
.pg-svcp-matrix-head { display: grid; grid-template-columns: 1fr 1.4fr 1.7fr; padding: 16px 28px; background: #0C1A3A; color: #E7EAF1; font: 600 13px/1.3 'Hanken Grotesk', sans-serif; letter-spacing: .04em; }
.pg-svcp-matrix-row { display: grid; grid-template-columns: 1fr 1.4fr 1.7fr; padding: 18px 28px; border-bottom: 1px solid #EEF0F4; font: 400 13.5px/1.5 'Hanken Grotesk', sans-serif; align-items: start; }
.pg-svcp-matrix-row:last-child { border-bottom: none; }
.pg-svcp-matrix-row.tint { background: #FDF3E9; }
.pg-svcp-matrix-row .wedge { font: 600 11px/1.3 'Hanken Grotesk', sans-serif; color: #fff; background: #CB0E2A; padding: 3px 7px; border-radius: 5px; vertical-align: middle; margin-left: 6px; }
@media (max-width: 900px) { .pg-svcp-matrix-head, .pg-svcp-matrix-row { grid-template-columns: 1fr !important; gap: 6px; } }

/* ---------- Mid-page CTA (index card) ---------- */
.pg-svcp-index-cta { background: #fff; border: 1px solid #E4E7EC; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 34px rgba(20,30,55,.06); }
.pg-svcp-index-cta-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #F7F8FA; border-bottom: 1px solid #E4E7EC; padding: 14px 30px; font: 500 12px/1 'Hanken Grotesk', sans-serif; }
.pg-svcp-index-cta-head .k { color: #CB0E2A; letter-spacing: .13em; font-weight: 600; }
.pg-svcp-index-cta-head .v { color: #9097A4; }
.pg-svcp-index-cta-body { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 34px 40px; flex-wrap: wrap; }
.pg-svcp-index-cta-title { font: 700 25px/1.2 'Bricolage Grotesque', sans-serif; letter-spacing: -0.015em; color: #14161E; margin-bottom: 8px; max-width: 560px; }
.pg-svcp-index-cta-desc { font: 400 15px/1.5 'Hanken Grotesk', sans-serif; color: #5A6175; max-width: 560px; }
.pg-svcp-index-cta-contact { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.pg-svcp-index-cta-person { display: flex; align-items: center; gap: 13px; }
.pg-svcp-index-cta-person img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pg-svcp-index-cta-person .name { font: 700 15px/1.2 'Hanken Grotesk', sans-serif; color: #14161E; }
.pg-svcp-index-cta-person .role { font: 500 12px/1.3 'Hanken Grotesk', sans-serif; color: #9097A4; margin: 2px 0 3px; }
.pg-svcp-index-cta-person a { text-decoration: none; font: 700 15.5px/1 'Bricolage Grotesque', sans-serif; color: #CB0E2A; letter-spacing: -0.01em; }
.pg-svcp-index-cta-book { text-decoration: none; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; flex-shrink: 0; background: #CB0E2A; color: #fff; padding: 15px 30px; border-radius: 5px; font: 700 15px/1 'Hanken Grotesk', sans-serif; box-shadow: 0 12px 30px rgba(203,14,42,.28); transition: transform .16s ease; }
.pg-svcp-index-cta-book:hover { transform: translateY(-2px); color: #fff; }

/* ---------- Economics: benefit bars ---------- */
.pg-svcp-bars-panel { background: #fff; border: 1px solid #E8EAEF; border-radius: 3px; padding: 36px 40px; margin-bottom: 30px; box-shadow: 0 10px 30px rgba(20,22,30,.04); }
.pg-svcp-bar-row { display: flex; align-items: center; gap: 24px; margin-bottom: 26px; }
.pg-svcp-bar-row:last-child { margin-bottom: 0; }
.pg-svcp-bar-label { width: 280px; flex-shrink: 0; font: 600 14.5px/1.3 'Hanken Grotesk', sans-serif; color: #14161E; }
.pg-svcp-bar-track { flex: 1; height: 34px; background: #F3F4F7; border-radius: 8px; overflow: hidden; }
.pg-svcp-bar-fill { height: 100%; border-radius: 8px; display: flex; align-items: center; padding-left: 16px; font: 700 13px/1 'Hanken Grotesk', sans-serif; color: #fff; }
/* Side-by-side the fixed-width label leaves the track no room below ~700px (it collapses
   to 0 and the row pokes past the screen edge) — stack label above its bar instead.
   !important beats per-instance inline label widths. */
@media (max-width: 700px) {
	.pg-svcp-bar-row { flex-wrap: wrap; gap: 8px 24px; }
	.pg-svcp-bar-label { width: 100% !important; }
	.pg-svcp-bar-track { flex: 1 1 100%; }
}
.pg-svcp-bars-total { margin-top: 30px; padding-top: 26px; border-top: 1px solid #ECEEF2; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
/* Label renders BELOW the value (2026-08-04): the markup order is label-then-
   value inside an unclassed wrapper, flipped visually via flex order so no
   content edits are needed across the service pages using this component. */
.pg-svcp-bars-total > div:has(> .pg-svcp-bars-total-label) { display: flex; flex-direction: column; }
.pg-svcp-bars-total-label { order: 2; font: 500 12.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #646B7B; margin-top: 10px; }
.pg-svcp-bars-total-value { font: 700 40px/0.9 'Bricolage Grotesque', sans-serif; color: #14161E; letter-spacing: -0.02em; }
.pg-svcp-bars-multiplier { text-align: right; }
/* Label separator: a real dot glyph replacement (content now carries
   <span class="dot"></span> instead of &middot;) — visible inline dot on
   desktop; on smaller screens it becomes an invisible zero-size block,
   which breaks the label's two segments onto their own lines. */
.pg-svcp-bars-total-label .dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #9097A4; margin: 0 8px; vertical-align: middle; }
@media (max-width: 700px) {
	.pg-svcp-bars-multiplier { text-align: left; }
	.pg-svcp-bars-total-label { line-height: 1.7; }
	.pg-svcp-bars-total-label .dot { display: block; width: 0; height: 0; margin: 0; }
}
.pg-svcp-bars-multiplier .x { font: 700 56px/0.9 'Bricolage Grotesque', sans-serif; color: #CB0E2A; letter-spacing: -0.02em; }
.pg-svcp-bars-multiplier .k { font: 600 12.5px/1 'Hanken Grotesk', sans-serif; color: #5F6675; margin-top: 8px; }

.pg-svcp-driver-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
@media (max-width: 900px) { .pg-svcp-driver-grid { grid-template-columns: 1fr !important; } }

.pg-svcp-capsuite-panel { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .pg-svcp-capsuite-panel { grid-template-columns: 1fr !important; } }

.pg-svcp-driver-list { display: flex; flex-direction: column; gap: 16px; }
.pg-svcp-driver-card { background: #fff; border: 1px solid #ECEEF2; border-radius: 3px; padding: 26px 28px; display: flex; gap: 20px; }
.pg-svcp-driver-card .n { flex-shrink: 0; font: 700 22px/1 'Bricolage Grotesque', sans-serif; color: #CB0E2A; }
.pg-svcp-driver-card .t { font: 700 17px/1.3 'Bricolage Grotesque', sans-serif; margin-bottom: 7px; }
.pg-svcp-driver-card .d { font: 400 14px/1.55 'Hanken Grotesk', sans-serif; color: #5A5F6E; }
.pg-svcp-entity-proof { background: #0C1A3A; border-radius: 3px; padding: 38px; display: flex; flex-direction: column; }
.pg-svcp-entity-proof .tag { font: 600 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #FF6477; background: rgba(225,29,51,.14); padding: 6px 11px; border-radius: 6px; align-self: flex-start; margin-bottom: 24px; }
.pg-svcp-entity-proof .fig { font: 700 70px/0.86 'Bricolage Grotesque', sans-serif; color: #FF6477; letter-spacing: -0.02em; margin-bottom: 14px; }
.pg-svcp-entity-proof .t { font: 700 17px/1.3 'Bricolage Grotesque', sans-serif; color: #fff; margin-bottom: 16px; }
.pg-svcp-entity-proof .d { font: 400 14.5px/1.6 'Hanken Grotesk', sans-serif; color: #C2C8D4; margin: 0 0 auto; }
.pg-svcp-entity-proof .d strong { color: #fff; }
.pg-svcp-entity-proof .foot { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font: 400 12.5px/1.6 'Hanken Grotesk', sans-serif; color: #C2C8D4; }

/* ---------- Case-study article ---------- */
.pg-svcp-case { margin-top: 24px; background: #fff; border: 1px solid #E8EAEF; border-radius: 3px; overflow: hidden; box-shadow: 0 12px 34px rgba(20,22,30,.06); }
.pg-svcp-case-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 34px; background: #0C1A3A; }
.pg-svcp-case-head.alt { background: #15294F; }
.pg-svcp-case-head .tag { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .14em; color: #FF6477; }
.pg-svcp-case-head.alt .tag { color: #7FA8FF; }
.pg-svcp-case-head .meta { font: 500 13px/1 'Hanken Grotesk', sans-serif; color: #C2C8D4; }
.pg-svcp-case-body { padding: 34px; }
.pg-svcp-case-grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: #ECEEF2; border: 1px solid #ECEEF2; border-radius: 3px; overflow: hidden; margin-bottom: 28px; }
@media (max-width: 800px) { .pg-svcp-case-grid3 { grid-template-columns: 1fr !important; } }
.pg-svcp-case-grid3 > div { background: #fff; padding: 24px 26px; }
.pg-svcp-case-grid3 .k { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; margin-bottom: 12px; }
.pg-svcp-case-grid3 .v { font: 400 14.5px/1.55 'Hanken Grotesk', sans-serif; color: #5A5F6E; }
.pg-svcp-case-grid3 .v strong { color: #14161E; }
.pg-svcp-case-metrics-label { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .12em; color: #646B7B; margin-bottom: 16px; }
.pg-svcp-case-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 28px; }
@media (max-width: 900px) { .pg-svcp-case-metrics { grid-template-columns: 1fr 1fr !important; } }
.pg-svcp-case-metrics.cols-3 { grid-template-columns: repeat(3,1fr); }
.pg-svcp-case-metric { background: #F7F8FA; border: 1px solid #ECEEF2; border-radius: 3px; padding: 22px; }
.pg-svcp-case-metric .fig { font: 700 32px/0.95 'Bricolage Grotesque', sans-serif; letter-spacing: -0.02em; margin-bottom: 9px; }
.pg-svcp-case-metric .k { font: 600 12.5px/1.35 'Hanken Grotesk', sans-serif; color: #14161E; margin-bottom: 4px; }
.pg-svcp-case-metric .d { font: 400 11.5px/1.4 'Hanken Grotesk', sans-serif; color: #5F6675; }
.pg-svcp-case-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 22px 26px; background: linear-gradient(90deg,#CB0E2A,#E11D33); border-radius: 3px; }
.pg-svcp-case-band .fig { font: 700 38px/0.9 'Bricolage Grotesque', sans-serif; color: #fff; letter-spacing: -0.02em; }
.pg-svcp-case-band .lbl { font: 600 13.5px/1.4 'Hanken Grotesk', sans-serif; color: #FCE9EB; }
.pg-svcp-case-band .reviewer { font: 500 12px/1.5 'Hanken Grotesk', sans-serif; color: #FCE9EB; text-align: right; }
.pg-svcp-case-band .reviewer strong { color: #fff; }
/* Smaller screens: case band stacks, "Reviewed by …" attribution aligns left
   (mirrors the industry-page rule). */
@media (max-width: 700px) {
	.pg-svcp-case-band { flex-direction: column; align-items: flex-start; }
	.pg-svcp-case-band .reviewer { text-align: left !important; }
}
.pg-svcp-case-disclaimer { font: 400 13px/1.55 'Hanken Grotesk', sans-serif; color: #9097A4; margin-top: 14px; max-width: 900px; }
.pg-svcp-case-disclaimer strong { color: #5A5F6E; }
.pg-svcp-case-insight { margin-top: 24px; padding: 22px 26px; background: #FDF6EE; border: 1px solid #F3DFC4; border-radius: 3px; }
.pg-svcp-case-insight .k { font: 500 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .12em; color: #B45309; margin-bottom: 12px; }
.pg-svcp-case-insight p { font: 400 15px/1.62 'Hanken Grotesk', sans-serif; color: #5A4A33; margin: 0; }
.pg-svcp-case-insight p strong { color: #3A2E1C; }
.pg-svcp-case-attr { font: 500 12px/1.5 'Hanken Grotesk', sans-serif; color: #8A90A0; margin-top: 18px; }
.pg-svcp-case-attr strong { color: #14161E; }
.pg-svcp-case-note { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .12em; color: #8A90A0; margin-bottom: 16px; }
.pg-svcp-case-note .flag { color: #B45309; }

/* ---------- Seat lens table ---------- */
.pg-svcp-seatlens-label { font: 600 12px/1.4 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #8A90A0; margin-bottom: 14px; }
.pg-svcp-seatlens { border-radius: 3px; overflow: hidden; border: 1px solid #E8EAEF; box-shadow: 0 12px 34px rgba(20,22,30,.06); margin-bottom: 46px; }
.pg-svcp-seatlens-head { display: grid; grid-template-columns: 1.6fr 1fr 1fr; padding: 16px 26px; background: #0C1A3A; color: #E7EAF1; font: 600 13px/1.3 'Hanken Grotesk', sans-serif; letter-spacing: .04em; }
.pg-svcp-seatlens-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; padding: 17px 26px; border-bottom: 1px solid #EEF0F4; font: 400 14px/1.45 'Hanken Grotesk', sans-serif; align-items: center; }
.pg-svcp-seatlens-row:last-child { border-bottom: none; }
.pg-svcp-seatlens-row.tint { background: #FAFBFC; }
.pg-svcp-seatlens-row span:nth-child(2), .pg-svcp-seatlens-row span:nth-child(3) { text-align: right; }
@media (max-width: 700px) { .pg-svcp-seatlens-head, .pg-svcp-seatlens-row { grid-template-columns: 1fr !important; } .pg-svcp-seatlens-row span:nth-child(2), .pg-svcp-seatlens-row span:nth-child(3) { text-align: left; } }

/* ---------- Companion-case METRIC/BEFORE/AFTER/READ table (Healthtech HT-084, Life Sciences LF-093) ---------- */
.pg-svcp-metrictable-head, .pg-svcp-metrictable-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; }
.pg-svcp-metrictable-head { padding: 14px 26px; background: #0C1A3A; color: #E7EAF1; font: 600 12.5px/1.3 'Hanken Grotesk', sans-serif; letter-spacing: .03em; }
.pg-svcp-metrictable-row { padding: 18px 26px; border-bottom: 1px solid #EEF0F4; font: 400 14px/1.4 'Hanken Grotesk', sans-serif; align-items: center; background: #fff; }
.pg-svcp-metrictable-row:last-child { border-bottom: none; }
.pg-svcp-metrictable-row.tint { background: #FAFBFC; }
@media (max-width: 700px) { .pg-svcp-metrictable-head, .pg-svcp-metrictable-row { grid-template-columns: 1fr !important; gap: 4px; } }
/* Smaller screens: rows lose their side padding (the labeled-card layout from
   responsive-tables.css supplies its own rhythm; the 26px inset doubled up
   with the surrounding container's padding). */
@media (max-width: 900px) {
	.pg-svcp-metrictable-row { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ---------- Cost simulator ---------- */
.pg-svcp-simulator { background: #0C1A3A; border-radius: 3px; padding: 40px; box-shadow: 0 30px 70px rgba(14,16,22,.28); }
.pg-svcp-sim-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 44px; align-items: start; }
@media (max-width: 900px) { .pg-svcp-sim-grid { grid-template-columns: 1fr !important; } }
.pg-svcp-sim-label { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .12em; color: #C2C8D4; margin-bottom: 18px; }
.pg-svcp-sim-tabs { display: flex; gap: 8px; margin-bottom: 30px; flex-wrap: wrap; }
.pg-svcp-sim-tab {
	flex: 1; text-align: center; cursor: pointer; padding: 10px 16px; border-radius: 6px; font: 600 12.5px/1 'Hanken Grotesk', sans-serif;
	background: rgba(255,255,255,.06); color: #C2C8D4; border: 1px solid rgba(255,255,255,.1); transition: all .15s ease;
}
.pg-svcp-sim-tab.active { background: #CB0E2A; color: #fff; border-color: #CB0E2A; }
.pg-svcp-sim-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.pg-svcp-sim-row .lbl { font: 600 12.5px/1 'Hanken Grotesk', sans-serif; color: #C6CEDD; }
.pg-svcp-sim-row .val { font: 700 22px/1 'Bricolage Grotesque', sans-serif; color: #fff; }
.pg-svcp-sim-row .val small { font-size: 13px; font-weight: 500; color: #C2C8D4; }
.pg-svcp-sim-slider { width: 100%; accent-color: #CB0E2A; cursor: pointer; }
.pg-svcp-sim-slider-labels { display: flex; justify-content: space-between; font: 500 11.5px/1 'Hanken Grotesk', sans-serif; color: #6B778C; margin-top: 8px; }
.pg-svcp-sim-selected { margin-top: 26px; padding: 16px 18px; background: #15294F; border: 1px solid rgba(255,255,255,.08); border-radius: 3px; }
.pg-svcp-sim-selected .k { font: 500 11px/1.3 'Hanken Grotesk', sans-serif; color: #C2C8D4; margin-bottom: 7px; }
.pg-svcp-sim-selected .v { font: 700 15px/1.3 'Bricolage Grotesque', sans-serif; color: #fff; }
.pg-svcp-sim-out-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 500px) { .pg-svcp-sim-out-grid { grid-template-columns: 1fr !important; } }
.pg-svcp-sim-out-card { background: #15294F; border: 1px solid rgba(255,255,255,.08); border-radius: 3px; padding: 22px; }
.pg-svcp-sim-out-card .k { font: 500 11px/1.3 'Hanken Grotesk', sans-serif; color: #C2C8D4; margin-bottom: 12px; }
.pg-svcp-sim-out-card .v { font: 700 34px/0.9 'Bricolage Grotesque', sans-serif; color: #fff; letter-spacing: -0.02em; }
.pg-svcp-sim-out-card .v.green { color: #46C2A8; }
.pg-svcp-sim-out-card .sub { font: 500 11px/1.4 'Hanken Grotesk', sans-serif; color: #C2C8D4; margin-top: 8px; }
.pg-svcp-sim-hidden { background: linear-gradient(135deg,#14B981 0%,#0E9468 100%); border-radius: 3px; padding: 22px 24px; }
.pg-svcp-sim-hidden .k { font: 500 11px/1.3 'Hanken Grotesk', sans-serif; color: #CFF3E5; margin-bottom: 9px; }
.pg-svcp-sim-hidden .v { font: 700 18px/1.3 'Bricolage Grotesque', sans-serif; color: #fff; }

.pg-svcp-dial-segbar { display: flex; height: 30px; border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.pg-svcp-dial-legend { display: flex; gap: 18px; flex-wrap: wrap; }
.pg-svcp-dial-legend-item { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 'Hanken Grotesk', sans-serif; color: #C6CEDD; }
.pg-svcp-dial-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.pg-svcp-dial-note { margin-top: 18px; font: 500 12.5px/1.5 'Hanken Grotesk', sans-serif; padding: 14px 16px; background: #15294F; border: 1px solid rgba(255,255,255,.08); border-radius: 3px; }

.pg-svcp-pivot { background: #FDEFF0; border: 1px solid #F3C7CD; border-left: 3px solid #CB0E2A; border-radius: 3px; padding: 32px 36px; margin-top: 26px; }
.pg-svcp-pivot-label { font: 600 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #CB0E2A; margin-bottom: 16px; }
.pg-svcp-pivot p { font: 400 16.5px/1.62 'Hanken Grotesk', sans-serif; color: #42475A; max-width: 940px; margin: 0 0 14px; }
.pg-svcp-pivot p strong { color: #14161E; }
.pg-svcp-pivot-fine { font: 400 12.5px/1.55 'Hanken Grotesk', sans-serif; color: #8A5760; margin-top: 18px; padding-top: 16px; border-top: 1px solid #F3C7CD; }
.pg-svcp-pivot-fine strong { color: #7A4A50; }
.pg-svcp-pivot-cta { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; background: #CB0E2A; color: #fff; padding: 15px 26px; border-radius: 4px; font: 700 14px/1 'Hanken Grotesk', sans-serif; text-decoration: none; box-shadow: 0 12px 30px rgba(203,14,42,.28); transition: transform .16s ease; }
.pg-svcp-pivot-cta:hover { transform: translateY(-2px); color: #fff; }

/* ---------- Rate card ---------- */
.pg-svcp-ratecard { border-radius: 3px; overflow: hidden; border: 1px solid #E8EAEF; box-shadow: 0 12px 34px rgba(20,22,30,.06); }
.pg-svcp-ratecard-head { display: grid; grid-template-columns: 1.9fr 0.8fr 1.9fr 0.8fr; padding: 16px 28px; background: #0C1A3A; color: #E7EAF1; font: 600 13px/1.3 'Hanken Grotesk', sans-serif; letter-spacing: .04em; }
.pg-svcp-ratecard-row { display: grid; grid-template-columns: 1.9fr 0.8fr 1.9fr 0.8fr; padding: 16px 28px; border-bottom: 1px solid #EEF0F4; font: 400 13.5px/1.45 'Hanken Grotesk', sans-serif; align-items: center; }
.pg-svcp-ratecard-row:last-child { border-bottom: none; }
.pg-svcp-ratecard-row.premium { background: #FFF7E9; }
.pg-svcp-ratecard-row .rate { color: #0E7A56; font-weight: 600; }
.pg-svcp-ratecard-row.premium .rate { color: #B45309; font-weight: 700; }
.pg-svcp-ratecard-row .tier { text-align: right; color: #8A90A0; font: 600 12px/1 'Hanken Grotesk', sans-serif; }
.pg-svcp-ratecard-row.premium .tier { color: #B45309; }
@media (max-width: 900px) { .pg-svcp-ratecard-head, .pg-svcp-ratecard-row { grid-template-columns: 1fr !important; gap: 4px; } .pg-svcp-ratecard-row .tier { text-align: left; } }

/* ---------- Pricing-topography 4-col table (Biotech science-literate, Life Sciences compound-cap) ---------- */
.pg-svcp-topography-head, .pg-svcp-topography-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.8fr; }
@media (max-width: 900px) { .pg-svcp-topography-head, .pg-svcp-topography-row { grid-template-columns: 1fr !important; gap: 4px; } }

/* ---------- Onboarding runway ---------- */
.pg-svcp-runway { position: relative; }
.pg-svcp-runway-track { position: absolute; top: 21px; left: 7%; right: 7%; height: 3px; background: linear-gradient(90deg,#2F6FED,#7C5CFC,#FFB020,#12996B); border-radius: 2px; }
.pg-svcp-runway-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; position: relative; }
@media (max-width: 800px) { .pg-svcp-runway-grid { grid-template-columns: 1fr 1fr !important; } .pg-svcp-runway-track { display: none; } }
.pg-svcp-runway-step { text-align: center; }
.pg-svcp-runway-num { width: 46px; height: 46px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font: 800 17px/1 'Bricolage Grotesque', sans-serif; margin: 0 auto 20px; }
.pg-svcp-runway-week { font: 600 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; margin-bottom: 9px; }
.pg-svcp-runway-title { font: 700 16px/1.2 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 10px; }
.pg-svcp-runway-desc { font: 400 13px/1.55 'Hanken Grotesk', sans-serif; color: #5A5F6E; max-width: 240px; margin: 0 auto; }

/* ---------- Licence test / why-fails cards ---------- */
.pg-svcp-test-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 30px; }
@media (max-width: 900px) { .pg-svcp-test-grid { grid-template-columns: 1fr !important; } }
.pg-svcp-test-card { background: #fff; border: 1px solid #E8EAEF; border-radius: 3px; padding: 30px; border-top: 3px solid #CB0E2A; box-shadow: 0 8px 24px rgba(20,30,55,.05); }
.pg-svcp-test-card .n { font: 700 28px/1 'Bricolage Grotesque', sans-serif; color: #CB0E2A; margin-bottom: 16px; }
.pg-svcp-test-card .t { font: 700 19px/1.25 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 11px; }
.pg-svcp-test-card .d { font: 400 14px/1.55 'Hanken Grotesk', sans-serif; color: #5A5F6E; margin-bottom: 18px; }
.pg-svcp-test-card .demand { display: block; font: 600 12.5px/1.4 'Hanken Grotesk', sans-serif; color: #CB0E2A; background: #FBEDEF; padding: 9px 13px; border-radius: 8px; }
.pg-svcp-arch-panel { background: #EDF8F2; border: 1px solid #C9E9DC; border-radius: 3px; padding: 38px 40px; }
.pg-svcp-arch-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.pg-svcp-arch-head .tag { font: 600 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #0E7A56; background: #D6F1E5; padding: 7px 12px; border-radius: 6px; }
.pg-svcp-arch-head .note { font: 500 13px/1 'Hanken Grotesk', sans-serif; color: #5A5F6E; }
.pg-svcp-arch-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 800px) { .pg-svcp-arch-grid { grid-template-columns: 1fr !important; } }
.pg-svcp-arch-grid .t { font: 700 16px/1.3 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 9px; }
.pg-svcp-arch-grid .d { font: 400 13.5px/1.55 'Hanken Grotesk', sans-serif; color: #5A5F6E; }

/* ---------- Operational boundaries / anti-sell ---------- */
.pg-svcp-antisell { background: #F4F6FA; color: #454C5B; border-top: 1px solid #E4E7EC; }
.pg-svcp-antisell .pg-svcp-h2 { color: #14161E !important; }
.pg-svcp-antisell-list { display: flex; flex-direction: column; gap: 16px; }
.pg-svcp-antisell-item { display: flex; gap: 24px; align-items: flex-start; background: #fff; border: 1px solid #E8EAEF; border-left: 3px solid #CB0E2A; border-radius: 3px; padding: 30px 34px; }
.pg-svcp-antisell-item .n { flex-shrink: 0; font: 700 30px/0.9 'Bricolage Grotesque', sans-serif; color: #CB0E2A; letter-spacing: -0.02em; }
.pg-svcp-antisell-item .t { font: 700 19px/1.3 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 10px; }
.pg-svcp-antisell-item p { font: 400 15px/1.62 'Hanken Grotesk', sans-serif; color: #4D5260; margin: 0; }

/* ---------- Closing CTA (spotlight, red) ---------- */
.pg-svcp-closing-cta { position: relative; overflow: hidden; background: radial-gradient(120% 150% at 78% -10%, #E11D33 0%, #CB0E2A 46%, #9E0A20 100%); color: #fff; }
.pg-svcp-closing-glow-1 { position: absolute; top: -140px; right: -90px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); border-radius: 50%; animation: pgSvcpFloatY 9s ease-in-out infinite; }
.pg-svcp-closing-glow-2 { position: absolute; bottom: -160px; left: -110px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(0,0,0,.18), transparent 70%); border-radius: 50%; }
@keyframes pgSvcpFloatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.pg-svcp-closing-cta-inner { max-width: 1100px; margin: 0 auto; padding: 132px 64px; position: relative; text-align: center; }
.pg-svcp-closing-tag { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); padding: 9px 17px; border-radius: 999px; font: 600 12.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .14em; color: #fff; margin-bottom: 30px; }
.pg-svcp-closing-tag .dot { width: 7px; height: 7px; background: #fff; border-radius: 50%; }
.pg-svcp-closing-h2 { font: 700 60px/1.04 'Bricolage Grotesque', sans-serif !important; letter-spacing: -0.03em; margin: 0 auto 28px !important; max-width: 920px; color: #fff !important; }
.pg-svcp-closing-sub { font: 400 20px/1.62 'Hanken Grotesk', sans-serif !important; color: #FCE3E7 !important; max-width: 680px; margin: 0 auto 46px !important; }
.pg-svcp-closing-btn { display: inline-flex; align-items: center; gap: 11px; background: #fff; color: #CB0E2A; padding: 21px 44px; border-radius: 5px; font: 700 17px/1 'Hanken Grotesk', sans-serif; text-decoration: none; box-shadow: 0 20px 50px rgba(0,0,0,.28); transition: transform .16s ease, box-shadow .16s ease; }
.pg-svcp-closing-btn:hover { transform: translateY(-3px); box-shadow: 0 26px 60px rgba(0,0,0,.34); color: #CB0E2A; }
.pg-svcp-closing-fine { margin-top: 26px; font: 500 14px/1.6 'Hanken Grotesk', sans-serif; color: #F7C9CF; }
.pg-svcp-closing-fine strong { color: #fff; }

/* ---------- White paper ---------- */
.pg-svcp-wp-section { background: #EDEFF3; color: #14161E; }
.pg-svcp-wp-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 60px; align-items: center; }
@media (max-width: 900px) { .pg-svcp-wp-grid { grid-template-columns: 1fr !important; } }
.pg-svcp-wp-cover-outer { position: relative; }
.pg-svcp-wp-cover-backdrop { position: absolute; inset: 0; transform: rotate(-4deg) translate(-10px, 8px); background: #15294F; border: 1px solid rgba(255,255,255,.06); border-radius: 3px; }
.pg-svcp-wp-cover-wrap { position: relative; background: #0F1F44; border: 1px solid rgba(255,255,255,.1); border-radius: 3px; padding: 14px; box-shadow: 0 30px 70px rgba(0,0,0,.4); }
.pg-svcp-wp-cover-wrap img { display: block; width: 100%; height: 440px; border-radius: 8px; object-fit: cover; object-position: top center; }
.pg-svcp-wp-cover-badge { position: absolute; top: 26px; left: 0; background: #15294F; color: #fff; font: 600 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .12em; padding: 8px 14px 8px 26px; border-radius: 0 6px 6px 0; box-shadow: 0 6px 18px rgba(21,41,79,.45); }
.pg-svcp-wp-h2 { font: 700 42px/1.1 'Bricolage Grotesque', sans-serif !important; letter-spacing: -0.022em; margin: 0 0 20px !important; color: #14161E !important; max-width: 640px; }
.pg-svcp-wp-desc { font: 400 17px/1.62 'Hanken Grotesk', sans-serif; color: #5A5F6E; max-width: 620px; margin: 0 0 28px; }
.pg-svcp-wp-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.pg-svcp-wp-pills span { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 'Hanken Grotesk', sans-serif; color: #42475A; background: #fff; border: 1px solid #DDE1E8; padding: 9px 13px; border-radius: 8px; }
.pg-svcp-wp-toc { border-top: 1px solid #DADEE6; padding-top: 24px; margin-bottom: 30px; }
.pg-svcp-wp-toc-label { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .12em; color: #646B7B; margin-bottom: 16px; }
.pg-svcp-wp-toc-item { display: flex; gap: 12px; font: 400 14.5px/1.55 'Hanken Grotesk', sans-serif; color: #42475A; margin-bottom: 13px; }
.pg-svcp-wp-toc-item .arrow { color: #12996B; font-weight: 700; }
.pg-svcp-wp-cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pg-svcp-wp-download { display: inline-flex; align-items: center; gap: 10px; background: #CB0E2A; color: #fff; padding: 16px 28px; border-radius: 4px; font: 700 14.5px/1 'Hanken Grotesk', sans-serif; text-decoration: none; box-shadow: 0 12px 30px rgba(203,14,42,.32); transition: transform .16s ease; }
.pg-svcp-wp-download:hover { transform: translateY(-2px); color: #fff; }
.pg-svcp-wp-cta-note { font: 500 12.5px/1.5 'Hanken Grotesk', sans-serif; color: #646B7B; }

/* ---------- Media & press ---------- */
/* Outer full-bleed wrapper (background lives here, never on the inner .pg-svcp-section). Two names exist because pages named this wp:group differently — .pg-svcp-media on Insurtech/Insurance/Healthtech/Healthcare/Fintech, .pg-svcp-media-section on AI/SaaS/Technology/Financial Services. Both must resolve identically. */
.pg-svcp-media, .pg-svcp-media-section { background: #EEF2F8; border-top: 1px solid #DEE5F0; }
.pg-svcp-media-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 46px; gap: 40px; flex-wrap: wrap; }
.pg-svcp-media-head h2 { font: 700 46px/1.06 'Bricolage Grotesque', sans-serif !important; letter-spacing: -0.022em; margin: 0 !important; max-width: 640px; }
.pg-svcp-media-head .note { flex-shrink: 0; font: 500 13px/1.5 'Hanken Grotesk', sans-serif; color: #5F6675; max-width: 280px; text-align: right; }
/* Smaller screens: the head wraps and the note drops below the heading —
   right-aligned text looks detached there, keep it left-aligned. */
@media (max-width: 700px) {
	.pg-svcp-media-head .note { text-align: left; }
}
.pg-svcp-media-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 26px; }
@media (max-width: 900px) { .pg-svcp-media-grid { grid-template-columns: 1fr !important; } }
.pg-svcp-media-card { background: #fff; border: 1px solid #ECEEF2; border-radius: 3px; padding: 26px 28px 28px; text-decoration: none; color: #14161E; display: flex; flex-direction: column; transition: all .2s ease; }
.pg-svcp-media-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,22,30,.08); border-color: #D9DDE5; color: #14161E; }
.pg-svcp-media-card-tags { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.pg-svcp-media-card-tags .tag { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; padding: 6px 11px; border-radius: 6px; }
.pg-svcp-media-card-tags .src { font: 500 12px/1 'Hanken Grotesk', sans-serif; color: #646B7B; }
.pg-svcp-media-card-title { font: 700 17px/1.35 'Bricolage Grotesque', sans-serif; letter-spacing: -0.01em; margin-bottom: 18px; }
.pg-svcp-media-card-link { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font: 600 13px/1 'Hanken Grotesk', sans-serif; color: #CB0E2A; }
.pg-svcp-media-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid #E4E7EC; }
.pg-svcp-media-foot .disc { font: 400 13.5px/1.55 'Hanken Grotesk', sans-serif; color: #646B7B; }
.pg-svcp-media-foot a { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font: 700 13.5px/1 'Hanken Grotesk', sans-serif; color: #CB0E2A; }

/* ---------- FAQ ---------- */
.pg-svcp-faq-section { background: #EEF2F8; border-top: 1px solid #DEE5F0; }
.pg-svcp-faq-columns { column-count: 2; column-gap: 20px; }
@media (max-width: 800px) { .pg-svcp-faq-columns { column-count: 1; } }
.pg-svcp-faq-columns details { background: #fff; border: 1px solid #ECEEF2; border-radius: 10px; overflow: hidden; margin: 0 0 16px; break-inside: avoid; -webkit-column-break-inside: avoid; }
.pg-svcp-faq-columns summary { cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px; font: 700 16px/1.4 'Bricolage Grotesque', sans-serif; color: #14161E; list-style: none; }
.pg-svcp-faq-columns summary::-webkit-details-marker { display: none; }
.pg-svcp-faq-columns .ic { flex-shrink: 0; font: 300 28px/0.7 'Hanken Grotesk', sans-serif; color: #CB0E2A; transition: transform .22s ease; }
.pg-svcp-faq-columns details[open] .ic { transform: rotate(45deg); }
.pg-svcp-faq-columns details[open] summary { color: #CB0E2A; }
.pg-svcp-faq-columns details[open] { border-color: #F3C7CD; box-shadow: 0 12px 32px rgba(203,14,42,.08); }
.pg-svcp-faq-a { padding: 0 24px 22px; font: 400 14.5px/1.62 'Hanken Grotesk', sans-serif; color: #5A5F6E; }
.pg-svcp-faq-a .attr { display: block; margin-top: 13px; font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; color: #CB0E2A; }
.pg-svcp-faq-foot { margin-top: 28px; padding-top: 20px; border-top: 1px solid #E4E7EC; font: 400 13.5px/1.55 'Hanken Grotesk', sans-serif; color: #7A7F8C; }

/* ---------- Segments pills ---------- */
/* Same dual-name situation as media above — .pg-svcp-segments is the name actually used on 11 of 12 pages, .pg-svcp-segments-section only on Financial Services. */
.pg-svcp-segments, .pg-svcp-segments-section { background: #EEF2F8; border-top: 1px solid #DEE5F0; }
.pg-svcp-segments-label-row { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.pg-svcp-segments-label-row .rule { width: 24px; height: 2px; background: #CB0E2A; }
.pg-svcp-segments-label-row .lbl { font: 700 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #646B7B; }
.pg-svcp-segments-pills { display: flex; flex-wrap: wrap; gap: 12px; }
/* Pills were plain <span>s originally; they are now <a> links to industry pages
   (2026-08-04) — both selectors kept so any un-migrated instance stays styled. */
.pg-svcp-segments-pills span,
.pg-svcp-segments-pills a { display: inline-flex; align-items: center; padding: 13px 22px; background: #fff; border: 1px solid #E4E7EC; border-radius: 999px; font: 600 14.5px/1 'Hanken Grotesk', sans-serif; color: #2A2E37; transition: all .15s ease; text-decoration: none; }
.pg-svcp-segments-pills span:hover,
.pg-svcp-segments-pills a:hover { border-color: #CB0E2A; color: #CB0E2A; }

/* ---------- Escalation ladder (tier-selector, Robotics & AVs) ---------- */
.pg-svcp-ladder { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 18px; background: #0C1A3A; border-radius: 3px; padding: 34px; box-shadow: 0 24px 60px rgba(14,16,22,.26); }
@media (max-width: 900px) { .pg-svcp-ladder { grid-template-columns: 1fr !important; } }
.pg-svcp-ladder-tabs { display: flex; flex-direction: column; gap: 10px; }
.pg-svcp-ladder-tab { cursor: pointer; background: #15294F; border: 1px solid rgba(255,255,255,.06); border-radius: 8px; padding: 16px 18px; transition: all .18s ease; }
.pg-svcp-ladder-tab .row { display: flex; align-items: center; justify-content: space-between; }
.pg-svcp-ladder-tab .name { font: 700 15px/1.2 'Bricolage Grotesque', sans-serif; color: #fff; }
.pg-svcp-ladder-tab .pct { font: 700 16px/1 'Bricolage Grotesque', sans-serif; }
.pg-svcp-ladder-tab.active { background: #1B3A6B; }
.pg-svcp-ladder-foot { margin-top: 8px; font: 400 12.5px/1.5 'Hanken Grotesk', sans-serif; color: #6B7A95; }
.pg-svcp-ladder-panel { background: #15294F; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 28px; }
.pg-svcp-ladder-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pg-svcp-ladder-badge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; font: 800 13px/1 'Bricolage Grotesque', sans-serif; color: #fff; flex-shrink: 0; }
.pg-svcp-ladder-panel-title { font: 700 19px/1.2 'Bricolage Grotesque', sans-serif; color: #fff; }
.pg-svcp-ladder-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.pg-svcp-ladder-stat-grid .k { font: 500 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; color: #8FA0BE; margin-bottom: 8px; }
.pg-svcp-ladder-stat-grid .v { font: 700 26px/1 'Bricolage Grotesque', sans-serif; color: #fff; }
.pg-svcp-ladder-stat-grid .v.accent { color: #46C2A8; }
.pg-svcp-ladder-who .k { font: 500 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; color: #8FA0BE; margin-bottom: 8px; }
.pg-svcp-ladder-who .v { font: 600 14.5px/1.45 'Hanken Grotesk', sans-serif; color: #fff; margin-bottom: 16px; }
.pg-svcp-ladder-example { font: 400 13.5px/1.55 'Hanken Grotesk', sans-serif; color: #C2C8D4; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }

/* ---------- Review pipeline volume bars (tabtoggle trigger variant, Legal Services) ---------- */
.pg-svcp-pipeline-bars { display: flex; align-items: flex-end; gap: 10px; height: 170px; margin-bottom: 30px; }
.pg-svcp-pipeline-bars .pg-svcp-tabtoggle-trigger { cursor: pointer; flex: 1; display: flex; flex-direction: column; align-items: stretch; height: 100%; background: none; border: none; padding: 0; }
.pg-svcp-pipeline-bars .n { font: 700 13px/1 'Bricolage Grotesque', sans-serif; color: #fff; margin-bottom: 8px; white-space: nowrap; }
.pg-svcp-pipeline-bars .bar { width: 100%; min-height: 14px; border-radius: 6px 6px 0 0; opacity: .78; transition: opacity .18s ease, box-shadow .18s ease; }
.pg-svcp-pipeline-bars .pg-svcp-tabtoggle-trigger.is-active .bar { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #CB0E2A; }

/* ---------- Incident-triage timeline (Robotics & AVs) ---------- */
.pg-svcp-itimeline { display: grid; grid-template-columns: repeat(5,1fr); gap: 0; align-items: stretch; }
@media (max-width: 900px) { .pg-svcp-itimeline { grid-template-columns: 1fr 1fr !important; } }
.pg-svcp-itimeline-step { position: relative; padding: 0 14px; }
.pg-svcp-itimeline-head { display: flex; align-items: center; margin-bottom: 18px; }
.pg-svcp-itimeline-num { width: 34px; height: 34px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font: 700 12px/1 'Bricolage Grotesque', sans-serif; flex-shrink: 0; z-index: 1; }
.pg-svcp-itimeline-line { flex: 1; height: 2px; }
.pg-svcp-itimeline-time { font: 700 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; margin-bottom: 10px; }
.pg-svcp-itimeline-title { font: 700 16px/1.2 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 9px; letter-spacing: -0.01em; }
.pg-svcp-itimeline-desc { font: 400 13px/1.5 'Hanken Grotesk', sans-serif; color: #5A5F6E; }

/* ---------- New for Live Chat Support: "Quick Read" definition card ---------- */
.pg-svcp-defcard-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .pg-svcp-defcard-grid { grid-template-columns: 1fr !important; } }
.pg-svcp-defcard { background: #0C1A3A; border-radius: 12px; padding: 34px 38px; box-shadow: 0 18px 44px rgba(14,16,22,.16); }
.pg-svcp-defcard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.pg-svcp-defcard-tag { display: inline-block; font: 700 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #fff; background: #CB0E2A; padding: 7px 12px; border-radius: 6px; }
.pg-svcp-defcard-updated { font: 500 11.5px/1 'Hanken Grotesk', sans-serif; color: #8FA0BE; }
.pg-svcp-defcard-lede { margin: 0 0 22px; font: 500 18px/1.55 'Hanken Grotesk', sans-serif; color: #fff; }
.pg-svcp-defcard-lede strong { color: #fff; }
.pg-svcp-defcard-rows { display: flex; flex-direction: column; }
.pg-svcp-defcard-row { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.pg-svcp-defcard-row:last-child { border-bottom: none; }
.pg-svcp-defcard-row .k { font: 600 12px/1.4 'Hanken Grotesk', sans-serif; letter-spacing: .04em; color: #9FB6DF; }
.pg-svcp-defcard-row .v { font: 400 14px/1.5 'Hanken Grotesk', sans-serif; color: #E7EAF1; }
@media (max-width: 560px) { .pg-svcp-defcard-row { grid-template-columns: 1fr !important; gap: 6px; } }

/* ---------- New for Live Chat Support: paired quote grid (Expert Voices) ---------- */
.pg-svcp-quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 800px) { .pg-svcp-quote-grid { grid-template-columns: 1fr !important; } }
.pg-svcp-quote-grid .pg-svcp-quote-card { margin-top: 0; height: 100%; }

/* ---------- New for Live Chat Support: 6-step runway2 modifier (Operational Reality) ---------- */
.pg-svcp-runway2-grid.six { grid-template-columns: repeat(3,1fr); }
@media (max-width: 900px) { .pg-svcp-runway2-grid.six { grid-template-columns: 1fr 1fr !important; } }

/* ---------- New for Live Chat Support: concurrency dial slider (reuses .pg-svcp-simulator shell) ---------- */
.pg-svcp-dial-slider { width: 100%; accent-color: #CB0E2A; cursor: pointer; }
.pg-svcp-dial-slider-labels { display: flex; justify-content: space-between; font: 500 11.5px/1 'Hanken Grotesk', sans-serif; color: #6B778C; margin-top: 8px; }

/* ---------- New for Live Chat Support: concurrency dial 3-stat output row + progress rail ---------- */
.pg-svcp-sim-out-grid.cols-3 { grid-template-columns: repeat(3,1fr); }
@media (max-width: 560px) { .pg-svcp-sim-out-grid.cols-3 { grid-template-columns: 1fr !important; } }
.pg-svcp-dial-rail { margin-top: 20px; height: 8px; background: #15294F; border-radius: 6px; overflow: hidden; }
.pg-svcp-dial-rail-fill { height: 100%; background: linear-gradient(90deg,#46C2A8,#FF6477); border-radius: 6px; }
.pg-svcp-dial-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pg-svcp-dial-steps li { background: #fff; border: 1px solid #ECEEF2; border-radius: 10px; border-left: 4px solid #46C2A8; padding: 22px 26px; }
.pg-svcp-dial-steps li:nth-child(2) { border-left-color: #FFB020; }
.pg-svcp-dial-steps li:nth-child(3) { border-left-color: #CB0E2A; }
.pg-svcp-dial-steps .t { font: 700 16px/1.3 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 7px; }
.pg-svcp-dial-steps .d { font: 400 14px/1.6 'Hanken Grotesk', sans-serif; color: #5A5F6E; }
.pg-svcp-dial-caption { margin-top: 24px; font: 400 13.5px/1.65 'Hanken Grotesk', sans-serif; color: #5F6675; max-width: 1000px; }

/* .pg-svcp-dial itself carries no rules of its own — it's the JS init hook for
   concurrency-dial.js (querySelectorAll('.pg-svcp-dial')), always co-applied with
   .pg-svcp-simulator for the actual dark-box container styling. Documented here so
   a class-existence grep doesn't flag it as an invented/typo'd class. */

/* ==========================================================================
   2026-07-23 CORRECTION PASS — Live Chat Support re-verified against the
   live-rendered handoff source (browser render, not static text extraction).
   The classes below replace/extend the first-draft guesses; see
   piton_service_template_and_live_chat.md for what was wrong and why.
   ========================================================================== */

/* ---------- Split card: dark text panel (left) + navy data panel (right) ----------
   Used by Trigger Machinery and The Real Denominator (Per-Resolved-Conversation Lens). */
.pg-svcp-splitcard { background: #0C1A3A; border-radius: 3px; overflow: hidden; display: grid; grid-template-columns: 1.15fr 0.85fr; max-width: 1112px; }
@media (max-width: 800px) { .pg-svcp-splitcard { grid-template-columns: 1fr !important; } }
.pg-svcp-splitcard-text { padding: 46px 44px; color: #fff; }
.pg-svcp-splitcard-eyebrow { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .14em; color: #FF6477; margin-bottom: 20px; }
.pg-svcp-splitcard-text h2 { font: 700 34px/1.15 'Bricolage Grotesque', sans-serif !important; letter-spacing: -0.02em; margin: 0 0 14px !important; color: #fff !important; }
.pg-svcp-splitcard-text p { font: 400 15px/1.65 'Hanken Grotesk', sans-serif; color: #C2C8D4; margin: 0 0 14px; max-width: 600px; }
.pg-svcp-splitcard-text p:last-child { margin-bottom: 0; }
.pg-svcp-splitcard-text p.foot { font: 400 13.5px/1.6 'Hanken Grotesk', sans-serif; color: #8FA0BE; }
.pg-svcp-splitcard-text a { color: #46C2A8; font-weight: 700; text-decoration: none; }
.pg-svcp-splitcard-data { background: #15294F; border-left: 1px solid rgba(255,255,255,.08); padding: 40px 38px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.pg-svcp-splitcard-data-label { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .12em; color: #8FA0BE; }
.pg-svcp-splitcard-list { display: flex; flex-direction: column; gap: 12px; }
.pg-svcp-splitcard-list > div { display: flex; align-items: center; gap: 11px; font: 500 13.5px/1.4 'Hanken Grotesk', sans-serif; color: #E7EAF1; }
.pg-svcp-splitcard-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pg-svcp-splitcard-data-foot { border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; font: 400 12.5px/1.55 'Hanken Grotesk', sans-serif; color: #8FA0BE; }
.pg-svcp-splitcard-arith { display: flex; flex-direction: column; gap: 14px; }
.pg-svcp-splitcard-arith-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 14px; }
.pg-svcp-splitcard-arith-row .k { font: 500 13.5px/1.4 'Hanken Grotesk', sans-serif; color: #C2C8D4; }
.pg-svcp-splitcard-arith-row .v { font: 700 20px/1 'Bricolage Grotesque', sans-serif; }
.pg-svcp-splitcard-arith-note { font: 600 14px/1.55 'Hanken Grotesk', sans-serif; color: #fff; }

/* ---------- Top-accent card grid (3-col, colored top border, radius 10px) ----------
   Used by Radical Transparency (numbered) and The Ramp to the Dial (labeled). */
.pg-svcp-topcard-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 900px) { .pg-svcp-topcard-grid { grid-template-columns: minmax(0, 1fr) !important; } }
.pg-svcp-topcard { background: #fff; border: 1px solid #ECEEF2; border-top: 4px solid #CB0E2A; border-radius: 10px; padding: 28px 30px; display: flex; flex-direction: column; gap: 12px; }
.pg-svcp-topcard .n { font: 700 13px/1 'Hanken Grotesk', sans-serif; color: #CB0E2A; }
.pg-svcp-topcard .t { font: 700 17.5px/1.3 'Bricolage Grotesque', sans-serif; color: #14161E; }
.pg-svcp-topcard p { margin: 0; font: 400 14px/1.62 'Hanken Grotesk', sans-serif; color: #5A5F6E; }
.pg-svcp-topcard-close { font: 600 15px/1.5 'Hanken Grotesk', sans-serif; color: #14161E; }

/* ---------- Icon-badge card grid (3-col, colored top border + colored icon square) ----------
   Used by The Philippine Bench (Geo-Nexus). */
.pg-svcp-iconcard-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width: 900px) { .pg-svcp-iconcard-grid { grid-template-columns: 1fr !important; } }
.pg-svcp-iconcard { background: #fff; border: 1px solid #ECEEF2; border-top: 3px solid #CB0E2A; border-radius: 3px; padding: 28px 30px; }
.pg-svcp-iconcard-ic { display: inline-flex; width: 40px; height: 40px; border-radius: 11px; align-items: center; justify-content: center; font: 700 15px/1 'Bricolage Grotesque', sans-serif; margin-bottom: 16px; }
.pg-svcp-iconcard .t { font: 700 18px/1.25 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 10px; }
.pg-svcp-iconcard .d { font: 400 14px/1.6 'Hanken Grotesk', sans-serif; color: #5A5F6E; }

/* ---------- Horizontal connected timeline (numbered circle nodes + through-line) ----------
   Used by On the Chat Floor (6 steps, light background) and How We Engage (5 steps, DARK
   background). The base rules below are the light-background design; the dark variant that
   follows them is required because the step titles are #14161E — near-black on the #0C1A3A
   band, i.e. invisible. Same root cause as the .pg-svcp-h2 !important case above: a
   component authored for one background reused on the other. */
.pg-svcp-htimeline { position: relative; }
.pg-svcp-htimeline-track { position: absolute; top: 23px; left: 8%; right: 8%; height: 2px; background: #E2E6EE; z-index: 0; }
.pg-svcp-htimeline-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6,1fr); gap: 0; position: relative; z-index: 1; }
@media (max-width: 900px) { .pg-svcp-htimeline-grid { grid-template-columns: repeat(3,1fr) !important; } .pg-svcp-htimeline-track { display: none; } }
@media (max-width: 560px) { .pg-svcp-htimeline-grid { grid-template-columns: 1fr 1fr !important; } }
.pg-svcp-htimeline-step { padding: 0 10px; text-align: center; }
.pg-svcp-htimeline-num { width: 48px; height: 48px; margin: 0 auto 18px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font: 700 18px/1 'Bricolage Grotesque', sans-serif; box-shadow: 0 0 0 6px #fff; }
.pg-svcp-htimeline-step .t { font: 700 15px/1.25 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 8px; }
.pg-svcp-htimeline-step .d { font: 400 12.5px/1.55 'Hanken Grotesk', sans-serif; color: #5A5F6E; }

/* Dark-band variant. Mirrors the .pg-svcp-section-dark-wrap treatment used for
   .pg-svcp-h2 / .pg-svcp-lede / .pg-svcp-badge-label above. The node ring is the band colour
   rather than #fff so it still masks the through-line instead of drawing a white halo. */
.pg-svcp-section-dark-wrap .pg-svcp-htimeline-step .t,
.pg-svcp-section.dark .pg-svcp-htimeline-step .t { color: #FFFFFF; }
.pg-svcp-section-dark-wrap .pg-svcp-htimeline-step .d,
.pg-svcp-section.dark .pg-svcp-htimeline-step .d { color: #AEB6C8; }
.pg-svcp-section-dark-wrap .pg-svcp-htimeline-track,
.pg-svcp-section.dark .pg-svcp-htimeline-track { background: rgba(255,255,255,.18); }
.pg-svcp-section-dark-wrap .pg-svcp-htimeline-num,
.pg-svcp-section.dark .pg-svcp-htimeline-num { box-shadow: 0 0 0 6px #0C1A3A; }

/* ---------- Story card: 2-col split (dark stats-left + white labeled-paragraphs-right) ----------
   Used by the primary client story (LV-084). */
.pg-svcp-storycard { background: #fff; border: 1px solid #E8EAEF; border-radius: 3px; overflow: hidden; }
.pg-svcp-storycard-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; }
/* minmax(0,1fr) + min-width:0 let the stacked cells actually shrink to the
   viewport — plain 1fr floors at min-content, and the stats flex row's
   no-wrap min-content (~418px) was propping the whole card open past phone
   width, where the card's overflow:hidden clipped the content's right edge. */
@media (max-width: 800px) {
	.pg-svcp-storycard-grid { grid-template-columns: minmax(0, 1fr) !important; }
	.pg-svcp-storycard-left,
	.pg-svcp-storycard-right { min-width: 0; }
	.pg-svcp-storycard-stats { flex-wrap: wrap; gap: 18px 26px; }
}
.pg-svcp-storycard-left { background: #0C1A3A; color: #fff; padding: 44px 42px; display: flex; flex-direction: column; }
.pg-svcp-storycard-left .tag { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .14em; color: #FF6477; margin-bottom: 22px; }
.pg-svcp-storycard-left h2 { font: 700 32px/1.18 'Bricolage Grotesque', sans-serif !important; letter-spacing: -0.02em; margin: 0 0 20px !important; color: #fff !important; }
.pg-svcp-storycard-left p { font: 400 15px/1.62 'Hanken Grotesk', sans-serif; color: #C2C8D4; margin: 0; }
.pg-svcp-storycard-stats { margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); display: flex; gap: 30px; }
.pg-svcp-storycard-stats .v { font: 700 30px/0.9 'Bricolage Grotesque', sans-serif; color: #fff; }
.pg-svcp-storycard-stats .v.accent { color: #46C2A8; }
.pg-svcp-storycard-stats .l { font: 500 11.5px/1.4 'Hanken Grotesk', sans-serif; color: #8FA0BE; margin-top: 6px; }
.pg-svcp-storycard-right { padding: 44px 42px; display: flex; flex-direction: column; gap: 24px; }
.pg-svcp-storycard-right .k { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; margin-bottom: 10px; }
.pg-svcp-storycard-right p { font: 400 14.5px/1.62 'Hanken Grotesk', sans-serif; color: #4D5260; margin: 0; }
.pg-svcp-storycard-quote { margin: 6px 0 0; padding: 20px 24px; background: #F7F8FA; border-left: 3px solid #CB0E2A; border-radius: 3px; }
.pg-svcp-storycard-quote p { font: 500 15px/1.6 'Hanken Grotesk', sans-serif; color: #14161E; margin: 0 0 12px; }
.pg-svcp-storycard-quote footer { font: 600 13px/1.4 'Hanken Grotesk', sans-serif; letter-spacing: .04em; color: #646B7B; }

/* ---------- File card: header bar + 2-col split (white labeled-paragraphs + off-white metric table) ----------
   Used by the companion case (LV-091). */
.pg-svcp-filecard { background: #fff; border: 1px solid #E8EAEF; border-radius: 3px; overflow: hidden; }
.pg-svcp-filecard-head { padding: 22px 42px; background: #F7F8FA; border-bottom: 1px solid #ECEEF2; }
.pg-svcp-filecard-head span { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .14em; color: #CB0E2A; }
.pg-svcp-filecard-grid { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 800px) { .pg-svcp-filecard-grid { grid-template-columns: 1fr !important; } }
.pg-svcp-filecard-left { padding: 40px 42px; display: flex; flex-direction: column; gap: 22px; border-right: 1px solid #ECEEF2; }
@media (max-width: 800px) { .pg-svcp-filecard-left { border-right: none; border-bottom: 1px solid #ECEEF2; } }
.pg-svcp-filecard-left h2 { font: 700 28px/1.2 'Bricolage Grotesque', sans-serif !important; letter-spacing: -0.02em; margin: 0 !important; color: #14161E !important; }
.pg-svcp-filecard-left .k { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; margin-bottom: 10px; }
.pg-svcp-filecard-left p { font: 400 14.5px/1.62 'Hanken Grotesk', sans-serif; color: #4D5260; margin: 0; }
.pg-svcp-filecard-right { padding: 40px 42px; display: flex; flex-direction: column; gap: 22px; background: #FAFBFC; }
.pg-svcp-filecard-right-label { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .14em; color: #12996B; }
.pg-svcp-filecard-insight { background: #fff; border: 1px solid #E8EAEF; border-left: 3px solid #CB0E2A; border-radius: 3px; padding: 20px 24px; }
.pg-svcp-filecard-insight .k { font: 600 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #CB0E2A; margin-bottom: 10px; }
.pg-svcp-filecard-insight p { margin: 0; font: 400 14px/1.62 'Hanken Grotesk', sans-serif; color: #4D5260; }
.pg-svcp-filecard-attr { margin-top: auto; font: 500 13px/1.5 'Hanken Grotesk', sans-serif; color: #646B7B; }

/* ---------- Bundle row (single-row link: tag pill | title | desc | arrow) ----------
   Used by Compose the Stack (integration map). */
.pg-svcp-bundlerows { display: flex; flex-direction: column; gap: 12px; }
.pg-svcp-bundlerow { text-decoration: none; display: grid; grid-template-columns: auto 200px 1fr auto; gap: 24px; align-items: center; background: #fff; border: 1px solid #ECEEF2; border-radius: 10px; padding: 22px 28px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pg-svcp-bundlerow:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,22,30,.08); border-color: #D9DDE5; }
@media (max-width: 800px) { .pg-svcp-bundlerow { grid-template-columns: auto 1fr !important; } .pg-svcp-bundlerow .desc { grid-column: 1 / -1 !important; } .pg-svcp-bundlerow .go { display: none; } }
.pg-svcp-bundlerow .tag { font: 700 13px/1 'Hanken Grotesk', sans-serif; color: #CB0E2A; background: #FCE9EB; padding: 9px 12px; border-radius: 6px; }
.pg-svcp-bundlerow .title { font: 700 17px/1.2 'Bricolage Grotesque', sans-serif; color: #14161E; }
.pg-svcp-bundlerow .desc { font: 400 14px/1.5 'Hanken Grotesk', sans-serif; color: #5A5F6E; }
.pg-svcp-bundlerow .desc strong { color: #14161E; }
.pg-svcp-bundlerow .go { color: #CB0E2A; font-size: 18px; }

/* ---------- Light quote card with real headshot (Expert Voices) ---------- */
.pg-svcp-lquote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .pg-svcp-lquote-grid { grid-template-columns: 1fr !important; } }
.pg-svcp-lquote { background: #F7F8FA; border: 1px solid #ECEEF2; border-radius: 14px; padding: 32px 34px; }
.pg-svcp-lquote p { font: 500 20px/1.5 'Bricolage Grotesque', sans-serif; letter-spacing: -0.01em; color: #14161E; margin: 0 0 22px; }
.pg-svcp-lquote-person { display: flex; align-items: center; gap: 14px; }
.pg-svcp-lquote-person img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.pg-svcp-lquote-person .name { font: 700 14px/1.3 'Hanken Grotesk', sans-serif; color: #14161E; }
.pg-svcp-lquote-person .role { font: 400 12.5px/1.3 'Hanken Grotesk', sans-serif; color: #5F6675; }

/* ---------- Closing CTA, flat variant (solid red, no gradient/glow) ---------- */
.pg-svcp-closing-flat { background: #CB0E2A; color: #fff; position: relative; overflow: hidden; }
.pg-svcp-closing-flat-inner { max-width: 1100px; margin: 0 auto; padding: 104px 64px; position: relative; text-align: center; }
.pg-svcp-closing-flat .pg-svcp-closing-tag { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); }
.pg-svcp-closing-flat h2 { font: 700 56px/1.05 'Bricolage Grotesque', sans-serif !important; letter-spacing: -0.03em; margin: 0 auto 26px !important; max-width: 880px; color: #fff !important; }
.pg-svcp-closing-flat .pg-svcp-closing-sub { color: #FCE3E7 !important; }

/* ---------- Ratecard tier-pill colors (role-specific, matches source exactly) ---------- */
.pg-svcp-ratecard-row .tier { display: inline-block; text-align: center; padding: 6px 10px; border-radius: 6px; font: 600 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .04em; color: #646B7B; background: #EEF0F3; }
.pg-svcp-ratecard-row .tier.green { color: #12996B; background: #E6F6F0; }
.pg-svcp-ratecard-row .tier.blue { color: #2F6FED; background: #EAF1FE; }
.pg-svcp-ratecard-row .tier.purple { color: #7C5CFC; background: #F1EDFE; }
.pg-svcp-ratecard-row .tier.navy { color: #0C1A3A; background: #E4E8F0; }
.pg-svcp-ratecard-row.premium { background: #FFF7F8; box-shadow: inset 3px 0 0 #CB0E2A; border-bottom-color: #F3C7CD; }
.pg-svcp-ratecard-row.premium .rate { color: #CB0E2A; }
.pg-svcp-ratecard-row.premium .tier { color: #CB0E2A; background: #FCE9EB; font-size: 10px; line-height: 1.3; }

/* ---------- Media & Press tag colors (role-specific) ---------- */
.pg-svcp-media-card-tags .tag.feature { color: #CB0E2A; background: #FCE9EB; }
.pg-svcp-media-card-tags .tag.analysis { color: #12996B; background: #E6F6F0; }
.pg-svcp-media-card-tags .tag.industry { color: #2F6FED; background: #EAF1FE; }
.pg-svcp-media-card-tags .tag.commentary { color: #7C5CFC; background: #F1EDFE; }
.pg-svcp-media-grid.cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 900px) { .pg-svcp-media-grid.cols-4 { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px) { .pg-svcp-media-grid.cols-4 { grid-template-columns: 1fr !important; } }

/* ---------- Chat-lane explorer real color/state fix ----------
   The base .pg-svcp-ladder-tab.active rule (ported from the industry escalation-ladder)
   set border-color:#CB0E2A on all four sides — that stale rule was only ever beaten on
   the left edge by the JS's old borderLeftColor-only inline write, leaving top/right/bottom
   visibly red regardless of lane color. Source uses one border-color value for all four
   sides, matching the lane's own accent color; JS now sets the full border-color inline. */
.pg-svcp-ladder-tab { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.08); border-radius: 11px; padding: 16px 18px; transition: .15s; }
.pg-svcp-ladder-tab.active { background: rgba(255,255,255,.06); }
.pg-svcp-ladder-badge { min-width: 46px; width: auto; height: 42px; padding: 0 12px; }

.pg-svcp-ladder-badge { color: #0C1A3A; border-radius: 11px; font-weight: 700; font-size: 14px; }

/* ---------- Sticky-left numbered steps list (first built for Email Support "In The Queue") ---------- */
.pg-svcp-stepslist { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .pg-svcp-stepslist { grid-template-columns: 1fr !important; } }
.pg-svcp-stepslist-aside { position: sticky; top: 90px; }
@media (max-width: 900px) { .pg-svcp-stepslist-aside { position: static; } }
.pg-svcp-stepslist-aside p { font: 400 17px/1.62 'Hanken Grotesk', sans-serif; color: #5A5F6E; max-width: 420px; margin: 0; }
.pg-svcp-steps-list { display: flex; flex-direction: column; gap: 14px; }
.pg-svcp-steps-row { display: flex; gap: 20px; background: #fff; border: 1px solid #ECEEF2; border-radius: 3px; padding: 24px 28px; }
.pg-svcp-steps-num { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: #0C1A3A; color: #fff; display: flex; align-items: center; justify-content: center; font: 700 14px/1 'Bricolage Grotesque', sans-serif; }
.pg-svcp-steps-row .t { font: 700 17px/1.3 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 7px; }
.pg-svcp-steps-row .d { font: 400 14px/1.6 'Hanken Grotesk', sans-serif; color: #5A5F6E; }

/* ---------- Dark banner / burndown section (first built for Email Support "The Burndown, Shown") ---------- */
.pg-svcp-burndown { background: radial-gradient(120% 130% at 12% -10%, #16294C 0%, #0E1B3A 48%, #0A1430 100%); color: #fff; }
.pg-svcp-burndown .pg-svcp-h2 { color: #fff !important; }
.pg-svcp-burndown .pg-svcp-h2 .accent { color: #FF6477; }
.pg-svcp-burndown .pg-svcp-lede { color: #B8C0D2 !important; }
.pg-svcp-topcard-grid.dark .pg-svcp-topcard { background: #15294F; border: 1px solid rgba(255,255,255,.08); border-top: none; border-radius: 12px; padding: 30px; gap: 13px; }
.pg-svcp-topcard-grid.dark .pg-svcp-topcard .k { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; }
.pg-svcp-topcard-grid.dark .pg-svcp-topcard .t { font: 700 18px/1.3 'Bricolage Grotesque', sans-serif; color: #fff; }
.pg-svcp-topcard-grid.dark .pg-svcp-topcard p { color: #C2C8D4; }
.pg-svcp-throughline { display: flex; align-items: center; gap: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 20px 26px; flex-wrap: wrap; }
.pg-svcp-throughline .tag { flex-shrink: 0; font: 700 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; color: #FF6477; }
.pg-svcp-throughline .msg { font: 600 15px/1.5 'Hanken Grotesk', sans-serif; color: #fff; }

/* ---------- SLA-tier / discrete-tab switch (first built for Email Support, JS: tier-switch.js) ---------- */
.pg-svcp-tierswitch-tabs { display: inline-flex; gap: 6px; background: #fff; border: 1px solid #E2E6EE; border-radius: 12px; padding: 6px; margin-bottom: 24px; }
.pg-svcp-tierswitch-tab { border: none; cursor: pointer; font: 700 13.5px/1 'Hanken Grotesk', sans-serif; padding: 12px 22px; border-radius: 8px; background: transparent; color: #5A5F6E; transition: .15s; }
.pg-svcp-tierswitch-tab.active { background: #CB0E2A; color: #fff; }
/* three tabs can't fit one row at 320px — let the pill container wrap */
@media (max-width: 400px) {
	.pg-svcp-tierswitch-tabs { display: flex; flex-wrap: wrap; max-width: 100%; }
}
.pg-svcp-tierswitch-panels { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 18px; align-items: stretch; }
@media (max-width: 900px) { .pg-svcp-tierswitch-panels { grid-template-columns: 1fr !important; } }
.pg-svcp-tierswitch-main { background: #0C1A3A; border-radius: 3px; padding: 38px 40px; box-shadow: 0 24px 60px rgba(14,16,22,.26); }
.pg-svcp-tierswitch-main .k { font: 500 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .12em; color: #8FA0BE; margin-bottom: 14px; }
.pg-svcp-tierswitch-main .v { font: 700 40px/1 'Bricolage Grotesque', sans-serif; color: #fff; letter-spacing: -0.02em; margin-bottom: 8px; }
.pg-svcp-tierswitch-main .d { font: 400 15px/1.6 'Hanken Grotesk', sans-serif; color: #C2C8D4; margin-bottom: 30px; max-width: 440px; }
.pg-svcp-tierswitch-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.pg-svcp-tierswitch-stats > div { background: #15294F; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 18px; }
.pg-svcp-tierswitch-stats .k2 { font: 500 10.5px/1.3 'Hanken Grotesk', sans-serif; color: #8FA0BE; margin-bottom: 10px; }
.pg-svcp-tierswitch-stats .v2 { font: 700 22px/0.95 'Bricolage Grotesque', sans-serif; }
.pg-svcp-tierswitch-fit { background: #fff; border: 1px solid #ECEEF2; border-radius: 3px; padding: 34px 36px; display: flex; flex-direction: column; justify-content: center; }
.pg-svcp-tierswitch-fit .h { font: 700 13px/1.4 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 18px; }
.pg-svcp-tierswitch-fit ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pg-svcp-tierswitch-fit li { display: flex; gap: 11px; font: 400 14px/1.5 'Hanken Grotesk', sans-serif; color: #5A5F6E; }
.pg-svcp-tierswitch-fit li .arrow { color: #12996B; font-weight: 700; flex-shrink: 0; }
.pg-svcp-tierswitch-caption { margin-top: 24px; font: 400 13.5px/1.65 'Hanken Grotesk', sans-serif; color: #5F6675; max-width: 1000px; }

/* ---------- Record/stage journey tracker (first built for Data Entry & Processing, JS: record-journey.js) ---------- */
.pg-svcp-journey-chips { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; margin-bottom: 18px; }
@media (max-width: 900px) { .pg-svcp-journey-chips { grid-template-columns: repeat(3,1fr) !important; } }
@media (max-width: 560px) { .pg-svcp-journey-chips { grid-template-columns: repeat(2,1fr) !important; } }
.pg-svcp-journey-chip { cursor: pointer; background: #fff; border: 1px solid #E4E8EF; border-radius: 11px; padding: 15px 15px 17px; transition: .18s; box-shadow: 0 1px 2px rgba(20,22,30,.04); }
.pg-svcp-journey-chip .n { font: 700 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; margin-bottom: 12px; color: #AEB6C8; }
.pg-svcp-journey-chip .t { font: 700 15px/1.15 'Bricolage Grotesque', sans-serif; margin-bottom: 4px; color: #14161E; }
.pg-svcp-journey-chip .d { font: 500 11.5px/1.3 'Hanken Grotesk', sans-serif; color: #8A9098; }
.pg-svcp-journey-chip.active { background: #0C1A3A; border-color: #6E7BFF; box-shadow: 0 14px 30px rgba(12,26,58,.18); }
.pg-svcp-journey-chip.active .n { color: #6E7BFF; }
.pg-svcp-journey-chip.active .t { color: #fff; }
.pg-svcp-journey-chip.active .d { color: rgba(255,255,255,.62); }
.pg-svcp-journey-panel { display: grid; grid-template-columns: 1.25fr 1fr; border: 1px solid #E4E8EF; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 36px rgba(20,22,30,.07); }
@media (max-width: 800px) { .pg-svcp-journey-panel { grid-template-columns: 1fr !important; } }
.pg-svcp-journey-detail { padding: 34px 38px; }
.pg-svcp-journey-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.pg-svcp-journey-detail-badge { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font: 700 13px/1 'Bricolage Grotesque', sans-serif; color: #fff; background: #6E7BFF; }
.pg-svcp-journey-detail-title { font: 700 22px/1.1 'Bricolage Grotesque', sans-serif; color: #14161E; }
.pg-svcp-journey-detail-owner { font: 500 13px/1 'Hanken Grotesk', sans-serif; letter-spacing: .04em; color: #8A9098; margin-top: 6px; }
.pg-svcp-journey-detail p { font: 400 16px/1.64 'Hanken Grotesk', sans-serif; color: #4D5260; margin: 0 0 18px; }
.pg-svcp-journey-note { font: 600 13.5px/1.45 'Hanken Grotesk', sans-serif; color: #14161E; background: #F7F8FA; border-left: 3px solid #CB0E2A; padding: 13px 16px; border-radius: 0 7px 7px 0; }
.pg-svcp-journey-stats { background: #0C1A3A; color: #fff; padding: 34px 38px; }
.pg-svcp-journey-stats-label { font: 500 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #9DB0CF; margin-bottom: 18px; }
.pg-svcp-journey-stats-fig { display: flex; align-items: flex-end; gap: 9px; margin-bottom: 6px; }
.pg-svcp-journey-stats-fig .v { font: 700 58px/0.82 'Bricolage Grotesque', sans-serif; color: #fff; letter-spacing: -0.02em; }
.pg-svcp-journey-stats-fig .u { font: 500 13px/1.4 'Hanken Grotesk', sans-serif; color: #9DB0CF; padding-bottom: 9px; }
.pg-svcp-journey-rail { height: 8px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; margin: 20px 0 8px; }
.pg-svcp-journey-rail-fill { height: 100%; background: linear-gradient(90deg,#6E7BFF,#46C2A8); border-radius: 4px; transition: width .5s cubic-bezier(.22,.8,.18,1); }
.pg-svcp-journey-rail-labels { display: flex; justify-content: space-between; font: 500 11.5px/1 'Hanken Grotesk', sans-serif; color: #6F7E99; margin-bottom: 28px; }
.pg-svcp-journey-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pg-svcp-journey-stats-grid .k { font: 500 11px/1.2 'Hanken Grotesk', sans-serif; color: #9DB0CF; margin-bottom: 8px; }
.pg-svcp-journey-stats-grid .v { font: 700 27px/1 'Bricolage Grotesque', sans-serif; color: #46C2A8; }
.pg-svcp-journey-stats-grid .v.small { font-size: 17px; color: #fff; }
.pg-svcp-journey-table-wrap { margin-top: 26px; overflow-x: auto; }
.pg-svcp-journey-table-label { font: 700 12px/1.5 'Hanken Grotesk', sans-serif; letter-spacing: .08em; color: #646B7B; margin-bottom: 14px; }
.pg-svcp-journey-table { width: 100%; min-width: 780px; border-collapse: collapse; border: 1px solid #E8EAEF; border-radius: 12px; overflow: hidden; }
.pg-svcp-journey-table th, .pg-svcp-journey-table td { padding: 13px; border-bottom: 1px solid #EEF0F4; vertical-align: top; text-align: left; font: 400 13px/1.45 'Hanken Grotesk', sans-serif; }
.pg-svcp-journey-table thead th { font: 700 11.5px/1.3 'Hanken Grotesk', sans-serif; letter-spacing: .05em; color: #E7EAF1; background: #0C1A3A; }
.pg-svcp-journey-table tbody tr:nth-child(even) th, .pg-svcp-journey-table tbody tr:nth-child(even) td { background: #FAFBFC; }
.pg-svcp-journey-table tbody tr:nth-child(odd) th, .pg-svcp-journey-table tbody tr:nth-child(odd) td { background: #fff; }
.pg-svcp-journey-table .stage-t { display: block; font: 700 14px/1.2 'Bricolage Grotesque', sans-serif; color: #14161E; }
.pg-svcp-journey-table .stage-d { display: block; font: 400 12px/1.45 'Hanken Grotesk', sans-serif; color: #7A8190; margin-top: 4px; max-width: 320px; }
.pg-svcp-journey-table .num { font: 700 13px/1.45 'Hanken Grotesk', sans-serif; color: #0E7A56; }

/* ---------- Lightweight link-card grid (title + arrow + one-line desc, first built for Data Entry "Where Data Connects") ---------- */
.pg-svcp-connect-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 900px) { .pg-svcp-connect-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px) { .pg-svcp-connect-grid { grid-template-columns: 1fr !important; } }
.pg-svcp-connect-card { text-decoration: none; display: block; background: #fff; border: 1px solid #ECEEF2; border-radius: 3px; padding: 26px 28px; transition: .2s; }
.pg-svcp-connect-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,22,30,.08); border-color: #D9DDE5; }
.pg-svcp-connect-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pg-svcp-connect-card-head .t { font: 700 18px/1.2 'Bricolage Grotesque', sans-serif; color: #14161E; }
.pg-svcp-connect-card-head .go { color: #CB0E2A; font-size: 16px; }
.pg-svcp-connect-card .d { font: 400 13.5px/1.55 'Hanken Grotesk', sans-serif; color: #5A5F6E; }

/* ---------- Complexity/tier card grid (2-col, colored top-border + numbered badge, first built for Data Entry "Record Taxonomy") ---------- */
.pg-svcp-tiercard-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
@media (max-width: 800px) { .pg-svcp-tiercard-grid { grid-template-columns: 1fr !important; } }
.pg-svcp-tiercard { background: #fff; border: 1px solid #ECEEF2; border-top-width: 4px; border-top-style: solid; border-radius: 10px; padding: 28px 30px; }
.pg-svcp-tiercard-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pg-svcp-tiercard-head .badge { font: 800 18px/1 'Bricolage Grotesque', sans-serif; color: #fff; padding: 8px 12px; border-radius: 7px; }
.pg-svcp-tiercard-head .t { font: 700 19px/1.2 'Bricolage Grotesque', sans-serif; color: #14161E; }
.pg-svcp-tiercard .d { font: 400 14.5px/1.55 'Hanken Grotesk', sans-serif; color: #5A5F6E; margin-bottom: 14px; }
.pg-svcp-tiercard .ek { font: 500 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .06em; color: #9097A4; margin-bottom: 7px; }
.pg-svcp-tiercard .ev { font: 600 13.5px/1.5 'Hanken Grotesk', sans-serif; color: #14161E; margin-bottom: 14px; }
.pg-svcp-tiercard .pill { display: inline-block; font: 600 12px/1 'Hanken Grotesk', sans-serif; padding: 8px 13px; border-radius: 6px; }

/* ---------- Order funnel (bar-list + stat panel + static table, first built for Order Management "Perfect-Order Funnel") ---------- */
.pg-svcp-funnel-panel { display: grid; grid-template-columns: 1.15fr 0.85fr; border: 1px solid #E4E8EF; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 36px rgba(20,22,30,.07); }
@media (max-width: 800px) { .pg-svcp-funnel-panel { grid-template-columns: 1fr !important; } }
.pg-svcp-funnel-bars-wrap { padding: 34px 38px; background: #fff; }
.pg-svcp-funnel-bars-label { font: 500 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #8A91A0; margin-bottom: 20px; }
.pg-svcp-funnel-bars { display: flex; flex-direction: column; gap: 6px; }
.pg-svcp-funnel-bar-row { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.pg-svcp-funnel-bar-track { flex: 1; height: 40px; background: #F1F3F7; border-radius: 9px; overflow: hidden; }
.pg-svcp-funnel-bar-fill { height: 100%; background: #C9D2DE; border-radius: 9px; display: flex; align-items: center; padding-left: 14px; transition: width .5s cubic-bezier(.22,.8,.18,1), background .2s; }
.pg-svcp-funnel-bar-fill span { font: 700 13px/1 'Hanken Grotesk', sans-serif; color: #5A6072; white-space: nowrap; }
.pg-svcp-funnel-bar-fill.active { background: #6E7BFF; }
.pg-svcp-funnel-bar-fill.active span { color: #fff; }
.pg-svcp-funnel-bar-pct { width: 46px; flex-shrink: 0; text-align: right; font: 700 16px/1 'Bricolage Grotesque', sans-serif; color: #9097A4; }
.pg-svcp-funnel-bar-pct.active { color: #6E7BFF; }
.pg-svcp-funnel-bars-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid #EEF0F4; font: 500 13px/1.6 'Hanken Grotesk', sans-serif; color: #5A5F6E; }
.pg-svcp-funnel-bars-foot strong { color: #0E7A56; }
.pg-svcp-funnel-detail { background: #0C1A3A; color: #fff; padding: 34px 38px; }
.pg-svcp-funnel-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.pg-svcp-funnel-detail-badge { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font: 700 13px/1 'Bricolage Grotesque', sans-serif; color: #fff; background: #6E7BFF; }
.pg-svcp-funnel-detail-title { font: 700 21px/1.1 'Bricolage Grotesque', sans-serif; color: #fff; }
.pg-svcp-funnel-detail-owner { font: 500 12.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .04em; color: #9DB0CF; margin: 0 0 18px 56px; }
.pg-svcp-funnel-detail p { font: 400 15px/1.62 'Hanken Grotesk', sans-serif; color: #C6CEDD; margin: 0 0 22px; }
.pg-svcp-funnel-detail-stats { border-top: 1px solid rgba(255,255,255,.1); }
.pg-svcp-funnel-detail-stat { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.pg-svcp-funnel-detail-stat .k { font: 500 12px/1.3 'Hanken Grotesk', sans-serif; color: #9DB0CF; }
.pg-svcp-funnel-detail-stat .v { font: 700 14px/1.2 'Bricolage Grotesque', sans-serif; text-align: right; color: #46C2A8; }
.pg-svcp-funnel-detail-stat .v.white { color: #fff; max-width: 200px; }

/* ---------- Dark split panel with a right-side "buyer's test" callout (first built for Order Management "Playbook Shelf") ---------- */
.pg-svcp-playbook { background: #0C1A3A; border-radius: 3px; overflow: hidden; display: grid; grid-template-columns: 1.2fr 0.8fr; }
@media (max-width: 800px) { .pg-svcp-playbook { grid-template-columns: 1fr !important; } }
.pg-svcp-playbook-main { padding: 46px 44px; color: #fff; }
.pg-svcp-playbook-main .k { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .14em; color: #FF6477; margin-bottom: 20px; }
.pg-svcp-playbook-main h2 { font: 700 34px/1.15 'Bricolage Grotesque', sans-serif !important; letter-spacing: -0.02em; margin: 0 0 14px !important; color: #fff !important; }
.pg-svcp-playbook-main p { font: 400 15px/1.65 'Hanken Grotesk', sans-serif; color: #C6CEDD; margin: 0; max-width: 600px; }
.pg-svcp-playbook-test { background: #15294F; border-left: 1px solid rgba(255,255,255,.08); padding: 46px 40px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.pg-svcp-playbook-test .k { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .12em; color: #8FA0BE; }
.pg-svcp-playbook-test .q { font: 700 20px/1.4 'Bricolage Grotesque', sans-serif; color: #fff; }
.pg-svcp-playbook-test .foot { border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; font: 400 13.5px/1.6 'Hanken Grotesk', sans-serif; color: #8FA0BE; }

/* ---------- Slider + toggle calculator (headcount range + N-way toggle, output panel + worked table, first built for HR & Payroll "Cost-of-Error Calculator") ---------- */
.pg-svcp-calc-panel { display: grid; grid-template-columns: 1.02fr 0.98fr; border: 1px solid #E4E8EF; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 36px rgba(20,22,30,.07); }
@media (max-width: 800px) { .pg-svcp-calc-panel { grid-template-columns: 1fr !important; } }
.pg-svcp-calc-inputs { padding: 36px 40px; background: #fff; }
.pg-svcp-calc-label { font: 500 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #8A91A0; margin-bottom: 10px; }
.pg-svcp-calc-value { font: 700 40px/1 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 18px; }
.pg-svcp-calc-slider { width: 100%; accent-color: #CB0E2A; cursor: pointer; margin-bottom: 8px; }
.pg-svcp-calc-slider-labels { display: flex; justify-content: space-between; font: 500 12px/1 'Hanken Grotesk', sans-serif; color: #AEB6C8; margin-bottom: 30px; }
.pg-svcp-calc-toggle-label { font: 500 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #8A91A0; margin-bottom: 12px; }
.pg-svcp-calc-toggles { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.pg-svcp-calc-toggle { cursor: pointer; text-align: center; padding: 12px 6px; border-radius: 9px; font: 700 12.5px/1.2 'Hanken Grotesk', sans-serif; transition: .15s; background: #F3F4F7; color: #5A6072; border: 1px solid #E4E8EF; }
.pg-svcp-calc-toggle.active { background: #0C1A3A; color: #fff; border-color: #0C1A3A; }
.pg-svcp-calc-stats { margin-top: 28px; padding-top: 22px; border-top: 1px solid #EEF0F4; display: flex; flex-direction: column; gap: 13px; }
.pg-svcp-calc-stat-row { display: flex; justify-content: space-between; align-items: center; }
.pg-svcp-calc-stat-row .k { font: 500 13px/1.3 'Hanken Grotesk', sans-serif; color: #5A5F6E; }
.pg-svcp-calc-stat-row .v { font: 700 16px/1 'Bricolage Grotesque', sans-serif; color: #14161E; }
.pg-svcp-calc-output { background: #0C1A3A; color: #fff; padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; }
.pg-svcp-calc-output-label { font: 500 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #9DB0CF; margin-bottom: 14px; }
.pg-svcp-calc-output-fig { font: 700 64px/0.86 'Bricolage Grotesque', sans-serif; color: #FF6477; letter-spacing: -0.02em; margin-bottom: 6px; }
.pg-svcp-calc-output-sub { font: 500 12.5px/1.5 'Hanken Grotesk', sans-serif; color: #9DB0CF; margin-bottom: 28px; }
.pg-svcp-calc-output-rule { height: 1px; background: rgba(255,255,255,.12); margin-bottom: 28px; }
.pg-svcp-calc-recovered { display: flex; align-items: flex-end; gap: 14px; }
.pg-svcp-calc-recovered .v { font: 700 48px/0.86 'Bricolage Grotesque', sans-serif; color: #46C2A8; letter-spacing: -0.02em; }
.pg-svcp-calc-recovered .u { font: 600 14px/1.3 'Hanken Grotesk', sans-serif; color: #9DB0CF; padding-bottom: 7px; }
.pg-svcp-calc-note { margin-top: 30px; background: rgba(70,194,168,.1); border: 1px solid rgba(70,194,168,.22); border-radius: 10px; padding: 16px 18px; font: 500 13px/1.5 'Hanken Grotesk', sans-serif; color: #CFF3E5; }
.pg-svcp-calc-note strong { color: #fff; }
.pg-svcp-calc-table-wrap { margin-top: 26px; overflow-x: auto; }
.pg-svcp-calc-table-label { font: 700 12px/1.5 'Hanken Grotesk', sans-serif; letter-spacing: .08em; color: #646B7B; margin-bottom: 14px; }
.pg-svcp-calc-table { width: 100%; min-width: 680px; border-collapse: collapse; border: 1px solid #E8EAEF; border-radius: 12px; overflow: hidden; }
.pg-svcp-calc-table th, .pg-svcp-calc-table td { padding: 12px 13px; border-bottom: 1px solid #EEF0F4; text-align: left; font: 400 15px/1.4 'Hanken Grotesk', sans-serif; }
.pg-svcp-calc-table thead th { font: 700 13.5px/1.3 'Hanken Grotesk', sans-serif; letter-spacing: .05em; color: #E7EAF1; background: #0C1A3A; }
.pg-svcp-calc-table tbody tr:nth-child(even) th, .pg-svcp-calc-table tbody tr:nth-child(even) td { background: #FAFBFC; }
.pg-svcp-calc-table tbody th { font: 700 15.5px/1.3 'Bricolage Grotesque', sans-serif; color: #14161E; }
.pg-svcp-calc-table .neg { font-weight: 700; color: #B4232F; }
.pg-svcp-calc-table .pos { font-weight: 700; color: #0E7A56; }
.pg-svcp-calc-foot { margin-top: 12px; font: 400 14px/1.5 'Hanken Grotesk', sans-serif; color: #9097A4; }

/* ---------- Call-the-CEO banner (photo + message + phone CTA, first built for HR & Payroll) ---------- */
.pg-svcp-ceo-cta { display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; background: linear-gradient(100deg,#CB0E2A,#E11D33); border-radius: 14px; padding: 30px 38px; box-shadow: 0 16px 40px rgba(203,14,42,.22); }
@media (max-width: 700px) { .pg-svcp-ceo-cta { grid-template-columns: 1fr !important; text-align: center; } }
.pg-svcp-ceo-cta img { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid rgba(255,255,255,.5); }
.pg-svcp-ceo-cta-msg { min-width: 240px; }
.pg-svcp-ceo-cta-msg .t { font: 700 21px/1.32 'Bricolage Grotesque', sans-serif; color: #fff; max-width: 560px; margin-bottom: 6px; }
.pg-svcp-ceo-cta-msg .s { font: 500 13px/1.4 'Hanken Grotesk', sans-serif; color: #FCE3E7; }
.pg-svcp-ceo-cta-phone { text-decoration: none; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; background: #fff; color: #CB0E2A; padding: 15px 30px; border-radius: 8px; white-space: nowrap; }
.pg-svcp-ceo-cta-phone .k { font: 500 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #9B1020; }
.pg-svcp-ceo-cta-phone .n { font: 800 21px/1.1 'Bricolage Grotesque', sans-serif; letter-spacing: -0.01em; }

/* ---------- Light 5-stage funnel with segmented rail + 2-col detail panel (first built for RPO "Hiring Funnel Engine") ---------- */
.pg-svcp-hfunnel-wrap { background: linear-gradient(160deg,#F4F7FB,#EAEFF6); border: 1px solid #E2E8F1; border-radius: 14px; padding: 38px 40px; box-shadow: 0 14px 40px rgba(20,30,55,.08); }
.pg-svcp-hfunnel-chips { display: grid; grid-template-columns: repeat(5,1fr); gap: 9px; margin-bottom: 26px; }
@media (max-width: 700px) { .pg-svcp-hfunnel-chips { grid-template-columns: repeat(2,1fr) !important; } }
.pg-svcp-hfunnel-chip { cursor: pointer; padding: 14px 12px; border-radius: 10px; text-align: center; transition: .15s; background: transparent; border: 1px solid #E2E8F1; box-shadow: none; }
.pg-svcp-hfunnel-chip.active { background: #fff; box-shadow: 0 4px 14px rgba(20,30,55,.08); }
.pg-svcp-hfunnel-chip .n { font: 600 11px/1 'Hanken Grotesk', sans-serif; margin-bottom: 8px; }
.pg-svcp-hfunnel-chip .t { font: 700 14px/1.2 'Bricolage Grotesque', sans-serif; color: #14161E; }
.pg-svcp-hfunnel-rail { height: 6px; background: #E2E8F1; border-radius: 4px; overflow: hidden; margin-bottom: 26px; }
.pg-svcp-hfunnel-rail-fill { height: 100%; border-radius: 4px; transition: width .5s cubic-bezier(.22,.8,.18,1); }
.pg-svcp-hfunnel-panel { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; background: #fff; border: 1px solid #E6ECF4; border-radius: 12px; padding: 28px; }
@media (max-width: 700px) { .pg-svcp-hfunnel-panel { grid-template-columns: 1fr !important; } }
.pg-svcp-hfunnel-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pg-svcp-hfunnel-panel-badge { flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font: 700 14px/1 'Bricolage Grotesque', sans-serif; color: #fff; }
.pg-svcp-hfunnel-panel-title { font: 700 19px/1.2 'Bricolage Grotesque', sans-serif; color: #14161E; }
.pg-svcp-hfunnel-panel .k { font: 500 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; color: #9097A4; margin-bottom: 8px; }
.pg-svcp-hfunnel-panel .v { font: 600 14.5px/1.5 'Hanken Grotesk', sans-serif; color: #14161E; margin-bottom: 18px; }
.pg-svcp-hfunnel-panel .c { font: 400 13.5px/1.55 'Hanken Grotesk', sans-serif; color: #5A6175; }
.pg-svcp-hfunnel-metric { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.pg-svcp-hfunnel-metric-box { background: #F4F7FB; border: 1px solid #E2E8F1; border-radius: 10px; padding: 18px; }
.pg-svcp-hfunnel-metric-box .k { font: 500 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .06em; color: #9097A4; margin-bottom: 8px; }
.pg-svcp-hfunnel-metric-box .v { font: 700 26px/1 'Bricolage Grotesque', sans-serif; color: #0E9468; }
.pg-svcp-hfunnel-metric-box .l { font: 500 11px/1.3 'Hanken Grotesk', sans-serif; color: #5A6175; margin-top: 6px; }
.pg-svcp-hfunnel-def { display: flex; gap: 18px; align-items: flex-start; background: #FDEFF0; border: 1px solid #F3C7CD; border-left: 3px solid #CB0E2A; border-radius: 3px; padding: 24px 28px; margin-bottom: 40px; max-width: 880px; }
.pg-svcp-hfunnel-def .tag { flex-shrink: 0; font: 600 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #CB0E2A; background: #fff; border: 1px solid #F3C7CD; padding: 7px 11px; border-radius: 6px; margin-top: 2px; }
.pg-svcp-hfunnel-def p { margin: 0; font: 400 16px/1.55 'Hanken Grotesk', sans-serif; color: #4D5260; }

/* ---------- Executive photo-quote card (photo + role tag + pull-quote + attribution, first built for RPO) ---------- */
.pg-svcp-execquote { display: flex; gap: 26px; padding: 36px 40px; background: #F7F8FA; border: 1px solid #E8EAEF; border-radius: 3px; }
.pg-svcp-execquote img { flex-shrink: 0; width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }
.pg-svcp-execquote-tag { display: inline-block; font: 600 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #fff; background: #15294F; padding: 6px 11px; border-radius: 6px; margin-bottom: 16px; }
.pg-svcp-execquote p { font: 500 22px/1.5 'Bricolage Grotesque', sans-serif; letter-spacing: -0.01em; color: #14161E; margin: 0 0 16px; max-width: 880px; }
.pg-svcp-execquote-attr { font: 600 13.5px/1.4 'Hanken Grotesk', sans-serif; color: #14161E; }
.pg-svcp-execquote-attr span { font-weight: 400; color: #5F6675; }

/* ---------- 3-col big-number stat strip (first built for RPO trust bar) ---------- */
.pg-svcp-statband { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
@media (max-width: 700px) { .pg-svcp-statband { grid-template-columns: 1fr !important; } }
.pg-svcp-statband-item { padding: 8px 40px; border-left: 1px solid #ECEEF2; }
.pg-svcp-statband-item:first-child { padding-left: 0; border-left: none; }
/* stacked items ≤700px: the column-divider border and its 40px inset read as misalignment */
@media (max-width: 700px) {
	.pg-svcp-statband-item { padding: 8px 0; border-left: none; }
}
.pg-svcp-statband-row { display: flex; align-items: flex-start; gap: 14px; }
.pg-svcp-statband-num { font: 800 76px/0.82 'Bricolage Grotesque', sans-serif; color: #15294F; letter-spacing: -0.03em; }
.pg-svcp-statband-num small { font-size: 34px; }
.pg-svcp-statband-label { font: 700 15px/1.18 'Hanken Grotesk', sans-serif; color: #CB0E2A; text-transform: uppercase; letter-spacing: .02em; padding-top: 6px; }
.pg-svcp-statband-desc { font: 400 14.5px/1.55 'Hanken Grotesk', sans-serif; color: #5A5F6E; margin-top: 16px; max-width: 280px; }

/* ---------- Full-bleed dark quote bar (tag + one-line paragraph, first built for RPO "vacant seat" band) ---------- */
.pg-svcp-darkband { background: linear-gradient(100deg,#CB0E2A,#E11D33); color: #FFE1E5; }
.pg-svcp-darkband-inner { max-width: 1240px; margin: 0 auto; padding: 34px 64px; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.pg-svcp-darkband-tag { flex-shrink: 0; font: 500 12.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #CB0E2A; background: #fff; border: 1px solid #fff; padding: 8px 13px; border-radius: 7px; }
.pg-svcp-darkband p { margin: 0; font: 400 16.5px/1.55 'Hanken Grotesk', sans-serif; color: #FFE1E5; }
.pg-svcp-darkband strong { color: #fff; font-weight: 600; }
.pg-svcp-darkband em { color: #fff; font-weight: 600; font-style: normal; }

/* ---------- Risk-vs-protection comparison rows (first built for RPO "résumé mill vs quality-of-hire engine") ---------- */
.pg-svcp-vscompare { display: flex; flex-direction: column; gap: 10px; }
.pg-svcp-vscompare-row { display: grid; grid-template-columns: 200px 1fr 1fr; background: #fff; border: 1px solid #ECEEF2; border-radius: 10px; overflow: hidden; }
@media (max-width: 700px) { .pg-svcp-vscompare-row { grid-template-columns: 1fr !important; } }
.pg-svcp-vscompare-row .lbl { padding: 18px 22px; font: 700 13.5px/1.3 'Hanken Grotesk', sans-serif; color: #14161E; background: #FAFBFC; display: flex; align-items: center; }
.pg-svcp-vscompare-row .bad { padding: 18px 22px; font: 400 14px/1.4 'Hanken Grotesk', sans-serif; color: #E5484D; display: flex; align-items: center; gap: 10px; border-left: 1px solid #F1F2F5; }
.pg-svcp-vscompare-row .good { padding: 18px 22px; font: 600 14px/1.4 'Hanken Grotesk', sans-serif; color: #0E7A56; display: flex; align-items: center; gap: 10px; border-left: 1px solid #F1F2F5; }
.pg-svcp-vscompare-row .good .ic { color: #12996B; }

/* ---------- 4-col colored-top-border label cards, mono-caps label instead of a title (first built for RPO ramp protocol) ---------- */
.pg-svcp-labelcard-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
@media (max-width: 900px) { .pg-svcp-labelcard-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px) { .pg-svcp-labelcard-grid { grid-template-columns: 1fr !important; } }
.pg-svcp-labelcard { background: #fff; border-width: 4px 1px 1px; border-style: solid; border-color: #CB0E2A #ECEEF2 #ECEEF2; border-radius: 10px; padding: 24px 26px; }
.pg-svcp-labelcard .k { font: 600 11.5px/1.4 'Hanken Grotesk', sans-serif; letter-spacing: .08em; margin-bottom: 12px; }
.pg-svcp-labelcard p { margin: 0; font: 400 13.5px/1.6 'Hanken Grotesk', sans-serif; color: #5A5F6E; }

/* ---------- 4-col watermark-number stand-up timeline cards (first built for RPO "8-Week RPO Stand-Up") ---------- */
.pg-svcp-standup-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
@media (max-width: 900px) { .pg-svcp-standup-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px) { .pg-svcp-standup-grid { grid-template-columns: 1fr !important; } }
.pg-svcp-standup-card { position: relative; background: #fff; border-width: 4px 1px 1px; border-style: solid; border-color: #2F6FED #ECEEF2 #ECEEF2; border-radius: 3px; padding: 28px 26px 26px; overflow: hidden; }
.pg-svcp-standup-num { position: absolute; top: -12px; right: 8px; font: 800 88px/1 'Bricolage Grotesque', sans-serif; color: #2F6FED; opacity: .07; }
.pg-svcp-standup-body { position: relative; }
.pg-svcp-standup-wk { font: 600 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; color: #2F6FED; margin-bottom: 10px; }
.pg-svcp-standup-title { font: 700 17px/1.2 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 12px; }
.pg-svcp-standup-desc { font: 400 13px/1.55 'Hanken Grotesk', sans-serif; color: #5A5F6E; }

/* ---------- Static SVG process-diagram figure wrapper (first built for Administrative Support's task-QA-loop flowchart) ---------- */
.pg-svcp-figure { margin: 0; background: #fff; border: 1px solid #E8EAEF; border-radius: 14px; padding: 36px 40px; box-shadow: 0 12px 34px rgba(20,22,30,.06); }
.pg-svcp-figure figcaption { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .12em; color: #646B7B; margin-bottom: 24px; }
.pg-svcp-figure svg { width: 100%; height: auto; display: block; }

/* ---------- Navy variant of the inline-cta banner (first built for Administrative Support) ---------- */
.pg-svcp-inline-cta.dark { background: #0C1A3A; border-radius: 12px; box-shadow: none; justify-content: space-between; }
.pg-svcp-inline-cta.dark .msg { font-size: 21px; }

/* ---------- 5-step horizontal engagement timeline on flat navy bg (first built for Appointment Setting "How We Engage") ---------- */
.pg-svcp-timeline { display: grid; grid-template-columns: repeat(5,1fr); gap: 0; position: relative; }
@media (max-width: 900px) { .pg-svcp-timeline { grid-template-columns: 1fr 1fr !important; row-gap: 40px; } }
@media (max-width: 560px) { .pg-svcp-timeline { grid-template-columns: 1fr !important; } }
.pg-svcp-timeline-line { position: absolute; top: 23px; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg,#FF6477,#46C2A8); }
@media (max-width: 900px) { .pg-svcp-timeline-line { display: none; } }
.pg-svcp-timeline-step { position: relative; padding: 0 12px; text-align: center; }
.pg-svcp-timeline-badge { width: 46px; height: 46px; border-radius: 50%; color: #0C1A3A; display: flex; align-items: center; justify-content: center; font: 800 17px/1 'Bricolage Grotesque', sans-serif; margin: 0 auto 18px; position: relative; z-index: 2; }
.pg-svcp-timeline-title { font: 700 17px/1.2 'Bricolage Grotesque', sans-serif; color: #fff; margin-bottom: 8px; }
.pg-svcp-timeline-tag { font: 600 11px/1 'Hanken Grotesk', sans-serif; letter-spacing: .06em; margin-bottom: 10px; }
.pg-svcp-timeline-desc { font: 400 13px/1.55 'Hanken Grotesk', sans-serif; color: #9FB0CC; }

/* ---------- Risk + mitigation card grid (first built for Appointment Setting "How We De-Risk It") ---------- */
.pg-svcp-riskcard-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 900px) { .pg-svcp-riskcard-grid { grid-template-columns: 1fr !important; } }
.pg-svcp-riskcard { background: #fff; border: 1px solid #ECEEF2; border-radius: 10px; padding: 24px 26px; }
.pg-svcp-riskcard .t { font: 700 16px/1.25 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 9px; }
.pg-svcp-riskcard .risk { font: 500 12.5px/1.5 'Hanken Grotesk', sans-serif; color: #CB0E2A; margin-bottom: 9px; }
.pg-svcp-riskcard .d { font: 400 13.5px/1.6 'Hanken Grotesk', sans-serif; color: #42475A; }

/* ---------- 3-door pick-your-entry-point cards, one dark (first built for Appointment Setting) ---------- */
.pg-svcp-doorcard-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width: 900px) { .pg-svcp-doorcard-grid { grid-template-columns: 1fr !important; } }
.pg-svcp-doorcard { background: #fff; border: 1px solid #E8EAEF; border-radius: 12px; padding: 30px; display: flex; flex-direction: column; }
.pg-svcp-doorcard.dark { background: #0C1A3A; border-color: #0C1A3A; box-shadow: 0 18px 44px rgba(14,16,22,.18); }
.pg-svcp-doorcard .tag { display: block; font: 700 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; margin-bottom: 14px; }
.pg-svcp-doorcard .t { font: 700 21px/1.2 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 10px; }
.pg-svcp-doorcard.dark .t { color: #fff; }
.pg-svcp-doorcard .d { font: 400 14px/1.6 'Hanken Grotesk', sans-serif; color: #5A5F6E; margin-bottom: 22px; }
.pg-svcp-doorcard.dark .d { color: #C2C8D4; }
.pg-svcp-doorcard a { margin-top: auto; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font: 700 13.5px/1 'Hanken Grotesk', sans-serif; }
.pg-svcp-doorcard a.btn { background: #CB0E2A; color: #fff; padding: 13px 22px; border-radius: 5px; align-self: flex-start; }

/* ---------- 5-col vertical bar-chart figure (first built for Appointment Setting "Appointment Lifecycle") ---------- */
.pg-svcp-lifecycle { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; align-items: end; margin-bottom: 14px; }
@media (max-width: 700px) { .pg-svcp-lifecycle { grid-template-columns: repeat(2,1fr) !important; row-gap: 24px; } }
.pg-svcp-lifecycle-col { text-align: center; }
.pg-svcp-lifecycle-bar-wrap { height: 200px; display: flex; align-items: end; }
.pg-svcp-lifecycle-bar { width: 100%; border-radius: 8px 8px 0 0; display: flex; align-items: start; justify-content: center; padding-top: 12px; }
.pg-svcp-lifecycle-bar span { font: 700 24px/1 'Bricolage Grotesque', sans-serif; color: #fff; }
.pg-svcp-lifecycle-label { font: 700 13px/1.3 'Bricolage Grotesque', sans-serif; color: #14161E; margin-top: 12px; }
.pg-svcp-lifecycle-sub { font: 500 12px/1.3 'Hanken Grotesk', sans-serif; color: #9097A4; margin-top: 3px; }
.pg-svcp-lifecycle-caption { margin-top: 22px; font: 400 13.5px/1.65 'Hanken Grotesk', sans-serif; color: #5F6675; max-width: 1000px; }

/* ---------- Related-links row (underlined text links, first built for Data Entry segments section) ---------- */
.pg-svcp-related-links { display: flex; flex-wrap: wrap; gap: 18px 34px; }
.pg-svcp-related-links a { text-decoration: none; font: 600 16.5px/1 'Hanken Grotesk', sans-serif; color: #2A2E37; border-bottom: 2px solid #E4E7EC; padding-bottom: 4px; transition: .15s; }

/* ---------- Row-select stage flow: dark panel, clickable row-list + detail readout ----------
   First built for Trust & Safety "The Trust & Safety Decision Flow" (JS: decision-flow.js). */
.pg-svcp-dflow { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 18px; background: #0C1A3A; border-radius: 3px; padding: 34px; box-shadow: 0 24px 60px rgba(14,16,22,.26); }
/* minmax(0,1fr), not 1fr: a bare 1fr track can't shrink below its items' min-content
   (the detail panel's 2-col stats grid floored it at ~300px → horizontal overflow). */
@media (max-width: 800px) { .pg-svcp-dflow { grid-template-columns: minmax(0,1fr) !important; } }
.pg-svcp-dflow-rows { display: flex; flex-direction: column; gap: 10px; }
.pg-svcp-dflow-row { cursor: pointer; padding: 16px 18px; border-radius: 11px; transition: all .15s ease; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.08); border-left: 4px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: space-between; }
.pg-svcp-dflow-row.active { background: rgba(255,255,255,.06); border-left-width: 4px; }
.pg-svcp-dflow-row .t { font: 700 15px/1.2 'Bricolage Grotesque', sans-serif; color: #fff; }
.pg-svcp-dflow-row .p { font: 700 16px/1 'Bricolage Grotesque', sans-serif; }
.pg-svcp-dflow-foot { margin-top: 8px; font: 400 12.5px/1.5 'Hanken Grotesk', sans-serif; color: #6B7A95; }
.pg-svcp-dflow-detail { background: #15294F; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 28px; }
.pg-svcp-dflow-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pg-svcp-dflow-badge { flex-shrink: 0; min-width: 46px; height: 42px; padding: 0 12px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font: 700 14px/1 'Bricolage Grotesque', sans-serif; color: #0C1A3A; }
.pg-svcp-dflow-detail-title { font: 700 19px/1.2 'Bricolage Grotesque', sans-serif; color: #fff; }
.pg-svcp-dflow-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.pg-svcp-dflow-stats .k { font: 500 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; color: #8FA0BE; margin-bottom: 8px; }
.pg-svcp-dflow-stats .v { font: 700 26px/1 'Bricolage Grotesque', sans-serif; color: #46C2A8; }
.pg-svcp-dflow-stats .v.white { color: #fff; }
.pg-svcp-dflow-detail .lbl { font: 500 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; color: #8FA0BE; margin-bottom: 8px; }
.pg-svcp-dflow-detail .who { font: 600 14.5px/1.45 'Hanken Grotesk', sans-serif; color: #fff; margin-bottom: 16px; }
.pg-svcp-dflow-detail .what { font: 400 13.5px/1.55 'Hanken Grotesk', sans-serif; color: #C2C8D4; }

/* ---------- Def-card grid used a second time on the same page (Compliance Map / Benchmark 4-col tables) ---------- */
.pg-svcp-metrictable-head.cols4, .pg-svcp-metrictable-row.cols4 { grid-template-columns: 2.2fr 1fr 1.1fr 1.3fr; }
@media (max-width: 700px) { .pg-svcp-metrictable-head.cols4, .pg-svcp-metrictable-row.cols4 { grid-template-columns: 1fr !important; } }
.pg-svcp-metrictable-row .m { text-align: center; font-weight: 700; }
.pg-svcp-metrictable-row .base { text-align: center; color: #9097A4; }
.pg-svcp-metrictable-row .why { text-align: right; color: #15294F; font-weight: 600; }
.pg-svcp-related-links a:hover { color: #CB0E2A; border-bottom-color: #CB0E2A; }

/* ---------- Capability Stack Explorer (Contact Center) — visually identical shell to .pg-svcp-ladder,
   but a distinct class namespace + JS file (capability-stack-explorer.js) because the data-out field
   contract differs (num/title/what/metric/tool, not badge/title/primary/secondary/best/how) and both
   scripts are enqueued unconditionally on every service page; reusing .pg-svcp-ladder verbatim would
   make service-lane-explorer.js double-init this same element and throw on the missing badge/primary
   fields. ---------- */
.pg-svcp-capstack { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 18px; background: #0C1A3A; border-radius: 3px; padding: 34px; box-shadow: 0 24px 60px rgba(14,16,22,.26); }
@media (max-width: 900px) { .pg-svcp-capstack { grid-template-columns: 1fr !important; } }
.pg-svcp-capstack-tabs { display: flex; flex-direction: column; gap: 10px; }
.pg-svcp-capstack-tab { cursor: pointer; background: #15294F; border: 1px solid rgba(255,255,255,.06); border-radius: 8px; padding: 16px 18px; transition: all .18s ease; }
.pg-svcp-capstack-tab.active { background: #1B3A6B; }
.pg-svcp-capstack-foot { margin-top: 8px; font: 400 12.5px/1.5 'Hanken Grotesk', sans-serif; color: #6B7A95; }
.pg-svcp-capstack-panel { background: #15294F; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 28px; }
.pg-svcp-capstack-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pg-svcp-capstack-badge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; font: 800 13px/1 'Bricolage Grotesque', sans-serif; color: #fff; flex-shrink: 0; }
.pg-svcp-capstack-panel-title { font: 700 19px/1.2 'Bricolage Grotesque', sans-serif; color: #fff; }

/* ---------- Integration Roadmap gantt-style label+bar rows (Contact Center) ---------- */
.pg-svcp-roadmap-row { display: grid; grid-template-columns: 230px 1fr; gap: 0 24px; align-items: center; }
@media (max-width: 700px) { .pg-svcp-roadmap-row { grid-template-columns: 1fr !important; gap: 6px 0; } }

/* ---------- Tier Resolution Explorer (Technical Support) — visually identical shell to .pg-svcp-ladder/
   .pg-svcp-capstack, but its own class namespace + JS file (tier-resolution-explorer.js) because the
   data-out field contract differs (tier/title/mttr/share/who/scope, a 2-stat grid + two labelled
   paragraphs, not badge/title/primary/secondary/best/how or num/title/what/metric/tool) and every
   service-page interactive script is enqueued unconditionally — reusing .pg-svcp-ladder or
   .pg-svcp-capstack verbatim would make the other script double-init this element and throw on
   missing fields. ---------- */
.pg-svcp-tiermodel { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 18px; background: #0C1A3A; border-radius: 3px; padding: 34px; box-shadow: 0 24px 60px rgba(14,16,22,.26); }
@media (max-width: 900px) { .pg-svcp-tiermodel { grid-template-columns: 1fr !important; } }
.pg-svcp-tiermodel-tabs { display: flex; flex-direction: column; gap: 10px; }
.pg-svcp-tiermodel-tab { cursor: pointer; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.08); border-radius: 11px; padding: 16px 18px; transition: all .15s ease; }
.pg-svcp-tiermodel-tab .row { display: flex; align-items: center; justify-content: space-between; }
.pg-svcp-tiermodel-tab .name { font: 700 15px/1.2 'Bricolage Grotesque', sans-serif; color: #fff; }
.pg-svcp-tiermodel-tab .pct { font: 700 16px/1 'Bricolage Grotesque', sans-serif; }
.pg-svcp-tiermodel-tab.active { background: rgba(255,255,255,.06); }
.pg-svcp-tiermodel-foot { margin-top: 8px; font: 400 12.5px/1.5 'Hanken Grotesk', sans-serif; color: #6B7A95; }
.pg-svcp-tiermodel-panel { background: #15294F; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 28px; }
.pg-svcp-tiermodel-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pg-svcp-tiermodel-badge { flex-shrink: 0; min-width: 46px; height: 42px; padding: 0 12px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font: 700 14px/1 'Bricolage Grotesque', sans-serif; color: #0C1A3A; }
.pg-svcp-tiermodel-panel-title { font: 700 19px/1.2 'Bricolage Grotesque', sans-serif; color: #fff; }
.pg-svcp-tiermodel-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.pg-svcp-tiermodel-stat-grid .k { font: 500 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; color: #8FA0BE; margin-bottom: 8px; }
.pg-svcp-tiermodel-stat-grid .v { font: 700 26px/1 'Bricolage Grotesque', sans-serif; color: #46C2A8; }
.pg-svcp-tiermodel-stat-grid .v.white { color: #fff; }
.pg-svcp-tiermodel-who .k { font: 500 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; color: #8FA0BE; margin-bottom: 8px; }
.pg-svcp-tiermodel-who .v { font: 600 14.5px/1.45 'Hanken Grotesk', sans-serif; color: #fff; margin-bottom: 16px; }
.pg-svcp-tiermodel-scope .k { font: 500 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; color: #8FA0BE; margin-bottom: 8px; }
.pg-svcp-tiermodel-scope .v { font: 400 13.5px/1.55 'Hanken Grotesk', sans-serif; color: #C2C8D4; }

/* ---------- Cost-allocation exhibit: 3-col comparison table with embedded twin percent-bars per row
   (Technical Support "Where the Support Dollar Goes") — genuinely new shape (matrix's cells are plain
   text, this needs a value + inline mini progress bar per cell), so hand-built rather than forced into
   .pg-svcp-matrix. Reuses the same white-box/shadow/header-bar chrome as matrix for visual consistency. ---------- */
.pg-svcp-costalloc { background: #fff; border: 1px solid #E8EAEF; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 34px rgba(20,22,30,.06); }
.pg-svcp-costalloc-head { display: grid; grid-template-columns: 2fr 1.5fr 1.5fr; padding: 16px 28px; background: #0C1A3A; color: #E7EAF1; font: 600 12px/1.3 'Hanken Grotesk', sans-serif; letter-spacing: .04em; }
.pg-svcp-costalloc-row { display: grid; grid-template-columns: 2fr 1.5fr 1.5fr; gap: 0 20px; padding: 18px 28px; border-bottom: 1px solid #EEF0F4; align-items: center; font: 400 13.5px/1.5 'Hanken Grotesk', sans-serif; }
.pg-svcp-costalloc-row:last-child { border-bottom: none; }
.pg-svcp-costalloc-row .lbl strong { font-weight: 700; color: #14161E; }
.pg-svcp-costalloc-row .lbl span { font-weight: 400; color: #5A5F6E; }
.pg-svcp-costalloc-pct { font: 700 17px/1 'Bricolage Grotesque', sans-serif; }
.pg-svcp-costalloc-bar { display: block; margin-top: 7px; height: 8px; background: #F3F4F7; border-radius: 4px; }
.pg-svcp-costalloc-bar > span { display: block; height: 100%; border-radius: 4px; }
@media (max-width: 700px) { .pg-svcp-costalloc-head, .pg-svcp-costalloc-row { grid-template-columns: 1fr !important; gap: 6px; } }

/* ---------- Language-coverage matrix row: name+region tag / wrapped pill list / progress bar+depth label
   (Multilingual Call Center "Language Coverage Matrix") — new shape: no existing component combines a
   fixed-width label column, a flexible wrapped-pill middle column and a fixed-width bar+caption column
   in one row, so hand-built following the same white-card/border-left-accent pattern as riskcard/tiercard. ---------- */
.pg-svcp-langmatrix { display: flex; flex-direction: column; gap: 14px; }
.pg-svcp-langmatrix-row { display: grid; grid-template-columns: 210px 1fr 170px; gap: 28px; align-items: center; background: #fff; border: 1px solid #ECEEF2; border-radius: 10px; border-left: 4px solid #46C2A8; padding: 22px 28px; }
.pg-svcp-langmatrix-name .t { font: 700 17px/1.2 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 6px; }
.pg-svcp-langmatrix-name .r { font: 500 12px/1.3 'Hanken Grotesk', sans-serif; letter-spacing: .04em; color: #9097A4; }
.pg-svcp-langmatrix-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-svcp-langmatrix-pills span { font: 600 12.5px/1 'Hanken Grotesk', sans-serif; padding: 7px 12px; border-radius: 999px; border: 1px solid; }
.pg-svcp-langmatrix-depth .bar { height: 8px; background: #EEF0F4; border-radius: 6px; overflow: hidden; margin-bottom: 9px; }
.pg-svcp-langmatrix-depth .bar span { display: block; height: 100%; border-radius: 6px; }
.pg-svcp-langmatrix-depth .lbl { font: 600 12px/1 'Hanken Grotesk', sans-serif; color: #5F6675; }
@media (max-width: 800px) { .pg-svcp-langmatrix-row { grid-template-columns: 1fr !important; gap: 14px; } .pg-svcp-langmatrix-depth { max-width: 220px; } }

/* ---------- Mobile-only section padding ----------
   560px matches this file's existing "smallest tier" breakpoint (see the .pg-grid-* collapse above,
   and every 560px rule elsewhere in this file) — intentionally narrower than the 700-900px tier used
   for tablet/tablet-landscape column collapses, so this never fires on tablets or larger.
   Every section wrapper on this template shares a 64px horizontal inset by design (max-width:1240px
   pattern) so sections line up on tablet/desktop; at 560px and below that inset eats too much of a
   narrow viewport. .pg-svcp-hero-inner and .pg-svcp-section (the generic wrapper nearly every section
   uses) get the full padding swap to 40px/30px per instruction. The other specialized inner-wrapper
   classes below keep their own tuned vertical rhythm (24px for the tight credential strip vs. 132px for
   the closing CTA are deliberate) and only get the horizontal fix, so every section's left/right edge
   still lines up with the hero without flattening unrelated vertical spacing decisions. !important is
   required on all of these since most section instances set their own inline padding per page. */
@media (max-width: 560px) {
	.pg-svcp-hero-inner { padding: 40px 30px !important; }
	.pg-svcp-section { padding: 40px 30px !important; }
	.pg-svcp-inline-cta-wrap,
	.pg-svcp-cred-inner,
	.pg-svcp-scale-inner,
	.pg-svcp-threshold-inner,
	.pg-svcp-pillcta-wrap,
	.pg-svcp-closing-cta-inner,
	.pg-svcp-closing-flat-inner,
	.pg-svcp-darkband-inner {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
	/* Long unbreakable stat values at 26px (e.g. "Provenance-logged") floor the dflow
	   detail panel's width on phones — stack the stat pair and ease the value size. */
	.pg-svcp-dflow-stats { grid-template-columns: 1fr !important; }
	.pg-svcp-dflow-stats .v { font-size: 20px; }
	/* Same hero floor as industry pages: the two-up boxstats row + 64px card padding
	   can't shrink below ~306px, and the solid CTA's nowrap text runs ~284px. */
	.pg-svcp-hero-boxstats { grid-template-columns: 1fr !important; }
	.pg-svcp-hero-card { padding: 24px; }
	.pg-svcp-hero-bigstat { padding: 18px 20px; }
	/* flex-shrink:1 so white-space:normal can actually wrap long CTA text — a
	   flex-shrink:0 item sizes to max-content and never reaches a wrap point */
	.pg-svcp-btn-solid, .pg-svcp-btn-ghost { padding: 15px 18px; font-size: 14.5px; white-space: normal; flex-shrink: 1; }
	/* Inline-styled one-off CTAs (unclassed anchors in post content) that declare
	   nowrap / flex-shrink:0 can't fit a phone — let them wrap. */
	.pg-svcp-body a[style*="white-space:nowrap"],
	.pg-svcp-body a[style*="flex-shrink:0"],
	.pg-svcp-body a[style*="white-space: nowrap"],
	.pg-svcp-body a[style*="flex-shrink: 0"] {
		white-space: normal !important;
		flex-shrink: 1 !important;
	}
}

/* ---------- Mobile overflow guards (2026-08-03 sitewide 320/360/414 sweep) ----------
   Same guard set as industry-page.css: bespoke inline-styled (unclassed) rows, grids and
   fixed-width labels that can't wrap or shrink on phones. Attr selectors only match
   inline-styled elements and are geometric no-ops when the row already fits. Each
   selector appears raw ("display:flex") and spaced ("display: flex") because
   responsive-fineprint.js rewrites small-font elements' style via CSSOM, re-serializing
   the attribute in the spaced form. Scoped to .single-service (not .pg-svcp-body — that
   wrapper only spans part of some pages); this stylesheet is enqueued exclusively on
   is_singular('service'), so .single-service here is always a service page. */
@media (max-width: 700px) {
	.single-service div[style*="display:flex"][style*="align-items:center"],
	.single-service div[style*="display: flex"][style*="align-items: center"],
	.single-service div[style*="display:flex"][style*="align-items:flex-start"],
	.single-service div[style*="display: flex"][style*="align-items: flex-start"],
	.single-service div[style*="display:flex"][style*="justify-content:space-between"],
	.single-service div[style*="display: flex"][style*="justify-content: space-between"] { flex-wrap: wrap; }
	/* Dot-list rows (tiny circle span + text) must never wrap — with wrap on,
	   the text span breaks to its own line at content width and strands the
	   dot alone above it. nowrap lets the text shrink and wrap internally
	   beside the dot instead. Targets span circles only, so photo cards
	   (img circles) keep their own stacking rules. */
	.single-service div[style*="display:flex"]:has(> span[style*="border-radius:50%"]),
	.single-service div[style*="display: flex"]:has(> span[style*="border-radius: 50%"]) { flex-wrap: nowrap; }
	.single-service [style*="flex-shrink:0"],
	.single-service [style*="flex-shrink: 0"] { max-width: 100%; }
	/* substring also matches "min-width:280px" etc. — clear both floors */
	.single-service div[style*="width:300px"],
	.single-service div[style*="width:280px"],
	.single-service div[style*="width:210px"],
	.single-service div[style*="width: 300px"],
	.single-service div[style*="width: 280px"],
	.single-service div[style*="width: 210px"] { width: 100% !important; min-width: 0 !important; }
	.single-service div[style*="grid-template-columns:1fr 1fr 1fr"],
	.single-service div[style*="grid-template-columns:repeat(3"],
	.single-service div[style*="grid-template-columns:repeat(4"],
	.single-service div[style*="grid-template-columns:repeat(5"],
	.single-service div[style*="grid-template-columns: 1fr 1fr 1fr"],
	.single-service div[style*="grid-template-columns: repeat(3"],
	.single-service div[style*="grid-template-columns: repeat(4"],
	.single-service div[style*="grid-template-columns: repeat(5"],
	/* fractional inline templates ("1.15fr 1fr", "0.9fr 1.1fr", …) */
	.single-service div[style*="grid-template-columns:1."],
	.single-service div[style*="grid-template-columns:0."],
	.single-service div[style*="grid-template-columns: 1."],
	.single-service div[style*="grid-template-columns: 0."] { grid-template-columns: 1fr !important; }
	.single-service div[style*="align-items:stretch"][style*="gap:8px"],
	.single-service div[style*="align-items: stretch"][style*="gap: 8px"],
	.single-service div[style*="align-items:flex-end"][style*="height:"],
	.single-service div[style*="align-items: flex-end"][style*="height:"] { overflow-x: auto; }
}
@media (max-width: 560px) {
	/* on phones every inline multi-column grid collapses, mirroring the .pg-grid-N
	   utilities' own 560px tier (catches px/fractional templates like "200px 1fr 1fr");
	   minmax(0,1fr) so the single track can't floor at a card's min-content width */
	.single-service div[style*="grid-template-columns:"] { grid-template-columns: minmax(0, 1fr) !important; }
	/* inline nowrap can never be honored on a phone-width line */
	.single-service [style*="white-space:nowrap"],
	.single-service [style*="white-space: nowrap"] { white-space: normal !important; }
	.single-service div[style*="padding:38px 40px"],
	.single-service div[style*="padding: 38px 40px"] { padding: 28px 22px !important; }
	.single-service div[style*="padding:30px 34px"],
	.single-service div[style*="padding: 30px 34px"] { padding: 24px 20px !important; }
	/* classed components the 320-414px sweep caught overflowing */
	.pg-svcp-inline-cta .go { white-space: normal; }
	/* John-band button+headshot unit: let the button text wrap on phones.
	   The base rule sets flex-shrink:0 (correct on desktop, where the band is a
	   single row) — it has to be cleared here or the unit keeps its content width
	   and pushes the page sideways. The second johnwrap instance on a page carries
	   a bare <a> with no .go class, so it keeps min-width:auto and its inline-flex
	   row can never wrap; target the anchor itself, not just .go. Found 2026-08-10
	   overflowing at 390px on Mechanical & Product Design, Model Evaluation & RLHF,
	   LPO and RPO. */
	.pg-svcp-johnwrap { white-space: normal; flex-shrink: 1; flex-wrap: wrap; min-width: 0; }
	.pg-svcp-johnwrap a { white-space: normal; flex-wrap: wrap; min-width: 0; max-width: 100%; }
	.pg-svcp-johnwrap .go { min-width: 0; }
	.pg-svcp-darkband-tag { flex-shrink: 1; max-width: 100%; }
	.pg-svcp-throughline .tag { flex-shrink: 1; max-width: 100%; }
	.pg-svcp-tierswitch-stats { grid-template-columns: 1fr !important; }
	.pg-svcp-tierswitch-main { padding: 28px 22px; }
	.pg-svcp-tierswitch-fit { padding: 24px 20px; }
	.pg-svcp-quote-card { flex-wrap: wrap; padding: 24px 20px; gap: 16px; }
	.pg-svcp-tiercard { padding: 22px 18px; }
	/* chat-lane ladder: 2-up stat pairs + nowrap-ish name/pct rows floor the column */
	.pg-svcp-ladder-stat-grid { grid-template-columns: 1fr !important; }
	.pg-svcp-ladder-tab .row { flex-wrap: wrap; }
	.pg-svcp-ladder { padding: 24px 20px; }
}

/* ---------- Authorship & Verification (Aug 5 handoff rollout) ---------- */
.pg-auth-inner { max-width: 1240px; margin: 0 auto; padding: 56px 64px 64px; }
.pg-auth-eyebrow { margin-bottom: 28px; }
.pg-auth-eyebrow .lbl { font: 700 11.5px/1.5 'Hanken Grotesk', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #646B7B; }
.pg-auth-eyebrow .lbl::before { content: ''; display: inline-block; width: 24px; height: 2px; background: #CB0E2A; margin-right: 14px; vertical-align: 0.3em; }
.pg-auth-verified-line .dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #14161E; margin: 0 8px; vertical-align: middle; }
.pg-auth-name:hover { text-decoration: underline !important; }
.pg-auth-bio:hover { color: #A20B21 !important; border-bottom-color: #A20B21 !important; }
@media (max-width: 900px) {
	.pg-auth-grid { grid-template-columns: 1fr !important; }
	.pg-auth-col-l { border-right: none !important; border-bottom: 1px solid #ECEEF2; }
}
@media (max-width: 560px) {
	.pg-auth-inner { padding: 40px 30px !important; }
	.pg-auth-verified-line .dot { display: block; width: 0; height: 0; margin: 0 0 6px; }
}

/* Client request (Aug-12): on small screens the author/verifier row stacks —
   photo enlarged and centered above, name/title left-aligned below, and the
   74px desktop indent on the bio note/link reset. 800px matches (and, via
   higher specificity, overrides) responsive-type.css's generic principal-photo
   card rule, whose 28px/24px padding must not apply inside the auth card. */
@media (max-width: 800px) {
	:root .pg-auth-grid > div > div[style*="display:flex"] {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 18px !important;
		padding: 0 !important;
	}

	.pg-auth-grid > div > div[style*="display:flex"] > img {
		width: 140px !important;
		height: 140px !important;
		margin: 0 auto;
	}

	.pg-auth-grid > div > p,
	.pg-auth-grid > div > .pg-auth-bio {
		margin-left: 0 !important;
	}
}

/* Principal name links -> /about-us/leadership/ profile anchors */
.pg-name-link { color: inherit; text-decoration: none; }
.pg-name-link:hover { text-decoration: underline; }

/* Media foot: disclaimer removed — keep the coverage link right on desktop,
   left on phones (matches its old wrapped position). */
.pg-svcp-media-foot a { margin-left: auto; }
@media (max-width: 560px) {
	.pg-svcp-media-foot a { margin-left: 0; }
}

/* ---------- Integration roadmap: vertical timeline on phones (client pick:
   Option B). Desktop keeps the Gantt. The proportional bars are unreadable in
   a ~230px track, so ≤700px: hide the D1–D14 scale row (the only roadmap row
   with inline margin-bottom), put the phase rows on a dotted rail, and turn
   each absolutely-positioned bar into a static day-range chip that keeps its
   phase color. ---------- */
@media (max-width: 700px) {
	.pg-svcp-roadmap-row[style*="margin-bottom:10px"] { display: none !important; }
	.pg-svcp-roadmap-row { position: relative; padding-left: 22px; border-left: 2px solid #E8EAEF; margin-left: 5px; }
	.pg-svcp-roadmap-row::before { content: ''; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: #CB0E2A; }
	.pg-svcp-roadmap-row > div { height: auto !important; background: transparent !important; border-radius: 0 !important; }
	.pg-svcp-roadmap-row > div > div { position: static !important; width: auto !important; height: auto !important; display: inline-flex !important; padding: 6px 12px !important; border-radius: 6px !important; }
}

/* Closing CTA (red band, older -cta variant): unclassed h2s lose inherited
   white to theme.json's global heading color — same guard the -flat variant
   already has (dark-section contrast convention). */
.pg-svcp-closing-cta h2 { color: #fff !important; }

/* Metrictable rows INSIDE a bordered .pg-svcp-matrix card: the generic mobile
   padding-zero above assumes a padded outer container, but in-card rows end up
   flush against the card border — restore an inset (14 pages). */
@media (max-width: 900px) {
	.pg-svcp-matrix .pg-svcp-metrictable-row { padding-left: 18px !important; padding-right: 18px !important; }
}

/* Inline CTA bands (navy/red rounded strips with a button): explicit single
   column on phones instead of relying on flex-wrap. */
@media (max-width: 700px) {
	.pg-svcp-cta-band { flex-direction: column; align-items: flex-start !important; }
}

/* ---------- AI containment funnel: phone variant (client pick: Option A,
   thicker gauge, darker caption). The desktop funnel keeps 30px numerals
   inside proportional fills — unreadable in a ~315px track — so ≤700px swaps
   in a stat-row block: name + big number on one line, caption, 9px gauge.
   The two blocks are markup siblings on the AI Call Center page. ---------- */
.pg-funnel-mobile { display: none; }
@media (max-width: 700px) {
	.pg-funnel-desktop { display: none !important; }
	.pg-funnel-mobile { display: flex; flex-direction: column; gap: 18px; }
	.pg-funnel-mobile .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
	.pg-funnel-mobile .nm { font: 700 15px/1.2 'Bricolage Grotesque', sans-serif; color: #14161E; }
	.pg-funnel-mobile .num { font: 700 26px/1 'Bricolage Grotesque', sans-serif; letter-spacing: -0.01em; }
	.pg-funnel-mobile .cap { font: 500 11px/1.45 'Hanken Grotesk', sans-serif; letter-spacing: .03em; color: #5F6675; margin: 3px 0 7px; }
	.pg-funnel-mobile .gauge { height: 9px; border-radius: 5px; background: #F3F4F7; overflow: hidden; }
	.pg-funnel-mobile .gauge span { display: block; height: 100%; border-radius: 5px; }
}

/* Inline-styled bordered table cards (back-office variant of .pg-svcp-matrix):
   same mobile row-inset need as in-matrix rows. */
@media (max-width: 900px) {
	.pg-svcp-tablecard .pg-svcp-metrictable-row { padding-left: 18px !important; padding-right: 18px !important; }
}

/* ---------- Figure 1 (maker-checker loop): phone variant (client pick:
   Option A revised — square top corners, 5px accent, larger darker sublabels).
   The SVG scales unreadably below ~700px; the .pg-figmob step list swaps in,
   sharing the figure's own figcaption. Per-step accent colors ride inline
   border-top-color. ---------- */
.pg-figmob { display: none; }
@media (max-width: 700px) {
	.pg-fig-swap svg { display: none; }
	.pg-figmob { display: flex; flex-direction: column; gap: 9px; }
	.pg-figmob .step { border: 1px solid #E2E8F1; border-top: 5px solid #E2E8F1; border-radius: 0 0 8px 8px; padding: 12px 14px; background: #fff; }
	.pg-figmob .step .t { font: 700 15px/1.2 'Bricolage Grotesque', sans-serif; color: #14161E; }
	.pg-figmob .step .d { font: 400 14px/1.45 'Hanken Grotesk', sans-serif; color: #42475A; margin-top: 3px; }
	.pg-figmob .step .ex { font: 600 12px/1.4 'Hanken Grotesk', sans-serif; color: #CB0E2A; margin-top: 5px; }
	.pg-figmob .arr { text-align: center; color: #9097A4; font-size: 14px; line-height: 1; }
	.pg-figmob .foot { font: 400 11.5px/1.5 'Hanken Grotesk', sans-serif; letter-spacing: .04em; color: #9097A4; margin-top: 6px; }
}

/* ---------- Month-end close calendar (finance-accounting): phone variant
   (client pick: Option A, +2 fonts, darker descriptions). The 5-col day grid
   is unreadable ≤700px; the .pg-calmob workstream list swaps in for the
   <table> only — figcaption and the stat footer stay shared. ---------- */
.pg-calmob { display: none; }
@media (max-width: 700px) {
	.pg-cal-swap table { display: none; }
	.pg-calmob { display: flex; flex-direction: column; }
	.pg-calmob .wrow { border-top: 1px solid #F2F4F7; padding: 12px 0; }
	.pg-calmob .wrow:first-child { border-top: none; padding-top: 0; }
	.pg-calmob .head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
	.pg-calmob .nm { font: 700 14px/1.25 'Bricolage Grotesque', sans-serif; color: #14161E; }
	.pg-calmob .chip { flex-shrink: 0; font: 600 12px/1 'Hanken Grotesk', sans-serif; color: #fff; border-radius: 6px; padding: 5px 10px; white-space: nowrap; }
	.pg-calmob .d { font: 400 12.5px/1.5 'Hanken Grotesk', sans-serif; color: #42475A; margin-top: 4px; }
}