/* Industry single-page template — shared across /industry/{slug}/ pages (first built for iGaming) */

.pg-indp-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); }
@media (max-width: 900px) {
	.pg-grid-3, .pg-grid-4, .pg-grid-5 { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 560px) {
	.pg-grid-2, .pg-grid-3, .pg-grid-4, .pg-grid-5 { grid-template-columns: 1fr !important; }
}

/* ---------- Hero ---------- */
.pg-indp-hero {
	background: radial-gradient(130% 120% at 84% -10%, #16294C 0%, #0E1B3A 42%, #0A1430 100%);
	border-bottom: 1px solid #0A1430; color: #fff;
}
.pg-indp-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-indp-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-indp-eyebrow-pill {
	font: 700 12.5px/1.5 'Hanken Grotesk', sans-serif;
	letter-spacing: .16em;
	color: #fff;
	margin-bottom: 24px;
}
@keyframes pgIndpLivePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } }
.pg-indp-h1 { font: 700 64px/1.02 'Bricolage Grotesque', sans-serif !important; letter-spacing: -0.025em; margin: 0 0 26px !important; color: #fff !important; }
.pg-indp-h1 .accent { color: #FF6477; }
.pg-indp-hero-sub { font: 400 20px/1.6 'Hanken Grotesk', sans-serif !important; color: #B8C0D2 !important; max-width: 560px; margin: 0 0 38px !important; }
.pg-indp-hero-sub strong { color: #fff; font-weight: 700; }
.pg-indp-hero-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 42px; }
.pg-indp-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-indp-btn-solid:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(203,14,42,.4); color: #fff; }
.pg-indp-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-indp-btn-ghost:hover { border-color: #fff; color: #fff; }
.pg-indp-hero-meta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; font: 500 13px/1.5 'Hanken Grotesk', sans-serif; color: #fff; }
.pg-indp-hero-meta strong { color: #fff; font-weight: 700; }
.pg-indp-hero-meta .sep { width: 4px; height: 4px; background: #CB0E2A; border-radius: 50%; }

.pg-indp-hero-card { background: #0C1A3A; border-radius: 3px; padding: 32px; box-shadow: 0 30px 70px rgba(14,16,22,.28); position: relative; }
.pg-indp-hero-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.pg-indp-hero-card-head .label { font: 500 12.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .12em; color: #C2C8D4; }
.pg-indp-hero-card-head .live { display: flex; align-items: center; gap: 7px; font: 500 12.5px/1 'Hanken Grotesk', sans-serif; color: #46C2A8; }
.pg-indp-hero-card-head .live .dot { width: 6px; height: 6px; background: #46C2A8; border-radius: 50%; animation: pgIndpLivePulse 2s ease-in-out infinite; }
.pg-indp-hero-chart { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.pg-indp-hero-chart svg { width: 100%; max-width: 240px; height: auto; }
.pg-indp-hero-legend { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.pg-indp-hero-legend-row { display: flex; align-items: center; gap: 9px; }
.pg-indp-hero-legend-row .swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.pg-indp-hero-legend-row .lbl { font: 600 11.5px/1.2 'Hanken Grotesk', sans-serif; color: #E7EAF1; }
.pg-indp-hero-legend-row .val { font: 700 13px/1 'Hanken Grotesk', sans-serif; color: #8FA0BE; margin-left: auto; }
.pg-indp-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.pg-indp-hero-stats .lbl { font: 500 11px/1.3 'Hanken Grotesk', sans-serif; color: #C2C8D4; margin-bottom: 8px; }
.pg-indp-hero-stats .val { font: 700 30px/0.9 'Bricolage Grotesque', sans-serif; }
.pg-indp-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-indp-hero-bigstat { background: linear-gradient(135deg,#14B981 0%,#0E9468 100%); border-radius: 3px; padding: 24px 26px; margin-bottom: 14px; }
.pg-indp-hero-bigstat .label { font: 500 12.5px/1 'Hanken Grotesk', sans-serif; color: #CFF3E5; margin-bottom: 10px; }
.pg-indp-hero-bigstat-row { display: flex; align-items: flex-end; justify-content: space-between; }
.pg-indp-hero-bigstat .value { font: 700 52px/0.9 'Bricolage Grotesque', sans-serif; color: #fff; letter-spacing: -0.02em; }
.pg-indp-hero-bigstat .value small { font-size: 26px; }
.pg-indp-hero-bigstat-bars { display: flex; gap: 4px; align-items: flex-end; height: 42px; }
.pg-indp-hero-bigstat-bars div { width: 7px; background: rgba(255,255,255,.45); border-radius: 2px; }
.pg-indp-hero-boxstats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pg-indp-hero-boxstats > div { background: #15294F; border: 1px solid rgba(255,255,255,.06); border-radius: 3px; padding: 20px; }
.pg-indp-hero-boxstats .lbl { font: 500 11.5px/1.3 'Hanken Grotesk', sans-serif; color: #C2C8D4; margin-bottom: 12px; }
.pg-indp-hero-boxstats .val { font: 700 38px/0.9 'Bricolage Grotesque', sans-serif; letter-spacing: -0.02em; }
.pg-indp-hero-boxstats .val small { font-size: 20px; }
.pg-indp-hero-boxstats .sub { font: 500 11px/1.4 'Hanken Grotesk', sans-serif; color: #C2C8D4; margin-top: 8px; }
.pg-indp-hero-footnote { font: 400 11px/1.4 'Hanken Grotesk', sans-serif; color: #7C88A0; margin-top: 12px; }

/* ---------- Inline CTA banner ---------- */
.pg-indp-inline-cta-wrap { max-width: 1240px; margin: 0 auto; padding: 30px 64px 0; }
.pg-indp-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-indp-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-indp-inline-cta .msg { flex: 1; min-width: 220px; font: 700 19px/1.4 'Bricolage Grotesque', sans-serif; color: #fff; }
.pg-indp-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): stack to one column on phones — flex-wrap alone
   left the tag pill stranded beside a squeezed message. Covers the inline-styled copies of
   the same band on healthcare/legal-services/pharma/social-media via the gradient matcher
   (those 4 were never classed). Client request 2026-08-07. */
@media (max-width: 700px) {
	.pg-indp-inline-cta,
	.single-industry div[style*="linear-gradient(100deg,#CB0E2A,#E11D33)"][style*="padding:26px 34px"] {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 14px !important;
	}
	.pg-indp-inline-cta .msg { min-width: 0 !important; }
	.single-industry div[style*="linear-gradient(100deg,#CB0E2A,#E11D33)"][style*="padding:26px 34px"] > span[style*="min-width:220px"] { min-width: 0 !important; }
}
/* .light band restyled by the Aug-6 handoff refresh — rules live at the end of this file
   (slim red gradient; per-page button colors for travel-tech/energy). */
.pg-indp-inline-cta.light .msg { font: 700 19px/1.4 'Bricolage Grotesque', sans-serif; flex: 1; min-width: 220px; }
.pg-indp-inline-cta.light .go { background: #fff; }
/* Aug-7 converted band — see the service-page.css note. Only the 5 industries whose
   sources go red carry .redconv; the other 36 keep .dark and stay navy. */
.pg-indp-threshold.redconv .pg-indp-threshold-tag { color: #CB0E2A; background: #fff; border-color: #fff; }
.pg-indp-threshold.redconv p { color: #FFE1E5; }
.pg-indp-threshold.redconv p strong { color: #fff; }

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

/* ---------- Credential strip ---------- */
.pg-indp-cred { background: #fff; border-bottom: 1px solid #EEF0F4; }
.pg-indp-cred-inner { max-width: 1240px; margin: 0 auto; padding: 24px 64px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.pg-indp-cred-label { font: 500 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .14em; color: #646B7B; flex-shrink: 0; }
.pg-indp-cred-list { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.pg-indp-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-indp-cred-list > span .dot { width: 6px; height: 6px; border-radius: 50%; background: #12996B; flex-shrink: 0; }
/* Same collapse tier as the credstrip badge row further down (680px): label
   stacks above the pill list instead of squeezing beside it. */
@media (max-width: 680px) {
	.pg-indp-cred-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
}

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

/* Ad-hoc scale-band instances built as a raw .pg-stagger grid (not the .pg-indp-scale-* component
   above) carry the same first-item-vs-rest border-left/padding split — once the grid collapses to
   one column on mobile, that split reads as a stray left border and misaligned indent. */
/* 900px, not 560: the grid drops out of its 3-across layout at 900 (2-up) and to 1 column
   below that, so from 900 down the "first item flush / rest indented+divided" split is wrong
   at every width — the 3rd item starts a new row at column 1 yet kept a 40px indent and a
   stray divider (SaaS reported 2026-08-07). Flush-left for all items once it reflows. */
@media (max-width: 900px) {
	.pg-indp-scaleband-item { border-left: none !important; padding: 8px 40px 8px 0 !important; }
}

/* ---------- Threshold bar ---------- */
.pg-indp-threshold { background: linear-gradient(100deg,#CB0E2A,#E11D33); border-top: 1px solid #B00C24; border-bottom: 1px solid #B00C24; color: #fff; }
.pg-indp-threshold-inner { max-width: 1240px; margin: 0 auto; padding: 34px 64px; display: flex; align-items: center; gap: 30px; flex-wrap: nowrap; }
.pg-indp-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-indp-threshold p { margin: 0; font: 400 16.5px/1.55 'Hanken Grotesk', sans-serif; color: #FDE7EA; }
.pg-indp-threshold p strong { color: #fff; font-weight: 600; }
@media (max-width: 680px) {
  .pg-indp-threshold-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- Shared section shell ---------- */
.pg-indp-section { max-width: 1240px; margin: 0 auto; padding: 80px 64px; }
.pg-indp-section.tint { background: #EEF2F8; border-top: 1px solid #DEE5F0; border-bottom: 1px solid #DEE5F0; }
.pg-indp-section-tint-wrap { background: #EEF2F8; border-top: 1px solid #DEE5F0; border-bottom: 1px solid #DEE5F0; }
.pg-indp-section.dark { background: #0C1A3A; color: #D4D8E2; }
.pg-indp-section.dark .pg-indp-badge-label, .pg-indp-section-dark-wrap .pg-indp-badge-label { color: #fff !important; }
.pg-indp-section.dark .pg-indp-h2, .pg-indp-section-dark-wrap .pg-indp-h2 { color: #fff !important; }
.pg-indp-section.dark .pg-indp-h2 .accent, .pg-indp-section-dark-wrap .pg-indp-h2 .accent { color: #FF6E80; }
.pg-indp-section.dark .pg-indp-h3, .pg-indp-section-dark-wrap .pg-indp-h3 { color: #fff !important; }
.pg-indp-section.dark .pg-indp-lede, .pg-indp-section-dark-wrap .pg-indp-lede { color: #AEB6C8 !important; }
.pg-indp-section.dark .pg-indp-lede strong, .pg-indp-section-dark-wrap .pg-indp-lede strong { color: #fff !important; }
/* Outer full-bleed wrapper for dark sections — same pattern as .pg-indp-section-tint-wrap.
   .pg-indp-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, matching the handoff
   source's own <section style="background:#0C1A3A"> wrapping a plain inner content div. */
.pg-indp-section-dark-wrap { background: #0C1A3A; color: #D4D8E2; }

/* ---------- Adjacent-white-section spacing (TEST — Insurtech only, 2026-07-29) ----------
   When two plain-white .pg-indp-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. */
.pg-indp-section-white-wrap + .pg-indp-section-white-wrap .pg-indp-section,
.pg-indp-section-white-wrap + .pg-indp-section-white-wrap.pg-indp-section { padding-top: 40px; }
.pg-indp-section-white-wrap:has(+ .pg-indp-section-white-wrap) .pg-indp-section,
.pg-indp-section-white-wrap.pg-indp-section:has(+ .pg-indp-section-white-wrap) { padding-bottom: 40px; }
/* The compound-selector (no-space) alternates above cover pages like iGaming (the original
   canonical template) whose wp:group IS `.pg-indp-section` directly, with no separate outer
   wrapper carrying a component-specific name — the marker class has to land on that same
   element instead of an ancestor. */
.pg-indp-badge-row { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pg-indp-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-indp-badge-label { font: 700 11.5px/1.5 'Hanken Grotesk', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #0C1A3A; }
.pg-indp-h2 { font: 700 48px/1.08 'Bricolage Grotesque', sans-serif !important; letter-spacing: -0.024em; margin: 0 0 22px !important; max-width: 960px; color: #14161E !important; }
.pg-indp-h2 .accent { color: #CB0E2A; }
.pg-indp-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-indp-lede { font: 400 18.5px/1.62 'Hanken Grotesk', sans-serif !important; color: #4D5260 !important; max-width: 880px; margin: 0 0 46px !important; }
.pg-indp-lede strong { color: #14161E; }
.pg-indp-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-indp-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .pg-indp-profile-grid { grid-template-columns: 1fr !important; } }
.pg-indp-profile-card { background: #fff; border: 1px solid #E8EAEF; border-radius: 3px; padding: 32px; box-shadow: 0 12px 34px rgba(20,22,30,.05); }
.pg-indp-profile-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pg-indp-profile-head .n { font: 700 13px/1 'Hanken Grotesk', sans-serif; color: #CB0E2A; }
.pg-indp-profile-head .t { font: 700 18px/1.25 'Bricolage Grotesque', sans-serif; color: #14161E; }
.pg-indp-profile-tag { font: 600 12px/1.5 'Hanken Grotesk', sans-serif; padding: 8px 12px; border-radius: 6px; display: inline-block; margin-bottom: 16px; }
.pg-indp-profile-card p { font: 400 14.5px/1.6 'Hanken Grotesk', sans-serif; color: #4D5260; margin: 0 0 16px; }
.pg-indp-profile-anchor { font: 600 12.5px/1.4 'Hanken Grotesk', sans-serif; color: #15294F; padding-top: 14px; border-top: 1px solid #EEF0F4; }
.pg-indp-profile-anchor .arrow { color: #CB0E2A; }
.pg-indp-profile-card a { color: #CB0E2A; text-decoration: none; font-weight: 600; }

/* ---------- Control towers (icon-card grid, first built for Banking) ---------- */
.pg-indp-tower-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 40px; }
@media (max-width: 800px) { .pg-indp-tower-grid { grid-template-columns: 1fr !important; } }
.pg-indp-tower-card { background: #fff; border: 1px solid #ECEEF2; border-radius: 3px; padding: 34px; transition: all .2s ease; }
.pg-indp-tower-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,22,30,.08); }
.pg-indp-tower-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.pg-indp-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-indp-tower-head .eyebrow { font: 500 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .12em; }
.pg-indp-tower-title { font: 700 22px/1.2 'Bricolage Grotesque', sans-serif; margin-bottom: 12px; letter-spacing: -0.01em; }
.pg-indp-tower-desc { font: 400 15px/1.6 'Hanken Grotesk', sans-serif; color: #5A5F6E; margin-bottom: 20px; }
.pg-indp-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-indp-benchmarks { background: #0C1A3A; border-radius: 3px; padding: 38px 40px; }
.pg-indp-benchmarks-label { font: 500 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #C2C8D4; margin-bottom: 30px; }
.pg-indp-benchmarks-list { display: flex; flex-direction: column; gap: 24px; }
.pg-indp-benchmark-row-head { display: flex; justify-content: space-between; font: 600 13.5px/1 'Hanken Grotesk', sans-serif; margin-bottom: 11px; color: #E7EAF1; }
.pg-indp-benchmark-row-head .now { color: #46C2A8; }
.pg-indp-benchmark-row-head .now .was { color: #C2C8D4; font-weight: 400; }
.pg-indp-benchmark-track { position: relative; height: 10px; background: rgba(255,255,255,.06); border-radius: 6px; overflow: hidden; }
.pg-indp-benchmark-track.lg { height: 13px; border-radius: 7px; }
.pg-indp-benchmark-baseline { position: absolute; inset: 0; background: #414B5E; border-radius: 6px; }
.pg-indp-benchmark-fill { position: absolute; inset: 0; height: 100%; background: linear-gradient(90deg,#12996B,#46C2A8); border-radius: 6px; }
.pg-indp-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-indp-tabtoggle-panel { display: none; }
.pg-indp-tabtoggle-panel.is-active { display: block; }
/* .pg-indp-phase-detail sets its own display:flex (needed for the badge+content layout) and is
   declared later in this file, so at equal specificity it was beating the two rules above outright
   — every phase-detail panel stayed visible regardless of .is-active. These compound selectors
   outrank both, restoring the hide/show toggle while keeping the flex layout on the active panel. */
.pg-indp-phase-detail.pg-indp-tabtoggle-panel { display: none; }
/* Related but distinct bug from the phase-detail one above: Legal Services' Review Pipeline
   panels carry .pg-grid-2 directly on the .pg-indp-tabtoggle-panel element itself and ALSO repeat
   `display:grid` as an INLINE style on that same element (`class="pg-indp-tabtoggle-panel
   pg-grid-2" style="...display:grid;..."`), instead of nesting a grid child inside a bare panel
   like every other page does. An inline style beats any external-stylesheet rule regardless of
   selector specificity or class count — a compound selector alone (the phase-detail fix's
   approach) cannot out-rank it. !important is the one thing that does: an !important declaration
   in an external stylesheet overrides even a non-!important inline style. So both display:none and
   display:grid here need !important, or the inline display:grid always wins and every gate's panel
   renders simultaneously, stacked (2026-08-01, user screenshot). */
.pg-grid-2.pg-indp-tabtoggle-panel { display: none !important; }
.pg-grid-2.pg-indp-tabtoggle-panel.is-active { display: grid !important; }
.pg-indp-phase-detail.pg-indp-tabtoggle-panel.is-active { display: flex; }
/* Base active-trigger state, matching the white panel it reveals. Many pages inline
   background/color directly on the trigger buttons, so this needs !important to win;
   the .pg-indp-spectrum-tabs / .pg-indp-phase-chips / .pg-indp-pipeline-bars variants below
   are also !important so their higher selector specificity still keeps overriding this default. */
.pg-indp-tabtoggle-trigger.is-active { background: #fff !important; color: #14161E !important; box-shadow: 0 2px 8px rgba(20,22,30,.1); }

/* Per-tab themed variant ("compare architectures" widgets) — each trigger sets its own --accent
   custom property inline (e.g. style="--accent:#E5484D"); the active trigger gets a white
   background with a border/text in that tab's own color, matching the source design's
   archTabStyle(). Higher specificity than the plain default above so it wins wherever used. */
.pg-indp-archtabs .pg-indp-tabtoggle-trigger.is-active {
	background: #fff !important;
	border: 1px solid var(--accent, #14161E) !important;
	color: var(--accent, #14161E) !important;
	box-shadow: 0 2px 8px rgba(20,22,30,.08);
}

/* Same --accent mechanism, inverted treatment ("orchestration suite" pillar widgets): the active
   trigger fills solid with its own color instead of outlining it, matching the source design's
   capTabStyle(). */
.pg-indp-captabs .pg-indp-tabtoggle-trigger.is-active {
	background: var(--accent, #14161E) !important;
	border: 1px solid var(--accent, #14161E) !important;
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(20,22,30,.15);
}

/* "Incident board" family — dark, per-tab color-coded tabtoggle widgets found on 6 industry
   pages (Rush Board/Food Delivery, Disruption Desk/Travel, Guest Journey/Hospitality,
   Community Dashboard/Social Media, Ops Board/Aviation, Campaign Pipeline/Advertising). Each
   page's own .dc.html defines a chip(active,color) function with a distinct hex per tab; the
   WordPress conversion never wired --accent through, so every trigger fell back to the plain
   default rule above (white background, dark text) — wrong for this dark navy-panel design,
   which should stay dark with just a colored border on the active tab. Each trigger needs
   style="--accent:#HEX" inline, sourced from that page's own chip() call sites. Two border
   treatments used across these 6 sources: border-left (vertical list layout: rushboard/
   disruptiondesk/communitydashboard/opsboard) and border-top (centered/horizontal layout:
   guestjourney/campaignpipeline). !important throughout: these pages currently inline a flat
   background on every trigger with no active/inactive distinction, which this must win over.
   Correction (2026-08-01): Disruption Desk (Travel), Ops Board (Aviation), Community Dashboard
   (Social Media) and Campaign Pipeline (Advertising) build their trigger list with BOTH
   .pg-indp-tabtoggle-trigger AND .pg-indp-ladder-tab classes on the same button — their own
   handoff source's chip(active,color) function is textually identical to this block's spec
   (same background/border/border-left(or top) values), so this block is the CORRECT styling for
   them and must win. An earlier fix mistakenly added a :not(.pg-indp-ladder-tab) exclusion here,
   assuming the separate .pg-indp-ladder-tab rules further down (background:#15294F, no colored
   border) were the intended design — they are not; that dedicated ruleset was actually built for
   Research's unrelated "ranked list with %" ladder, which reuses the same class names by
   coincidence and has no chip() function of its own. Specificity alone (3 classes here vs 2 on
   the plain .pg-indp-ladder-tab.is-active rule) makes this block win for Travel/Aviation/Social
   Media/Advertising without needing any :not() exclusion, while Research correctly falls through
   to its own dedicated rules since it uses none of these six wrapper classes. */
.pg-indp-rushboard .pg-indp-tabtoggle-trigger,
.pg-indp-disruptiondesk .pg-indp-tabtoggle-trigger,
.pg-indp-guestjourney .pg-indp-tabtoggle-trigger,
.pg-indp-communitydashboard .pg-indp-tabtoggle-trigger,
.pg-indp-opsboard .pg-indp-tabtoggle-trigger,
.pg-indp-campaignpipeline .pg-indp-tabtoggle-trigger {
	background: rgba(255,255,255,.02) !important;
	border: 1px solid rgba(255,255,255,.08) !important;
	color: inherit !important;
	box-shadow: none !important;
	/* <button> has text-align:center in the browser's UA stylesheet; the border-left variant's
	   own source never sets text-align (unlike Food Delivery/Hospitality's grid triggers, which
	   carry it inline), so this default was silently centering title+subtitle instead of the
	   handoff's left alignment (2026-08-01, reported on Social Media/Travel). The border-top
	   block further down re-asserts center for guestjourney/campaignpipeline, which do want it. */
	text-align: left !important;
}
.pg-indp-rushboard .pg-indp-tabtoggle-trigger.is-active,
.pg-indp-disruptiondesk .pg-indp-tabtoggle-trigger.is-active,
.pg-indp-guestjourney .pg-indp-tabtoggle-trigger.is-active,
.pg-indp-communitydashboard .pg-indp-tabtoggle-trigger.is-active,
.pg-indp-opsboard .pg-indp-tabtoggle-trigger.is-active,
.pg-indp-campaignpipeline .pg-indp-tabtoggle-trigger.is-active {
	background: rgba(255,255,255,.06) !important;
	border-color: var(--accent, #CB0E2A) !important;
	color: inherit !important;
}
.pg-indp-rushboard .pg-indp-tabtoggle-trigger,
.pg-indp-disruptiondesk .pg-indp-tabtoggle-trigger,
.pg-indp-communitydashboard .pg-indp-tabtoggle-trigger,
.pg-indp-opsboard .pg-indp-tabtoggle-trigger {
	border-left: 4px solid rgba(255,255,255,.12) !important;
}
.pg-indp-rushboard .pg-indp-tabtoggle-trigger.is-active,
.pg-indp-disruptiondesk .pg-indp-tabtoggle-trigger.is-active,
.pg-indp-communitydashboard .pg-indp-tabtoggle-trigger.is-active,
.pg-indp-opsboard .pg-indp-tabtoggle-trigger.is-active {
	border-left-color: var(--accent, #CB0E2A) !important;
}
.pg-indp-guestjourney .pg-indp-tabtoggle-trigger,
.pg-indp-campaignpipeline .pg-indp-tabtoggle-trigger {
	border-top: 3px solid rgba(255,255,255,.14) !important;
	text-align: center !important;
}
.pg-indp-guestjourney .pg-indp-tabtoggle-trigger.is-active,
.pg-indp-campaignpipeline .pg-indp-tabtoggle-trigger.is-active {
	border-top-color: var(--accent, #CB0E2A) !important;
}

/* Four more bare ".pg-indp-tabtoggle" widgets (dark navy panel, no family modifier class) found
   during the industries-wide audit missing the same --accent wiring as the incident-board family
   above — Education's journey ladder, Publishing's save-desk funnel, Blockchain/Crypto's risk-tier
   ladder, Business Services' function-reallocation tabs. Scoped to each page's own existing
   section-wrapper class (already present on the outer wp:group, just never had a CSS rule). */
.pg-indp-studentjourney .pg-indp-tabtoggle-trigger.is-active {
	background: transparent !important;
	border-bottom-color: var(--accent, #CB0E2A) !important;
	color: #fff !important;
	box-shadow: none !important;
}
.pg-indp-cancelflow .pg-indp-tabtoggle-trigger.is-active,
.pg-indp-riskmap .pg-indp-tabtoggle-trigger.is-active,
.pg-indp-hourstoggle .pg-indp-tabtoggle-trigger.is-active {
	background: rgba(255,255,255,.1) !important;
	border: 1px solid var(--accent, #CB0E2A) !important;
	color: #fff !important;
	box-shadow: none !important;
}

/* "Click to compare" pulsing hint, floating above the tab group — present in the source design
   (.cyn-clue) but dropped during conversion. Needs position:relative on the tab-group wrapper. */
.pg-indp-archtabs, .pg-indp-captabs { position: relative; margin-top: 34px; }
.cyn-clue { position: absolute; bottom: calc(100% + 9px); right: 2px; display: inline-flex; align-items: center; gap: 7px; font: 600 13px/1 'Hanken Grotesk', sans-serif; color: #CB0E2A; white-space: nowrap; pointer-events: none; }
.cyn-clue::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #CB0E2A; animation: cynCluePulse 1.3s ease-in-out infinite; }
@keyframes cynCluePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .2; transform: scale(.5); } }
@media (prefers-reduced-motion: reduce) { .cyn-clue::before { animation: none; } }

/* ---------- Stage-flow (5 stage cards + arrow separators, inside tab-toggle panels) ---------- */
.pg-indp-stageflow-arrow { flex-shrink: 0; }
@media (max-width: 900px) {
	.pg-indp-stageflow { flex-direction: column !important; }
	/* align-self:center is load-bearing: in the column layout the arrow div
	   would otherwise stretch full-width (parent is align-items:stretch), and
	   rotating that wide box swings its left-anchored glyph off-position into
	   the neighboring card. Centered, the box shrinks to the glyph and the
	   rotation spins in place — a clean ↓ between the stacked cards. */
	.pg-indp-stageflow-arrow { transform: rotate(90deg); align-self: center; }
}

/* ---------- Credential strip (platform/framework badge row) ---------- */
@media (max-width: 680px) {
	.pg-indp-credstrip-row { flex-direction: column !important; align-items: flex-start !important; }
	/* Disabled 2026-08-07 (client): stacking the badges one-per-row reads as a long thin
	   column and looks worse than letting them wrap naturally at their own widths.
	   .pg-indp-credstrip-badges { flex-direction: column !important; align-items: stretch !important; } */
}

/* ---------- Mid-page CTA card top bar ---------- */
@media (max-width: 680px) {
	.pg-indp-midcta-topbar { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
}

/* ---------- Maturity / evolution spectrum (3-state tab toggle) ---------- */
.pg-indp-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-indp-spectrum-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; }
.pg-indp-spectrum-head .label { font: 500 12.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .12em; color: #646B7B; }
.pg-indp-spectrum-tabs { margin-top: 1em; display: flex; gap: 8px; background: #F2F3F6; padding: 5px; border-radius: 4px; position: relative; }
.pg-indp-spectrum-tabs .pg-indp-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;
}
/* Same --accent mechanism as .pg-indp-archtabs (this component predates that one but is styled
   identically in source — archTabStyle(): white bg + border/text in the active tab's own color).
   Each trigger needs style="--accent:#HEX" inline, sourced from that page's own .dc.html. */
.pg-indp-spectrum-tabs .pg-indp-tabtoggle-trigger.is-active { background: #fff !important; border: 1px solid var(--accent, #14161E) !important; color: var(--accent, #14161E) !important; box-shadow: 0 2px 8px rgba(20,22,30,.1); }
.pg-indp-spectrum-flow { display: flex; align-items: stretch; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.pg-indp-spectrum-flow-step { flex: 1; min-width: 130px; border-radius: 3px; padding: 20px 16px; }
.pg-indp-spectrum-flow-step .k { font: 600 12px/1 'Hanken Grotesk', sans-serif; margin-bottom: 10px; }
.pg-indp-spectrum-flow-step .t { font: 700 15px/1.2 'Bricolage Grotesque', sans-serif; margin-bottom: 6px; }
.pg-indp-spectrum-flow-step .d { font: 400 12.5px/1.45 'Hanken Grotesk', sans-serif; }
.pg-indp-spectrum-flow-arrow { display: flex; align-items: center; font-size: 22px; font-weight: 700; }
/* Collapse to a single column on small screens — same treatment as .pg-indp-stageflow above.
   flex-wrap alone left the 5 steps in a ragged 2-2-1 block at phone widths (banking/government
   reported 2026-08-07); the arrows rotate to ↓ and shrink to the glyph via align-self:center. */
@media (max-width: 900px) {
	.pg-indp-spectrum-flow { flex-direction: column !important; }
	.pg-indp-spectrum-flow-arrow { transform: rotate(90deg); align-self: center; }
}
.pg-indp-spectrum-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.pg-indp-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-indp-loop { background: #0C1A3A; color: #fff; position: relative; overflow: hidden; }
.pg-indp-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-indp-loop-eyebrow { font: 700 11.5px/1.5 'Hanken Grotesk', sans-serif; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; }
.pg-indp-loop-panel { border: 1px solid rgba(255,255,255,.16); border-radius: 6px; padding: 14px; }
.pg-indp-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-indp-loop-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; align-items: stretch; }
@media (max-width: 900px) { .pg-indp-loop-grid { grid-template-columns: 1fr 1fr !important; } }
/* Phones always get a single column (client request, telecom refinement) — the 2-up tier
   above stays for 701-900px tablets. !important beats the per-grid inline repeat() overrides. */
@media (max-width: 700px) { .pg-indp-loop-grid { grid-template-columns: 1fr !important; } }
.pg-indp-loop-grid > div { background: #15294F; border: 1px solid rgba(255,255,255,.07); border-radius: 4px; padding: 22px; }
.pg-indp-loop-grid .k { font: 600 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; margin-bottom: 12px; }
.pg-indp-loop-grid .d { font: 400 13.5px/1.5 'Hanken Grotesk', sans-serif; color: #E7EAF1; }
.pg-indp-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-indp-loop-sub { font: 400 15px/1.65 'Hanken Grotesk', sans-serif; color: #B8C0D2; max-width: 920px; margin: 24px 0 52px; }
.pg-indp-loop-sub strong { color: #fff; }
.pg-indp-loop-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width: 900px) { .pg-indp-loop-steps { grid-template-columns: 1fr !important; } }
.pg-indp-loop-steps > div { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 4px; padding: 26px; }
.pg-indp-loop-steps .k { font: 700 13px/1 'Hanken Grotesk', sans-serif; margin-bottom: 14px; }
.pg-indp-loop-steps .d { font: 400 14px/1.6 'Hanken Grotesk', sans-serif; color: #C2C8D4; }
/* .pg-indp-loop is a dark full-bleed section wrapper like .pg-indp-section.dark, but under its own
   name — the generic .pg-indp-h2/.pg-indp-h3/.pg-indp-lede/.pg-indp-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-indp-section.dark, scoped to this class instead. */
.pg-indp-loop .pg-indp-badge-label { color: #fff !important; }
.pg-indp-loop .pg-indp-h2 { color: #fff !important; }
.pg-indp-loop .pg-indp-h2 .accent { color: #FF6477; }
.pg-indp-loop .pg-indp-h3 { color: #fff !important; }
.pg-indp-loop .pg-indp-lede { color: #B8C0D2 !important; }
.pg-indp-loop .pg-indp-lede strong { color: #fff !important; }

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

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

/* ---------- Risk-gated framework (phase band + week strip + interactive explorer) ---------- */
.pg-indp-framework-band { background: #0C1A3A; border-radius: 3px; padding: 38px 40px; margin-bottom: 30px; }
/* A single persistent progress bar shared across all panels of a pg-indp-tabtoggle (see
   tab-panel-toggle.js's [data-yield-bar] handling) — the transition only animates because the
   width is updated in place on one element, not swapped between per-panel duplicates. */
[data-yield-bar] { transition: width .5s cubic-bezier(.22,.8,.18,1), background .5s cubic-bezier(.22,.8,.18,1); }
.pg-indp-framework-label { font: 500 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #C2C8D4; margin-bottom: 26px; }
.pg-indp-framework-phases { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.pg-indp-framework-phases > div { flex: 1; background: #1E3460; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 16px 18px; }
.pg-indp-framework-phases .wk { font: 600 11.5px/1 'Hanken Grotesk', sans-serif; margin-bottom: 8px; }
.pg-indp-framework-phases .nm { font: 700 15px/1.2 'Bricolage Grotesque', sans-serif; color: #fff; }
.pg-indp-framework-weeks { display: flex; gap: 3px; flex-wrap: wrap; }
.pg-indp-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; background: #1E3460; }
.pg-indp-phase-explorer { background: #fff; border: 1px solid #E8EAEF; border-radius: 3px; padding: 30px; box-shadow: 0 10px 30px rgba(20,22,30,.04); }
.pg-indp-phase-explorer-label { font: 500 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #646B7B; margin-bottom: 20px; }
.pg-indp-phase-chips { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-bottom: 26px; }
@media (max-width: 800px) { .pg-indp-phase-chips { grid-template-columns: 1fr 1fr !important; } }
.pg-indp-phase-chips .pg-indp-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-indp-phase-chips .pg-indp-tabtoggle-trigger.is-active { background: #F7F8FA !important; border-left-color: #CB0E2A; }
.pg-indp-phase-chips .wk { display: block; font: 600 11px/1 'Hanken Grotesk', sans-serif; color: #9097A4; margin-bottom: 6px; }
.pg-indp-phase-chips .lb { display: block; font: 600 12.5px/1.3 'Hanken Grotesk', sans-serif; color: #14161E; }
/* .pg-indp-phase-chips assumes a light/white card by default (used that way on most pages).
   Nested inside a dark .pg-indp-framework-band card instead (e.g. Information Services' gate
   pipeline), that light styling reads as broken/unstyled — override to match the source design's
   translucent-white-on-navy chip treatment. Each trigger carries --accent inline (same mechanism
   as .pg-indp-archtabs/.pg-indp-captabs) so the active border/background use that gate's own color. */
.pg-indp-framework-band .pg-indp-phase-chips .pg-indp-tabtoggle-trigger {
	background: rgba(255,255,255,.02);
	border: 1px solid rgba(255,255,255,.08);
	border-top: 3px solid rgba(255,255,255,.14);
}
.pg-indp-framework-band .pg-indp-phase-chips .pg-indp-tabtoggle-trigger.is-active {
	background: rgba(255,255,255,.06) !important;
	border-color: var(--accent, #CB0E2A) !important;
}
.pg-indp-framework-band .pg-indp-phase-chips .lb { color: #fff; }
/* Light-context phase-chips where every stage/gate carries its own accent color (e.g. EdTech's
   lifecycle explorer) instead of the shared single-red-left-edge default — full accent border via
   the same --accent inline mechanism as .pg-indp-archtabs/.pg-indp-captabs/.pg-indp-framework-band. */
.pg-indp-phase-chips-accent .pg-indp-tabtoggle-trigger.is-active {
	background: #fff !important;
	border-color: var(--accent, #CB0E2A) !important;
	border-left-color: var(--accent, #CB0E2A) !important;
	box-shadow: 0 4px 14px rgba(20,30,55,.08);
}
.pg-indp-phase-detail { display: flex; gap: 24px; align-items: flex-start; padding: 30px; background: #F7F8FA; border-radius: 3px; }
.pg-indp-phase-detail-badge { flex-shrink: 0; width: 56px; height: 56px; border-radius: 15px; background: #CB0E2A; color: #fff; display: flex; align-items: center; justify-content: center; font: 700 22px/1 'Bricolage Grotesque', sans-serif; }
/* .pg-indp-phase-explorer's own phase-chips use a rounded top-accent card style (per the source's
   chipStyle() generator) instead of the flatter left-accent default used by .pg-indp-phase-chips
   elsewhere — each chip carries --accent inline for its own phase color (same mechanism as
   .pg-indp-archtabs/.pg-indp-captabs/.pg-indp-framework-band). */
.pg-indp-phase-explorer .pg-indp-phase-chips .pg-indp-tabtoggle-trigger {
	border: 1px solid #E7E9EE;
	border-top: 3px solid #E7E9EE;
	background: #fff;
	border-radius: 13px;
	padding: 16px 14px;
}
.pg-indp-phase-explorer .pg-indp-phase-chips .pg-indp-tabtoggle-trigger.is-active {
	border-color: var(--accent, #CB0E2A) !important;
	border-top-color: var(--accent, #CB0E2A) !important;
	background: rgba(20,22,30,.015) !important;
}
.pg-indp-phase-explorer .pg-indp-phase-chips .wk { color: #767E91; }
.pg-indp-phase-explorer .pg-indp-phase-chips .pg-indp-tabtoggle-trigger.is-active .wk { color: var(--accent, #CB0E2A); }
.pg-indp-phase-explorer .pg-indp-phase-chips .lb { color: #5F6675; }
.pg-indp-phase-explorer .pg-indp-phase-chips .pg-indp-tabtoggle-trigger.is-active .lb { color: #14161E; }
.pg-indp-phase-detail-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.pg-indp-phase-detail-title { font: 700 20px/1.2 'Bricolage Grotesque', sans-serif; }
.pg-indp-phase-detail-weeks { font: 500 13px/1 'Hanken Grotesk', sans-serif; color: #646B7B; }
.pg-indp-phase-detail-items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; margin-bottom: 18px; }
@media (max-width: 700px) {
	.pg-indp-phase-detail-items { grid-template-columns: 1fr !important; }
	/* full 1-column collapse: the stage badge stacks above the content
	   instead of squeezing beside it */
	.pg-indp-phase-detail { flex-direction: column; }
}
.pg-indp-phase-detail-items > div { display: flex; gap: 10px; font: 400 14px/1.5 'Hanken Grotesk', sans-serif; color: #4D5260; }
.pg-indp-phase-detail-items .check { color: #12996B; font-weight: 700; }
.pg-indp-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-indp-simplecard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .pg-indp-simplecard-grid { grid-template-columns: 1fr !important; } }
.pg-indp-simplecard { background: #fff; border: 1px solid #E8EAEF; border-radius: 3px; padding: 30px 32px; box-shadow: 0 12px 34px rgba(20,22,30,.05); }
.pg-indp-simplecard .t { font: 700 16px/1.28 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 9px; }
.pg-indp-simplecard .k { font: 600 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #CB0E2A; margin-bottom: 13px; }
.pg-indp-simplecard p { font: 400 14.5px/1.6 'Hanken Grotesk', sans-serif; color: #4D5260; margin: 0; }
.pg-indp-darkbanner { background: #0C1A3A; border-radius: 3px; padding: 24px 30px; }
.pg-indp-darkbanner p { margin: 0; font: 400 15px/1.6 'Hanken Grotesk', sans-serif; color: #C2C8D4; }
.pg-indp-darkbanner p strong { color: #fff; }

/* ---------- Ledger row (3-col: label | risk (red x) | protection (green check)) ---------- */
.pg-indp-ledger { display: flex; flex-direction: column; gap: 10px; }
.pg-indp-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-indp-ledger-row { grid-template-columns: 1fr !important; } }
.pg-indp-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-indp-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-indp-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-indp-ledger-row .protect .ic { color: #12996B; }

/* ---------- Runway, corner-numeral variant (big faded number top-right, first built for EdTech) ---------- */
.pg-indp-runway2-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
@media (max-width: 900px) { .pg-indp-runway2-grid { grid-template-columns: 1fr 1fr !important; } }
.pg-indp-runway2-card { position: relative; background: #fff; border: 1px solid #ECEEF2; border-top: 4px solid; border-radius: 3px; padding: 28px 26px 26px; overflow: hidden; }
.pg-indp-runway2-num { position: absolute; top: -12px; right: 8px; font: 800 88px/1 'Bricolage Grotesque', sans-serif; opacity: .07; }
.pg-indp-runway2-body { position: relative; }
.pg-indp-runway2-body .wk { font: 600 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; margin-bottom: 10px; }
.pg-indp-runway2-body .t { font: 700 17px/1.2 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 12px; }
.pg-indp-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-indp-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-indp-pillcta-wrap { max-width: 1240px; margin: 0 auto; padding: 8px 64px 80px; }
.pg-indp-pillcta { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; background: #fff; border: 1px solid #E4E7EC; border-radius: 999px; padding: 20px 36px; box-shadow: 0 8px 28px rgba(20,30,55,.06); }
.pg-indp-pillcta .tag { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .14em; color: #CB0E2A; }
.pg-indp-pillcta .msg { font: 600 16px/1.4 'Hanken Grotesk', sans-serif; color: #14161E; }
.pg-indp-pillcta .go { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; background: #CB0E2A; color: #fff; padding: 13px 26px; border-radius: 999px; font: 700 14px/1 'Hanken Grotesk', sans-serif; }

/* ---------- Balance map / quadrant ---------- */
.pg-indp-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-indp-map-panel { grid-template-columns: 1fr !important; } }
.pg-indp-map-panel svg { width: 100%; height: auto; }
.pg-indp-map-legend { display: flex; flex-direction: column; gap: 14px; }
.pg-indp-map-legend-row { display: flex; gap: 14px; align-items: flex-start; }
.pg-indp-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-indp-map-legend-row .title { font: 700 13.5px/1.3 'Hanken Grotesk', sans-serif; color: #fff; }
.pg-indp-map-legend-row .desc { font: 400 12.5px/1.45 'Hanken Grotesk', sans-serif; color: #C2C8D4; margin-top: 3px; }
.pg-indp-quote-card { display: flex; gap: 26px; padding: 36px 40px; background: #F7F8FA; border: 1px solid #E8EAEF; border-radius: 3px; margin-top: 40px; }
.pg-indp-quote-card img { flex-shrink: 0; width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }
.pg-indp-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-indp-quote-card blockquote, .pg-indp-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-indp-quote-attr { font: 600 13.5px/1.4 'Hanken Grotesk', sans-serif; }
.pg-indp-quote-attr span { font-weight: 400; color: #5F6675; }
/* dark variant (used on Licence Test section) */
.pg-indp-quote-card.dark { background: #15294F; border-color: rgba(255,255,255,.08); }
.pg-indp-quote-card.dark .pg-indp-quote-tag { background: #15294F; }
.pg-indp-quote-card.dark blockquote, .pg-indp-quote-card.dark p.q { color: #fff; }
.pg-indp-quote-card.dark .pg-indp-quote-attr { color: #E7ECF3; }
.pg-indp-quote-card.dark .pg-indp-quote-attr span { color: #C2C8D4; }

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

/* ---------- Risk matrix table ---------- */
.pg-indp-matrix { border-radius: 3px; overflow: hidden; border: 1px solid #E8EAEF; box-shadow: 0 12px 34px rgba(20,22,30,.06); background: #fff; }
.pg-indp-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-indp-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-indp-matrix-row:last-child { border-bottom: none; }
.pg-indp-matrix-row.tint { background: #FDF3E9; }
.pg-indp-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-indp-matrix-head, .pg-indp-matrix-row { grid-template-columns: 1fr !important; gap: 6px; } }

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

/* ---------- Economics: benefit bars ---------- */
.pg-indp-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-indp-bar-row { display: flex; align-items: center; gap: 24px; margin-bottom: 14px; }
.pg-indp-bar-row:last-child { margin-bottom: 0; }
.pg-indp-bar-label { width: 280px; flex-shrink: 0; font: 600 14.5px/1.3 'Hanken Grotesk', sans-serif; color: #14161E; }
.pg-indp-bar-track { flex: 1; height: 34px; background: #F3F4F7; border-radius: 8px; overflow: hidden; }
.pg-indp-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; }
/* Labels carry inline width:300px (hence !important); side-by-side that leaves the track
   no room below ~700px, so stack label above its bar. */
@media (max-width: 700px) {
	.pg-indp-bar-row { flex-wrap: wrap; gap: 8px 24px; }
	.pg-indp-bar-label { width: 100% !important; }
	.pg-indp-bar-track { flex: 1 1 100%; }
}
.pg-indp-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 at ALL widths (2026-08-04, mirroring the
   service-page twin): markup order is label-then-value inside an unclassed
   wrapper, flipped visually via flex order — no content edits on 24 pages. */
.pg-indp-bars-total > div:has(> .pg-indp-bars-total-label) { display: flex; flex-direction: column; }
.pg-indp-bars-total-label { order: 2; font: 500 12.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #646B7B; margin-top: 10px; }
.pg-indp-bars-total-value { font: 700 40px/0.9 'Bricolage Grotesque', sans-serif; color: #14161E; letter-spacing: -0.02em; }
.pg-indp-bars-multiplier { text-align: right; }
.pg-indp-bars-multiplier .x { font: 700 56px/0.9 'Bricolage Grotesque', sans-serif; color: #CB0E2A; letter-spacing: -0.02em; }
.pg-indp-bars-multiplier .k { font: 600 12.5px/1 'Hanken Grotesk', sans-serif; color: #5F6675; margin-top: 8px; }

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

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

/* ---------- Root-cause bars + benchmark panel (Life Sciences PA denial only — was colliding with
   .pg-indp-bars-panel above and forcing every other page's single-column benefit bars into 2 columns) ---------- */
.pg-indp-rootcause-panel { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 24px; align-items: stretch; }
@media (max-width: 900px) { .pg-indp-rootcause-panel { grid-template-columns: 1fr !important; } }
.pg-indp-driver-list { display: flex; flex-direction: column; gap: 16px; }
.pg-indp-driver-card { background: #fff; border: 1px solid #ECEEF2; border-radius: 3px; padding: 26px 28px; display: flex; gap: 20px; }
.pg-indp-driver-card .n { flex-shrink: 0; font: 700 22px/1 'Bricolage Grotesque', sans-serif; color: #CB0E2A; }
.pg-indp-driver-card .t { font: 700 17px/1.3 'Bricolage Grotesque', sans-serif; margin-bottom: 7px; }
.pg-indp-driver-card .d { font: 400 14px/1.55 'Hanken Grotesk', sans-serif; color: #5A5F6E; }
.pg-indp-entity-proof { background: #0C1A3A; border-radius: 3px; padding: 38px; display: flex; flex-direction: column; }
.pg-indp-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-indp-entity-proof .fig { font: 700 70px/0.86 'Bricolage Grotesque', sans-serif; color: #FF6477; letter-spacing: -0.02em; margin-bottom: 14px; }
.pg-indp-entity-proof .t { font: 700 17px/1.3 'Bricolage Grotesque', sans-serif; color: #fff; margin-bottom: 16px; }
.pg-indp-entity-proof .d { font: 400 14.5px/1.6 'Hanken Grotesk', sans-serif; color: #C2C8D4; margin: 0 0 auto; }
.pg-indp-entity-proof .d strong { color: #fff; }
.pg-indp-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-indp-case { background: #fff; border-radius: 3px; overflow: hidden; box-shadow: 0 12px 34px rgba(20,22,30,.06); }
.pg-indp-case-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 34px; background: #0C1A3A; }
.pg-indp-case-head.alt { background: #15294F; }
.pg-indp-case-head .tag { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .14em; color: #FF6477; }
.pg-indp-case-head.alt .tag { color: #7FA8FF; }
.pg-indp-case-head .meta { font: 500 13px/1 'Hanken Grotesk', sans-serif; color: #C2C8D4; }
.pg-indp-case-body { padding: 34px; }
.pg-indp-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-indp-case-grid3 { grid-template-columns: 1fr !important; } }
.pg-indp-case-grid3 > div { background: #fff; padding: 24px 26px; }
.pg-indp-case-grid3 .k { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; margin-bottom: 12px; }
.pg-indp-case-grid3 .v { font: 400 14.5px/1.55 'Hanken Grotesk', sans-serif; color: #5A5F6E; }
.pg-indp-case-grid3 .v strong { color: #14161E; }
.pg-indp-case-metrics-label { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .12em; color: #646B7B; margin-bottom: 16px; }
.pg-indp-case-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 28px; }
@media (max-width: 900px) { .pg-indp-case-metrics { grid-template-columns: 1fr 1fr !important; } }
.pg-indp-case-metrics.cols-3 { grid-template-columns: repeat(3,1fr); }
.pg-indp-case-metric { background: #F7F8FA; border: 1px solid #ECEEF2; border-radius: 3px; padding: 22px; }
.pg-indp-case-metric .fig { font: 700 32px/0.95 'Bricolage Grotesque', sans-serif; letter-spacing: -0.02em; margin-bottom: 9px; }
.pg-indp-case-metric .k { font: 600 12.5px/1.35 'Hanken Grotesk', sans-serif; color: #14161E; margin-bottom: 4px; }
.pg-indp-case-metric .d { font: 400 11.5px/1.4 'Hanken Grotesk', sans-serif; color: #5F6675; }
.pg-indp-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-indp-case-band .fig { font: 700 40px/0.9 'Bricolage Grotesque', sans-serif; color: #fff; letter-spacing: -0.02em; }
.pg-indp-case-band .lbl { font: 600 13.5px/1.4 'Hanken Grotesk', sans-serif; color: #FCE9EB; }
.pg-indp-case-band .reviewer { font: 500 12px/1.5 'Hanken Grotesk', sans-serif; color: #FCE9EB; text-align: right; }
.pg-indp-case-band .reviewer strong { color: #fff; }
/* Smaller screens: the case band stacks (stat above, attribution below) and
   the "Reviewed by …" block aligns left — covers the classed .reviewer AND
   the 9 pages whose attribution is inline-styled (raw #FCE9EB + normalized
   rgb spellings, per the CSSOM-rewrite convention). */
@media (max-width: 700px) {
	.pg-indp-case-band { flex-direction: column; align-items: flex-start; }
	.pg-indp-case-band .reviewer,
	.single-industry div[style*="text-align:right"][style*="#FCE9EB"],
	.single-industry div[style*="text-align: right"][style*="252, 233, 235"] { text-align: left !important; }
}
.pg-indp-case-disclaimer { font: 400 13px/1.55 'Hanken Grotesk', sans-serif; color: #9097A4; margin-top: 14px; max-width: 900px; }
.pg-indp-case-disclaimer strong { color: #5A5F6E; }
.pg-indp-case-insight { margin-top: 24px; padding: 22px 26px; background: #FDF6EE; border: 1px solid #F3DFC4; border-radius: 3px; }
.pg-indp-case-insight .k { font: 500 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .12em; color: #B45309; margin-bottom: 12px; }
.pg-indp-case-insight p { font: 400 15px/1.62 'Hanken Grotesk', sans-serif; color: #5A4A33; margin: 0; }
.pg-indp-case-insight p strong { color: #3A2E1C; }
.pg-indp-case-attr { font: 500 12px/1.5 'Hanken Grotesk', sans-serif; color: #8A90A0; margin-top: 18px; }
.pg-indp-case-attr strong { color: #14161E; }
.pg-indp-case-note { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .12em; color: #8A90A0; margin-bottom: 16px; }
.pg-indp-case-note .flag { color: #B45309; }

/* ---------- Seat lens table ---------- */
.pg-indp-seatlens-label { font: 600 12px/1.4 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #8A90A0; margin-bottom: 14px; }
.pg-indp-seatlens { border-radius: 3px; overflow: hidden; border: 1px solid #E8EAEF; box-shadow: 0 12px 34px rgba(20,22,30,.06); margin-bottom: 46px; }
.pg-indp-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-indp-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-indp-seatlens-row:last-child { border-bottom: none; }
.pg-indp-seatlens-row.tint { background: #FAFBFC; }
.pg-indp-seatlens-row span:nth-child(2), .pg-indp-seatlens-row span:nth-child(3) { text-align: right; }
@media (max-width: 700px) { .pg-indp-seatlens-head, .pg-indp-seatlens-row { grid-template-columns: 1fr !important; } .pg-indp-seatlens-row span:nth-child(2), .pg-indp-seatlens-row span:nth-child(3) { text-align: left; } }

/* ---------- Companion-case METRIC/BEFORE/AFTER/READ table (Healthtech HT-084, Life Sciences LF-093) ---------- */
.pg-indp-metrictable-head, .pg-indp-metrictable-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; }
.pg-indp-metrictable-head { padding: 14px 26px; background: #0C1A3A; color: #E7EAF1; font: 600 12.5px/1.3 'Hanken Grotesk', sans-serif; letter-spacing: .03em; }
.pg-indp-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-indp-metrictable-row:last-child { border-bottom: none; }
.pg-indp-metrictable-row.tint { background: #FAFBFC; }
@media (max-width: 700px) { .pg-indp-metrictable-head, .pg-indp-metrictable-row { grid-template-columns: 1fr !important; gap: 4px; } }

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

.pg-indp-dial-segbar { display: flex; height: 30px; border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.pg-indp-dial-legend { display: flex; gap: 18px; flex-wrap: wrap; }
.pg-indp-dial-legend-item { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 'Hanken Grotesk', sans-serif; color: #C6CEDD; }
.pg-indp-dial-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.pg-indp-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-indp-pivot { background: #FDEFF0; border: 1px solid #F3C7CD; border-left: 3px solid #CB0E2A; border-radius: 3px; padding: 32px 36px; margin-top: 26px; }
.pg-indp-pivot-label { font: 600 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; color: #CB0E2A; margin-bottom: 16px; }
.pg-indp-pivot p { font: 400 16.5px/1.62 'Hanken Grotesk', sans-serif; color: #42475A; max-width: 940px; margin: 0 0 14px; }
.pg-indp-pivot p strong { color: #14161E; }
.pg-indp-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-indp-pivot-fine strong { color: #7A4A50; }
.pg-indp-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-indp-pivot-cta:hover { transform: translateY(-2px); color: #fff; }

/* ---------- Rate card ---------- */
.pg-indp-ratecard { border-radius: 3px; overflow: hidden; border: 1px solid #E8EAEF; box-shadow: 0 12px 34px rgba(20,22,30,.06); }
.pg-indp-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-indp-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-indp-ratecard-row:last-child { border-bottom: none; }
.pg-indp-ratecard-row.premium { background: #FFF7E9; }
.pg-indp-ratecard-row .rate { color: #0E7A56; font-weight: 600; }
.pg-indp-ratecard-row.premium .rate { color: #B45309; font-weight: 700; }
.pg-indp-ratecard-row .tier { text-align: right; color: #8A90A0; font: 600 12px/1 'Hanken Grotesk', sans-serif; }
.pg-indp-ratecard-row.premium .tier { color: #B45309; }
@media (max-width: 900px) { .pg-indp-ratecard-head, .pg-indp-ratecard-row { grid-template-columns: 1fr !important; gap: 4px; } .pg-indp-ratecard-row .tier { text-align: left; } }

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

/* ---------- Onboarding runway ---------- */
.pg-indp-runway { position: relative; }
.pg-indp-runway-track { position: absolute; top: 21px; left: 7%; right: 7%; height: 3px; background: linear-gradient(90deg,#2F6FED,#7C5CFC,#FFB020,#12996B); border-radius: 2px; }
.pg-indp-runway-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; position: relative; }
@media (max-width: 800px) { .pg-indp-runway-grid { grid-template-columns: 1fr 1fr !important; } .pg-indp-runway-track { display: none; } }
.pg-indp-runway-step { text-align: center; }
.pg-indp-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-indp-runway-week { font: 600 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; margin-bottom: 9px; }
.pg-indp-runway-title { font: 700 16px/1.2 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 10px; }
.pg-indp-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-indp-test-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 30px; }
@media (max-width: 900px) { .pg-indp-test-grid { grid-template-columns: 1fr !important; } }
.pg-indp-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-indp-test-card .n { font: 700 28px/1 'Bricolage Grotesque', sans-serif; color: #CB0E2A; margin-bottom: 16px; }
.pg-indp-test-card .t { font: 700 19px/1.25 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 11px; }
.pg-indp-test-card .d { font: 400 14px/1.55 'Hanken Grotesk', sans-serif; color: #5A5F6E; margin-bottom: 18px; }
.pg-indp-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-indp-arch-panel { background: #EDF8F2; border: 1px solid #C9E9DC; border-radius: 3px; padding: 38px 40px; }
.pg-indp-arch-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.pg-indp-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-indp-arch-head .note { font: 500 13px/1 'Hanken Grotesk', sans-serif; color: #5A5F6E; }
.pg-indp-arch-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 800px) { .pg-indp-arch-grid { grid-template-columns: 1fr !important; } }
.pg-indp-arch-grid .t { font: 700 16px/1.3 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 9px; }
.pg-indp-arch-grid .d { font: 400 13.5px/1.55 'Hanken Grotesk', sans-serif; color: #5A5F6E; }

/* ---------- Operational boundaries / anti-sell ---------- */
.pg-indp-antisell { background: #F4F6FA; color: #454C5B; border-top: 1px solid #E4E7EC; }
.pg-indp-antisell .pg-indp-h2 { color: #14161E !important; }
.pg-indp-antisell-list { display: flex; flex-direction: column; gap: 16px; }
.pg-indp-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-indp-antisell-item .n { flex-shrink: 0; font: 700 30px/0.9 'Bricolage Grotesque', sans-serif; color: #CB0E2A; letter-spacing: -0.02em; }
.pg-indp-antisell-item .t { font: 700 19px/1.3 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 10px; }
.pg-indp-antisell-item p { font: 400 15px/1.62 'Hanken Grotesk', sans-serif; color: #4D5260; margin: 0; }

/* ---------- Closing CTA (spotlight, red) ---------- */
.pg-indp-closing-cta { position: relative; overflow: hidden; background: radial-gradient(120% 150% at 78% -10%, #E11D33 0%, #CB0E2A 46%, #9E0A20 100%); color: #fff; }
.pg-indp-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: pgIndpFloatY 9s ease-in-out infinite; }
.pg-indp-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 pgIndpFloatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.pg-indp-closing-cta-inner { max-width: 1100px; margin: 0 auto; padding: 132px 64px; position: relative; text-align: center; }
.pg-indp-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-indp-closing-tag .dot { width: 7px; height: 7px; background: #fff; border-radius: 50%; }
.pg-indp-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-indp-closing-sub { font: 400 20px/1.62 'Hanken Grotesk', sans-serif !important; color: #FCE3E7 !important; max-width: 680px; margin: 0 auto 46px !important; }
.pg-indp-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-indp-closing-btn:hover { transform: translateY(-3px); box-shadow: 0 26px 60px rgba(0,0,0,.34); color: #CB0E2A; }
.pg-indp-closing-fine { margin-top: 26px; font: 500 14px/1.6 'Hanken Grotesk', sans-serif; color: #F7C9CF; }
.pg-indp-closing-fine strong { color: #fff; }

/* ---------- White paper ---------- */
.pg-indp-wp-section { background: #EDEFF3; color: #14161E; }
.pg-indp-wp-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 60px; align-items: center; }
@media (max-width: 900px) { .pg-indp-wp-grid { grid-template-columns: 1fr !important; } }
.pg-indp-wp-cover-outer { position: relative; }
.pg-indp-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-indp-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-indp-wp-cover-wrap img { display: block; width: 100%; height: 440px; border-radius: 8px; object-fit: cover; object-position: top center; }
.pg-indp-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-indp-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-indp-wp-desc { font: 400 17px/1.62 'Hanken Grotesk', sans-serif; color: #5A5F6E; max-width: 620px; margin: 0 0 28px; }
.pg-indp-wp-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.pg-indp-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-indp-wp-toc { border-top: 1px solid #DADEE6; padding-top: 24px; margin-bottom: 30px; }
.pg-indp-wp-toc-label { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .12em; color: #646B7B; margin-bottom: 16px; }
.pg-indp-wp-toc-item { display: flex; gap: 12px; font: 400 14.5px/1.55 'Hanken Grotesk', sans-serif; color: #42475A; margin-bottom: 13px; }
.pg-indp-wp-toc-item .arrow { color: #12996B; font-weight: 700; }
.pg-indp-wp-cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pg-indp-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-indp-wp-download:hover { transform: translateY(-2px); color: #fff; }
.pg-indp-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-indp-section). Two names exist because pages named this wp:group differently — .pg-indp-media on Insurtech/Insurance/Healthtech/Healthcare/Fintech, .pg-indp-media-section on AI/SaaS/Technology/Financial Services. Both must resolve identically. */
.pg-indp-media, .pg-indp-media-section { background: #EEF2F8; border-top: 1px solid #DEE5F0; }
.pg-indp-media-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 46px; gap: 40px; flex-wrap: wrap; }
.pg-indp-media-head h2 { font: 700 46px/1.06 'Bricolage Grotesque', sans-serif !important; letter-spacing: -0.022em; margin: 0 !important; max-width: 640px; }
.pg-indp-media-head .note { flex-shrink: 0; font: 500 13px/1.5 'Hanken Grotesk', sans-serif; color: #5F6675; max-width: 280px; text-align: right; }
.pg-indp-media-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 26px; }
@media (max-width: 900px) { .pg-indp-media-grid { grid-template-columns: 1fr !important; } }
.pg-indp-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-indp-media-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,22,30,.08); border-color: #D9DDE5; color: #14161E; }
.pg-indp-media-card-tags { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.pg-indp-media-card-tags .tag { font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .1em; padding: 6px 11px; border-radius: 6px; }
.pg-indp-media-card-tags .src { font: 500 12px/1 'Hanken Grotesk', sans-serif; color: #646B7B; }
.pg-indp-media-card-title { font: 700 17px/1.35 'Bricolage Grotesque', sans-serif; letter-spacing: -0.01em; margin-bottom: 18px; }
.pg-indp-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-indp-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-indp-media-foot .disc { font: 400 13.5px/1.55 'Hanken Grotesk', sans-serif; color: #646B7B; }
.pg-indp-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-indp-faq-section { background: #EEF2F8; border-top: 1px solid #DEE5F0; }
.pg-indp-faq-columns { column-count: 2; column-gap: 20px; }
@media (max-width: 800px) { .pg-indp-faq-columns { column-count: 1; } }
.pg-indp-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-indp-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-indp-faq-columns summary::-webkit-details-marker { display: none; }
.pg-indp-faq-columns .ic { flex-shrink: 0; font: 300 28px/0.7 'Hanken Grotesk', sans-serif; color: #CB0E2A; transition: transform .22s ease; }
.pg-indp-faq-columns details[open] .ic { transform: rotate(45deg); }
.pg-indp-faq-columns details[open] summary { color: #CB0E2A; }
.pg-indp-faq-columns details[open] { border-color: #F3C7CD; box-shadow: 0 12px 32px rgba(203,14,42,.08); }
.pg-indp-faq-a { padding: 0 24px 22px; font: 400 14.5px/1.62 'Hanken Grotesk', sans-serif; color: #5A5F6E; }
.pg-indp-faq-a .attr { display: block; margin-top: 13px; font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; color: #CB0E2A; }
.pg-indp-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-indp-segments is the name actually used on 11 of 12 pages, .pg-indp-segments-section only on Financial Services. */
.pg-indp-segments, .pg-indp-segments-section { background: #EEF2F8; border-top: 1px solid #DEE5F0; }
.pg-indp-segments-label-row { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.pg-indp-segments-label-row .rule { width: 24px; height: 2px; background: #CB0E2A; }
.pg-indp-segments-label-row .lbl { font: 700 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #646B7B; }
.pg-indp-segments-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.pg-indp-segments-pills span { 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; }
.pg-indp-segments-pills span:hover { border-color: #CB0E2A; color: #CB0E2A; }

/* ---------- Escalation ladder (tier-selector, Robotics & AVs) ---------- */
.pg-indp-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-indp-ladder { grid-template-columns: 1fr !important; } }
.pg-indp-ladder-tabs { display: flex; flex-direction: column; gap: 10px; }
.pg-indp-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-indp-ladder-tab .row { display: flex; align-items: center; justify-content: space-between; }
.pg-indp-ladder-tab .name { font: 700 15px/1.2 'Bricolage Grotesque', sans-serif; color: #fff; }
.pg-indp-ladder-tab .pct { font: 700 16px/1 'Bricolage Grotesque', sans-serif; }
.pg-indp-ladder-tab.is-active, .pg-indp-ladder-tab.active { background: #1B3A6B !important; border-color: var(--tier-accent, var(--accent, #CB0E2A)) !important; color: inherit !important; box-shadow: none !important; }
.pg-indp-ladder-foot { margin-top: 8px; font: 400 12.5px/1.5 'Hanken Grotesk', sans-serif; color: #6B7A95; }

/* Research's quality-screen ladder (g1-g5) reuses these .pg-indp-ladder-tab classes but its own
   handoff source defines a DIFFERENT style function -- row(active,color), not chip() -- with much
   more minimal values: a flat list, no per-row card background/border, only the active row gets a
   subtle white-tint background plus a full colored border. The generic rule above (solid navy
   card + always-visible border on every row) doesn't match it. 2026-08-01, user-reported "wrong
   borders". Scoped narrowly so it doesn't affect the unrelated pages sharing .pg-indp-ladder-tab. */
.pg-indp-qualityscreen .pg-indp-tabtoggle-trigger.pg-indp-ladder-tab {
	background: transparent !important;
	border: 1px solid transparent !important;
	border-radius: 9px !important;
	padding: 8px 12px !important;
}
.pg-indp-qualityscreen .pg-indp-tabtoggle-trigger.pg-indp-ladder-tab.is-active {
	background: rgba(255,255,255,.05) !important;
	border-color: var(--accent, #CB0E2A) !important;
}

/* Advertising's Campaign Pipeline was converted into the same .pg-indp-ladder markup as Travel/
   Aviation/Social Media (list-left/panel-right split), but its own handoff source is a different
   layout entirely: a 5-column tab row evenly spanning the full width, with the detail panel
   stacked below it (not beside it) -- see PITON-Global Advertising.dc.html, "THE CAMPAIGN
   PIPELINE" section, grid-template-columns:repeat(5,1fr) on the tab row, no side-by-side grid on
   the outer wrapper at all. 2026-08-01, user-reported "should be top and bottom, tabs evenly
   spaced" with reference screenshot. Scoped to .pg-indp-campaignpipeline only. */
.pg-indp-campaignpipeline .pg-indp-ladder {
	display: block;
}
.pg-indp-campaignpipeline .pg-indp-ladder-tabs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 9px;
	margin-bottom: 24px;
}
.pg-indp-ladder-panel { background: #15294F; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 28px; }
.pg-indp-ladder-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pg-indp-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-indp-ladder-panel-title { font: 700 19px/1.2 'Bricolage Grotesque', sans-serif; color: #fff; }
.pg-indp-ladder-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.pg-indp-ladder-stat-grid .k { font: 500 11.5px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; color: #8FA0BE; margin-bottom: 8px; }
.pg-indp-ladder-stat-grid .v { font: 700 26px/1 'Bricolage Grotesque', sans-serif; color: #fff; }
.pg-indp-ladder-stat-grid .v.accent { color: #46C2A8; }
.pg-indp-ladder-who .k { font: 500 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; color: #8FA0BE; margin-bottom: 8px; }
.pg-indp-ladder-who .v { font: 600 14.5px/1.45 'Hanken Grotesk', sans-serif; color: #fff; margin-bottom: 16px; }
.pg-indp-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) ---------- */
/* Legal Services' own handoff source (block(active,color) in PITON-Global Legal Services.dc.html)
   dims the whole non-active bar column to opacity:.62 and brings the active one to full opacity —
   color is never referenced by block() at all, no ring/box-shadow. What shipped instead was a
   flat .78 opacity on every .bar plus a fabricated white+red ring highlight on the active one, and
   the tab-name row below (.pg-indp-phase-chips) rendering with the generic light #F7F8FA hardcoded
   active background meant for a white-page context, not this dark navy panel. 2026-08-01,
   user-reported "should be exact match to the handoff", screenshot confirmed. */
.pg-indp-pipeline-bars { display: flex; align-items: flex-end; gap: 10px; height: 170px; margin-bottom: 30px; }
/* justify-content:flex-end matches source's block(): the trigger wrapper is a column flex
   container holding the number label then the bar; without flex-end the two just stack from the
   top (default flex-start), leaving a gap below each shorter bar instead of flush-bottom-aligning
   every bar against a common baseline -- breaking the funnel visual (2026-08-01, user screenshot:
   "must stay or align at the bottom"). */
.pg-indp-pipeline-bars .pg-indp-tabtoggle-trigger { cursor: pointer; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; background: none; border: none; padding: 0; opacity: .62; transition: opacity .15s ease; }
.pg-indp-pipeline-bars .n { font: 700 13px/1 'Bricolage Grotesque', sans-serif; color: #fff; margin-bottom: 8px; white-space: nowrap; }
.pg-indp-pipeline-bars .bar { width: 100%; min-height: 14px; border-radius: 6px 6px 0 0; }
.pg-indp-pipeline-bars .pg-indp-tabtoggle-trigger.is-active { background: none !important; box-shadow: none; opacity: 1; }
.pg-indp-pipeline-section .pg-indp-phase-chips .pg-indp-tabtoggle-trigger {
	flex: 1;
	background: transparent !important;
	border: 1px solid rgba(255,255,255,.08) !important;
	color: #8FA0BE !important;
}
.pg-indp-pipeline-section .pg-indp-phase-chips .pg-indp-tabtoggle-trigger.is-active {
	background: rgba(255,255,255,.08) !important;
	border-color: var(--accent, #CB0E2A) !important;
	color: #fff !important;
}
/* The label text lives in a child <span class="lb">, which has its own dedicated color rule
   (.pg-indp-phase-chips .lb { color:#14161E }, meant for the white-page phase-chips variant) --
   a rule on a child element always wins over an inherited/ancestor color regardless of !important
   on the ancestor, so the trigger-level "color" rules above never reached this text. Result: near-
   black label text on a dark navy panel, unreadable (2026-08-01, user screenshot). */
.pg-indp-pipeline-section .pg-indp-phase-chips .lb { color: #8FA0BE; }
.pg-indp-pipeline-section .pg-indp-phase-chips .pg-indp-tabtoggle-trigger.is-active .lb { color: #fff; }

/* ---------- Incident-triage timeline (Robotics & AVs) ---------- */
.pg-indp-itimeline { display: grid; grid-template-columns: repeat(5,1fr); gap: 0; align-items: stretch; }
@media (max-width: 900px) { .pg-indp-itimeline { grid-template-columns: 1fr 1fr !important; } }
.pg-indp-itimeline-step { position: relative; padding: 0 14px; }
.pg-indp-itimeline-head { display: flex; align-items: center; margin-bottom: 18px; }
.pg-indp-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-indp-itimeline-line { flex: 1; height: 2px; }
.pg-indp-itimeline-time { font: 700 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; margin-bottom: 10px; }
.pg-indp-itimeline-title { font: 700 16px/1.2 'Bricolage Grotesque', sans-serif; color: #14161E; margin-bottom: 9px; letter-spacing: -0.01em; }

/* ---------- Mobile-only section padding ----------
   560px matches this file's existing "smallest tier" breakpoint (see the .pg-grid-* collapse above) —
   intentionally narrower than the 900px tier used for tablet/tablet-landscape column collapses, so this
   never fires on tablets or larger. .pg-indp-hero-inner and .pg-indp-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 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 since most section instances set their own inline padding
   per page. */
@media (max-width: 560px) {
	.pg-indp-hero-inner { padding: 40px 30px !important; }
	.pg-indp-section { padding: 40px 30px !important; }
	/* The hero grid track can't get narrower than its widest unshrinkable child; the
	   two-up boxstats row (min-content cols) + 64px card padding floored it at ~342px.
	   Stack the boxstats and slim the card, bigstat and CTA padding so the whole hero
	   fits a 320px screen. */
	.pg-indp-hero-boxstats { grid-template-columns: 1fr !important; }
	.pg-indp-hero-card { padding: 24px; }
	.pg-indp-hero-bigstat { padding: 18px 20px; }
	.pg-indp-btn-solid, .pg-indp-btn-ghost { padding: 15px 18px; font-size: 14.5px; white-space: normal; flex-shrink: 1; }
	/* Bespoke pages (Financial Services) carry fully inline-styled CTAs whose nowrap /
	   flex-shrink:0 make them unshrinkable on phones — let them wrap. Attr selectors
	   only match inline-styled elements, so classed components are untouched. */
	.single-industry a[style*="white-space:nowrap"],
	.single-industry a[style*="flex-shrink:0"],
	.single-industry a[style*="white-space: nowrap"],
	.single-industry a[style*="flex-shrink: 0"] {
		white-space: normal !important;
		flex-shrink: 1 !important;
	}
	/* FinServ's inline-styled simulator output cards: a 46px "$680,000" numeral +
	   26px card padding floor the card at ~258px, wider than a 320px screen leaves.
	   (Spaced selector twins: see the fineprint-normalization note further down.) */
	.pg-indp-simulator div[style*="font:700 46px"],
	.pg-indp-simulator div[style*="font: 700 46px"] { font-size: 34px !important; }
	.pg-indp-simulator div[style*="padding:26px"],
	.pg-indp-simulator div[style*="padding: 26px"] { padding: 18px !important; }
	.pg-indp-inline-cta-wrap,
	.pg-indp-cred-inner,
	.pg-indp-scale-inner,
	.pg-indp-threshold-inner,
	.pg-indp-pillcta-wrap,
	.pg-indp-closing-cta-inner {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
}
.pg-indp-itimeline-desc { font: 400 13px/1.5 'Hanken Grotesk', sans-serif; color: #5A5F6E; }

/* FS's contrarian closing section: the content colors (white <strong>,
   #C2C8D4 body, #FF5468 accents) target a dark navy band, but the wp:group
   classes never had CSS — the section rendered on white with an INVISIBLE
   bold first sentence, which also made the paragraph look mis-aligned (the
   invisible text still occupied the first line). Background on the outer
   group per the established -dark-wrap convention; the h2 needs its own
   !important white to beat .pg-indp-h2's base color:#14161E !important. */
.pg-indp-contrarian-closing { background: #0C1A3A; }
.pg-indp-contrarian-closing .pg-indp-h2 { color: #fff !important; }

/* Closing-CTA lede paragraphs (long max-width <p>s inside centered closing
   sections — FS's contrarian closing + the 15 industry pages whose
   .pg-indp-closingcta centers a long paragraph): centered multi-line body
   text reads poorly on phones — left-align just the paragraphs, keeping
   headings/badges/buttons centered. */
@media (max-width: 700px) {
	.pg-indp-closingcta p[style*="max-width"],
	.pg-indp-contrarian-closing p[style*="max-width"] { text-align: left; }
}

/* Big-figure stat rows (inline flex + align-items:baseline: a 40-56px numeral
   beside a multi-line label — e.g. FS's "91% forensic detection" and the
   case-band "−81%" rows; 170 instances across all 41 industry pages): stack
   the numeral above its label on smaller screens instead of squeezing the
   label into the leftover width. Both raw and CSSOM-normalized spellings. */
@media (max-width: 700px) {
	.single-industry div[style*="display:flex"][style*="align-items:baseline"],
	.single-industry div[style*="display: flex"][style*="align-items: baseline"] { flex-direction: column; }
}

/* Section-head notes (inline-styled right-aligned spans, max-width 280px —
   e.g. "Six regulated workflows, one Zero-Trust delivery architecture." on
   Financial Services): when the head wraps on smaller screens the note drops
   below the heading, where right-aligned text reads detached — align left.
   Matches the 12 such spans across 10 industry pages; both raw and
   CSSOM-normalized spellings per this file's convention. */
@media (max-width: 700px) {
	.single-industry span[style*="text-align:right"][style*="max-width:280px"],
	.single-industry span[style*="text-align: right"][style*="max-width: 280px"] { text-align: left !important; }
}

/* ---------- Mobile overflow guards (2026-08-03 sitewide 320/360/414 sweep) ----------
   Bespoke pages carry inline-styled (unclassed) rows, grids and fixed-width labels that
   can't wrap or shrink on phones, so they widen document scrollWidth. The attr selectors
   match only elements styled inline; every rule is a geometric no-op when the row already
   fits, so they only bite where content would spill past the screen edge.
   Every selector appears twice — raw ("display:flex") and spaced ("display: flex") —
   because responsive-fineprint.js rewrites small-font elements' style via CSSOM, which
   re-serializes the whole attribute in the spaced form. An element has either all-raw or
   all-normalized declarations, never a mix, so two full variants per compound suffice. */
@media (max-width: 700px) {
	/* any inline-styled flex row (bar rows, meta rows, dividend rows, numbered cards) may wrap */
	.single-industry div[style*="display:flex"][style*="align-items:center"],
	.single-industry div[style*="display: flex"][style*="align-items: center"],
	.single-industry div[style*="display:flex"][style*="align-items:flex-start"],
	.single-industry div[style*="display: flex"][style*="align-items: flex-start"],
	.single-industry div[style*="display:flex"][style*="justify-content:space-between"],
	.single-industry div[style*="display: flex"][style*="justify-content: space-between"] { flex-wrap: wrap; }
	/* unshrinkable fixed-size items can never exceed their container */
	.single-industry [style*="flex-shrink:0"],
	.single-industry [style*="flex-shrink: 0"] { max-width: 100%; }
	/* inline clones of the bar-row label (300/280px) and dividend label (210px): stack
	   the label above its track, mirroring the classed .pg-indp-bar-label fix */
	/* substring also matches "min-width:280px" etc. — clear both floors */
	.single-industry div[style*="width:300px"],
	.single-industry div[style*="width:280px"],
	.single-industry div[style*="width:210px"],
	.single-industry div[style*="width: 300px"],
	.single-industry div[style*="width: 280px"],
	.single-industry div[style*="width: 210px"] { width: 100% !important; min-width: 0 !important; }
	/* inline 3+-column grids missing the .pg-grid-N utilities (e.g. HealthTech scale band) */
	.single-industry div[style*="grid-template-columns:1fr 1fr 1fr"],
	.single-industry div[style*="grid-template-columns:repeat(3"],
	.single-industry div[style*="grid-template-columns:repeat(4"],
	.single-industry div[style*="grid-template-columns:repeat(5"],
	.single-industry div[style*="grid-template-columns: 1fr 1fr 1fr"],
	.single-industry div[style*="grid-template-columns: repeat(3"],
	.single-industry div[style*="grid-template-columns: repeat(4"],
	.single-industry div[style*="grid-template-columns: repeat(5"],
	/* fractional inline templates ("1.15fr 1fr", "0.9fr 1.1fr", …) */
	.single-industry div[style*="grid-template-columns:1."],
	.single-industry div[style*="grid-template-columns:0."],
	.single-industry div[style*="grid-template-columns: 1."],
	.single-industry div[style*="grid-template-columns: 0."] { grid-template-columns: 1fr !important; }
	/* horizontal diagrams that must stay one row (stage-flow pipelines, bar charts):
	   scroll inside their own box instead of growing the page */
	.single-industry div[style*="align-items:stretch"][style*="gap:8px"],
	.single-industry div[style*="align-items: stretch"][style*="gap: 8px"],
	.single-industry div[style*="align-items:flex-end"][style*="height:"],
	.single-industry div[style*="align-items: flex-end"][style*="height:"] { overflow-x: auto; }
	/* classed tab rows that render as one non-wrapping line */
	/* 34px matches the desktop rule so the "Click to compare" clue keeps the same clearance
	   on phones (was 20px, which left only 12px under the label) — client request 2026-08-07. */
	.pg-indp-archtabs, .pg-indp-captabs, .pg-indp-spectrum-tabs { flex-wrap: wrap; margin-top: 34px; }
	.pg-indp-campaignpipeline .pg-indp-ladder-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Legal Services review-pipeline funnel: nowrap number labels floor each column */
	.pg-indp-pipeline-bars { gap: 6px; overflow-x: auto; }
	.pg-indp-pipeline-bars .n { font-size: 10px; }
}
@media (max-width: 560px) {
	.pg-indp-pair-row { flex-wrap: wrap; }
	.pg-indp-pair-card { padding: 22px 20px; }
	/* phases with inline flex:N (basis 0) all fit one flex line and then can't shrink
	   below min-content — stack them on phones */
	.pg-indp-framework-phases > div { flex: 1 1 100% !important; }
	/* badge + content sit side by side; at phone widths the pair exceeds the panel */
	.pg-indp-phase-detail { flex-wrap: wrap; padding: 20px; }
	.pg-indp-phase-detail-head { flex-wrap: wrap; }
	/* dark inline-styled tabtoggle panels (38px/40px inset) and white numbered-principle
	   panels (30px/34px) leave too little content width at 320 — ease the inset like the
	   classed panels do */
	.single-industry div[style*="padding:38px 40px"],
	.single-industry div[style*="padding: 38px 40px"] { padding: 28px 22px !important; }
	.single-industry div[style*="padding:30px 34px"],
	.single-industry div[style*="padding: 30px 34px"] { padding: 24px 20px !important; }
	/* 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") */
	.single-industry div[style*="grid-template-columns:"] { grid-template-columns: minmax(0, 1fr) !important; }
	/* inline nowrap can never be honored on a phone-width line */
	.single-industry [style*="white-space:nowrap"],
	.single-industry [style*="white-space: nowrap"] { white-space: normal !important; }
	.pg-indp-inline-cta .go { white-space: normal; }
	/* Logistics hero shipment-trace: the 5-stop label row is ~210px min inside a padded
	   navy sub-box; overflow alone can't cut its intrinsic-width contribution to the hero
	   grid track, so also cap it hard (108px = 30px section inset + 2×24px card padding +
	   30px right section inset) and let it scroll internally on very narrow screens */
	.pg-indp-hero-card div[style*="padding:20px 18px"],
	.pg-indp-hero-card div[style*="padding: 20px 18px"] { overflow-x: auto; max-width: calc(100vw - 108px); }
}
/* 2-up card/chip grids that are intended 2-across on phones but physically can't fit a
   ~320px screen (chip min-content ≈130-140px each) — single column only below 400px. */
@media (max-width: 400px) {
	.pg-indp-phase-chips,
	.pg-indp-loop-grid,
	.pg-indp-runway-grid,
	.pg-indp-runway2-grid,
	.pg-indp-case-metrics,
	.pg-indp-itimeline { grid-template-columns: 1fr !important; }
}

/* ---------- Authorship & Verification (Aug 5 handoff rollout) ---------- */
.pg-auth-inner { max-width: 1240px; margin: 0 auto; padding: 56px 64px 64px; }
/* Dash lives INSIDE the label line (inline ::before), so it stays on the same
   text line at every viewport — a flex-sibling dash squishes or drifts when
   the long label wraps on phones. */
.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; }
/* Verified-bar heading: CSS dot separator that collapses to a zero-size block
   on phones — hides the dot AND breaks the halves onto two rows (same
   technique as .pg-svcp-bars-total-label .dot). */
.pg-auth-verified-line .dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #14161E; margin: 0 8px; vertical-align: middle; }
@media (max-width: 560px) {
	.pg-auth-verified-line .dot { display: block; width: 0; height: 0; margin: 0 0 6px; }
}
.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; }
}
/* Stamped by benefit-bars-mobile.js on every industry page — hidden at
   desktop widths; the 560px media block below reveals it on phones. */
.pg-bb-mobile { display: none; }

@media (max-width: 560px) {
	.pg-auth-inner { padding: 40px 30px !important; }

	/* Client request (Aug-12): the economics summary's benefit-to-cost ratio
	   block (the big "9.3×" figure) aligns left once the summary row wraps on
	   phones. Scoped via :has() to exactly that inline-styled block — 6
	   industry pages carry it. */
	div[style*="text-align:right"]:has(> div[style*="font:700 56px"]) {
		text-align: left !important;
	}

	/* Same request, classed variant: 24 industry pages build the summary as
	   .pg-indp-bars-total with the multiplier right-aligned — flush left on
	   phones once the row wraps. */
	.pg-indp-bars-multiplier {
		text-align: left;
	}

	/* Client-chosen phone layout for the economics benefit bars ("option B",
	   Aug-12): label + colored $ range on one line, slim meter underneath.
	   The .pg-bb-mobile structure is stamped by benefit-bars-mobile.js; here
	   we hide the desktop label/track pair and show it. */
	.pg-bb-row {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0 !important;
	}

	.pg-bb-row > .pg-bb-desktop {
		display: none !important;
	}

	.pg-bb-mobile {
		display: flex;
		flex-direction: column;
		gap: 9px;
	}

	/* Approved "option B": three stacked, left-aligned lines per row —
	   label, then the colored value, then the slim meter. */
	.pg-bb-line {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.pg-bb-lbl { font: 600 14.5px/1.3 'Hanken Grotesk', sans-serif; color: #14161E; }
	.pg-bb-val { font: 700 15.5px/1 'Hanken Grotesk', sans-serif; white-space: nowrap; }

	.pg-bb-track {
		height: 8px;
		background: #F3F4F7;
		border-radius: 99px;
		overflow: hidden;
	}

	.pg-bb-fill {
		height: 100%;
		border-radius: 99px;
	}

	/* AI Support / Blockchain wrap their classed bar rows in an inline
	   gap:26px column, so the rows' own 14px margin doubles the phone
	   spacing — the wrapper's gap alone carries the rhythm there. */
	div[style*="gap:26px"] > .pg-indp-bar-row,
	div[style*="gap: 26px"] > .pg-indp-bar-row {
		margin-bottom: 0 !important;
	}
}

/* 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;
	}
}

/* Who-we-serve card anchor links (converted from static ANCHORS TO spans) */
.pg-indp-anchor-link:hover { text-decoration: underline !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 — coverage link right on desktop, left on phones */
.pg-indp-media-more { margin-left: auto; }
@media (max-width: 560px) {
	.pg-indp-media-more { margin-left: 0; }
}

/* Mid-CTA inner row (classed on logistics 8849): guaranteed two columns on desktop —
   the copy block shrinks (min-width:0) instead of the contact group wrapping under it —
   and an explicit column stack on small screens. Inline styles were stripped from the
   row/copy divs when the class was added, so no !important is needed. */
.pg-indp-midcta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 34px 40px;
}
.pg-indp-midcta-copy {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 560px;
}
/* Contact group (John block + button): side by side on desktop — the group refuses to
   shrink or wrap, so the copy column gives way instead (per the handoff rendering). */
.pg-indp-midcta-contact {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-shrink: 0;
}
@media (max-width: 900px) {
	.pg-indp-midcta-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		padding: 26px 24px;
	}
	.pg-indp-midcta-copy { max-width: none; }
	.pg-indp-midcta-contact { flex-wrap: wrap; }
}

/* Aug-6 handoff refresh: the light inline CTA band is now the slim red gradient band
   (90deg, 8px radius, 18px 28px padding, white message) on all 5 .light pages
   (travel-tech, edtech, energy, government, manufacturing — each verified against its
   own handoff). Button colors follow each page's handoff exactly per client instruction:
   Travel Tech (21597) and Energy (21579) use the flat red button; the others keep the
   base white .go (Government/Manufacturing also carry matching inline white styles). */
.pg-indp-inline-cta.light {
	background: linear-gradient(90deg, #CB0E2A, #E11D33);
	border: none;
	border-radius: 8px;
	padding: 18px 28px;
	gap: 24px;
	justify-content: space-between;
}
.pg-indp-inline-cta.light .msg {
	color: #fff;
}
.postid-21597 .pg-indp-inline-cta.light .go,
.postid-21579 .pg-indp-inline-cta.light .go {
	background: #CB0E2A;
	color: #fff;
}

/* Education (8852) refinements — client requests during the navy-box readability pass.
   Scoped by postid: .pg-indp-meltdownaudit is a LIGHT wrapper on other pages (aviation),
   so the h2 white-guard must not be global; test-card/case-head tweaks are page-specific. */
.postid-8852 .pg-indp-meltdownaudit .pg-indp-h2 { color: #fff !important; }
.postid-8852 .pg-indp-case-head { margin-top: 30px; }

/* Automotive (8867) — client request: breathing room above the case-study header strip. */
.postid-8867 .pg-indp-case-head { margin-top: 30px; }

/* E-Commerce (8816) — "Click to compare" clue clearance.
   .pg-indp-spectrum-tabs carries only margin-top:1em (16px), which is less than the
   22px the absolutely-positioned .cyn-clue needs above the tab group. On banking /
   government the label and the tab group share one flex row, so the clue floats in
   empty space and 16px is fine; e-commerce's label is long enough that the row wraps
   and the clue lands 10px under it. Bump to the archtabs/captabs value on this page
   only. Desktop-scoped: the ≤700px rule (margin-top:20px) already clears it on phones. */
@media (min-width: 701px) {
	.postid-8816 .pg-indp-spectrum-tabs { margin-top: 34px; }
}

/* Telecommunications (8855) — same "Click to compare" clue clearance as e-commerce above.
   Its Bad Volume Classifier label is the longest on the site, so the head row wraps at
   every desktop width (verified 900 / 1280 / 1600 — .pg-indp-section caps at 1240px, so
   it can never un-wrap) and the clue landed 10px under the label. Same postid + desktop
   scoping; ≤700px already gets margin-top:20px from the shared rule. */
@media (min-width: 701px) {
	.postid-8855 .pg-indp-spectrum-tabs { margin-top: 34px; }
}