/* Shared animated SVG icon styles.
   Apply class .ai-anim to any icon container; put inline <svg> with .ico-stroke / .ico-pop / .ico-fill children.
   3-second cycle: ~1s draw + ~2s pause, infinite loop. Stagger via .ico-d1..d4 / .ico-pd1..pd3. */
.ai-anim {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px !important;
  height: 56px !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  flex-shrink: 0;
}
.ai-anim svg {
  width: 100% !important; height: 100% !important;
  overflow: visible;
  animation: none !important;
  transform: none !important;
}
.ai-anim svg .ico-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100 !important;
  stroke-dashoffset: 100;
  animation: ai-anim-draw 3s cubic-bezier(.65,0,.35,1) infinite !important;
}
.ai-anim svg .ico-d1 { animation-delay: .15s !important; }
.ai-anim svg .ico-d2 { animation-delay: .30s !important; }
.ai-anim svg .ico-d3 { animation-delay: .45s !important; }
.ai-anim svg .ico-d4 { animation-delay: .60s !important; }
.ai-anim svg .ico-pop {
  fill: currentColor;
  stroke: none;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
  animation: ai-anim-pop 3s ease-out infinite !important;
  stroke-dasharray: none !important;
}
.ai-anim svg .ico-pd1 { animation-delay: .12s !important; }
.ai-anim svg .ico-pd2 { animation-delay: .24s !important; }
.ai-anim svg .ico-pd3 { animation-delay: .36s !important; }
.ai-anim svg .ico-fill {
  fill: currentColor;
  stroke: none;
  stroke-dasharray: none !important;
  animation: none !important;
}
@keyframes ai-anim-draw {
  0%   { stroke-dashoffset: 100; }
  33%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes ai-anim-pop {
  0%, 28% { opacity: 0; transform: scale(.3); }
  36%     { opacity: 1; transform: scale(1.25); }
  44%     { opacity: 1; transform: scale(1); }
  100%    { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-anim svg .ico-stroke,
  .ai-anim svg .ico-pop {
    animation: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Index "Who we build for" section animated card icons (legacy class)
   Extracted from per-page inline <style> blocks for cache reuse.
   ───────────────────────────────────────────────────────────────────── */
.who-for-icon--anim { width: 56px; height: 56px; padding: 8px; }
.who-for-icon--anim svg {
  width: 100% !important; height: 100% !important;
  overflow: visible;
  animation: none !important;
  transform: none !important;
}
.who-for-icon--anim svg .ico-stroke {
  fill: none;
  stroke: #3CEAC7;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100 !important;
  stroke-dashoffset: 100;
  animation: who-anim-draw 3s cubic-bezier(.65,0,.35,1) infinite !important;
}
.who-for-icon--anim svg .ico-d1 { animation-delay: .18s !important; }
.who-for-icon--anim svg .ico-d2 { animation-delay: .36s !important; }
.who-for-icon--anim svg .ico-pd1 { animation-delay: .12s !important; }
.who-for-icon--anim svg .ico-pd2 { animation-delay: .24s !important; }
.who-for-icon--anim svg .ico-fill {
  fill: #3CEAC7;
  stroke: none;
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  animation: none !important;
}
.who-for-icon--anim svg .ico-flame {
  fill: #3CEAC7;
  stroke: none;
  transform-box: fill-box;
  transform-origin: 50% 0%;
  opacity: 0;
  animation: who-anim-flame 3s ease-out infinite !important;
  stroke-dasharray: none !important;
}
.who-for-icon--anim svg .ico-pop {
  fill: #3CEAC7;
  stroke: none;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
  animation: who-anim-pop 3s ease-out infinite !important;
  stroke-dasharray: none !important;
}
@keyframes who-anim-draw {
  0%   { stroke-dashoffset: 100; }
  33%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes who-anim-flame {
  0%, 18% { opacity: 0; transform: scaleY(.4); }
  28%     { opacity: 1; transform: scaleY(1.15); }
  36%     { opacity: 1; transform: scaleY(.95); }
  100%    { opacity: 1; transform: scaleY(1); }
}
@keyframes who-anim-pop {
  0%, 25% { opacity: 0; transform: scale(.3); }
  34%     { opacity: 1; transform: scale(1.25); }
  42%     { opacity: 1; transform: scale(1); }
  100%    { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .who-for-icon--anim svg .ico-stroke,
  .who-for-icon--anim svg .ico-flame,
  .who-for-icon--anim svg .ico-pop {
    animation: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Brand consistency overrides
   ───────────────────────────────────────────────────────────────────── */

/* Header — stay the same height when scrolled (no shrink) */
.nav.scrolled .nav-inner { height: 72px !important; }
.nav, .nav.scrolled { transition: background 0.25s ease, box-shadow 0.25s ease; }

/* non-technical-founders.html — repair the journey-map connector lines.
   The minified rule in app.min.css has invalid calc() (no spaces around +),
   so left/right fall back to auto and the lines never render. */
.ntf-journey-line {
  left: calc(50% + 8px) !important;
  right: calc(-50% + 8px) !important;
}
/* Hide the trailing line on the last journey step (it has no successor). */
.ntf-journey-step:last-child .ntf-journey-line { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────
   Button states — brand-consistent across every page
   ───────────────────────────────────────────────────────────────────── */

/* Primary brand button — applies to .btn-primary AND every page-prefixed clone */
.btn-primary,
.mob-btn-primary,
.saas-btn-primary,
.mvp-btn-primary,
.ux-btn-primary,
.arc-btn-primary,
.mob-diag-cta,
.contact-path-btn {
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  border: 0;
  cursor: pointer;
}
.btn-primary:hover,
.mob-btn-primary:hover,
.saas-btn-primary:hover,
.mvp-btn-primary:hover,
.ux-btn-primary:hover,
.arc-btn-primary:hover,
.mob-diag-cta:hover {
  background: var(--teal-bright, #3CEAC7) !important;
  color: var(--dark, #001A15) !important;
  transform: translateY(-2px);
}
.btn-primary:active,
.mob-btn-primary:active,
.saas-btn-primary:active,
.mvp-btn-primary:active,
.ux-btn-primary:active,
.arc-btn-primary:active,
.mob-diag-cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 133, 125, 0.20);
}

/* Accessible focus outline — visible only for keyboard users */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-ghost-dark:focus-visible,
.btn-teal:focus-visible,
.nav-cta:focus-visible,
.contact-choice-btn:focus-visible,
.mob-btn-primary:focus-visible,
.mob-btn-ghost:focus-visible,
.mob-diag-cta:focus-visible,
.mob-diag-option:focus-visible,
.mob-diag-reset:focus-visible,
.contact-path-btn:focus-visible {
  outline: 3px solid var(--teal-bright, #3CEAC7);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* Disabled state — applies wherever a btn is disabled (form submits, etc.) */
.btn[disabled],
.btn-primary[disabled],
button[disabled].btn,
button[disabled].btn-primary,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(15%);
}

/* 404 page — remove the conflicting cream-on-hover override so it matches site */
.nf-root .btn-primary:hover {
  background: var(--teal-bright, #3CEAC7) !important;
  color: var(--dark, #001A15) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   Page breadcrumb component
   ───────────────────────────────────────────────────────────────────── */
.page-breadcrumb {
  font-family: 'DM Mono', monospace;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(245, 244, 238, 0.55);
  padding: .9rem 1.25rem 0;
  max-width: 1320px;
  margin: 0 auto;
}
.page-breadcrumb a {
  color: rgba(245, 244, 238, 0.85);
  text-decoration: none;
  transition: color .2s ease;
}
.page-breadcrumb a:hover { color: var(--teal-bright, #3CEAC7); text-decoration: underline; }
.page-breadcrumb .sep { color: rgba(245, 244, 238, 0.35); margin: 0 .35em; }
.page-breadcrumb .current { color: var(--teal-bright, #3CEAC7); }
/* Light theme variant when on cream backgrounds */
body .page-breadcrumb.bc-light,
.cream .page-breadcrumb,
.cream-soft .page-breadcrumb { color: rgba(24, 15, 6, 0.55); }
.cream .page-breadcrumb a,
.cream-soft .page-breadcrumb a { color: rgba(24, 15, 6, 0.85); }
@media (max-width: 640px) {
  .page-breadcrumb { font-size: .7rem; padding: .75rem 1rem 0; }
}

/* ─────────────────────────────────────────────────────────────────────
   privacy-terms TOC mobile fallback (U13)
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .pt-toc-side { position: static !important; max-height: none !important; width: auto !important; padding: 1rem !important; margin: 0 0 1.5rem !important; border-radius: 13px; }
  .pt-toc-side ul { columns: 1; }
  .pt-toc-side details { display: block; }
  .pt-toc-side summary { font-weight: 700; cursor: pointer; }
}

/* ─────────────────────────────────────────────────────────────────────
   Reveal-on-scroll gating — kill on mobile, kill on slow connections,
   kill if user prefers reduced motion. Reduces motion fatigue (I6).
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reveal.vis, .stagger > *.vis { opacity: 1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > *, .reveal.vis { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   Touch target floor — every clickable on mobile is at least 44x44 (X12)
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .btn, .btn-primary, .btn-ghost, .btn-ghost-dark, .btn-teal, .nav-cta,
  .contact-choice-btn, .price-calc-toggle-btn, .nf-suggestion-chip,
  .mob-btn-primary, .mob-btn-ghost, .mob-diag-cta, .mob-diag-option,
  .nf-btn-back {
    min-height: 44px;
    padding-top: max(12px, .8em);
    padding-bottom: max(12px, .8em);
  }
  .nav-toggle, .close-btn { min-width: 44px; min-height: 44px; }
}

/* ═════════════════════════════════════════════════════════════════════
   HEADING FAMILY/WEIGHT NORMALISATION
   Only the brand-critical typography (font family + base weight) is
   forced site-wide. Page-specific hero classes keep their hand-tuned
   font-sizes, letter-spacing, line-height, and margins so hero layouts
   stay intact.
   ═════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4 {
  font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
}
h5 {
  font-family: 'DM Sans', sans-serif;
}
h6 {
  font-family: 'DM Mono', ui-monospace, monospace;
}

h1 em, h2 em {
  font-style: italic;
  color: var(--teal-bright, #3CEAC7);
}

/* Page-specific hero heading colors are defined in app.min.css and per-page
   CSS files. We don't override colors here; the page styles win. */

/* ═════════════════════════════════════════════════════════════════════
   /Canonical heading scale
   ═════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   ux-ui.html — mock comparison bars (Standard Dev vs Empyreal Dev)
   The CSS for the size/shape modifier classes was never written; bars
   were rendering as 0px empty divs. This block defines them.
   ───────────────────────────────────────────────────────────────────── */

.ux-proof-vis-mock {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ux-vis-bar {
  background: rgba(24,15,6,0.18);
  border-radius: 4px;
  display: block;
  flex-shrink: 0;
}
.ux-vis-row {
  display: flex;
  gap: 10px;
  margin: 4px 0;
  flex-shrink: 0;
}

/* "Bad" version — misaligned, irregular widths, off-spec heights */
.ux-vis-h14-85 { height: 16px; width: 85%; margin-left: 6px; }
.ux-vis-h14-60 { height: 13px; width: 58%; margin-left: 14px; }
.ux-vis-h80    { height: 70px; width: 100%; margin-top: 6px; background: rgba(24,15,6,0.10); }
.ux-vis-btn-l  { height: 36px; width: 110px; background: rgba(24,15,6,0.30); border-radius: 6px; }
.ux-vis-btn-r  { height: 32px; width: 90px;  background: rgba(24,15,6,0.20); border-radius: 4px; margin-top: 4px; }
.ux-vis-ln-70  { height: 8px;  width: 72%;  margin-left: 8px; }
.ux-vis-ln-50  { height: 8px;  width: 47%;  margin-left: 18px; }

/* "Good" version (-t suffix) — pixel-precise, aligned, consistent */
.ux-vis-h14-85-t { height: 14px; width: 85%; }
.ux-vis-h14-60-t { height: 14px; width: 60%; }
.ux-vis-h80-t    { height: 80px; width: 100%; margin-top: 4px; background: rgba(0,133,125,0.08); }
.ux-vis-btn-l-t  { height: 36px; width: 110px; background: var(--teal, #00857D); border-radius: 6px; }
.ux-vis-btn-r-t  { height: 36px; width: 110px; background: rgba(0,133,125,0.18); border-radius: 6px; }
.ux-vis-ln-70-t  { height: 8px;  width: 70%; }
.ux-vis-ln-50-t  { height: 8px;  width: 50%; }

/* Tint the good bars subtly teal */
.ux-proof-vis-mock--good .ux-vis-bar { background: rgba(0,133,125,0.20); }

/* ─────────────────────────────────────────────────────────────────────
   --nav-h variable for resources/post.html sticky TOC.
   The v1 blog assumed a 68 px nav; the v2 nav is 72 px.
   ───────────────────────────────────────────────────────────────────── */
:root { --nav-h: 72px; }

/* TOC font / typography consistency */
.toc, .toc-list, .toc-item {
  font-family: 'DM Sans', sans-serif !important;
}
.toc-header {
  font-family: 'DM Mono', ui-monospace, monospace !important;
}
/* Make sure TOC actually has somewhere to stick — its parent must allow overflow */
.article-layout, .post-layout {
  align-items: start;
}

/* ─────────────────────────────────────────────────────────────────────
   GLOBAL SMOOTHNESS — minimal, non-interfering
   (Page-load progress bar and body fade-in were removed; they conflicted
   with reveal-on-scroll animations and felt jerky.)
   ───────────────────────────────────────────────────────────────────── */

/* Sticky-header offset for anchor links — prevents content tucking under nav */
:target { scroll-margin-top: 90px; }
section[id]:target { scroll-margin-top: 100px; }

/* Subtle FAQ accordion fade — 200ms opacity-only (no transform, no slide) */
.page-faq details[open] > .pf-a,
.faq details[open] > .faq-a {
  animation: emp-faq-fade 0.2s ease;
}
@keyframes emp-faq-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .page-faq details[open] > .pf-a,
  .faq details[open] > .faq-a { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   Form-submit loading state (I5) — used by contact.js / mobile-apps.js
   ───────────────────────────────────────────────────────────────────── */
.btn.is-loading,
.btn-primary.is-loading,
.mob-btn-primary.is-loading,
.mob-diag-cta.is-loading,
button.is-loading {
  pointer-events: none;
  opacity: 0.85;
  position: relative;
}
.btn.is-loading::after,
button.is-loading::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: .6em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: emp-btn-spin .65s linear infinite;
  vertical-align: -2px;
}
@keyframes emp-btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::after, button.is-loading::after { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   Before / After belief component — site-wide normalization
   Stacked, no arrow, uniform typography across both markup styles.
   ───────────────────────────────────────────────────────────────────── */

/* Markup A (mvp / saas / mob / ux / arc): parent + 3 spans (before, arr, after) */
.mvp-belief, .saas-belief, .mob-belief, .ux-belief, .arc-belief {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.4rem !important;
  flex-wrap: nowrap !important;
  padding: 18px 24px !important;
  border: none !important;
  border-left: 3px solid var(--teal) !important;
  border-radius: var(--r-md) !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
  margin-top: 40px !important;
}
.mvp-belief--dark, .saas-belief--dark, .mob-belief--dark,
.ux-belief--dark, .arc-belief--dark {
  background: var(--dark-card) !important;
  color: rgba(246,246,242,0.75) !important;
}
.mvp-belief--cream, .saas-belief--cream, .mob-belief--cream,
.ux-belief--cream, .arc-belief--cream {
  background: #fff !important;
  color: #4a5a53 !important;
}
.mvp-belief strong, .saas-belief strong, .mob-belief strong,
.ux-belief strong, .arc-belief strong {
  color: inherit !important;
  font-weight: 700 !important;
}
.mvp-belief-arr, .saas-belief-arr, .mob-belief-arr,
.ux-belief-arr, .arc-belief-arr {
  display: none !important;
}

/* Markup B (aii / aia / aicb / aiat / ais / proc): -before, -val, -arrow, -after, -val--after */
/* 2-col grid: label fixed, value flexes. Uniform color, no arrow, mvp-belief-style container. */
.aii-belief, .aia-belief, .aicb-belief, .aiat-belief, .ais-belief, .proc-belief {
  display: grid !important;
  grid-template-columns: max-content 1fr !important;
  column-gap: 0.85rem !important;
  row-gap: 0.4rem !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
  padding: 18px 24px !important;
  border-radius: var(--r-md) !important;
  background: var(--dark-card) !important;
  border-left: 3px solid var(--teal) !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
  margin-top: 40px !important;
  color: rgba(246,246,242,0.75) !important;
}
.aii-belief--cream, .aia-belief--cream, .aicb-belief--cream,
.aiat-belief--cream, .ais-belief--cream, .proc-belief--cream {
  background: #fff !important;
  border-left: 3px solid var(--teal) !important;
  color: #4a5a53 !important;
}

/* Grid placement */
.aii-belief-before, .aia-belief-before, .aicb-belief-before,
.aiat-belief-before, .ais-belief-before, .proc-belief-before {grid-row: 1; grid-column: 1}

.aii-belief-val:not(.aii-belief-val--after),
.aia-belief-val:not(.aia-belief-val--after),
.aicb-belief-val:not(.aicb-belief-val--after),
.aiat-belief-val:not(.aiat-belief-val--after),
.ais-belief-val:not(.ais-belief-val--after) {grid-row: 1; grid-column: 2}

.aii-belief-after, .aia-belief-after, .aicb-belief-after,
.aiat-belief-after, .ais-belief-after, .proc-belief-after {grid-row: 2; grid-column: 1}

.aii-belief-val--after, .aia-belief-val--after, .aicb-belief-val--after,
.aiat-belief-val--after, .ais-belief-val--after {grid-row: 2; grid-column: 2}

.aii-belief-arrow, .aia-belief-arrow, .aicb-belief-arrow,
.aiat-belief-arrow, .ais-belief-arrow, .proc-belief-arrow {
  display: none !important;
}

/* Uniform typography — labels + values inherit color, no uppercase, no letter-spacing */
.aii-belief-before, .aii-belief-after, .aii-belief-val, .aii-belief-val--after,
.aia-belief-before, .aia-belief-after, .aia-belief-val, .aia-belief-val--after,
.aicb-belief-before, .aicb-belief-after, .aicb-belief-val, .aicb-belief-val--after,
.aiat-belief-before, .aiat-belief-after, .aiat-belief-val, .aiat-belief-val--after,
.ais-belief-before, .ais-belief-after, .ais-belief-val, .ais-belief-val--after,
.proc-belief-before, .proc-belief-after, .proc-belief-text {
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: inherit !important;
  margin: 0 !important;
  flex-basis: auto !important;
}
.aii-belief-before, .aia-belief-before, .aicb-belief-before, .aiat-belief-before,
.ais-belief-before, .proc-belief-before,
.aii-belief-after, .aia-belief-after, .aicb-belief-after, .aiat-belief-after,
.ais-belief-after, .proc-belief-after {
  font-weight: 700 !important;
  white-space: nowrap;
}
.aii-belief-val, .aia-belief-val, .aicb-belief-val, .aiat-belief-val,
.ais-belief-val, .proc-belief-text,
.aii-belief-val--after, .aia-belief-val--after, .aicb-belief-val--after,
.aiat-belief-val--after, .ais-belief-val--after {
  font-weight: 400 !important;
}

/* ───────────────────────────────────────────────────────────
   Popup / dialog button arrow alignment + hover animation
   Targets: EmailModal submit, diagnostic CTAs, scorecard CTAs,
   any popup with inline arrow SVG.
   ─────────────────────────────────────────────────────────── */

/* EmailModal submit — span wraps label + arrow svg */
.eml-submit{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}
.eml-submit > span,
.eml-submit [data-eml-submit-label]{
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  line-height: 1 !important;
}
.eml-submit .arrow-icon{
  width: 16px !important;
  height: 16px !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

/* Popup / diagnostic / scorecard CTA arrow alignment */
.eml-submit,
.saas-ahc-btn,
.mvp-sc-btn,
.mob-diag-cta,
.mob-diag-reset{
  align-items: center !important;
}
.saas-ahc-btn .arrow-icon,
.mvp-sc-btn .arrow-icon,
.mob-diag-cta .arrow-icon,
.eml-submit .arrow-icon{
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* Hover arrow animation — bind keyframes to popup CTA classes */
.eml-submit:hover .arrow-shaft,
.saas-ahc-btn:hover .arrow-shaft,
.mvp-sc-btn:hover .arrow-shaft,
.mob-diag-cta:hover .arrow-shaft{
  animation: arrowShaft 0.6s ease forwards;
}
.eml-submit:hover .arrow-head,
.saas-ahc-btn:hover .arrow-head,
.mvp-sc-btn:hover .arrow-head,
.mob-diag-cta:hover .arrow-head{
  animation: arrowHead 0.6s 0.12s ease forwards;
}

/* ─────────────────────────────────────────────────────────────────────
   Site-wide icon container normalization — 52×52 desktop, 42×42 mobile.
   Applies to every card-icon / chip / pill / badge container across ALL
   pages (industry, service, rescue, migration, hub, marketing). Uses
   !important so page-specific !important rules in app.min.css don't
   silently override it. Inner SVG glyphs (16-24px) are not touched.

   Attribute-suffix selectors catch any class ending in one of the
   container suffixes — covers the full enumerated list below plus any
   future page that follows the same naming convention. Inline glyph
   classes (arrow-icon, check-icon, faq-chevron-icon, *-toggle-icon,
   *-analyzer-icon, *-audit-icon, *-proof-icon, *-risk-icon, sol-icon,
   work-testimonial-icon, price-faq-icon) are explicitly excluded so
   their natural 12-24px sizes are preserved.
   ───────────────────────────────────────────────────────────────────── */
[class*="-card-icon"]:not([class*="toggle"]):not([class*="proof"]):not([class*="risk"]),
[class*="-feat-icon"],
[class*="-feature-icon"],
[class*="-pillar-icon"],
[class*="-path-icon"],
[class*="-step-icon"],
[class*="-stack-icon"],
[class*="-meta-icon"],
[class*="-cap-icon"],
[class*="-fear-icon"],
[class*="-model-icon"],
[class*="-scale-icon"],
[class*="-sent-icon"],
[class*="-build-chip"],
[class*="-icon-chip"],
[class*="for-icon"] {
  width: 52px !important;
  height: 52px !important;
}
@media (max-width: 768px) {
  [class*="-card-icon"]:not([class*="toggle"]):not([class*="proof"]):not([class*="risk"]),
  [class*="-feat-icon"],
  [class*="-feature-icon"],
  [class*="-pillar-icon"],
  [class*="-path-icon"],
  [class*="-step-icon"],
  [class*="-stack-icon"],
  [class*="-meta-icon"],
  [class*="-cap-icon"],
  [class*="-fear-icon"],
  [class*="-model-icon"],
  [class*="-scale-icon"],
  [class*="-sent-icon"],
  [class*="-build-chip"],
  [class*="-icon-chip"],
  [class*="for-icon"] {
    width: 42px !important;
    height: 42px !important;
  }
}

.ind-icon-chip,
.lgt-icon-chip,
.svc-icon-chip,
.who-for-icon,
.who-for-icon--anim,
.sol-card-icon,
.sol-wide-card-icon,
.contact-path-icon,
.why-pillar-icon,
.eml-sent-icon,
.bbs-card-icon,
.ais-card-icon,
.ais-scale-card-icon,
.ec-card-icon,
.ec-scale-card-icon,
.edt-card-icon,
.edt-why-card-icon,
.ft-build-chip,
.ft-scale-icon,
.ht-build-chip,
.ht-scale-icon,
.lg-feature-icon,
.lg-build-chip,
.arc-card-icon,
.aia-card-icon,
.aiat-card-icon,
.aicb-card-icon,
.aii-card-icon,
.aipd-card-icon,
.airsc-card-icon,
.api-card-icon,
.aws-card-icon,
.crm-card-icon,
.mob-card-icon,
.mvp-card-icon,
.saas-card-icon,
.svc-card-icon,
.ux-feature-icon,
.cs-meta-icon,
.scu-cap-icon,
.ntf-fear-icon,
.ntf-model-icon,
.smb-pillar-icon,
.startup-phase-icon,
.proc-card-icon,
.about-work-card-icon,
.team-skill-icon,
.gar-card-icon,
.ind-card-icon,
.mob-stack-icon,
.mob-diag-result-icon,
.aia-stat-icon,
.aii-stat-icon,
.aicb-stat-icon,
.aiat-stat-icon,
.airsc-step-icon {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
}
@media (max-width: 768px) {
  .ind-icon-chip,
  .lgt-icon-chip,
  .svc-icon-chip,
  .who-for-icon,
  .who-for-icon--anim,
  .sol-card-icon,
  .sol-wide-card-icon,
  .contact-path-icon,
  .why-pillar-icon,
  .eml-sent-icon,
  .bbs-card-icon,
  .ais-card-icon,
  .ais-scale-card-icon,
  .ec-card-icon,
  .ec-scale-card-icon,
  .edt-card-icon,
  .edt-why-card-icon,
  .ft-build-chip,
  .ft-scale-icon,
  .ht-build-chip,
  .ht-scale-icon,
  .lg-feature-icon,
  .lg-build-chip,
  .arc-card-icon,
  .aia-card-icon,
  .aiat-card-icon,
  .aicb-card-icon,
  .aii-card-icon,
  .aipd-card-icon,
  .airsc-card-icon,
  .api-card-icon,
  .aws-card-icon,
  .crm-card-icon,
  .mob-card-icon,
  .mvp-card-icon,
  .saas-card-icon,
  .svc-card-icon,
  .ux-feature-icon,
  .cs-meta-icon,
  .scu-cap-icon,
  .ntf-fear-icon,
  .ntf-model-icon,
  .smb-pillar-icon,
  .startup-phase-icon,
  .proc-card-icon,
  .about-work-card-icon,
  .team-skill-icon,
  .gar-card-icon,
  .ind-card-icon,
  .mob-stack-icon,
  .mob-diag-result-icon,
  .aia-stat-icon,
  .aii-stat-icon,
  .aicb-stat-icon,
  .aiat-stat-icon,
  .airsc-step-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }
}