/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
p {
  line-height: 1.65;
}
/*** Navbar ***/
.kl-navbar__content {
  justify-content: flex-end;
}
.kl-navbar__item {
  margin: 0 12px;
}

/*** Buttons ***/
.button {
  padding-top: 12px;
  padding-right: 24px;
  padding-bottom: 12px;
  padding-left: 24px;
  border-radius: 50px;
}
.button:hover {
  background: #F98012;
  border-color: #F98012;
}

.button.secondary {
  background-color: transparent;
  border-color: #FFF;
  color: #FFF;
}

@media only screen and (max-width: 555px) {
  .kl-rich-text__buttons .button, .kl-rich-text__buttons .button_cta {
    width: 96%;
	}
  
  .kl-wide-section__text .kl-rich-text__buttons, #hs_cos_wrapper_widget_1691139104747 {
    width: 100%;
  }
  
  #hs_cos_wrapper_widget_1691139104747 {
    width: 100%;
    text-align: center;
  }
}


/*** Hero banner ***/

/*** Citater ***/
.kl-testimonial__content {
  line-height: 1.75;
}

.kl-testimonial__footer img {
  height: 60px;
  width: 90px;
  border-radius: 0;
  object-fit: contain;  
}

/*** Card content ***/
.kl-card__content p,
.kl-card__content span,{
  line-height: 1.75;
}

/*** Logos ***/
.kl-logos__item img {
  height: auto;
}


/*** Custom widget ***/
.row-fluid-wrapper.dnd-section .row-fluid,
.widget-type-custom_widget.dnd-module,
.widget-type-custom_widget.dnd-module .hs_cos_wrapper.hs_cos_wrapper_widget.hs_cos_wrapper_type_module {
 /* display: flex; */
}

/*** kl-custom-image ***/
.kl-wide-section {
  border-radius: 10px;
  box-shadow: 0px 11px 30px 0px #9AA1B133;
}

.kl-wide-section__image {
  flex-basis: 15%;
}

.kl-wide-section__text {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.kl-wide-section__image {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;  
}

#module_17424708695454 .kl-wide-section__image, #module_17430836910055 .kl-wide-section__image, #module_17430676363065 .kl-wide-section__image, #module_17430870401885 .kl-wide-section__image {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;  
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;  
}

#module_17424708695454 .kl-wide-section__text, #module_17430836910055 .kl-wide-section__text, #module_17430676363065 .kl-wide-section__text, #module_17430870401885 .kl-wide-section__text {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;  
}

@media only screen and (max-width: 767px) {
  #widget_1742470500443 .kl-wide-section__image, #module_17430802425745 .kl-wide-section__image, #module_17430835815904 .kl-wide-section__image, #module_17430870175083 .kl-wide-section__image, #module_17430676206623 .kl-wide-section__image, #module_17430796563885 .kl-wide-section__image, #module_17424708695454 .kl-wide-section__image, #module_17430836910055 .kl-wide-section__image, #module_17430676363065 .kl-wide-section__image, #module_17430870401885 .kl-wide-section__image {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 0px !important;
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 0px !important;
}

  #widget_1742470500443 .kl-wide-section__text, #module_17430802425745 .kl-wide-section__text, #module_17430835815904 .kl-wide-section__text, #module_17430870175083 .kl-wide-section__text, #module_17430676206623 .kl-wide-section__text, #module_17430796563885 .kl-wide-section__text, #module_17424708695454 .kl-wide-section__text, #module_17430836910055 .kl-wide-section__text, #module_17430676363065 .kl-wide-section__text, #module_17430870401885 .kl-wide-section__text {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 10px !important;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 10px !important;
  }
}

.kl-wide-section__text-content {
  width: 90%;
}

/** kl-cards-slider **/
.kl-cards-slider__image {
    margin: 0 0 -8px !important;
}

.kl-cards-slider__header {
    padding: 0px !important;
}

.kl-cards-slider__content {
  padding: 36px !important;
  margin: 0px !important;
  min-height: 280px;
}

.kl-cards-slider__content>div {
  margin: 0px !important;
}

.kl-cards-slider__arrow {
    top: 47%;
}

/** kl-faq **/
.kl-faq {
  border: 0px solid #fff;
}

/** Medarbejdere **/
.kl-featured-card {
  flex-direction: row-reverse;
}
.kl-featured-card__content p {
  margin: 0px;
}
.kl-featured-card__image {
  margin: 32px 0px 0px 25px;
  padding: 0px;
}

/** image_slider **/
button.splide__toggle.is-active {
    display: none;
}


/** Contact form design **/
.legal-consent-container li.hs-form-booleancheckbox {
    margin: .7rem auto;
    width: 50%;
}

.hs_cos_wrapper_widget .hs_cos_wrapper .hs_submit.hs-submit {
    width: 50%;
    margin: 0 auto;
    text-align: center !important;
}

@media only screen and (max-width: 555px) {
  .legal-consent-container li.hs-form-booleancheckbox {
    margin: .7rem auto;
    width: 100%;
}

.hs_cos_wrapper_widget .hs_cos_wrapper .hs_submit.hs-submit {
    width: 100%;
    margin: 0 auto;
    text-align: center !important;
	}
}

.row-fluid-wrapper.row-depth-1.row-number-1.dnd_area-row-0-max-width-section-centering.dnd-section.dnd_area-row-0-padding.dnd_area-row-0-hidden, .row-fluid-wrapper.row-depth-1.row-number-22.dnd_area-row-5-hidden.dnd-section.dnd_area-row-5-max-width-section-centering.dnd_area-row-5-padding, .row-fluid-wrapper.row-depth-1.row-number-1.dnd-section.dnd_area-row-0-padding {
    background-color: hsla(203, 30%, 38%, 1) !important;
    background-image: radial-gradient(at 24% 78%, hsla(203, 30%, 44%, 1) 0px, transparent 50%), radial-gradient(at 46% 22%, hsla(203, 30%, 38%, 1) 0px, transparent 50%), radial-gradient(at 100% 100%, hsla(203, 30%, 52%, 1) 0px, transparent 50%), radial-gradient(at 0% 50%, hsla(204, 30%, 35%, 1) 0px, transparent 50%), radial-gradient(at 83% 26%, hsla(201, 29%, 32%, 1) 0px, transparent 50%) !important;
}


  .princ-icon {
    width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 1.2rem;
  }
  .pi-sky    { background: rgba(175,208,214,.22); }
  .pi-orange { background: rgba(249,128,18,.1); }

.princ-card {
    display: flex; gap: 1.2rem; align-items: flex-start;
  }

.princ-card p {
    margin: 0px;
}

.row-fluid-wrapper.row-depth-1.row-number-27.dnd_area-row-7-vertical-alignment.dnd-section.dnd_area-row-7-max-width-section-centering.dnd_area-row-7-margin.dnd_area-row-7-padding, .row-fluid-wrapper.row-depth-1.row-number-5.dnd_area-row-2-padding.dnd-section, .dnd_area-row-4-padding {
    background: #2F4858 !important;
    background-image: radial-gradient(ellipse 55% 60% at 95% 5%, rgba(175, 208, 214, .2) 0%, transparent 60%), radial-gradient(ellipse 45% 50% at 5% 95%, rgba(249, 128, 18, .15) 0%, transparent 55%), radial-gradient(ellipse 35% 40% at 50% 50%, rgba(245, 243, 247, .04) 0%, transparent 50%) !important;
}
  
  
/** addtional styles from claude **/

/*
 * ============================================================
 *  MOXIS DESIGN SYSTEM — HubSpot Global CSS Override
 *  Version: 1.0
 *
 *  HOW TO INSTALL IN HUBSPOT:
 *  1. Go to Marketing > Files and Templates > Design Tools
 *  2. Create new file: "moxis-design-system.css"
 *  3. Paste this file content
 *  4. In your page template (HTML+HubL), add inside <head>:
 *     
 *  5. Or: Marketing > Settings > Website > Pages > Custom HTML (head)
 *     <link rel="stylesheet" href="[your CDN URL]">
 * ============================================================
 */

/* ── 1. DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Brand colours */
  --color-orange:        #F59300;
  --color-orange-dark:   #DB6D06;
  --color-orange-light:  #F98B24;
  --color-blue:          #2F4858;
  --color-blue-dark:     #2B4150;
  --color-blue-light:    #afd0d6;
  --color-navy:          #1a1a2e;
  --color-navy-deep:     #0d1221;
  --color-cream:         #F5F3F7;
  --color-green:         #0C6E42;
  --color-green-light:   #b2dbbd;
  --color-purple:        #9105D3;

  /* Neutrals */
  --color-white:         #ffffff;
  --color-bg-soft:       #f8f9fb;
  --color-border:        #e5e7eb;
  --color-text-primary:  #1a1a2e;
  --color-text-muted:    #555555;
  --color-text-subtle:   #888888;

  /* Typography */
 /* --font-heading:        'Rubik', sans-serif;
  --font-body:           'Inter', sans-serif;*/

  /* Font sizes */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  40px;
  --text-5xl:  52px;

  /* Spacing */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* Radii */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.08);
  --shadow-md:  0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg:  0 4px 24px rgba(0,0,0,0.12);

  /* Transitions */
  --transition: all 0.15s ease;

  /* Layout */
  --max-width:       1140px;
  --max-width-text:  720px;
}


/* ── 2. BASE RESET & TYPOGRAPHY ────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  color: var(--color-text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/*h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
}*/

/*
h1 { font-size: var(--text-5xl); font-weight: 800; }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-lg); }*/

/*p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
}*/

/* ── 3. NAV ─────────────────────────────────────────────────── */
/* HubSpot nav module overrides */

.hs-nav-v4 .hs-menu-item a {
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition);
}
.hs-nav-v4 .hs-menu-item a:hover {
  color: var(--color-orange);
}


/* ── 4. BUTTONS ─────────────────────────────────────────────── */

/* Primary CTA */
.btn-primary,
.hs-button.primary,
.cta_button.hs-cta-img,
a.btn-primary {
  background: var(--color-orange) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  padding: 12px 28px !important;
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: var(--transition) !important;
  cursor: pointer !important;
}
.btn-primary:hover,
.hs-button.primary:hover,
a.btn-primary:hover {
  background: var(--color-orange-dark) !important;
  transform: translateY(-1px) !important;
}

/* Secondary / outline CTA */
.btn-outline,
.hs-button.secondary,
a.btn-outline {
  background: transparent !important;
  color: var(--color-orange) !important;
  border: 2px solid var(--color-orange) !important;
  border-radius: var(--radius-pill) !important;
  padding: 10px 26px !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: var(--transition) !important;
}
.btn-outline:hover,
a.btn-outline:hover {
  background: var(--color-orange-light) !important;
}

/* Large CTA variant */
.btn-lg {
  padding: 14px 36px !important;
  font-size: var(--text-base) !important;
}

/* White CTA (on dark/orange backgrounds) */
.btn-white {
  background: var(--color-white) !important;
  color: var(--color-orange) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  padding: 14px 36px !important;
  font-size: var(--text-base) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-block !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
  transition: var(--transition) !important;
}
.btn-white:hover { transform: translateY(-1px) !important; }

.btn-white-outline {
  background: transparent !important;
  color: var(--color-white) !important;
  border: 2px solid rgba(255,255,255,0.6) !important;
  border-radius: var(--radius-pill) !important;
  padding: 12px 34px !important;
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-block !important;
}


/* ── 5. SECTION UTILITY CLASSES ─────────────────────────────── */
/*
  Usage in HubSpot DnD: add class to a row's CSS class field
*/

/* Backgrounds */
.bg-white    { background-color: var(--color-white) !important; }
.bg-soft     { background-color: var(--color-bg-soft) !important; }
.bg-cream    { background-color: var(--color-cream) !important; }
.bg-navy     { background-color: var(--color-navy) !important; }
.bg-orange   { background-color: var(--color-orange) !important; }

/* Gradient backgrounds */
.bg-hero {
  background: #ffffff !important;
}
.bg-hero h1,
.bg-hero .hero-sub,
.bg-hero p {
  color: var(--color-text-primary) !important;
}
.bg-hero .hero-eyebrow,
.bg-hero .hero-badge {
  background: rgba(245,147,0,0.1) !important;
  border-color: rgba(245,147,0,0.3) !important;
  color: var(--color-orange) !important;
}
.bg-hero .btn-ghost,
.bg-hero .btn-white-outline {
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}
}
.bg-hero-orange {
  background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-dark) 100%) !important;
}
.bg-gradient-purple {
  background: linear-gradient(135deg, #0d1b3e 0%, var(--color-purple) 60%, var(--color-blue) 100%) !important;
}

/* Section padding */
.section-sm  { padding: var(--space-10) var(--space-12) !important; }
.section-md  { padding: var(--space-20) var(--space-12) !important; }
.section-lg  { padding: var(--space-24) var(--space-12) !important; }

/* Max-width centring */
.container {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Text alignment helpers */
.text-center { text-align: center !important; }
.text-left   { text-align: left !important; }

/* Text on dark backgrounds */
.text-white   { color: var(--color-white) !important; }
.text-white h1,
.text-white h2,
.text-white h3 { color: var(--color-white) !important; }
.text-white p  { color: rgba(255,255,255,0.8) !important; }


/* ── 6. SECTION LABEL (eyebrow text) ────────────────────────── */
.section-label,
.eyebrow {
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: var(--color-orange) !important;
  margin-bottom: var(--space-3) !important;
  display: block !important;
}


/* ── 7. HERO MODULE ─────────────────────────────────────────── */
.hero-module {
  padding: 100px var(--space-12) 90px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-module::before {
  content: '';
  position: absolute; inset: 0;
  /*background: radial-gradient(ellipse 80% 60% at 50% 120%, rgba(249,128,18,0.18) 0%, transparent 70%);*/
   background-color: hsla(203,30%,38%,1);
    background-image:
      radial-gradient(at 24% 78%, hsla(203,30%,44%,1) 0px, transparent 50%),
      radial-gradient(at 46% 22%, hsla(203,30%,38%,1) 0px, transparent 50%),
      radial-gradient(at 100% 100%, hsla(203,30%,52%,1) 0px, transparent 50%),
      radial-gradient(at 0% 50%,  hsla(204,30%,35%,1) 0px, transparent 50%),
      radial-gradient(at 83% 26%, hsla(201,29%,32%,1) 0px, transparent 50%);
  pointer-events: none;
}
.hero-module h1 {
  font-size: var(--text-5xl);
  font-weight: 800;
  max-width: 820px;
  margin-bottom: var(--space-6);
  margin-left: auto !important;
  margin-right: auto !important;
  letter-spacing: -1.5px;
  color: var(--color-white);
}
.hero-module h1 em,
.hero-module h1 span.orange { color: var(--color-orange) !important; font-style: normal; }

.hero-module .hero-sub {
  font-size: var(--text-xl);
  color: rgba(255,255,255,0.82);
  max-width: 640px;
  margin: 0 auto var(--space-10);
  line-height: 1.65;
}
.hero-ctas {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-12);
}
.hero-trust {
  display: flex;
  gap: var(--space-8);
  justify-content: center;
  flex-wrap: wrap;
}
.hero-trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.75);
}
.hero-trust-check {
  width: 18px; height: 18px;
  background: var(--color-orange);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--color-white);
  flex-shrink: 0;
}

/* Eyebrow badge for hero */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: var(--space-6);
  color: rgba(255,255,255,0.9);
}
.hero-eyebrow .badge {
  background: var(--color-orange);
  color: var(--color-white);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
}


/* ── 8. LOGO BAR ────────────────────────────────────────────── */
.logo-bar {
  background: var(--color-cream);
  padding: var(--space-8) var(--space-12);
  border-bottom: 1px solid #e2dece;
}
.logo-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.logo-bar-row:last-child { margin-bottom: 0; }
.logo-bar-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-text-subtle);
  min-width: 130px;
}
.logo-bar-label.corporate { color: var(--color-blue); }
.logo-bar-label.education { color: var(--color-green); }
.logo-chip {
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 7px 18px;
  font-weight: 700;
  font-size: 13px;
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0,0,0,0.06);
}


/* ── 9. AUDIENCE SPLIT CARDS ────────────────────────────────── */
.audience-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.audience-card {
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
}
.audience-card.corporate {
  background: linear-gradient(135deg, var(--color-cream) 0%, #f0f7ff 100%);
  border-color: #4F7892;
}
.audience-card.education {
  background: linear-gradient(135deg, var(--color-cream) 0%, #f0fff2 100%);
  border-color: #b8ecd9;
}
.audience-tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-5);
}
.audience-tag.corporate { background: var(--color-blue); color: var(--color-white); }
.audience-tag.education { background: var(--color-green); color: var(--color-white); }
.audience-card h3 {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
  line-height: 1.3;
  color: var(--color-text-primary);
}
.audience-pains {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--space-6);
}
.audience-pains li {
  font-size: var(--text-sm);
  color: #333;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.pain-x     { color: #e53e3e; font-weight: 700; flex-shrink: 0; }
.pain-check { color: var(--color-green); font-weight: 700; flex-shrink: 0; }


/* ── 10. CARD COMPONENTS ────────────────────────────────────── */
.card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
  border: 1px solid #f0f0f0;
}
.card h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.card p  { font-size: 15px; color: var(--color-text-muted); line-height: 1.7; }

/* Icon wrapper */
.icon-wrap {
  width: 54px; height: 54px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: var(--space-5);
}
.icon-orange { background: var(--color-orange-light); }
.icon-blue   { background: var(--color-blue-light); }
.icon-purple { background: #f0e8ff; }
.icon-green  { background: var(--color-green-light); }

/* Grid layouts */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }


/* ── 11. TESTIMONIAL CARDS ──────────────────────────────────── */
.testi-card {
  background: var(--color-bg-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
}
.testi-segment {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}
.testi-segment.corp { background: var(--color-blue-light); color: var(--color-blue); }
.testi-segment.edu  { background: var(--color-green-light); color: var(--color-green); }
.testi-quote {
  font-size: 15px;
  color: #333;
  line-height: 1.7;
  margin-bottom: var(--space-6);
  font-style: italic;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-orange);
  position: relative;
}


/* ── 12. FAQ / ACCORDION ────────────────────────────────────── */
details {
  background: var(--color-white);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
summary {
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: '+';
  font-size: 20px;
  color: var(--color-orange);
  font-weight: 700;
  flex-shrink: 0;
}
details[open] summary::after { content: '–'; }
.faq-body {
  padding: 0 var(--space-6) var(--space-5);
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* HubSpot accordion module override */
.hs-accordion summary,
.accordion summary {
  padding: var(--space-5) var(--space-6);
  font-weight: 600;
}


/* ── 13. COMPARISON TABLE ───────────────────────────────────── */
.compare-table {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.compare-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  background: var(--color-navy);
  color: var(--color-white);
}
.compare-header > div { padding: var(--space-4) var(--space-5); font-weight: 700; font-size: var(--text-sm); }
.compare-header .highlight { background: var(--color-blue); }
.compare-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  background: var(--color-white);
  border-bottom: 1px solid #f0f0f0;
}
.compare-row:nth-child(even) { background: #fafafa; }
.compare-row > div { padding: 14px var(--space-5); font-size: var(--text-sm); display: flex; align-items: center; }
.compare-row .val-highlight { background: rgba(43,147,210,0.05); font-weight: 700; color: var(--color-blue); }
.check   { color: #22c55e; font-size: 18px; }
.cross   { color: #ef4444; font-size: 18px; }
.partial { color: #f59e0b; font-size: var(--text-sm); }


/* ── 14. STEPS / HOW IT WORKS ───────────────────────────────── */
/*
  NOTE FOR HUBSPOT:
  Do NOT use .steps::before for the connecting line — HubSpot's module
  wrappers break pseudo-element positioning. Use a real <div class="steps-connector">
  as the first child of .steps instead.
*/
.steps {
  display: flex;
  gap: 0;
  position: relative;
}
/* Real div connector — works reliably inside HubSpot Custom HTML modules */
.steps-connector {
  position: absolute;
  top: 28px; left: 12%; right: 12%;
  height: 2px;
  background: rgba(255,255,255,0.15); /* dark section default */
  z-index: 0;
  pointer-events: none;
}
.steps-connector.light {
  background: #e5e7eb; /* for white/light background sections */
}
.step { flex: 1; text-align: center; position: relative; z-index: 1; padding: 0 var(--space-4); }
.step-num {
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  margin: 0 auto 12px;
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-orange);
  /* fallback for browsers without text-stroke support (older Firefox) */
}
@supports not (-webkit-text-stroke: 1px black) {
  .step-num { color: rgba(245,147,0,0.35); }
}
/* color: inherit !important forces h4 to take the section's text color
   rather than being overridden by HubSpot's global heading color rules */
.step h4 { font-size: 18px; font-weight: 700; margin-bottom: var(--space-2); color: inherit !important; }
.step p  { font-size: 15px; color: rgba(255,255,255,0.75); line-height: 1.6; max-width: 180px; margin-left: auto !important; margin-right: auto !important; }

/* ── 15. FORM OVERRIDES ─────────────────────────────────────── */
.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form input[type="number"],
.hs-form textarea,
.hs-form select {
  border: 2px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 16px !important;
  font-size: var(--text-sm) !important;
  width: 100% !important;
  transition: border-color 0.15s !important;
}
.hs-form input:focus,
.hs-form textarea:focus {
  border-color: var(--color-blue) !important;
  outline: none !important;
}
.hs-form input[type="submit"],
.hs-submit input[type="submit"] {
  background: var(--color-orange) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  padding: 13px 32px !important;
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
}
.hs-form input[type="submit"]:hover {
  background: var(--color-orange-dark) !important;
}
.hs-error-msgs { color: #e53e3e !important; font-size: var(--text-sm) !important; }
.hs-form label {
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  margin-bottom: var(--space-1) !important;
  display: block !important;
}


/* ── 16. RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 960px) {
  h1 { font-size: 40px; }
  h2 { font-size: 32px; }
  .hero-module h1 { font-size: 40px; }
  .audience-cards { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .steps { flex-direction: column; gap: var(--space-8); }
  .steps-connector { display: none; }
  .compare-header,
  .compare-row { grid-template-columns: 1.5fr 1fr 1fr; }
}

@media (max-width: 640px) {
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  .hero-module { padding: 60px var(--space-6); }
  .section-md { padding: var(--space-12) var(--space-6) !important; }
  .section-lg { padding: var(--space-16) var(--space-6) !important; }
  .hero-ctas  { flex-direction: column; align-items: center; }
  .hero-trust { flex-direction: column; align-items: center; gap: var(--space-3); }
  .compare-header .col-3,
  .compare-row   .col-3 { display: none; }
}


/* ═══════════════════════════════════════════════════════════
   ADDITIONAL COMPONENTS — covering all 5 landing pages
   ═══════════════════════════════════════════════════════════ */

/* ── 17. NAV ────────────────────────────────────────────────── */
nav {
  background: var(--color-white);
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 0 var(--color-border);
  position: sticky;
  top: 0;
  z-index: 200;
}
.nav-logo {
  font-weight: 800;
  font-size: 26px;
  color: var(--color-orange);
  letter-spacing: -0.5px;
}
.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  padding: 0;
}
.nav-links a {
  text-decoration: none;
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: var(--transition);
}
.nav-links a:hover { color: var(--color-orange); }
.nav-ctas { display: flex; gap: 10px; align-items: center; }


/* ── 18. HERO (landing page variant) ───────────────────────── */
.hero {
  color: var(--color-white);
  padding: 90px 40px 80px;
  text-align: center;
}
.hero h1 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  max-width: 760px;
  margin-bottom: 20px;
  margin-left: auto !important;
  margin-right: auto !important;
  color: var(--color-white);
}
.hero h1 span { color: var(--color-orange); }
.hero p {
  font-size: var(--text-xl);
  color: rgba(255,255,255,0.85);
  max-width: 600px;
  margin-bottom: 36px;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.6;
}
.hero-badge {
  display: inline-block;
  background: rgba(249,128,18,0.2);
  border: 1px solid var(--color-orange);
  color: var(--color-orange);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* Ghost button (white border on dark bg) */
.btn-ghost,
.hero-ctas .btn-ghost {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.5);
  color: var(--color-white);
  font-size: var(--text-base);
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  transition: var(--transition);
}
/* Hero primary (with shadow) */
.btn-hero-primary {
  background: var(--color-orange);
  color: var(--color-white);
  padding: 16px 36px;
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 4px 20px rgba(249,128,18,0.4);
  transition: var(--transition);
}
.btn-hero-primary:hover { background: var(--color-orange-dark); transform: translateY(-1px); }
.btn-hero-ghost {
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.4);
  color: var(--color-white);
  padding: 14px 34px;
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}
/* Trust bar */
.hero-trust {
  display: flex;
  gap: var(--space-8);
  justify-content: center;
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.75);
}
.trust-check {
  width: 18px; height: 18px;
  background: var(--color-orange);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--color-white);
  flex-shrink: 0;
}


/* ── 19. LOGO BAR (simple / unsegmented variant) ────────────── */
.logos {
  background: var(--color-cream);
  padding: var(--space-8) 40px;
  border-bottom: 1px solid #e2dece;
}
.logos-inner { max-width: var(--max-width); margin: 0 auto; }
.logo-row {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.logo-pill {
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 10px 24px;

  font-weight: 700;
  font-size: 15px;
  color: var(--color-blue);
  box-shadow: var(--shadow-sm);
}
/* Segmented logo bar */
.logos-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.logos-row:last-child { margin-bottom: 0; }
.logos-segment-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-text-subtle);
  white-space: nowrap;
  min-width: 130px;
}
.logos-segment-label.corporate { color: var(--color-blue); }
.logos-segment-label.education { color: var(--color-green); }
.logo-chips { display: flex; gap: 10px; flex-wrap: wrap; }


/* ── 20. PAIN CARDS ─────────────────────────────────────────── */
.pain { padding: 72px 40px; background: var(--color-white); text-align: center; }
.pain h2 {
  font-size: 36px;
  font-weight: 700;
  max-width: 680px;
  margin-bottom: 16px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.pain > p {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 580px;
  margin-bottom: 48px;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.7;
}
.pain-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.pain-card {
  background: #fff5f0;
  border: 1px solid #fde0c7;
  border-radius: var(--radius-md);
  padding: 28px 24px;
  text-align: left;
}
.pain-card .icon { font-size: 28px; margin-bottom: 12px; display: block; }
.pain-card h3 { font-size: var(--text-base); font-weight: 700; margin-bottom: 8px; }
.pain-card p  { font-size: var(--text-sm); color: #666; line-height: 1.6; }


/* ── 21. FEATURE CARDS ──────────────────────────────────────── */
.features { padding: var(--space-20) 40px; background: var(--color-bg-soft); }
.features-inner { max-width: var(--max-width); margin: 0 auto; }
.features-header { text-align: center; margin-bottom: 56px; }
.features-header h2 { font-size: 36px; font-weight: 700; margin-bottom: 14px; }
.features-header > p { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 560px; margin-left: auto !important; margin-right: auto !important; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.feature-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.feature-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}
.feature-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
.feature-card p { font-size: 15px; color: var(--color-text-muted); line-height: 1.7; }
.feature-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
}


/* ── 22. SPLIT LAYOUT ───────────────────────────────────────── */
.split { padding: var(--space-20) 40px; }
.split-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.split-inner.reverse { direction: rtl; }
.split-inner.reverse > * { direction: ltr; }
.split-text h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 14px;
}
.split-text p { font-size: var(--text-base); color: var(--color-text-muted); line-height: 1.7; margin-bottom: 20px; }
.split-visual {
  border-radius: var(--radius-2xl);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
  background: linear-gradient(135deg, var(--color-blue-light), #f3e8ff);
}
/* Check list (split sections) */
.check-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: #444;
}
.check-list li::before {
  content: '✓';
  color: var(--color-orange);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}


/* ── 23. FORMAT PILLS (eLearning page) ──────────────────────── */
.formats {
  background: var(--color-cream);
  padding: 36px 40px;
  text-align: center;
}
.formats > p {
  font-size: 13px;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.format-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.format-pill {
  background: var(--color-white);
  border-radius: var(--radius-pill);
  padding: 8px 20px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-blue);
  border: 1px solid #d4eaf8;
}


/* ── 24. AI SECTION (dark gradient, 3-col cards) ────────────── */
.ai-section {
  padding: var(--space-20) 40px;
  color: var(--color-white);
  text-align: center;
}
.ai-section h2 { font-size: 36px; font-weight: 700; margin-bottom: 16px; color: var(--color-white); }
.ai-section > p { font-size: var(--text-lg); opacity: 0.9; max-width: 580px; margin-bottom: 40px; margin-left: auto !important; margin-right: auto !important; color: var(--color-white); }
.ai-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
.ai-card {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-xl);
  padding: 28px;
  text-align: left;
}
.ai-card .icon { font-size: 28px; margin-bottom: 12px; display: block; }
.ai-card h3 { font-size: var(--text-base); font-weight: 700; margin-bottom: 8px; color: var(--color-white); }
.ai-card p  { font-size: var(--text-sm); opacity: 0.8; line-height: 1.6; color: var(--color-white); }

/* AI section (homepage split variant) */
.ai { padding: var(--space-20) 40px; background: var(--color-bg-soft); }
.ai-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.ai-text h2 { font-size: 38px; font-weight: 700; margin-bottom: 16px; line-height: 1.2; }
.ai-text > p { font-size: var(--text-base); line-height: 1.7; margin-bottom: 28px; }
.ai-features { display: flex; flex-direction: column; gap: 16px; }
.ai-feat { display: flex; gap: 14px; align-items: flex-start; }
.ai-feat-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-purple), var(--color-blue));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.ai-feat-text h4 { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.ai-feat-text p  { font-size: 13px; line-height: 1.55; }
.ai-visual {
  border-radius: var(--radius-2xl);
  aspect-ratio: 4/3.2;
  display: flex; align-items: center; justify-content: center;
  font-size: 80px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a2e, var(--color-purple) 60%, var(--color-blue));
}
.ai-visual::after {
  content: 'Moxis AI';
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-white);
}


/* ── 25. STATS ──────────────────────────────────────────────── */
.stats { padding: 64px 40px; background: var(--color-white); text-align: center; }
.stats-inner { max-width: 900px; margin: 0 auto; }
.stats h2 { font-size: 36px; font-weight: 700; margin-bottom: 48px; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.stat-card { padding: 32px; border-radius: var(--radius-xl); background: var(--color-bg-soft); }
.stat-num {
  font-size: 48px;
  font-weight: 700;
  color: var(--color-blue);
}
.stat-label { font-size: 15px; color: var(--color-text-muted); margin-top: 6px; }


/* ── 26. USE CASE CARDS ─────────────────────────────────────── */
.usecases { padding: 72px 40px; background: var(--color-bg-soft); text-align: center; }
.usecases h2 { font-size: 36px; font-weight: 700; max-width: 680px; margin-bottom: 14px; margin-left: auto !important; margin-right: auto !important; }
.usecases > p { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 560px; margin-bottom: 48px; margin-left: auto !important; margin-right: auto !important; line-height: 1.7; }
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}
.case-card {
  background: var(--color-white);
  border-radius: 14px;
  padding: 28px 24px;
  text-align: left;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.case-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.case-card p  { font-size: var(--text-sm); color: #666; line-height: 1.6; }
/* Case tags */
.case-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.tag-orange { background: var(--color-orange-light); color: var(--color-orange); }
.tag-blue   { background: var(--color-blue-light);   color: var(--color-blue); }
.tag-purple { background: #f3e8ff; color: var(--color-purple); }
.tag-green  { background: var(--color-green-light);  color: var(--color-green); }
.tag-red    { background: #fee8e8; color: #d73030; }
.tag-gray   { background: #f3f4f6; color: #555; }


/* ── 27. HORIZONTAL VALUE ITEMS ─────────────────────────────── */
.values { padding: var(--space-20) 40px; background: var(--color-white); }
.values-inner { max-width: var(--max-width); margin: 0 auto; }
.values-header { text-align: center; margin-bottom: 56px; }
.values-header h2 { font-size: 36px; font-weight: 700; margin-bottom: 14px; }
.values-header > p { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 560px; margin-left: auto !important; margin-right: auto !important; }
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.value-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}
.value-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.value-card p  { font-size: 15px; color: var(--color-text-muted); line-height: 1.7; }
.value-icon-wrap {
  width: 54px; height: 54px;
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin-bottom: 20px;
}
.vi-orange { background: var(--color-orange-light); }
.vi-blue   { background: var(--color-blue-light); }
.vi-purple { background: #f0e8ff; }
.vi-green  { background: var(--color-green-light); }
/* Horizontal value item layout */
.value-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.value-item { display: flex; gap: 20px; align-items: flex-start; }
.value-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-orange-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.value-text h3 { font-size: var(--text-lg); font-weight: 700; margin-bottom: 6px; }
.value-text p  { font-size: 15px; color: var(--color-text-muted); line-height: 1.6; }


/* ── 28. QUOTE / TESTIMONIAL HIGHLIGHT ──────────────────────── */
.quote { padding: var(--space-20) 40px; background: var(--color-cream); text-align: center; }
.quote-inner { max-width: 760px; margin: 0 auto; }
.quote-text {
  font-size: 24px;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-text-primary);
  margin-bottom: 24px;
  position: relative;
  padding-left: 16px;
}
.quote-text::before {
  content: '"';
  color: var(--color-orange);
  font-size: 48px;
  line-height: 0;
  vertical-align: -16px;
  margin-right: 4px;
}
.quote-attr { font-size: var(--text-sm); color: var(--color-text-subtle); }
.quote-attr strong { color: var(--color-text-primary); }


/* ── 29. INTEGRATION PILLS ──────────────────────────────────── */
.integrations { padding: 64px 40px; background: var(--color-white); text-align: center; }
.integrations h2 { font-size: 28px; font-weight: 700; margin-bottom: 12px; }
.integrations > p { font-size: var(--text-base); color: var(--color-text-muted); margin-bottom: 36px; }
.int-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.int-pill {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 24px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: #555;
}


/* ── 30. PRICING CARDS ──────────────────────────────────────── */
.pricing { padding: var(--space-20) 40px; background: var(--color-cream); text-align: center; }
.pricing h2 { font-size: 36px; font-weight: 700; margin-bottom: 12px; }
.pricing > p { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 520px; margin-bottom: 48px; margin-left: auto !important; margin-right: auto !important; }
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 760px;
  margin: 0 auto;
}
.pricing-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 36px;
  text-align: left;
  box-shadow: var(--shadow-md);
  position: relative;
}
.pricing-card.featured { border: 2px solid var(--color-blue); }
.featured-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-blue);
  color: var(--color-white);
  padding: 4px 16px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.pricing-card h3 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.pricing-card .price { font-size: 15px; color: var(--color-text-subtle); margin-bottom: 20px; }
.pricing-card ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.pricing-card ul li {
  font-size: var(--text-sm);
  color: #444;
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}
.pricing-card ul li::before { content: '✓'; color: var(--color-orange); font-weight: 700; flex-shrink: 0; }
.pricing-btn {
  display: block;
  text-align: center;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  background: var(--color-orange);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  transition: var(--transition);
}
.pricing-btn:hover { background: var(--color-orange-dark); }


/* ── 31. OBJECTION ITEMS ────────────────────────────────────── */
.objections { padding: var(--space-20) 40px; background: var(--color-cream); }
.obj-inner { max-width: 860px; margin: 0 auto; }
.obj-header { text-align: center; margin-bottom: 44px; }
.obj-header h2 { font-size: 40px; font-weight: 700; margin-bottom: 12px; }
.obj-header > p { font-size: 17px; color: var(--color-text-muted); }
.obj-list { display: flex; flex-direction: column; gap: 16px; }
.obj-item {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}
.obj-q {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-primary);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.obj-q::before {
  content: '?';
  background: var(--color-orange-light);
  color: var(--color-orange);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.obj-a {
  font-size: 15px;
  color: #444;
  line-height: 1.65;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-orange);
}


/* ── 32. FULL TESTIMONIALS SECTION ──────────────────────────── */
.testimonials { padding: var(--space-20) 40px; background: var(--color-white); text-align: center; }
.testimonials h2 { font-size: 40px; font-weight: 700; margin-bottom: 10px; }
.testi-intro { font-size: 17px; color: var(--color-text-muted); max-width: 560px; margin: 0 auto 52px; line-height: 1.65; }
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: var(--color-white);
  font-weight: 700;
  flex-shrink: 0;
}
.testi-avatar.corp { background: linear-gradient(135deg, var(--color-blue), #1e5fa8); }
.testi-avatar.edu  { background: linear-gradient(135deg, var(--color-green), #0a6d57); }
.testi-name { font-size: var(--text-sm); font-weight: 700; }
.testi-org  { font-size: 12px; color: var(--color-text-subtle); }


/* ── 33. CTA BOTTOM SECTION ─────────────────────────────────── */
.cta-bottom {
  padding: var(--space-20) 40px;
  text-align: center;
  color: var(--color-white);
}
.cta-bottom h2 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--color-white);
}
.cta-bottom > p { font-size: var(--text-lg); opacity: 0.9; max-width: 520px; margin-bottom: 36px; margin-left: auto !important; margin-right: auto !important; color: var(--color-white); }
.cta-bottom-btns,
.cta-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-note { font-size: 13px; opacity: 0.7; margin-top: 20px; color: var(--color-white); }


/* ── 34. HOW IT WORKS SECTION ───────────────────────────────── */
.how { padding: var(--space-20) 40px; text-align: center; color: var(--color-white); }
.how h2 { font-size: 40px; font-weight: 700; margin-bottom: 14px; color: var(--color-white); }
.how > p { font-size: var(--text-lg); color: rgba(255,255,255,0.75); max-width: 520px; margin-bottom: 56px; margin-left: auto !important; margin-right: auto !important; }
.how-inner { max-width: 900px; margin: 0 auto; text-align: center; }


/* ── 35. FAQ SECTION ────────────────────────────────────────── */
.faq { padding: var(--space-20) 40px; }
.faq-inner { max-width: 760px; margin: 0 auto; }
.faq h2 { font-size: 36px; font-weight: 700; text-align: center; margin-bottom: 40px; }


/* ── 36. FOOTER ─────────────────────────────────────────────── */
footer {
  background: var(--color-navy-deep);
  color: rgba(255,255,255,0.5);
  padding: 40px;
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-logo { font-weight: 800; font-size: 22px; color: var(--color-orange); }
.footer-links { display: flex; gap: 24px; list-style: none; padding: 0; flex-wrap: wrap; }
.footer-links a { text-decoration: none; color: rgba(255,255,255,0.5); font-size: 13px; }
.footer-links a:hover { color: rgba(255,255,255,0.8); }
.footer-copy { font-size: 13px; }


/* ── 37. COMPARE SECTION WRAPPER ────────────────────────────── */
.compare { padding: var(--space-20) 40px; background: var(--color-bg-soft); text-align: center; }
.compare h2 { font-size: 36px; font-weight: 700; margin-bottom: 12px; }
.compare > p { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 560px; margin-bottom: 48px; margin-left: auto !important; margin-right: auto !important; }
.feature-name { font-weight: 500; color: #444; }


/* ── 38. AUDIENCE SPLIT SECTION (full) ──────────────────────── */
.audience-split { padding: var(--space-20) 40px; background: var(--color-white); }
.audience-split-inner { max-width: var(--max-width); margin: 0 auto; }
.audience-split-header { text-align: center; margin-bottom: 48px; }
.audience-split-header h2 { font-size: 40px; font-weight: 700; margin-bottom: 12px; }
.audience-split-header > p { font-size: var(--text-lg); color: #666; max-width: 520px; margin-left: auto !important; margin-right: auto !important; line-height: 1.65; }
.audience-card-icon { position: absolute; right: 28px; top: 28px; font-size: 42px; opacity: 0.20; }
.audience-sub { font-size: 15px; color: #555; margin-bottom: 24px; line-height: 1.6; }
.audience-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 700;
  text-decoration: none; transition: var(--transition);
  border: none; cursor: pointer;
}
.audience-cta.corporate { background: var(--color-blue); color: var(--color-white); }
.audience-cta.corporate:hover { background: var(--color-blue-dark); }
.audience-cta.education { background: var(--color-green); color: var(--color-white); }
.audience-cta.education:hover { background: #0a6d57; }


/* ── 40. FINAL PATCH — remaining classes ────────────────────── */

/* Base button (shared border-radius / font) */
.btn {
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  display: inline-block;
  transition: var(--transition);
}

/* Section label (eyebrow text) — alias already in :root block, add here for safety */
.section-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-orange);
  margin-bottom: 12px;
  display: block;
}

/* Split text wrapper */
.split-text { /* layout handled by split-inner grid */ }

/* AI text wrapper */
.ai-text { /* layout handled by ai-inner grid */ }

/* AI feature text */
.ai-feat-text { flex: 1; }
.ai-feat-text h4 { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.ai-feat-text p  { font-size: 13px; line-height: 1.55; }

/* Value text wrapper */
.value-text { flex: 1; }
.value-text h3 { font-size: var(--text-lg); font-weight: 700; margin-bottom: 6px; }
.value-text p  { font-size: 15px; color: var(--color-text-muted); line-height: 1.6; }

/* CTA bottom buttons (alias for cta-btns) */
.cta-bottom-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}


/* ── 39. RESPONSIVE ADDITIONS ───────────────────────────────── */
@media (max-width: 960px) {
  nav { padding: 14px 20px; }
  .nav-links { display: none; } /* Mobile: hide nav links (add hamburger separately) */
  .pain-cards { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-grid.cols-3 { grid-template-columns: 1fr; }
  .split-inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .split-inner.reverse { direction: ltr; }
  .ai-inner { grid-template-columns: 1fr; }
  .ai-cards { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: 1fr; }
  .value-row { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .pricing-cards { grid-template-columns: 1fr; }
  .obj-item { grid-template-columns: 1fr; }
  .logos-segment-label { min-width: unset; width: 100%; }
}
@media (max-width: 640px) {
  .case-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-links { justify-content: center; }
  .cta-bottom-btns, .cta-btns { flex-direction: column; align-items: center; }
}
/* 1. Fix missing --space-5 design token */
:root {
  --space-5: 20px;
}

/* 2. Constrain compare table width and centre it */
.compare-table {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 3. Restore cell padding (broken by missing --space-5) */
.compare-header > div {
  padding: 16px 20px !important;
}
.compare-row > div {
  padding: 14px 20px !important;
}

.row-fluid-wrapper.row-depth-1.row-number-7.dnd_area-row-2-background-layers.dnd_area-row-2-background-color.dnd-section {
    background-image: linear-gradient(192deg, rgba(42, 123, 155, 0.7), rgba(4, 67, 91, 0.95) 80%), url('https://25645903.fs1.hubspotusercontent-eu1.net/hubfs/25645903/Moxis/MMNordic/BGhero.png') !important;
}
.row-fluid-wrapper.row-depth-1.row-number-7.dnd_area-row-2-background-layers.dnd_area-row-2-padding.dnd_area-row-2-background-gradient.dnd_area-row-2-max-width-section-centering.dnd-section.dnd_area-row-2-margin {
background-image: linear-gradient(to bottom, rgba(139, 213, 237, 1), rgba(114, 75, 157, 1)) !important;
}