/* 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: 2;
  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);
  box-shadow: 0 8px 32px rgba(0, 133, 125, 0.25);
}
.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;
  box-shadow: 0 8px 32px rgba(0, 133, 125, 0.30) !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; }
}