/* Miza AI — public inner-page consistency layer.
   Loaded after legacy/page-local styles; presentation only. The approved
   native-redesign.css token set remains the single source of theme colors. */

/* Shared content rhythm and readable surfaces */
.page-hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-y-sm, 48px);
  padding-top: calc(var(--nav-height) + var(--section-y-sm, 48px));
  background: linear-gradient(145deg, var(--hp-zone-a), var(--hp-zone-b));
  border-bottom: 1px solid var(--clr-border);
}
.page-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--nr-accent), transparent);
  opacity: .72;
}
.page-hero-title,
.page-intro-title {
  color: var(--clr-text-primary);
  font-weight: 850;
  line-height: 1.18;
  letter-spacing: -.035em;
  text-wrap: balance;
  font-size: var(--fs-h1);
}
.page-hero-subtitle,
.page-intro,
.page-intro p {
  color: var(--clr-text-secondary);
}
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
  color: var(--clr-text-muted);
  font-size: var(--fs-sm);
}
.breadcrumb a { color: var(--clr-cyan); text-decoration: none; }
.breadcrumb a:hover { color: var(--nr-accent); }
.section-badge,
.section-badge-inline,
.cl-badge,
.mk-badge,
.tr-badge {
  color: var(--clr-cyan) !important;
  background: var(--clr-cyan-glow) !important;
  border: 1px solid var(--clr-border-bright) !important;
  border-radius: 999px;
}
.section-title {
  color: var(--clr-text-primary);
  font-weight: 800;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.section-subtitle { color: var(--clr-text-secondary); }
.section-header { max-width: 720px; margin-inline: auto; margin-bottom: 32px; text-align: center; }
.text-gradient,.text-gradient-gold,
.ai-accent,.at-accent,.crm-accent,.cl-accent,.erp-accent,.ec-accent,
 .mk-accent,.mb-accent,.ws-accent,.tr-accent {
  background: none !important;
  color: var(--clr-primary) !important;
  -webkit-text-fill-color: currentColor !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}
/* Stat numbers + error codes: gradient text is banned; solid token colour. */
.tr-stat-n,.crm-stat-val,.ec-stat-val,.erp-stat-val,.mk-stat-num,.mb-stat-val,.ws-stat-val,
[style*="background-clip:text"] {
  background: none !important;
  color: var(--clr-primary) !important;
  -webkit-text-fill-color: currentColor !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}

/* Detail-page heroes use their original layouts; unify only their paint. */
.ai-hero,.at-hero,.crm-hero,.cl-hero,.erp-hero,.ec-hero,
.mk-hero,.mb-hero,.ws-hero,.tr-hero {
  position: relative;
  isolation: isolate;
  background: linear-gradient(145deg, var(--hp-zone-a), var(--hp-zone-b)) !important;
  border-bottom: 1px solid var(--clr-border);
}
.ai-hero::after,.at-hero::after,.crm-hero::after,.cl-hero::after,
.erp-hero::after,.ec-hero::after,.mk-hero::after,.mb-hero::after,
.ws-hero::after,.tr-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--nr-accent), transparent);
  opacity: .72;
}
.ai-hero-inner,.at-hero-inner,.crm-hero-inner,.erp-hero-inner,
.ec-hero-inner,.mk-hero-inner,.mb-hero-inner,.ws-hero-inner,.tr-hero-inner {
  gap: clamp(1.75rem, 5vw, 4.5rem);
}
.ai-h1,.at-h1,.crm-h1,.erp-h1,.ec-h1,.mk-h1,.mb-h1,.ws-h1,.tr-h1 {
  color: var(--clr-text-primary);
  font-size: var(--fs-h1);
  font-weight: 850;
  line-height: 1.18;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.ai-lead,.at-lead,.crm-lead,.erp-lead,.ec-lead,.mk-lead,.mb-lead,.ws-lead,.tr-lead {
  color: var(--clr-text-secondary);
  line-height: 1.85;
  max-width: 62ch;
}
.ai-glow,.at-glow,.crm-glow,.cl-hero-glow,.erp-glow,.ec-glow,
.mk-glow,.mb-glow,.ws-glow,.tr-glow,.ai-g1,.ai-g2,.at-g1,.at-g2,
.crm-g1,.crm-g2,.erp-g1,.erp-g2,.ec-g1,.ec-g2,.mk-g1,.mk-g2,.mk-g3,
.mb-g1,.mb-g2,.ws-g1,.ws-g2,.tr-g1,.tr-g2 {
  opacity: .16 !important;
  background-color: var(--clr-cyan-glow) !important;
}
.ai-grid-bg,.at-grid-bg,.crm-grid-bg,.erp-grid-bg,.ec-grid-bg,
.mk-grid-bg,.mb-grid-bg,.ws-grid-bg,.tr-grid-bg {
  opacity: .22 !important;
  background-image: linear-gradient(var(--clr-border) 1px, transparent 1px),
                    linear-gradient(90deg, var(--clr-border) 1px, transparent 1px) !important;
}
.ai-hero .section-badge,.at-hero .section-badge,.crm-hero .section-badge,
.cl-hero .section-badge,.erp-hero .section-badge,.ec-hero .section-badge,
.mk-hero .section-badge,.mb-hero .section-badge,.ws-hero .section-badge,
.tr-hero .section-badge {
  color: var(--clr-cyan) !important;
  background: var(--clr-cyan-glow) !important;
  border-color: var(--clr-border-bright) !important;
}
.ai-hero .hp-btn-main,.at-hero .hp-btn-main,.crm-hero .hp-btn-main,
.cl-hero .hp-btn-main,.erp-hero .hp-btn-main,.ec-hero .hp-btn-main,
.mk-hero .hp-btn-main,.mb-hero .hp-btn-main,.ws-hero .hp-btn-main,
.tr-hero .hp-btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 48px;
  padding: .8rem 1.2rem;
  line-height: 1.5;
  text-decoration: none;
  color: var(--clr-on-primary) !important;
  background: linear-gradient(125deg, var(--clr-primary), var(--clr-primary-hover)) !important;
  box-shadow: var(--shadow-md) !important;
}
.native-public .hp-btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 48px;
  padding: .8rem 1.2rem;
  border: 1px solid var(--clr-green);
  border-radius: 12px;
  color: var(--clr-green);
  text-decoration: none;
  font-weight: 700;
}

/* Stats bands and consistent content cards */
.ai-stats-bar,.at-stats-bar,.crm-stats,.erp-stats,.ec-stats,
.mk-stats,.mb-stats,.ws-stats,.tr-stat-strip {
  background: var(--clr-bg-elevated) !important;
  border-block: 1px solid var(--clr-border);
}
.ai-stat,.at-stat,.crm-stat-item,.erp-stat-item,.ec-stat-item,
.mk-stat-card,.mb-stat-item,.ws-stat-item,.tr-stat,
.cl-hero-stat,.cl-dc-stat,.cl-roi-stat {
  color: var(--clr-text-primary);
  border-color: var(--clr-border) !important;
}
.ai-stat-val,.at-stat-val,.crm-stat-val,.erp-stat-val,.ec-stat-val,
.mk-stat-num,.mb-stat-val,.ws-stat-val,.tr-stat-n,.cl-stat-val,
.cl-dc-stat-val,.cl-roi-val {
  color: var(--clr-cyan) !important;
  font-variant-numeric: tabular-nums;
}
.ai-stat-lbl,.at-stat-lbl,.crm-stat-lbl,.erp-stat-lbl,.ec-stat-lbl,
.mk-stat-label,.mb-stat-lbl,.ws-stat-lbl,.tr-stat-l,.cl-stat-lbl,
.cl-dc-stat-lbl,.cl-roi-lbl { color: var(--clr-text-muted) !important; }
.ai-case-card,.at-case-card,.crm-card,.erp-card,.ec-card,.mb-card,
.ws-card,.cl-svc-card,.mk-channel-card,.mk-tool,.mk-step,.mk-stat-card,
.srv-overview-card,.tr-track,.tr-outcome,.tr-step,.tr-del-card,
.sector-insight-card,.sector-stat-card,.support-plan,.section .card {
  color: var(--clr-text-primary);
  background: var(--clr-bg-card) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.ai-case-card:hover,.at-case-card:hover,.crm-card:hover,.erp-card:hover,
.ec-card:hover,.mb-card:hover,.ws-card:hover,.cl-svc-card:hover,
.mk-channel-card:hover,.mk-tool:hover,.mk-step:hover,.srv-overview-card:hover,
.tr-track:hover,.tr-outcome:hover,.tr-step:hover,.tr-del-card:hover,
.sector-insight-card:hover,.support-plan:hover,.section .card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--clr-cyan) 42%, var(--clr-border)) !important;
  box-shadow: var(--shadow-md);
}
.ai-case-card h3,.at-case-card h3,.crm-card-title,.erp-card-title,
.ec-card-title,.mb-card-title,.ws-card-title,.mk-tool-name,
.mk-step-title,.tr-track-title,.tr-outcome-title,.tr-step-title,
.tr-del-title,.sector-insight-title,.srv-overview-card h3 {
  color: var(--clr-text-primary);
  font-weight: 750;
}
.ai-case-card p,.at-case-card p,.crm-card-desc,.ws-card-desc,
.tr-track-desc,.tr-outcome-desc,.tr-step-desc,.tr-del-desc,
.sector-insight-desc { color: var(--clr-text-secondary); }
.ai-case-tags span,.mk-chip,.tr-tool-tag,.mk-chips span {
  color: var(--clr-text-secondary);
  background: var(--clr-bg-base);
  border: 1px solid var(--clr-border);
  border-radius: 999px;
}
.ai-case-icon,.at-case-icon,.sector-insight-icon,.mk-tool-icon,
.tr-track-icon,.tr-outcome-icon,.tr-del-icon {
  color: var(--clr-cyan) !important;
  background: var(--clr-cyan-glow) !important;
  border-color: var(--clr-border-bright) !important;
}
.ai-case-visual,.at-case-visual,.crm-card-visual,.erp-card-visual,
.ec-card-visual,.mb-card-visual,.ws-card-visual {
  background: var(--clr-bg-base) !important;
  border-color: var(--clr-border) !important;
}
.ai-case-visual svg,.at-case-visual svg,.crm-card-visual svg,
.erp-card-visual svg,.ec-card-visual svg,.mb-card-visual svg,.ws-card-visual svg {
  max-width: 100%;
}
/* Legacy mini-illustrations used dark terminal fills and neon chart ink as
   SVG presentation attributes. Normalize those attributes without touching
   their markup or the semantic content of the diagrams. */
.ai-hero-svg [fill*="13,17,23"],.ai-case-visual [fill*="13,17,23"],
.at-case-visual [fill*="13,17,23"],.crm-hero-svg [fill*="13,17,23"],
.erp-hero-svg [fill*="13,17,23"],.ec-hero-svg [fill*="13,17,23"],
.mk-hero-svg [fill*="13,17,23"],.mb-hero-svg [fill*="13,17,23"],
.ws-hero-svg [fill*="13,17,23"],
.ai-hero-svg [fill*="3,7,18"],.crm-hero-svg [fill*="3,7,18"],
.erp-hero-svg [fill*="3,7,18"],.ec-hero-svg [fill*="3,7,18"],
.mk-hero-svg [fill*="3,7,18"],.mb-hero-svg [fill*="3,7,18"],
.ws-hero-svg [fill*="3,7,18"],
.ai-case-visual [fill*="13,10,30"],.at-case-visual [fill*="13,10,30"],
.crm-card-visual [fill*="13,10,30"],.erp-card-visual [fill*="13,10,30"],
.ec-card-visual [fill*="13,10,30"],.mb-card-visual [fill*="13,10,30"],
.ws-card-visual [fill*="13,10,30"] {
  fill: var(--clr-bg-card) !important;
}
.ai-hero-svg [stroke*="129,140,248"],.ai-case-visual [stroke*="129,140,248"],
.at-case-visual [stroke*="129,140,248"],.crm-hero-svg [stroke*="129,140,248"],
.erp-hero-svg [stroke*="129,140,248"],.ec-hero-svg [stroke*="129,140,248"],
.mk-hero-svg [stroke*="129,140,248"],.mb-hero-svg [stroke*="129,140,248"],
.ws-hero-svg [stroke*="129,140,248"] { stroke: var(--clr-cyan) !important; }
.ai-hero-svg [fill*="129,140,248"],.ai-case-visual [fill*="129,140,248"],
.at-case-visual [fill*="129,140,248"],.crm-hero-svg [fill*="129,140,248"],
.erp-hero-svg [fill*="129,140,248"],.ec-hero-svg [fill*="129,140,248"],
.mk-hero-svg [fill*="129,140,248"],.mb-hero-svg [fill*="129,140,248"],
.ws-hero-svg [fill*="129,140,248"] { fill: var(--clr-cyan) !important; }
/* Keep decorative SVG washes translucent instead of solid accent blocks. */
.ai-hero-svg ellipse,.crm-hero-svg ellipse,.erp-hero-svg ellipse,
.ec-hero-svg ellipse,.mk-hero-svg ellipse,.mb-hero-svg ellipse,
.ws-hero-svg ellipse { fill: var(--clr-cyan-glow) !important; }
.ai-hero-svg [stroke*="236,72,153"],.ai-case-visual [stroke*="236,72,153"],
.at-case-visual [stroke*="236,72,153"],.crm-hero-svg [stroke*="236,72,153"],
.erp-hero-svg [stroke*="236,72,153"],.ec-hero-svg [stroke*="236,72,153"],
.mk-hero-svg [stroke*="236,72,153"],.mb-hero-svg [stroke*="236,72,153"],
.ws-hero-svg [stroke*="236,72,153"] { stroke: var(--nr-accent) !important; }
.ai-hero-svg [fill*="236,72,153"],.ai-case-visual [fill*="236,72,153"],
.at-case-visual [fill*="236,72,153"],.crm-hero-svg [fill*="236,72,153"],
.erp-hero-svg [fill*="236,72,153"],.ec-hero-svg [fill*="236,72,153"],
.mk-hero-svg [fill*="236,72,153"],.mb-hero-svg [fill*="236,72,153"],
.ws-hero-svg [fill*="236,72,153"] { fill: var(--nr-accent) !important; }
.ai-hero-svg [stroke*="255,255,255"],.ai-case-visual [stroke*="255,255,255"],
.at-case-visual [stroke*="255,255,255"],.crm-hero-svg [stroke*="255,255,255"],
.erp-hero-svg [stroke*="255,255,255"],.ec-hero-svg [stroke*="255,255,255"],
.mk-hero-svg [stroke*="255,255,255"],.mb-hero-svg [stroke*="255,255,255"],
.ws-hero-svg [stroke*="255,255,255"] { stroke: var(--clr-border-bright) !important; }
.ai-hero-svg text[fill*="255,255,255"],.ai-case-visual text[fill*="255,255,255"],
.at-case-visual text[fill*="255,255,255"],.crm-hero-svg text[fill*="255,255,255"],
.erp-hero-svg text[fill*="255,255,255"],.ec-hero-svg text[fill*="255,255,255"],
.mk-hero-svg text[fill*="255,255,255"],.mb-hero-svg text[fill*="255,255,255"],
.ws-hero-svg text[fill*="255,255,255"] { fill: var(--clr-text-secondary) !important; }
.ai-hero-svg text,.crm-hero-svg text,.erp-hero-svg text,.ec-hero-svg text,
.mk-hero-svg text,.mb-hero-svg text,.ws-hero-svg text,.ai-case-visual text,
.at-case-visual text,.crm-card-visual text,.erp-card-visual text,
.ec-card-visual text,.mb-card-visual text,.ws-card-visual text {
  fill: var(--clr-text-secondary) !important;
}

/* Sector pages and service detail information */
.sector-insight-card { border-inline-start: 1px solid var(--clr-border) !important; }
.sector-insight-label { color: var(--clr-primary) !important; }
.sector-stat-card { text-align: center; }
.ind-feat-list,.crm-feat-list,.cl-feat-list,.erp-feat-list,.ec-feat-list,
.mb-feat-list,.sol-feat-list,.ws-card-features,.support-plan-features,
.plan-features,.feature-list {
  color: var(--clr-text-secondary);
}
.ind-feat-list li,.crm-feat-list li,.cl-feat-list li,.erp-feat-list li,
.ec-feat-list li,.mb-feat-list li,.sol-feat-list li,.ws-card-features li,
.support-plan-features li,.plan-features li,.feature-list li {
  line-height: 1.65;
  padding-block: .12rem;
}
.feature-check,.feature-item,.process-step,.impl-phase,.cds-card,.cds-flow-step {
  color: var(--clr-text-secondary);
}
.tr-hero-visual,.ai-hero-visual,.at-hero-visual,.crm-hero-visual,
.erp-hero-visual,.ec-hero-visual,.mk-hero-visual,.mb-hero-visual,.ws-hero-visual {
  min-width: 0;
}
.tr-step-num,.mk-step-num,.impl-phase-num,.process-num,.cds-flow-num {
  background: var(--clr-primary) !important;
  color: var(--clr-on-primary) !important;
}
/* ── Unified closing CTA band ─────────────────────────────────────────
   ONE layout for every pre-footer band: navy surface, text block on the
   inline-start side, actions on the inline-end side, one row >=769px,
   stacked <=768px. Covers: .hp-cta-banner (all Solutions/Services/Industries
   /Home views + Chatbot), .nr-band (About, Solutions/Industries index),
   .mk-cta-box (Marketing), .cta-section (Industries/RealEstate).
   Root cause of the old 3 layouts: some views emit an empty, unstyled
   <div class="hp-cta-glow"> as first child, which took the 620px grid cell
   and pushed text/buttons into the wrong cells. It is decoration only, so
   it is hidden (no glow allowed by the design system). */
/* .hp-cta-banner is doubled (0,2,0) so it also beats views whose scoped
   <style> redefines .hp-cta-banner padding/display (e.g. Home/Index). */
.hp-cta-banner.hp-cta-banner,.nr-band,.mk-cta .mk-cta-box,.cta-section {
  position: relative;
  overflow: hidden;
  max-width: 1200px;
  margin-inline: auto;
  padding: 40px 48px;
  color: var(--clr-section-dark-text);
  background: var(--clr-section-dark-bg) !important; /* beats per-view gradients/inline backgrounds */
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  text-align: start !important; /* beats inline text-align:center */
}
.hp-cta-banner > .hp-cta-glow,
.mk-cta .mk-cta-box::before,
.cta-section::before { display: none !important; } /* decorative glow/gradient, not allowed */

/* Row layout: text | actions */
.hp-cta-banner.hp-cta-banner,.nr-band {
  display: flex !important; /* views set display:grid in scoped <style> blocks */
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.hp-cta-banner > div:not(.hp-cta-glow):not(.hp-cta-actions):not(.container),
.nr-band > div:first-child {
  flex: 1 1 0;
  min-width: 0;
  max-width: 640px;
  text-align: start;
}
.hp-cta-banner .hp-cta-actions,
.nr-band > div:last-child {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}
.hp-cta-banner .cta-buttons { justify-content: flex-end; }

/* Heading + paragraph: same scale in every band */
.hp-cta-banner .hp-cta-title,.nr-band h2,.mk-cta .mk-cta-box h2,.cta-section h2 {
  font-size: var(--fs-h2) !important; /* mk/cta-section headings carry inline font-size */
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0 0 .6rem !important;
  color: var(--clr-section-dark-text);
  text-wrap: balance;
}
.hp-cta-banner .hp-cta-sub,.hp-cta-banner .hp-cta-subtitle,.nr-band p,
.mk-cta .mk-cta-box p,.cta-section p {
  font-size: var(--fs-card) !important; /* mk/cta-section paragraphs carry inline size/colour/margins */
  line-height: 1.7;
  max-width: 640px !important;
  margin: 0 !important;
  color: var(--clr-section-dark-muted) !important;
}

/* Secondary buttons on the navy surface: tokens give >=4.5:1.
   .hp-btn-main/.hp-btn-wa are styled only in Home's scoped <style>, so on
   Chatbot they rendered unstyled (dark text on navy). */
.hp-cta-banner .btn-outline,.nr-band .btn-outline,.mk-cta .mk-cta-box .btn-outline,.cta-section .btn-outline,
.hp-cta-banner .hp-btn-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.75rem; border-radius: 12px; font-weight: 700; font-size: var(--fs-sm); text-decoration: none;
  color: var(--clr-section-dark-text) !important;
  background: transparent !important;
  border: 1.5px solid var(--clr-section-dark-muted) !important;
}
.hp-cta-banner .hp-btn-main {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.75rem; border-radius: 12px; font-weight: 700; font-size: var(--fs-sm); text-decoration: none;
  color: var(--clr-on-primary); background: var(--clr-primary);
}

/* Marketing (.mk-cta-box) and RealEstate (.cta-section): same row via grid */
.mk-cta .mk-cta-box,.cta-section {
  display: grid;
  grid-template-columns: minmax(0, 640px) auto;
  justify-content: space-between;
  align-items: center;
  column-gap: 32px;
}
.mk-cta .mk-cta-box > *:not(:last-child),.cta-section > *:not(:last-child) { grid-column: 1; }
.mk-cta .mk-cta-box > *:last-child,.cta-section > *:last-child {
  grid-column: 2;
  grid-row: 1 / span 3;
  justify-content: flex-end !important; /* inline justify-content:center on the actions wrapper */
}
.mk-cta .mk-cta-box .section-badge {
  justify-self: start;
  margin: 0 0 12px !important; /* inline margin:0 auto 1.5rem */
  background: color-mix(in srgb, var(--clr-section-dark-text) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--clr-section-dark-text) 28%, transparent) !important;
  color: var(--clr-section-dark-text) !important; /* inline pink on navy -> token, >=4.5:1 */
}
.mk-cta .mk-cta-box h2 { margin-top: 0 !important; }

@media (max-width: 768px) {
  .hp-cta-banner.hp-cta-banner,.nr-band {
    flex-direction: column;
    align-items: stretch;
    padding: 32px 24px;
    gap: 24px;
  }
  .hp-cta-banner > div:not(.hp-cta-glow):not(.hp-cta-actions):not(.container),
  .nr-band > div:first-child { flex: none; max-width: none; }
  .hp-cta-banner .hp-cta-actions,.nr-band > div:last-child { width: 100%; justify-content: stretch; }
  .hp-cta-banner .cta-buttons { width: 100%; }
  .hp-cta-banner .btn,.hp-cta-banner .hp-cta-primary,.hp-cta-banner .hp-btn-main,.hp-cta-banner .hp-btn-wa,
  .nr-band .btn,.mk-cta .mk-cta-box .btn,.cta-section .btn { width: 100%; justify-content: center; text-align: center; }
  .hp-cta-banner .cta-buttons,.nr-band > div:last-child { flex-direction: column; align-items: stretch; }
  .mk-cta .mk-cta-box,.cta-section {
    grid-template-columns: minmax(0, 1fr);
    padding: 32px 24px;
    row-gap: 8px;
  }
  .mk-cta .mk-cta-box > *:last-child,.cta-section > *:last-child {
    grid-column: 1; grid-row: auto; margin-top: 16px;
    flex-direction: column; align-items: stretch;
  }
  .mk-cta .mk-cta-box .cta-buttons,.cta-section .cta-buttons { width: 100%; flex-direction: column; align-items: stretch; }
}

/* Chatbot: the banner class sits on <section>, with a centred .container inside */
section.hp-cta-banner.hp-cta-banner {
  margin-block: 48px;
  width: calc(100% - 2 * var(--gutter)); /* section is not inside a .container: match the 1136px of other bands */
  max-width: calc(var(--container) - 2 * var(--gutter));
}
.hp-cta-banner > .container {
  flex: 1 1 auto;
  width: 100%;
  max-width: none !important; /* inline max-width:720px */
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 640px) auto;
  justify-content: space-between;
  align-items: center;
  column-gap: 32px;
  text-align: start !important; /* inline text-align:center */
}
.hp-cta-banner > .container > h2,.hp-cta-banner > .container > p { grid-column: 1; }
.hp-cta-banner > .container > div {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-top: 0 !important; /* inline margin-top:1.5rem */
  justify-content: flex-end !important; /* inline justify-content:center */
}
@media (max-width: 768px) {
  .hp-cta-banner > .container { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .hp-cta-banner > .container > div { grid-column: 1; grid-row: auto; margin-top: 16px !important; }
}
.hp-cta-primary {
  color: var(--clr-on-primary) !important;
  background: var(--clr-primary) !important;
  border-radius: 12px;
}

/* Pricing & subscription comparison surfaces */
.support-plan,.cl-plan,.ws-plan,.plan-card {
  position: relative;
  background: var(--clr-bg-card) !important;
  border: 1px solid var(--clr-border-bright) !important;
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}
.support-plan-featured,.cl-plan-pro,.ws-plan-featured,.plan-card-featured {
  background: linear-gradient(155deg, var(--clr-cyan-glow), var(--clr-bg-card) 62%) !important;
  border-color: var(--nr-accent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--nr-accent) 30%, transparent), var(--shadow-md);
}
.support-plan-name,.cl-plan-name,.ws-plan-name,.plan-card h3 { color: var(--clr-text-primary); }
.support-plan-price,.plan-price strong,.plan-price-amount { color: var(--clr-text-primary) !important; }
.support-plan-badge,.ws-plan-badge,.cl-badge-hot,.plan-badge {
  color: var(--clr-cyan) !important;
  background: var(--clr-cyan-glow) !important;
  border: 1px solid var(--clr-border-bright) !important;
}
.cl-compare-table { border-color: var(--clr-border) !important; }
.cl-compare-head,.cl-compare-row { border-color: var(--clr-border) !important; }
.cl-compare-label,.cl-compare-bad-val,.cl-compare-good-val { color: var(--clr-text-secondary); }
.billing-toggle {
  background: var(--clr-bg-card) !important;
  border: 1px solid var(--clr-border-bright) !important;
  box-shadow: var(--shadow-sm);
}
.billing-opt { color: var(--clr-text-secondary); }
.billing-opt.is-active {
  color: var(--clr-on-primary) !important;
  background: var(--clr-primary) !important;
  box-shadow: none !important;
}
.billing-save { color: var(--nr-accent) !important; background: color-mix(in srgb, var(--nr-accent) 15%, transparent) !important; }
.billing-opt.is-active .billing-save { color: var(--clr-on-primary) !important; }
.plan-price { border-color: var(--clr-border) !important; }
.plan-annual-hint { color: var(--nr-accent); }

/* Forms and every signup state: plan index, register, verify, completion */
.signup-card-light,
form[action*="VerifySubmit"],
form[action*="RegisterSubmit"],
.success-card {
  color: var(--clr-text-primary);
  background: var(--clr-bg-card) !important;
  border: 1px solid var(--clr-border) !important;
  border-top: 3px solid var(--nr-accent) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-md) !important;
}
.signup-card-light .form-group,
form[action*="VerifySubmit"] .form-group,
form[action*="RegisterSubmit"] .form-group { min-width: 0; }
.signup-card-light .form-row,
form[action*="VerifySubmit"] .form-row,
form[action*="RegisterSubmit"] .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.signup-card-light .form-label,
form[action*="VerifySubmit"] .form-label,
form[action*="RegisterSubmit"] .form-label {
  color: var(--clr-text-primary) !important;
  font-weight: 700;
}
.signup-card-light .form-control,
form[action*="VerifySubmit"] .form-control,
form[action*="RegisterSubmit"] .form-control {
  color: var(--clr-text-primary) !important;
  background: var(--clr-bg-base) !important;
  border: 1px solid var(--clr-border-bright) !important;
  border-radius: 11px !important;
  min-height: 46px;
  box-shadow: none;
}
.signup-card-light .form-control::placeholder,
form[action*="VerifySubmit"] .form-control::placeholder,
form[action*="RegisterSubmit"] .form-control::placeholder { color: var(--clr-text-muted); opacity: .8; }
.signup-card-light .form-control:focus,
form[action*="VerifySubmit"] .form-control:focus,
form[action*="RegisterSubmit"] .form-control:focus {
  border-color: var(--clr-cyan) !important;
  box-shadow: 0 0 0 3px var(--clr-cyan-glow) !important;
  outline: none;
}
 .signup-card-light select.form-control option,
form[action*="VerifySubmit"] select.form-control option,
form[action*="RegisterSubmit"] select.form-control option { color: var(--clr-text-primary); background: var(--clr-bg-card); }
.signup-card-light .form-error,
form[action*="VerifySubmit"] .form-error,
form[action*="RegisterSubmit"] .form-error { color: var(--clr-danger) !important; }
.signup-card-light .text-success,
form[action*="VerifySubmit"] .text-success,
form[action*="RegisterSubmit"] .text-success { color: var(--clr-green) !important; }
.signup-card-light .text-danger,
form[action*="VerifySubmit"] .text-danger,
form[action*="RegisterSubmit"] .text-danger { color: var(--clr-danger) !important; }
.signup-card-light .form-help,
form[action*="VerifySubmit"] .form-help,
form[action*="RegisterSubmit"] .form-help { color: var(--clr-text-muted); }
.selected-plan-banner,.code-preview,.auto-code-help,.consent-group {
  color: var(--clr-text-secondary);
  background: var(--clr-bg-base) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: 14px;
}
.selected-plan-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem 1rem;
}
.spb-label,.preview-label { color: var(--clr-text-muted); }
.spb-name,.preview-url { color: var(--clr-text-primary); }
.optional-badge {
  color: var(--nr-accent);
  background: color-mix(in srgb, var(--nr-accent) 15%, transparent);
  border-radius: 999px;
}
.dial-input-row { display: flex; gap: .5rem; }
.dial-code-select { flex: 0 0 125px; }
.phone-digits { flex: 1; }
.consent-label { color: var(--clr-text-secondary); }
.consent-label input { accent-color: var(--clr-cyan); }
.code-input {
  text-align: center;
  letter-spacing: .42em;
  font-variant-numeric: tabular-nums;
}
.section .alert-error {
  color: var(--clr-danger) !important;
  background: color-mix(in srgb, var(--clr-danger) 9%, var(--clr-bg-card)) !important;
  border: 1px solid color-mix(in srgb, var(--clr-danger) 28%, var(--clr-border)) !important;
  border-radius: 12px;
  padding: .85rem 1rem;
}
.section .alert-info {
  color: var(--clr-cyan) !important;
  background: var(--clr-cyan-glow) !important;
  border: 1px solid var(--clr-border-bright) !important;
  border-radius: 12px;
}
/* Attribute routes render /signup/verify, not the MVC action name. */
.native-page-Signup form:has(.code-input) {
  background: var(--clr-bg-card) !important;
  border: 1px solid var(--clr-border-bright);
  border-top: 3px solid var(--nr-accent);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
}
.native-page-Signup .code-input {
  background: var(--clr-bg-base) !important;
  color: var(--clr-text-primary) !important;
  border-color: var(--clr-border-bright) !important;
}
.native-page-Signup form:has(.code-input) .btn-primary {
  background: var(--clr-primary) !important;
  color: var(--clr-on-primary) !important;
}
.native-page-Home > main > main.container,
.native-page-News > main > .hp-section:first-child {
  padding-top: calc(var(--nav-height) + 3rem) !important;
}
.success-check,.success-circle,.success-tick { color: var(--clr-green) !important; }
.success-headline,.success-company,.welcome-copy,.tagline { color: var(--clr-text-primary); }
.warning-row {
  color: var(--nr-accent) !important;
  background: color-mix(in srgb, var(--nr-accent) 11%, var(--clr-bg-card)) !important;
  border-color: color-mix(in srgb, var(--nr-accent) 28%, var(--clr-border)) !important;
}
.warning-row-text,.spam-note { color: var(--clr-text-secondary); }
.signup-card-light .btn-primary,
form[action*="VerifySubmit"] .btn-primary,
form[action*="RegisterSubmit"] .btn-primary,
.plan-card .btn-primary,.success-cta {
  color: var(--clr-on-primary) !important;
  background: var(--clr-primary) !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-sm) !important;
}
.signup-card-light .btn-primary:hover,
form[action*="VerifySubmit"] .btn-primary:hover,
form[action*="RegisterSubmit"] .btn-primary:hover,
.plan-card .btn-primary:hover,.success-cta:hover { background: var(--clr-primary-hover) !important; box-shadow: var(--shadow-md) !important; }
.signup-card-light .btn-outline,
form[action*="VerifySubmit"] .btn-outline,
form[action*="RegisterSubmit"] .btn-outline { color: var(--clr-text-primary); border-color: var(--clr-border-bright); }
.signup-card-light .btn-outline:hover,
form[action*="VerifySubmit"] .btn-outline:hover,
form[action*="RegisterSubmit"] .btn-outline:hover { color: var(--clr-cyan); border-color: var(--clr-cyan); background: var(--clr-cyan-glow); }
form[action*="VerifySubmit"] .btn-link,.signup-card-light .btn-text,
.success-card .btn-text-secondary { color: var(--clr-cyan) !important; }

/* News, published text pages, and articles */
.hp-section-title { color: var(--clr-text-primary); font-weight: 850; letter-spacing: -.03em; }
.hp-section-sub { color: var(--clr-text-secondary); }
.hp-news-card { color: var(--clr-text-primary); background: var(--clr-bg-card) !important; border-color: var(--clr-border) !important; }
.article-body { color: var(--clr-text-secondary) !important; }
.article-body h1,.article-body h2,.article-body h3,.article-body h4 { color: var(--clr-text-primary); margin-block: 1.5rem .65rem; }
.article-body p,.article-body li { line-height: 1.9; }
.article-body a { color: var(--clr-cyan); text-decoration: underline; text-underline-offset: .18em; }
.article-body img { border-radius: 14px; }
.article-body blockquote {
  margin: 1.5rem 0;
  padding: .85rem 1.2rem;
  border-inline-start: 3px solid var(--nr-accent);
  color: var(--clr-text-primary);
  background: var(--clr-bg-card);
  border-radius: 0 12px 12px 0;
}

/* Respect pre-existing form validation/display behavior and reduce motion. */
@media (max-width: 767px) {
  .page-hero { padding-block: calc(var(--nav-height) + 1.75rem) 2rem; }
  .ai-hero-inner,.at-hero-inner,.crm-hero-inner,.erp-hero-inner,
  .ec-hero-inner,.mk-hero-inner,.mb-hero-inner,.ws-hero-inner,.tr-hero-inner {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .ai-hero-visual,.at-hero-visual,.crm-hero-visual,.erp-hero-visual,
  .ec-hero-visual,.mk-hero-visual,.mb-hero-visual,.ws-hero-visual,.tr-hero-visual {
    width: 100%;
  }
  .ai-h1,.at-h1,.crm-h1,.erp-h1,.ec-h1,.mk-h1,.mb-h1,.ws-h1,.tr-h1 {
    font-size: var(--fs-h1);
  }
  .signup-card-light .form-row,
  form[action*="VerifySubmit"] .form-row,
  form[action*="RegisterSubmit"] .form-row { grid-template-columns: minmax(0, 1fr); }
  .selected-plan-banner { align-items: flex-start; flex-direction: column; }
  .dial-input-row { flex-wrap: wrap; }
  .dial-code-select { flex: 1 1 110px; }
  .phone-digits { flex: 2 1 160px; }
  .support-plan,.cl-plan,.ws-plan,.plan-card { min-width: 0; }
  .ai-hero .hp-btn-main,.at-hero .hp-btn-main,.crm-hero .hp-btn-main,
  .cl-hero .hp-btn-main,.erp-hero .hp-btn-main,.ec-hero .hp-btn-main,
  .mk-hero .hp-btn-main,.mb-hero .hp-btn-main,.ws-hero .hp-btn-main,
  .tr-hero .hp-btn-main { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-case-card,.at-case-card,.crm-card,.erp-card,.ec-card,.mb-card,
  .ws-card,.cl-svc-card,.mk-channel-card,.mk-tool,.mk-step,.srv-overview-card,
  .tr-track,.tr-outcome,.tr-step,.tr-del-card,.sector-insight-card,.support-plan,.section .card {
    transition: none !important;
  }
}

/* Explicit card grids: inline-style auto-fit/auto-fill grids in Views are
   normalised here (3 / 2 / 1 columns, 24px gap). Stat-style grids (minmax<=200px)
   are left to their own rules. */
[style*="repeat(auto-fit,minmax(260px"],[style*="repeat(auto-fit,minmax(280px"],
[style*="repeat(auto-fit,minmax(300px"],[style*="repeat(auto-fit,minmax(320px"],
[style*="repeat(auto-fill,minmax(320px"],[style*="repeat(auto-fill,minmax(340px"] {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}
@media (max-width: 1024px) {
  [style*="repeat(auto-fit,minmax(260px"],[style*="repeat(auto-fit,minmax(280px"],
  [style*="repeat(auto-fit,minmax(300px"],[style*="repeat(auto-fit,minmax(320px"],
  [style*="repeat(auto-fill,minmax(320px"],[style*="repeat(auto-fill,minmax(340px"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  [style*="repeat(auto-fit,minmax(260px"],[style*="repeat(auto-fit,minmax(280px"],
  [style*="repeat(auto-fit,minmax(300px"],[style*="repeat(auto-fit,minmax(320px"],
  [style*="repeat(auto-fill,minmax(320px"],[style*="repeat(auto-fill,minmax(340px"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}