.elementor-kit-8{--e-global-color-primary:#1B3A8C;--e-global-color-secondary:#0F2461;--e-global-color-text:#E8EEFB;--e-global-color-accent:#F39200;--e-global-color-bb9c00f:#FFF2DC;--e-global-color-9fe9cd8:#0F172A;--e-global-color-35a6f8d:#475569;--e-global-color-45b684d:#FFFFFF;--e-global-color-63dfba6:#F8FAFC;--e-global-color-184b8c3:#E2E8F0;--e-global-color-e-gv-069e726:#9A5400;--e-global-typography-primary-font-family:"Manrope";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Manrope";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Manrope";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Manrope";--e-global-typography-accent-font-size:18px;--e-global-typography-accent-font-weight:500;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --brand-primary:#1B3A8C; --brand-primary-dark:#0F2461; --brand-primary-soft:#E8EEFB; --brand-accent:#F39200; --brand-accent-soft:#FFF2DC; --text-primary:#0F172A; --text-secondary:#475569; --surface-white:#FFFFFF; --surface-light:#F8FAFC; --border-default:#E2E8F0; --brand-primary-tint:#F5F8FE; --brand-accent-dark:#D67E00; --text-muted:#64748B; --surface-muted:#F1F5F9; --border-soft:#E8EEF7; --success:#16A34A; --font-brand:Manrope; --font-heading:Manrope; --font-body:Manrope; --font-ui:Manrope; --size-text-xs:13px; --size-text-sm:14px; --size-text-base:16px; --size-text-lg:18px; --size-text-xl:20px; --size-heading-sm:2.5rem; --size-heading-md:clamp(2rem, 2.4vw, 2rem); --size-heading-lg:clamp(2rem, 3.4vw, 2.75rem); --size-display-lg:clamp(2.5rem, 5vw, 3.75ch); --size-display-xl:clamp(3.6rem, 7vw, 6rem); --size-container-wide:1200px; --size-container-content:960px; --size-container-narrow:760px; --size-header-height:112px; --space-2xs:0.25rem; --space-xs:0.5rem; --space-sm:0.75rem; --space-md:1rem; --space-lg:1.5rem; --space-xl:2rem; --space-2xl:3rem; --space-3xl:4rem; --space-4xl:6rem; --section-padding-y:clamp(72px, 8vw, 60px); --container-padding-x:clamp(20px, 4vw, 48px); --header-padding-y:clamp(10px, 1.6vw, 12px); --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:24px; --radius-pill:999px; --size-width-full:100%; --size-fit-content:fit-content; --size-border-default:1px; --space-button-padding:14px; --space-header-cta-y:18px; --space-header-cta-x:44px; --space-header-action-gap:36px; --space-stack-md:20px; --space-card-padding:28px; --space-section-y-static:72px; --radius-card:14px; --letter-spacing-wide:0.12em; --size-container-content-lg:980px; --size-container-narrow-lg:840px; --size-body-lg:18px; --size-body-md:16px; --letter-spacing-eyebrow:0.16em; --letter-spacing-tight:-0.025em; --letter-spacing-display:-0.035em; --size-visual-min-height:420px; --size-hero-min-height:720px; --size-mobile-visual-height:320px; --space-listen-y:6px; --space-listen-x:14px; --size-max-width:1440px; --DUP_font-body:Manrope; --DUP_size-text-sm:14px; --DUP_brand-primary:#1B3A8C; --DUP_radius-pill:999px; --DUP_size-border-default:1px; --DUP_font-ui:Manrope; --DUP_size-text-xs:13px; --DUP_brand-accent:#F39200; --DUP_font-heading:Manrope; --DUP_text-primary:#0F172A; --DUP_size-body-lg:18px; --DUP_size-width-full:100%; --DUP_size-container-narrow-lg:840px; --DUP_space-xl:2rem; --DUP_radius-lg:18px; --DUP_border-default:#E2E8F0; --DUP_surface-white:#FFFFFF; --DUP_brand-primary-soft:#E8EEFB; --DUP_size-container-wide:1200px; --DUP_section-padding-y:clamp(72px, 8vw, 60px); --DUP_font-body1:Manrope; --DUP_size-text-sm1:14px; --DUP_brand-primary1:#1B3A8C; --DUP_radius-pill1:999px; --DUP_size-border-default1:1px; --DUP_font-ui1:Manrope; --DUP_size-text-xs1:13px; --DUP_brand-accent1:#F39200; --DUP_font-heading1:Manrope; --DUP_text-primary1:#0F172A; --DUP_size-body-lg1:18px; --DUP_size-width-full1:100%; --DUP_size-container-narrow-lg1:840px; --DUP_space-xl1:2rem; --DUP_radius-lg1:18px; --DUP_border-default1:#E2E8F0; --DUP_size-container-wide1:1200px; --DUP_section-padding-y1:clamp(72px, 8vw, 60px); --DUP_surface-white1:#FFFFFF; --surface-muted-transparent:#f2f6fa26; --brand-primary-soft-transparent:#e6ecfa1a; --tk-border-xs:0.25px; }
/* Start custom CSS *//* ============================================================
   TRAKAID ATOMIC SECTION SYSTEM V12
   Elementor 4 Atomic + Flexbox-first implementation
   Replace all previous custom CSS with this file.

   Build rules:
   - Elementor UI = structure, content, class names
   - CSS = reusable rhythm, responsive behaviour, safety fixes
   - Section-specific classes = only true section overrides
   - No Grid element required in Elementor UI
   ============================================================ */


/* ============================================================
   1. TOKEN BRIDGE
   Pull Elementor variables into reliable CSS variables.
   Elementor Variables remain the source of truth.
   ============================================================ */

:root {
  --tk-brand-primary: var(--e-global-color-brand-primary, #1B3A8C);
  --tk-brand-primary-dark: var(--e-global-color-brand-primary-dark, #0F2461);
  --tk-brand-primary-soft: var(--e-global-color-brand-primary-soft, #E8EEFB);

  --tk-brand-accent: var(--e-global-color-brand-accent, #F39200);
  --tk-brand-accent-soft: var(--e-global-color-brand-accent-soft, #FFF2DC);

  --tk-text-primary: var(--e-global-color-text-primary, #0F172A);
  --tk-text-secondary: var(--e-global-color-text-secondary, #475569);

  --tk-surface-white: var(--e-global-color-surface-white, #FFFFFF);
  --tk-surface-light: var(--e-global-color-surface-light, #F8FAFC);

  --tk-border-default: var(--e-global-color-border-default, #E2E8F0);
  --tk-border-soft: #EEF2F7;

  --tk-container-wide: var(--e-global-size-size-container-wide, 1200px);
  --tk-header-wide: var(--e-global-size-size-header-wide, 1440px);

  --tk-radius-sm: 10px;
  --tk-radius-md: 14px;
  --tk-radius-lg: 18px;
  --tk-radius-xl: 24px;
  --tk-radius-pill: 999px;

  --tk-shadow-card: 0 18px 50px rgba(15, 36, 97, 0.08);
  --tk-shadow-card-hover: 0 20px 54px rgba(15, 36, 97, 0.12);
  --tk-shadow-hero: 0 24px 80px rgba(0, 0, 0, 0.18);

  --tk-section-y-desktop: 80px;
  --tk-section-y-tablet: 60px;
  --tk-section-y-mobile: 40px;

  --tk-container-x-desktop: clamp(24px, 4vw, 48px);
  --tk-container-x-tablet: 32px;
  --tk-container-x-mobile: 20px;

  --tk-section-gap: clamp(32px, 4vw, 52px);
  --tk-split-gap: clamp(40px, 5vw, 72px);
  --tk-card-gap: 18px;
}


/* Optional modern color refinement.
   Keep subtle. Do not override exact core brand colors. */
@supports (color: oklch(60% 0.1 250)) {
  :root {
    --tk-surface-light: oklch(98.4% 0.007 250);
    --tk-border-default: oklch(91.5% 0.018 255);
  }
}


/* ============================================================
   2. GLOBAL SAFETY
   Prevents overflow from width + padding and flex children.
   Critical for tablet/mobile.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video,
picture {
  max-width: 100%;
  height: auto;
}

img {
  display: block;
}

/* Genesis / WordPress full-width safety */
body.elementor-page #page.site.container,
body.elementor-page #content.site-content {
  max-width: none;
  width: 100%;
}

/* Atomic flex safety */
.e-con,
.e-atomic-element,
.section-base,
.container-wide,
.section-stack,
.section-header,
.hero-inner,
.hero-content,
.hero-visual,
.hidden-cost-inner,
.hidden-cost-layout,
.hidden-cost-visual,
.hidden-cost-stats,
.hidden-cost-stat,
.hidden-cost-advantage,
.split-layout,
.split-content,
.split-visual,
.compare-wrap,
.compare-card,
.erp-truth-inner,
.erp-truth-layout,
.erp-truth-content,
.erp-truth-visual,
.DUP_erp-truth-inner,
.DUP_erp-truth-section,
.DUP_erp-truth-header {
  min-width: 0;
}


/* ============================================================
   3. GLOBAL SECTION SYSTEM
   Only these classes own default page rhythm.
   Do not duplicate this spacing on section-specific classes.
   Desktop: 80px top/bottom
   Tablet: 60px top/bottom
   Mobile: 40px top/bottom
   Mobile horizontal: 20px
   ============================================================ */

.section-base {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: var(--tk-section-y-desktop);
}

.container-wide {
  width: 100%;
  max-width: var(--tk-container-wide);
  margin-inline: auto;
  padding-inline: var(--tk-container-x-desktop);
}

.section-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--tk-section-gap);
  width: 100%;
}

@media (max-width: 1024px) {
  .section-base {
    padding-block: var(--tk-section-y-tablet);
  }

  .container-wide {
    padding-inline: var(--tk-container-x-tablet);
  }
}

@media (max-width: 767px) {
  .section-base {
    padding-block: var(--tk-section-y-mobile);
  }

  .container-wide {
    padding-inline: var(--tk-container-x-mobile);
  }
}


/* ============================================================
   4. SURFACE CLASSES
   Surface classes should only control background/text surface.
   No spacing here.
   ============================================================ */

.section-surface-white {
  background: var(--tk-surface-white);
  color: var(--tk-text-primary);
}

.section-surface-light {
  background: var(--tk-surface-light);
  color: var(--tk-text-primary);
}

.section-surface-dark {
  background:
    radial-gradient(circle at 82% 16%, rgba(243, 146, 0, 0.14), transparent 34%),
    linear-gradient(135deg, var(--tk-brand-primary-dark), var(--tk-brand-primary));
  color: var(--tk-surface-white);
}


/* ============================================================
   5. TYPOGRAPHY + SECTION HEADER
   These are reusable global text classes.
   ============================================================ */

.section-header {
  width: 100%;
  max-width: 840px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.section-header-center {
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

.eyebrow,
.heading-lg,
.body-lg,
.stat-value,
.stat-label,
.compare-label,
.compare-title,
.compare-body {
  margin: 0;
}

.eyebrow {
  color: var(--tk-brand-accent);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.heading-lg {
  color: var(--tk-text-primary);
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.body-lg {
  color: var(--tk-text-secondary);
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.65;
  font-weight: 400;
}

.body-lg strong,
.body-lg b {
  color: var(--tk-text-primary);
  font-weight: 800;
}

.section-surface-dark .heading-lg,
.section-surface-dark .body-lg {
  color: var(--tk-surface-white);
}

.section-surface-dark .body-lg {
  opacity: 0.86;
}

@media (max-width: 767px) {
  .heading-lg {
    font-size: clamp(26px, 8vw, 34px);
  }

  .body-lg {
    font-size: 16px;
    line-height: 1.6;
  }
}


/* ============================================================
   6. CARD SYSTEM
   card-base = surface only.
   Width/layout belongs to pattern or section-specific classes.
   ============================================================ */

.card-base {
  background: var(--tk-surface-white);
  border: 1px solid var(--tk-border-default);
  border-radius: var(--tk-radius-lg);
}

.card-stat,
.card-feature,
.card-default,
.card-soft,
.compare-card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.card-stat:hover,
.card-feature:hover,
.card-default:hover,
.card-soft:hover,
.compare-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--tk-shadow-card-hover);
}


/* ============================================================
   7. BUTTON SYSTEM
   Button classes are global reusable styles.
   ============================================================ */

.button-primary,
.button-accent,
.button-secondary,
.section-listen {
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.button-primary,
.button-accent,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border-radius: var(--tk-radius-pill);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.button-primary {
  background: var(--tk-brand-primary);
  color: var(--tk-surface-white);
  border: 1px solid var(--tk-brand-primary);
}

.button-accent {
  background: var(--tk-brand-accent);
  color: var(--tk-text-primary);
  border: 1px solid var(--tk-brand-accent);
}

.button-secondary {
  background: transparent;
  color: var(--tk-brand-primary);
  border: 1px solid currentColor;
}

.button-primary:hover,
.button-accent:hover,
.button-secondary:hover,
.button-on-dark:hover {
  transform: translateY(-1px);
}

.button-secondary:hover,
.button-on-dark:hover {
  color: var(--tk-brand-accent);
  border-color: var(--tk-brand-accent);
}

@supports (background: color-mix(in oklch, white 50%, black)) {
  .button-primary:hover {
    background: color-mix(in oklch, var(--tk-brand-primary-dark) 84%, var(--tk-brand-accent));
    border-color: color-mix(in oklch, var(--tk-brand-primary-dark) 84%, var(--tk-brand-accent));
  }

  .button-accent:hover {
    background: color-mix(in oklch, var(--tk-brand-accent) 86%, white);
  }
}


/* ============================================================
   8. SECTION LISTEN BUTTON
   Shared section trigger. JS/controller can bind to .section-listen.
   Text should be: Listen to this section
   CSS adds play/stop icon.
   ============================================================ */

.section-listen {
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--tk-radius-pill);
  background: transparent;
  color: var(--tk-brand-primary);
  border: 1px solid var(--tk-brand-primary);
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  cursor: pointer;
  white-space: normal;
}

.section-listen::before {
  content: "▶";
  font-size: 10px;
  line-height: 1;
}

.section-listen:hover {
  color: var(--tk-brand-accent);
  border-color: var(--tk-brand-accent);
  transform: translateY(-1px);
}

.section-listen.is-speaking,
.section-listen[aria-pressed="true"] {
  color: var(--tk-text-primary);
  background: var(--tk-brand-accent-soft);
  border-color: var(--tk-brand-accent);
}

.section-listen.is-speaking::before,
.section-listen[aria-pressed="true"]::before {
  content: "■";
}

/* Small fixed TTS status bar */
.tk-tts-status {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--tk-radius-pill);
  background: var(--tk-brand-primary-dark);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 16px 40px rgba(15, 36, 97, 0.22);
}

.tk-tts-status.is-active {
  display: inline-flex;
}

.tk-tts-stop {
  appearance: none;
  border: 0;
  background: var(--tk-brand-accent);
  color: var(--tk-text-primary);
  border-radius: var(--tk-radius-pill);
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}


/* ============================================================
   9. HEADER HELPERS
   Header has its own width token. Do not reuse container-wide.
   ============================================================ */

.site-header {
  position: relative;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.header-inner {
  max-width: var(--tk-header-wide);
}

.header-logo img {
  max-width: 180px;
  height: auto;
}

.header-menu-toggle {
  width: 48px;
  height: 40px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.header-menu-toggle span {
  display: block;
  width: 48px;
  height: 4px;
  border-radius: var(--tk-radius-pill);
  background: var(--tk-text-primary);
  transition:
    transform 0.2s ease,
    opacity 0.2s ease,
    background-color 0.2s ease;
}

.header-menu-toggle:hover span {
  background: var(--tk-brand-accent);
}

@media (max-width: 767px) {
  .header-logo img {
    max-width: 150px;
  }

  .header-menu-toggle {
    width: 38px;
    height: 34px;
    gap: 6px;
  }

  .header-menu-toggle span {
    width: 38px;
    height: 3px;
  }

  .header-cta {
    display: none !important;
  }
}


/* ============================================================
   10. ELEMENTSKIT NAV HELPERS
   Minimal only. Do not style the full menu system here.
   ============================================================ */

/* Hide unwanted dropdown arrow if Elementskit outputs it */
#ekit-megamenu-trakaid-main-menu .ekit-menu-dropdown-toggle::after {
  display: none !important;
}

/* Keep submenu panel away from mobile panel edges */
@media (max-width: 1024px) {
  #ekit-megamenu-trakaid-main-menu .elementskit-submenu-panel {
    margin-left: 10px !important;
    margin-right: 10px !important;
    width: calc(100% - 20px) !important;
  }
}


/* ============================================================
   11. HERO SECTION
   Keep hero-specific treatments here only.
   ============================================================ */

.hero-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 16%, rgba(243, 146, 0, 0.14), transparent 34%),
    radial-gradient(circle at 10% 78%, rgba(232, 238, 251, 0.10), transparent 28%);
  pointer-events: none;
  z-index: -1;
}

.hero-inner {
  width: 100%;
}

.hero-content,
.hero-visual {
  min-width: 0;
}

.hero-lead b,
.hero-lead strong {
  color: var(--tk-brand-accent);
  font-weight: 800;
}

.hero-visual {
  box-shadow: var(--tk-shadow-hero);
  backdrop-filter: blur(12px);
}

.hero-visual img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 1024px) {
  .hero-inner {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .hero-content,
  .hero-visual {
    width: 100% !important;
    flex-basis: auto !important;
  }
}

@media (max-width: 767px) {
  .display-xl {
    font-size: clamp(34px, 11vw, 44px);
    line-height: 1.08;
  }

  .hero-cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-cta-row .button-primary,
  .hero-cta-row .button-secondary,
  .hero-cta-row .button-accent {
    width: 100%;
  }
}


/* ============================================================
   12. REUSABLE SPLIT LAYOUT PATTERN
   Use for content/media two-column sections.
   This is CSS-driven; no Grid element needed in Elementor UI.
   ============================================================ */

.split-layout {
  display: flex;
  align-items: center;
  gap: var(--tk-split-gap);
  width: 100%;
}

.split-content {
  flex: 1 1 56%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.split-visual {
  flex: 0 1 44%;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--tk-radius-lg);
}

.split-visual img,
.split-visual picture {
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
}

@media (max-width: 1024px) {
  .split-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .split-content,
  .split-visual {
    width: 100%;
    flex-basis: auto;
  }
}

@media (max-width: 767px) {
  .split-layout {
    gap: 28px;
  }
}


/* ============================================================
   13. REUSABLE COMPARE CARD PATTERN
   For Old Way / Trakaid Way cards.
   Preferred structure:
   .split-content
     .compare-wrap
       .card-base.compare-card
       .card-base.compare-card.compare-card-accent
     .button-secondary.erp-read-more
   ============================================================ */

.compare-wrap {
  display: flex;
  gap: var(--tk-card-gap);
  align-items: stretch;
  width: 100%;
}

.compare-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(24px, 2.6vw, 32px);
}

.compare-card-accent {
  background: var(--tk-brand-primary-soft);
  border-color: color-mix(in srgb, var(--tk-brand-primary) 20%, var(--tk-border-default));
}

.compare-label {
  color: var(--tk-brand-accent);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.compare-title {
  color: var(--tk-text-primary);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.25;
  font-weight: 800;
}

.compare-body {
  color: var(--tk-text-secondary);
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 767px) {
  .compare-wrap {
    flex-direction: column;
    gap: 14px;
  }

  .compare-card {
    padding: 22px;
  }
}


/* ============================================================
   14. HIDDEN COST SECTION
   Local overrides only.
   Do not put default section spacing here.
   ============================================================ */

.hidden-cost-inner {
  display: flex;
  flex-direction: column;
  gap: var(--tk-section-gap);
  width: 100%;
}

.hidden-cost-layout {
  display: flex;
  align-items: center;
  gap: var(--tk-split-gap);
  width: 100%;
}

.hidden-cost-visual {
  flex: 0 1 42%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--tk-radius-lg);
  box-shadow: var(--tk-shadow-card);
}

.hidden-cost-visual img,
.hidden-cost-visual picture,
.hidden-cost-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
}

.hidden-cost-stats {
  flex: 1 1 58%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tk-card-gap);
}

.hidden-cost-stat {
  flex: 1 1 calc(50% - 9px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: clamp(24px, 2.6vw, 32px);
  min-height: 150px;
}

.stat-value {
  color: var(--tk-brand-primary);
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.stat-label {
  color: var(--tk-text-secondary);
  font-size: 16px;
  line-height: 1.45;
}

.hidden-cost-advantage {
  width: 100%;
  max-width: 100%;
  padding: clamp(24px, 3vw, 34px);
  border-left: 5px solid var(--tk-brand-accent);
  background: var(--tk-brand-accent-soft);
  border-radius: 16px;
  overflow-wrap: break-word;
}

.hidden-cost-advantage .eyebrow {
  margin-bottom: 10px;
}

.hidden-cost-advantage .body-lg {
  max-width: none;
}

@media (max-width: 1024px) {
  .hidden-cost-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .hidden-cost-visual,
  .hidden-cost-stats {
    width: 100%;
    flex-basis: auto;
  }

  .hidden-cost-stat {
    flex: 1 1 calc(50% - 9px);
  }
}

@media (max-width: 767px) {
  .hidden-cost-layout {
    gap: 28px;
  }

  .hidden-cost-stats {
    flex-direction: column;
    gap: 14px;
  }

  .hidden-cost-stat {
    width: 100%;
    flex-basis: 100%;
    min-height: auto;
    padding: 22px;
  }

  .stat-value {
    font-size: clamp(28px, 9vw, 36px);
  }

  .stat-label {
    font-size: 14px;
    line-height: 1.45;
  }

  .hidden-cost-advantage {
    padding: 22px;
  }
}


/* ============================================================
   15. ERP TRUTH SECTION
   Supports both:
   A) preferred clean compare-wrap structure
   B) current direct-card structure from duplicated Hidden Cost
   Remove DUP_* classes later, but this CSS supports them now.
   ============================================================ */

:is(.erp-truth-section, .DUP_erp-truth-section) :is(.erp-truth-inner, .DUP_erp-truth-inner) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--tk-section-gap) !important;
  width: 100% !important;
}

:is(.erp-truth-section, .DUP_erp-truth-section) :is(.erp-truth-header, .DUP_erp-truth-header) {
  max-width: 840px;
}

:is(.erp-truth-section, .DUP_erp-truth-section) .erp-truth-layout {
  display: flex !important;
  align-items: center !important;
  gap: var(--tk-split-gap) !important;
  width: 100% !important;
}

/* Content side. Flex-wrap lets direct duplicated cards sit in two columns. */
:is(.erp-truth-section, .DUP_erp-truth-section) .erp-truth-content {
  flex: 1 1 56% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: var(--tk-card-gap) !important;
}

/* Visual side */
:is(.erp-truth-section, .DUP_erp-truth-section) .erp-truth-visual {
  flex: 0 1 44% !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: var(--tk-radius-lg) !important;
  box-shadow: var(--tk-shadow-card) !important;
  background: var(--tk-surface-white);
}

.erp-truth-image,
.erp-truth-visual img,
.erp-truth-visual picture {
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
}

/* Preferred compare-wrap structure */
:is(.erp-truth-section, .DUP_erp-truth-section) .compare-wrap {
  flex: 0 0 100%;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: var(--tk-card-gap) !important;
  width: 100% !important;
}

/* Preferred compare cards */
:is(.erp-truth-section, .DUP_erp-truth-section) .compare-card {
  flex: 1 1 0 !important;
}

/* Compatibility: if cards are direct children of erp-truth-content */
:is(.erp-truth-section, .DUP_erp-truth-section) .erp-truth-content > .card-base {
  flex: 1 1 calc(50% - 9px) !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: clamp(24px, 2.6vw, 32px) !important;
}

/* Compatibility: old stat text inside ERP should not become huge/narrow */
:is(.erp-truth-section, .DUP_erp-truth-section) .erp-truth-content .stat-value {
  color: var(--tk-text-primary) !important;
  font-size: clamp(18px, 2vw, 22px) !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

:is(.erp-truth-section, .DUP_erp-truth-section) .erp-truth-content .stat-label {
  color: var(--tk-text-secondary) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* ERP button must sit below cards, not behave like a third card */
.erp-read-more {
  flex: 0 0 100%;
  width: fit-content;
  align-self: flex-start;
}

/* If button accidentally remains inside compare-wrap, force it onto its own line */
:is(.erp-truth-section, .DUP_erp-truth-section) .compare-wrap > .erp-read-more {
  flex: 0 0 100% !important;
}

/* Old/New card accents */
.erp-compare-old,
.compare-card-old {
  background: var(--tk-surface-white);
}

.erp-compare-new,
.compare-card-accent {
  background: var(--tk-brand-primary-soft);
  border-color: color-mix(in srgb, var(--tk-brand-primary) 20%, var(--tk-border-default));
}

@media (max-width: 1024px) {
  :is(.erp-truth-section, .DUP_erp-truth-section) .erp-truth-layout {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 32px !important;
  }

  :is(.erp-truth-section, .DUP_erp-truth-section) .erp-truth-content,
  :is(.erp-truth-section, .DUP_erp-truth-section) .erp-truth-visual {
    width: 100% !important;
    flex-basis: auto !important;
  }
}

@media (max-width: 767px) {
  :is(.erp-truth-section, .DUP_erp-truth-section) .erp-truth-layout {
    gap: 28px !important;
  }

  :is(.erp-truth-section, .DUP_erp-truth-section) .compare-wrap {
    flex-direction: column !important;
    gap: 14px !important;
  }

  :is(.erp-truth-section, .DUP_erp-truth-section) .erp-truth-content {
    flex-direction: column !important;
    gap: 14px !important;
  }

  :is(.erp-truth-section, .DUP_erp-truth-section) .erp-truth-content > .card-base,
  :is(.erp-truth-section, .DUP_erp-truth-section) .compare-card {
    width: 100% !important;
    flex-basis: auto !important;
    padding: 22px !important;
  }

  .erp-read-more {
    width: 100% !important;
  }
}


/* ============================================================
   16. OPTIONAL REVEAL
   Use only when class is added manually.
   Performance-safe; respects reduced motion.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .reveal-on-scroll {
    opacity: 0;
    transform: translateY(22px);
    animation: tk-reveal linear both;
    animation-timeline: view();
    animation-range: entry 15% cover 35%;
  }

  @keyframes tk-reveal {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}


/* ============================================================
   17. FINAL MOBILE OVERFLOW GUARD
   Last safety net for Atomic/Elementor generated widths.
   ============================================================ */

@media (max-width: 767px) {
  .section-base,
  .container-wide,
  .section-stack,
  .section-header,
  .hero-inner,
  .hidden-cost-inner,
  .hidden-cost-layout,
  .hidden-cost-stats,
  .hidden-cost-advantage,
  .erp-truth-inner,
  .erp-truth-layout,
  .erp-truth-content,
  .compare-wrap {
    max-width: 100%;
  }
}

/* Key Benefits - align manual SVG icon to top of text */
.elementor .icon-row-card {
  align-items: flex-start;
}

.elementor .benefit-icon {
  flex: 0 0 20px;
  width: 20px;
  align-self: flex-start;
  margin-top: 4px;
  line-height: 0;
}

.elementor .benefit-icon .elementor-icon-wrapper,
.elementor .benefit-icon .elementor-icon {
  line-height: 0;
  display: block;
}

.elementor .benefit-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* =========================================================
   Reusable Process Timeline
   Used for lifecycle / journey / workflow sections
   ========================================================= */

.elementor .section-process-timeline {
  color: #fff;
  overflow: hidden;
}

.elementor .section-process-timeline .section-header {
  max-width: 720px;
}

.elementor .heading-on-dark,
.elementor .text-on-dark {
  color: #fff;
}

.elementor .text-on-dark {
  color: rgba(255, 255, 255, 0.72);
}

.elementor .process-timeline-track {
  position: relative;
  display: flex;
  width: 100%;
  gap: 0;
}

.elementor .process-timeline-track::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-accent, #F39200), rgba(243, 146, 0, 0.25));
}

.elementor .process-step {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 0 12px;
}

.elementor .process-step-index {
  width: 54px;
  height: 54px;
  margin: 0 auto 22px;
  border-radius: 999px;
  border: 2px solid var(--brand-accent, #F39200);
  background: var(--brand-primary-dark, #0F2461);
  color: var(--brand-accent, #F39200);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.elementor .process-step-title {
  margin: 0 0 8px;
  color: #fff;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
}

.elementor .process-step-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 1024px) {
  .elementor .process-timeline-track {
    flex-direction: column;
    gap: 0;
  }

  .elementor .process-timeline-track::before {
    display: none;
  }

  .elementor .process-step {
    display: flex;
    gap: 18px;
    text-align: left;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .elementor .process-step:last-child {
    border-bottom: 0;
  }

  .elementor .process-step-index {
    flex: 0 0 54px;
    margin: 0;
  }
}

/* =========================================================
   TRAKAID PREMIUM CARD HOVER EFFECT
   ---------------------------------------------------------
   Purpose:
   Elegant card elevation + subtle image zoom + diagonal shine.
   
   Usage in Elementor:
   1. Add class to card/container:
      hover-lift-shine

   2. Add class to image wrapper / image widget:
      hover-lift-shine-media

   Keep this as an optional effect class.
   Do not apply globally to every card.
   ========================================================= */


/* Base effect variables */
.hover-lift-shine {
  --hover-lift-distance: -6px;
  --hover-card-shadow: 0 22px 55px rgba(15, 36, 97, 0.14);
  --hover-card-shadow-soft: 0 8px 22px rgba(15, 36, 97, 0.08);
  --hover-image-scale: 1.045;
  --hover-speed: 420ms;
  --hover-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  overflow: hidden;
  transition:
    transform var(--hover-speed) var(--hover-ease),
    box-shadow var(--hover-speed) var(--hover-ease),
    border-color var(--hover-speed) var(--hover-ease);
  will-change: transform;
}


/* Image wrapper must clip the scaled image and shine layer */
.hover-lift-shine-media {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  isolation: isolate;
}


/* Image scale setup */
.hover-lift-shine-media img {
  display: block;
  width: 100%;
  height: auto;
  transition:
    transform 620ms var(--hover-ease),
    filter 620ms var(--hover-ease);
  will-change: transform;
}


/* Diagonal premium shine layer */
.hover-lift-shine-media::after {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: 2;
  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      transparent 38%,
      rgba(255, 255, 255, 0.10) 44%,
      rgba(255, 255, 255, 0.42) 50%,
      rgba(255, 255, 255, 0.10) 56%,
      transparent 62%
    );

  transform: translate(-70%, -70%);
  opacity: 0;
  transition:
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 320ms ease;
}


/* Desktop / hover-capable devices only */
@media (hover: hover) and (pointer: fine) {
  .hover-lift-shine:hover {
    transform: translateY(var(--hover-lift-distance));
    box-shadow:
      var(--hover-card-shadow),
      var(--hover-card-shadow-soft);
    border-color: rgba(27, 58, 140, 0.22);
  }

  .hover-lift-shine:hover .hover-lift-shine-media img {
    transform: scale(var(--hover-image-scale));
    filter: saturate(1.04) contrast(1.02);
  }

  .hover-lift-shine:hover .hover-lift-shine-media::after {
    transform: translate(70%, 70%);
    opacity: 1;
  }
}


/* Keyboard accessibility */
.hover-lift-shine:focus-within {
  transform: translateY(var(--hover-lift-distance));
  box-shadow:
    var(--hover-card-shadow),
    var(--hover-card-shadow-soft);
  border-color: rgba(27, 58, 140, 0.22);
}


/* Motion safety */
@media (prefers-reduced-motion: reduce) {
  .hover-lift-shine,
  .hover-lift-shine-media img,
  .hover-lift-shine-media::after {
    transition: none;
  }

  .hover-lift-shine:hover,
  .hover-lift-shine:focus-within,
  .hover-lift-shine:hover .hover-lift-shine-media img {
    transform: none;
  }

  .hover-lift-shine-media::after {
    display: none;
  }
}

/* =========================================================
   TEMPORARY HIDE
   ---------------------------------------------------------
   Use this class to temporarily hide selected buttons.
   Remove the class from Elementor when the button is needed again.
   ========================================================= */

.temp-hide {
  display: none !important;
}/* End custom CSS */