:root {
  --bg: #F6F8FC;
  --surface: #FFFFFF;
  --surface2: #EEF3FB;
  --text: #0B1B33;
  --muted: #4B607A;
  --border: #D7E0EC;
  --navy: #0D2A4A;
  --navy2: #081D34;
  --accent: #1E4ED8;
  --accentSoft: rgba(30,78,216,0.12);
  --shadow: 0 10px 30px rgba(11,27,51,0.08);
}

html,
body {
  background: var(--bg);
  color: var(--text);
}

body {
  font-family: 'Inter', sans-serif;
}

/* Shared cards/surfaces */
.card-border,
.service-card,
.contact-shell,
.services-board,
.service-label,
.map-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.icon-circle {
  background: var(--surface2);
  border: 1px solid var(--border);
}

.badge {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
}

.label-blue {
  background: var(--accentSoft);
  color: var(--accent);
  border: 1px solid rgba(30,78,216,0.28);
}

.label-purple,
.label-green {
  background: var(--accentSoft);
  color: var(--accent);
  border: 1px solid rgba(30,78,216,0.28);
}

/* Navbar standardization */
nav.fixed {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 6px 20px rgba(11,27,51,0.06);
}

nav.fixed .brand-logo-nav {
  filter: none;
}

nav.fixed a,
nav.fixed .text-textGray,
nav.fixed .text-slate-300 {
  color: var(--muted) !important;
}

nav.fixed a:hover,
nav.fixed a.text-white,
nav.fixed a.font-semibold {
  color: var(--text) !important;
}

/* Keep navbar CTA button text white across all pages */
nav.fixed > a.bg-accent,
nav.fixed > a.text-sm.bg-accent,
nav.fixed > a[href="contact.html"],
nav.fixed > a[href="../contact.html"] {
  color: #ffffff !important;
}

nav.fixed > a.bg-accent:hover,
nav.fixed > a.text-sm.bg-accent:hover,
nav.fixed > a[href="contact.html"]:hover,
nav.fixed > a[href="../contact.html"]:hover {
  color: #ffffff !important;
}

.nav-dropdown-panel {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow);
}

.nav-dropdown-col-title {
  color: var(--text) !important;
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 8px;
}

.nav-dropdown-link {
  color: var(--muted) !important;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  line-height: 1.35;
  padding: 4px 0;
  text-decoration: none;
  white-space: nowrap;
}

.nav-dropdown-link:hover {
  color: var(--text) !important;
}

/* Buttons standardization */
a.bg-accent,
button.bg-accent,
a[href="contact.html"].text-sm.bg-accent,
a.inline-flex.bg-accent,
button[type="submit"].bg-accent {
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid var(--accent) !important;
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(30,78,216,0.25);
}

a.bg-accent:hover,
button.bg-accent:hover,
a[href="contact.html"].text-sm.bg-accent:hover,
a.inline-flex.bg-accent:hover,
button[type="submit"].bg-accent:hover {
  background: #1A45BF !important;
  border-color: #1A45BF !important;
}

a.border.border-darkBorder,
button.border.border-darkBorder,
a[href="../our-services.html"].border,
a[href="our-services.html"].border {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 10px;
}

a.border.border-darkBorder:hover,
button.border.border-darkBorder:hover,
a[href="../our-services.html"].border:hover,
a[href="our-services.html"].border:hover {
  background: var(--surface2) !important;
}

/* Hero + section backgrounds */
.hero-gradient,
.shooting-hero {
  background: var(--surface2);
}

/* Service hero: full-bleed background, constrained inner content */
body > section.hero-gradient {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

body > section.hero-gradient > .grid,
body > section.hero-gradient > .flex {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* Service pages: keep breathing room before first section after hero */
body > section.hero-gradient + section {
  padding-top: 2.25rem !important;
}

.shooting-stars {
  background:
    linear-gradient(rgba(30,78,216,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,78,216,0.08) 1px, transparent 1px),
    var(--surface2) !important;
}

.feature-section {
  background: transparent;
}

.feature-copy,
.text-textGray,
.text-slate-600,
.text-slate-500,
.text-textLight {
  color: var(--muted) !important;
}

/* Prevent invisible highlighted words on light sections */
p .text-white,
p span.font-semibold.text-white {
  color: var(--text) !important;
}

h1,h2,h3,h4,h5,h6,
.feature-title,
.hero-main-title {
  color: var(--text);
  text-shadow: none;
}

.hero-main-title {
  background: none;
  -webkit-text-fill-color: currentColor;
}

.partner-chip,
.partner-chip-label {
  color: var(--muted) !important;
}

footer {
  border-top: 1px solid var(--border) !important;
  background: var(--surface2);
}

footer .border-t {
  border-color: var(--border) !important;
}

/* Our Services page specific tuning */
.services-hero {
  background: linear-gradient(105deg, var(--navy) 0%, var(--navy2) 100%) !important;
  border: 1px solid rgba(13, 42, 74, 0.25) !important;
}

.services-hero h1 {
  color: #EAF1FF !important;
}

.services-hero > p {
  color: #C7D6EE !important;
}

.services-board {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

.service-row {
  border-bottom: 1px solid #E6EDF7 !important;
}

.service-label {
  background: var(--surface2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.service-chip {
  background: var(--navy) !important;
  color: #EAF1FF !important;
  border: 1px solid #193B63 !important;
}

.service-chip:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

.summary-band {
  background: rgba(13, 42, 74, 0.08) !important;
  border: 1px solid rgba(13, 42, 74, 0.16) !important;
  color: var(--muted) !important;
}

/* Homepage Security & Compliance visual cards */
#expertise .feature-visual-glow {
  background: linear-gradient(140deg, rgba(30, 78, 216, 0.2), rgba(13, 42, 74, 0.06), rgba(255, 255, 255, 0.6)) !important;
  border: 1px solid rgba(30, 78, 216, 0.22) !important;
}

#expertise .feature-visual-panel {
  background: linear-gradient(160deg, #F8FBFF 0%, #EEF4FF 100%) !important;
  border: 1px solid #C9D8EF !important;
  box-shadow: 0 10px 26px rgba(11, 27, 51, 0.1);
}

#expertise .feature-visual-panel .text-xs,
#expertise .feature-visual-panel .text-\[10px\] {
  color: #5A7192 !important;
}

#expertise .feature-visual-panel .text-base,
#expertise .feature-visual-panel .text-\[27px\] {
  color: var(--navy) !important;
}

#expertise .feature-visual-panel [class*="bg-accent"] {
  background-color: rgba(30, 78, 216, 0.16) !important;
}

#expertise .feature-visual-panel [class*="bg-green-500"] {
  background-color: rgba(34, 197, 94, 0.18) !important;
}

/* Service pages: brighten hero visual panels/images to match white+blue theme */
.advisory-visual,
.managed-visual,
.audit-visual,
.btp-visual,
.iagdash-visual,
.etd-visual,
.ac-visual,
.pc-visual,
.riskflow-visual,
.s4-visual,
.ias-visual {
  background: linear-gradient(145deg, #F5FAFF 0%, #EAF2FF 100%) !important;
  border: 1px solid #C8D8EE !important;
  box-shadow: 0 10px 28px rgba(11, 27, 51, 0.10) !important;
}

.advisory-stage,
.audit-stage,
.btp-stage,
.iagdash-stage,
.ac-stage,
.pc-stage,
.riskflow-stage,
.s4-stage,
.ias-stage {
  background: linear-gradient(145deg, #FFFFFF 0%, #F1F6FF 100%) !important;
  border: 1px solid #C8D8EE !important;
  box-shadow: inset 0 0 0 1px rgba(30, 78, 216, 0.08);
}

.managed-visual::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(225, 235, 249, 0.34) 100%),
    radial-gradient(circle at 28% 24%, rgba(77,142,255,0.10), transparent 55%) !important;
}

.advisory-center,
.s4-core,
.ac-core,
.btp-hub {
  background: linear-gradient(155deg, #DCE9FF 0%, #BED5FF 100%) !important;
  border: 1px solid #9DBBEB !important;
  color: #0F2E54 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
}

.advisory-sap,
.s4-core span,
.ac-core span,
.btp-hub span {
  color: #1E4ED8 !important;
}

.ad-pill,
.s4-node,
.ac-tag,
.btp-node,
.iagdash-card,
.iagdash-box,
.iagdash-k,
.iagdash-item,
.pc-step,
.risk-pill,
.audit-metric,
.audit-lane,
.etd-node {
  background: linear-gradient(165deg, #FFFFFF 0%, #F4F8FF 100%) !important;
  border: 1px solid #C8D8EE !important;
  color: #183A60 !important;
}

.risk-pill.is6 {
  background: linear-gradient(165deg, #F2F7FF 0%, #E9F0FF 100%) !important;
  border-color: #BFD3F2 !important;
}

.iagdash-title,
.iagdash-k b,
.iagdash-item,
.iagdash-box h4,
.audit-title,
.audit-lane-name,
.audit-metric-value,
.riskflow-title,
.risk-label,
.pc-step h4,
.pc-step p,
.btp-node,
.s4-node,
.ac-tag,
.etd-text {
  color: #183A60 !important;
}

.iagdash-k span,
.audit-metric-label,
.audit-foot,
.iagdash-foot,
.pc-foot,
.risk-foot,
.s4-foot,
.ac-foot,
.btp-foot {
  color: #5F7DA4 !important;
}

.audit-progress,
.iagdash-bar {
  background: rgba(124, 146, 173, 0.28) !important;
}

.audit-tag,
.iagdash-pill {
  background: rgba(30,78,216,0.10) !important;
  border: 1px solid rgba(30,78,216,0.24) !important;
  color: #1F4DA8 !important;
}

.s4-stage,
.ac-stage,
.btp-stage,
.pc-stage,
.riskflow-stage,
.audit-stage,
.iagdash-stage {
  background: linear-gradient(145deg, #FCFEFF 0%, #EEF4FF 100%) !important;
}

.s4-glow {
  background: radial-gradient(circle, rgba(77,142,255,.22) 0%, rgba(77,142,255,.05) 48%, transparent 76%) !important;
}

.s4-ring,
.ac-spoke,
.btp-rail,
.pc-link,
.risk-connector {
  opacity: 0.7;
}

.ac-wheel::after {
  background: radial-gradient(circle at 30% 25%, rgba(77,142,255,.16), rgba(245,250,255,.98)) !important;
}

.etd-badge {
  background: rgba(30,78,216,0.08) !important;
}

/* New service page architecture visuals: force light theme treatment */
.pcsec-visual,
.pcstr-visual,
.pcmig-visual,
.pcgov-visual,
.pcadopt-visual,
.btpom-visual,
.btpeg-visual {
  background: linear-gradient(145deg, #F5FAFF 0%, #EAF2FF 100%) !important;
  border: 1px solid #C8D8EE !important;
  box-shadow: 0 10px 28px rgba(11, 27, 51, 0.10) !important;
}

.pcsec-stage,
.pcstr-stage,
.pcmig-stage,
.pcgov-stage,
.pcadopt-stage {
  background: linear-gradient(145deg, #FFFFFF 0%, #F1F6FF 100%) !important;
  border: 1px solid #C8D8EE !important;
  box-shadow: inset 0 0 0 1px rgba(30, 78, 216, 0.08);
}

.pcsec-core,
.pcstr-core,
.pcmig-core,
.btpom-root-node {
  background: linear-gradient(155deg, #DCE9FF 0%, #BED5FF 100%) !important;
  border: 1px solid #9DBBEB !important;
  color: #0F2E54 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
}

.pcsec-node,
.pcstr-node,
.pcmig-node,
.pcgov-card,
.pcgov-box,
.pcgov-k,
.pcgov-item,
.pcadopt-card,
.pcadopt-box,
.pcadopt-k,
.pcadopt-item,
.btpom-tag,
.btpeg-step-box,
.btpeg-role-chip {
  background: linear-gradient(165deg, #FFFFFF 0%, #F4F8FF 100%) !important;
  border: 1px solid #C8D8EE !important;
  color: #183A60 !important;
}

.pcsec-grid,
.pcstr-grid,
.pcmig-grid {
  opacity: 0.24 !important;
  background-image:
    linear-gradient(rgba(124, 146, 173, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 146, 173, 0.16) 1px, transparent 1px) !important;
}

.pcsec-ring,
.pcstr-ring,
.pcmig-ring,
.pcsec-link,
.pcstr-link,
.pcmig-link,
.btpom-env-connector,
.btpom-root-node::after,
.btpom-branch-row::before,
.btpeg-arrow svg {
  opacity: 0.65 !important;
}

.pcgov-title,
.pcgov-k b,
.pcgov-item,
.pcgov-box h4,
.pcadopt-title,
.pcadopt-k b,
.pcadopt-item,
.pcadopt-box h4,
.btpom-label,
.btpom-foot,
.btpeg-label,
.btpeg-foot {
  color: #183A60 !important;
}

.pcgov-k span,
.pcadopt-k span,
.pcgov-pill,
.pcadopt-pill,
.pcgov-foot,
.pcadopt-foot,
.btpom-tag,
.btpeg-step-sub {
  color: #5F7DA4 !important;
}

.pcgov-pill,
.pcadopt-pill {
  background: rgba(30,78,216,0.10) !important;
  border: 1px solid rgba(30,78,216,0.24) !important;
}

.pcgov-bar,
.pcadopt-bar {
  background: rgba(124, 146, 173, 0.28) !important;
}

/* SVG/image hero visuals used in some service pages */
section.hero-gradient img:not(.brand-logo-nav):not(.brand-logo-footer) {
  filter: brightness(1.22) contrast(0.95) saturate(0.90);
}

/* Extra lift for legacy dark SVG hero artworks */
section.hero-gradient img[src*="SAP_Application_Support.svg"],
section.hero-gradient img[src*="Custom_dev2.svg"],
section.hero-gradient img[src*="/2.svg"] {
  filter: brightness(1.30) contrast(0.86) saturate(0.78);
}

.input-field,
.field-input,
textarea.input-field,
input.input-field {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.input-field::placeholder,
.field-input::placeholder {
  color: #7B8FA8;
}

.input-field:focus,
.field-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accentSoft);
}

/* Contact map */
.map-frame {
  border: 1px solid var(--border);
}

/* ============================================================
   MOBILE-FIRST RESPONSIVE OVERRIDES
   ============================================================ */

/* 1. Prevent horizontal scroll globally */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
body { overflow-x: hidden; }

/* 2. All images / iframes are fluid by default */
img {
  max-width: 100%;
  height: auto;
}
iframe {
  max-width: 100%;
}

/* 3. Brand logo — scale down on mobile */
@media (max-width: 767px) {
  .brand-logo-nav {
    height: 46px !important;
    max-width: 180px !important;
    transform: scale(1.9) !important;
  }
  .brand-logo-footer {
    height: 103px !important;
    max-width: 361px !important;
  }
}

/* 4. Horizontal padding: reduce px-8 to 1rem on mobile */
@media (max-width: 767px) {
  .px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* 5. Hero section — reduce extreme top/bottom padding on mobile */
@media (max-width: 767px) {
  .pt-48 { padding-top:  6rem !important; }
  .pt-28 { padding-top:  4.5rem !important; }
  .pt-24 { padding-top:  4rem !important; }
  .pb-36 { padding-bottom: 3rem !important; }
  .pb-20 { padding-bottom: 2rem !important; }
  .mb-32 { margin-bottom: 2rem !important; }
}

/* 6. Hero main title — fix white-space + clamp font size */
@media (max-width: 767px) {
  .hero-main-title {
    white-space: normal !important;
    font-size: clamp(2rem, 9vw, 3.25rem) !important;
    line-height: 1.12 !important;
  }
}

/* 7. Clamp feature-title (used in index.html feature sections) */
.feature-title {
  font-size: clamp(1.75rem, 5vw + 0.5rem, 3.125rem) !important;
  line-height: 1.1 !important;
}

/* 8. Section h1 headings — clamp on mobile */
@media (max-width: 767px) {
  h1.text-4xl,
  h1.text-5xl,
  h1.text-6xl {
    font-size: clamp(1.75rem, 6vw + 0.25rem, 3rem) !important;
    line-height: 1.12 !important;
  }
  /* Override motion.css fixed px value for h2 to use clamp */
  h2.text-4xl,
  h2.text-5xl,
  h2.md\:text-5xl {
    font-size: clamp(1.75rem, 6vw + 0.5rem, 2.75rem) !important;
  }
}

/* 9. CTA button row — wrap on mobile so buttons stack cleanly */
@media (max-width: 480px) {
  .flex.items-center.justify-center.gap-3 {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .flex.items-center.justify-center.gap-3 > a,
  .flex.items-center.justify-center.gap-3 > button {
    text-align: center !important;
  }
}

/* 10. Grid layouts — stack columns on mobile */
@media (max-width: 767px) {
  /* 2-col content grids → single column
     Exclude chk-grid, and visual illustration panels */
  .grid.grid-cols-2:not(.chk-grid) {
    grid-template-columns: 1fr !important;
  }
  /* Exception: keep 2-col inside decorative visual panels */
  .feature-visual-panel .grid.grid-cols-2,
  .feature-visual-wrap .grid.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .grid.grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  /* 4-col grids → 2-col (e.g., partner/tech icon rows) */
  .grid.grid-cols-4:not(footer .grid-cols-4) {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* 11. Footer grid — 2-col on tablet, 1-col on small mobile */
@media (max-width: 767px) {
  footer .grid.grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }
  footer .grid.grid-cols-4 .col-span-1 {
    grid-column: span 2 !important;
  }
}
@media (max-width: 420px) {
  footer .grid.grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
  footer .grid.grid-cols-4 .col-span-1 {
    grid-column: span 1 !important;
  }
}

/* 12. Our-services page — service row & board */
@media (max-width: 640px) {
  .service-row {
    grid-template-columns: 1fr !important;
  }
  .service-label {
    min-height: 52px !important;
    font-size: 15px !important;
  }
  .services-hero {
    padding: 24px 16px !important;
  }
  .services-board {
    padding: 12px !important;
  }
  h1.text-5xl.md\:text-6xl {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
  }
}

/* 13. Contact page — checkbox grid stacks on narrow screens */
@media (max-width: 480px) {
  .chk-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 14. Service pages hero — content sections use px-8 max-w-7xl;
       theme.css rule #4 handles px-8, but also ensure inner grids
       don't overflow  */
@media (max-width: 767px) {
  body > section.hero-gradient {
    padding-top: 5rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  body > main.pt-28 {
    padding-top: 5.25rem !important;
  }
  /* Visual panels inside hero — allow natural width */
  .advisory-visual, .managed-visual, .audit-visual, .btp-visual,
  .iagdash-visual, .etd-visual, .ac-visual, .pc-visual,
  .riskflow-visual, .s4-visual, .ias-visual,
  .pcsec-visual, .pcstr-visual, .pcmig-visual, .pcgov-visual,
  .pcadopt-visual, .btpom-visual, .btpeg-visual {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* 15. Homepage feature section visual panels — reduce height on mobile
         so the glow background stays landscape-proportioned, not portrait-squished */
  .feature-visual-wrap {
    height: 18rem !important;
  }
  .feature-visual-wrap-grc {
    height: 24rem !important;
  }
  .feature-visual-panel {
    overflow: hidden;
  }
}

/* ============================================================
   SERVICE PAGE VISUAL MOBILE OVERRIDES  (all breakpoints ≤767px)
   ============================================================ */

@media (max-width: 767px) {

  /* ── GRC Risk Management: riskflow ─────────────────────────────────────── */
  /* 6-col grid with 46px numbers → 3-col, scaled down */
  .riskflow-stage {
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 10px !important;
  }
  .riskflow-title {
    font-size: 14px !important;
    letter-spacing: .06em !important;
  }
  .riskflow-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 14px 4px 0 !important;
  }
  .risk-pill {
    font-size: 26px !important;
    height: 52px !important;
  }
  .risk-label {
    font-size: 9px !important;
    min-height: 0 !important;
    line-height: 1.3 !important;
  }
  .risk-connector {
    height: 16px !important;
  }

  /* ── GRC Process Control: pc-stage ─────────────────────────────────────── */
  /* 5-col alternating layout → single stacked column */
  .pc-visual {
    overflow: visible !important;
  }
  .pc-stage {
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 12px !important;
    overflow: visible !important;
  }
  .pc-stage::before {
    display: none !important;
  }
  .pc-grid {
    grid-template-columns: 1fr !important;
    height: auto !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .pc-step {
    min-height: 0 !important;
  }
  .pc-step.up,
  .pc-step.down {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .pc-link {
    display: none !important;
  }
  .pc-foot {
    margin-top: 12px !important;
  }

  /* ── SAP Cloud IAG: iagdash-grid ────────────────────────────────────────── */
  /* Asymmetric 2-col → single column */
  .iagdash-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Public Cloud Security & Governance: pcgov-grid ────────────────────── */
  .pcgov-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Public Cloud Adoption: pcadopt-grid ───────────────────────────────── */
  .pcadopt-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── BTP Entitlement Governance: btpeg-roles ────────────────────────────── */
  /* 3-col role chips → 2-col */
  .btpeg-roles {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Scale down the large step number */
  .btpeg-step-box {
    font-size: 20px !important;
  }

  /* ── Private Cloud Strategy: phases row → stacked column ───────────────── */
  .pcstr-phases {
    flex-direction: column !important;
    gap: 6px !important;
  }
  .pcstr-sep {
    display: none !important;
  }
  .pcstr-phase {
    flex-direction: row !important;
    justify-content: flex-start !important;
    text-align: left !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 16px !important;
  }
  .pcstr-phase-num {
    font-size: 24px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0;
    min-width: 32px;
  }

  /* ── ETD: etd-grid ──────────────────────────────────────────────────────── */
  /* 2-col node grid → single column */
  .etd-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Cloud Identity: ias-visual height on mobile ────────────────────────── */
  .ias-visual {
    height: 18rem !important;
    overflow: hidden !important;
  }
}