/**
 * EngageIQ site-wide Figma layout contract V18
 *
 * Authority:
 * - EngageIQ-Codex Figma foundations and page-reference frames
 * - Homepage SOT / Desktop / 1440 x 900, node 54:2
 * - Homepage SOT / Mobile / 390 x 844, node 54:36
 *
 * V18 closes the page-family drift found by the 94-page visual inventory.
 * It protects the approved homepage while bringing exported Elementor pages,
 * legacy articles, resource downloads, tables, forms, and CTAs onto the same
 * grid, type, color, and square-edge system.
 */

:root {
  --ei-v18-content: var(--ei-content-max, 1376px);
  --ei-v18-reading: 820px;
  --ei-v18-editorial: var(--ei-reading-max, 1120px);
  --ei-v18-red: var(--ei-color-primary, #ff3c41);
  --ei-v18-black: var(--ei-color-ink, #000);
  --ei-v18-copy: var(--ei-color-text, #252525);
  --ei-v18-muted: var(--ei-color-muted, #5f5f5f);
  --ei-v18-surface: var(--ei-color-surface, #f1f1f1);
  --ei-v18-border: var(--ei-color-border, #e4e4e4);
  --ei-v18-white: #fff;
}

/* The recovered WordPress loader waits for every legacy asset before it
 * releases. That makes static pages and revision-console iframes look blank or
 * stuck even though the page is already ready. Firebase serves finished HTML,
 * so the loader has no useful work to do in the V18 site. */
body.ei-brand-sot[data-ei-page] > .preloader-wrap {
  display: none !important;
}

/* Static exports cannot run Elementor's popup state correctly. Keep dormant
 * popup templates out of the document flow until a working form trigger owns
 * their visibility. */
body.ei-brand-sot[data-ei-page] > .elementor-location-popup {
  display: none !important;
}

/* Page-local button rules must not draw an extra icon over the canonical
 * three-line menu control. */
body.ei-brand-sot[data-ei-page] .ei-site-header__toggle {
  appearance: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  line-height: normal !important;
}

body.ei-brand-sot[data-ei-page] .ei-site-header__toggle::before,
body.ei-brand-sot[data-ei-page] .ei-site-header__toggle::after {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  transform-origin: center !important;
}

/* Every marketing action uses the square, bordered Figma button primitive. */
body.ei-brand-sot[data-ei-page] :where(
    .elementor-button,
    .btn-primary,
    .btn-secondary,
    .cta-btn
  ) {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Resources use one document title. Card titles remain visual headings but
 * sit below the page H1 in the semantic outline. */
body.ei-brand-sot[data-ei-page="resources"]
  .elementor-widget-theme-post-title
  h3.elementor-heading-title {
  margin: 0;
  color: var(--ei-v18-black);
  font-family: var(--ei-font-display, "Saans", "Inter Tight", Arial, sans-serif) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

body.ei-brand-sot[data-ei-page="resources"]
  .elementor-widget-theme-post-title
  h3.elementor-heading-title
  a {
  color: inherit;
  text-decoration: none;
}

/* Pricing has one visible page title and a separate technical eyebrow. */
body.ei-brand-sot[data-ei-page="pricing"] .ei-pricing-eyebrow {
  margin: 0;
  color: var(--ei-v18-red);
  font-family: var(--ei-font-label, "IBM Plex Mono", ui-monospace, monospace) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.4 !important;
  text-transform: uppercase;
}

/* Legacy WordPress articles use the same protected paper and reading measure
 * as the current article family. */
body.ei-brand-sot[data-ei-template="legacy-article"] {
  background: var(--ei-v18-surface);
}

body.ei-brand-sot[data-ei-template="legacy-article"]
  .elementor-element-934fc0d {
  padding: 148px 16px 28px !important;
  background: var(--ei-v18-surface) !important;
}

body.ei-brand-sot[data-ei-template="legacy-article"]
  .elementor-element-934fc0d
  > .e-con-inner {
  width: min(calc(100% - 32px), var(--ei-v18-reading)) !important;
  max-width: var(--ei-v18-reading) !important;
  margin-inline: auto !important;
}

body.ei-brand-sot[data-ei-template="legacy-article"]
  .elementor-element-a0e267c {
  padding: 0 16px 72px !important;
  background: var(--ei-v18-surface) !important;
}

body.ei-brand-sot[data-ei-template="legacy-article"]
  .elementor-element-a0e267c
  > .e-con-inner {
  width: min(calc(100% - 32px), var(--ei-v18-reading)) !important;
  max-width: var(--ei-v18-reading) !important;
  margin-inline: auto !important;
  padding: 64px 72px 72px !important;
  display: block !important;
  background: var(--ei-v18-white) !important;
}

body.ei-brand-sot[data-ei-template="legacy-article"]
  .elementor-element-a0e267c
  h1 {
  margin: 0 0 32px !important;
  color: var(--ei-v18-black) !important;
  font-size: clamp(56px, 5.25vw, 76px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 0.98 !important;
}

body.ei-brand-sot[data-ei-template="legacy-article"]
  .elementor-element-a0e267c
  h2 {
  margin: 48px 0 16px !important;
  color: var(--ei-v18-black) !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.08 !important;
}

body.ei-brand-sot[data-ei-template="legacy-article"]
  .elementor-element-a0e267c
  :where(p, li) {
  color: var(--ei-v18-copy) !important;
  font-family: var(--ei-font-body, "Inter Tight", Arial, sans-serif) !important;
  font-size: 18px !important;
  line-height: 1.62 !important;
}

body.ei-brand-sot[data-ei-template="legacy-article"]
  .elementor-element-a0e267c
  a {
  color: var(--ei-v18-red);
}

body.ei-brand-sot[data-ei-template="legacy-article"]
  .elementor-element-90f735f
  .elementor-button {
  min-height: 56px;
  padding: 16px 24px !important;
  border: 1px solid var(--ei-v18-black) !important;
  background: var(--ei-v18-black) !important;
  color: var(--ei-v18-white) !important;
}

body.ei-brand-sot[data-ei-template="legacy-article"]
  .elementor-element-9bc6c6e
  h3.elementor-heading-title {
  margin: 0;
  color: var(--ei-v18-black);
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* Older downloadable resources had a blue gradient and rounded cards. Bind
 * them to the red, black, white, and square-edge system without changing copy. */
body.ei-brand-sot[data-ei-template="resource-download"] {
  color: var(--ei-v18-copy) !important;
  background: var(--ei-v18-white) !important;
  font-family: var(--ei-font-body, "Inter Tight", Arial, sans-serif) !important;
}

body.ei-brand-sot[data-ei-template="resource-download"] > .hero {
  padding: 168px 24px 88px !important;
  background: var(--ei-v18-red) !important;
  background-image: none !important;
  color: var(--ei-v18-white) !important;
}

body.ei-brand-sot[data-ei-template="resource-download"] > .hero h1 {
  max-width: 900px !important;
  margin: 0 auto 24px !important;
  color: var(--ei-v18-white) !important;
  font-family: var(--ei-font-display, "Saans", "Inter Tight", Arial, sans-serif) !important;
  font-size: clamp(56px, 6vw, 84px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
  line-height: 0.96 !important;
}

body.ei-brand-sot[data-ei-template="resource-download"] > .hero p {
  max-width: 720px !important;
  margin: 0 auto 32px !important;
  color: var(--ei-v18-white) !important;
  font-size: 20px !important;
  line-height: 1.45 !important;
  opacity: 1 !important;
}

body.ei-brand-sot[data-ei-template="resource-download"] > .hero .cta-btn {
  padding: 16px 24px !important;
  border: 1px solid var(--ei-v18-black) !important;
  background: var(--ei-v18-black) !important;
  color: var(--ei-v18-white) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

body.ei-brand-sot[data-ei-template="resource-download"] > .hero .secondary-btn {
  padding: 16px 24px !important;
  border: 1px solid var(--ei-v18-white) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ei-v18-white) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

body.ei-brand-sot[data-ei-template="resource-download"] > .content-wrapper {
  width: min(calc(100% - 32px), var(--ei-v18-reading)) !important;
  max-width: var(--ei-v18-reading) !important;
  margin: 72px auto !important;
  padding: 0 !important;
}

body.ei-brand-sot[data-ei-template="resource-download"]
  > .content-wrapper
  > h2:first-child {
  margin: 0 0 32px !important;
  color: var(--ei-v18-black) !important;
  font-size: clamp(42px, 5vw, 64px) !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
}

body.ei-brand-sot[data-ei-template="resource-download"]
  .content-wrapper
  :where(h2, h3) {
  color: var(--ei-v18-black) !important;
  font-family: var(--ei-font-display, "Saans", "Inter Tight", Arial, sans-serif) !important;
  font-weight: 600 !important;
}

body.ei-brand-sot[data-ei-template="resource-download"]
  .content-wrapper
  h2:not(:first-child) {
  margin: 48px 0 16px !important;
  font-size: 32px !important;
  line-height: 1.08 !important;
}

body.ei-brand-sot[data-ei-template="resource-download"]
  .content-wrapper
  :where(p, li) {
  color: var(--ei-v18-copy) !important;
  font-size: 18px !important;
  line-height: 1.62 !important;
}

body.ei-brand-sot[data-ei-template="resource-download"]
  .content-wrapper
  a {
  color: var(--ei-v18-red) !important;
}

body.ei-brand-sot[data-ei-template="resource-download"]
  :where(.case-study, .form-block) {
  padding: 28px !important;
  border: 1px solid var(--ei-v18-border) !important;
  border-left: 4px solid var(--ei-v18-red) !important;
  border-radius: 0 !important;
  background: var(--ei-v18-white) !important;
  box-shadow: none !important;
}

body.ei-brand-sot[data-ei-template="resource-download"]
  .form-block
  :where(input, select, textarea) {
  min-height: 52px;
  border: 1px solid var(--ei-v18-black) !important;
  border-radius: 0 !important;
  background: var(--ei-v18-white) !important;
  color: var(--ei-v18-black) !important;
  font-family: var(--ei-font-body, "Inter Tight", Arial, sans-serif) !important;
}

body.ei-brand-sot[data-ei-template="resource-download"]
  .form-block
  button {
  min-height: 56px;
  border: 1px solid var(--ei-v18-black) !important;
  border-radius: 0 !important;
  background: var(--ei-v18-black) !important;
  color: var(--ei-v18-white) !important;
  box-shadow: none !important;
  font-family: var(--ei-font-body, "Inter Tight", Arial, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

body.ei-brand-sot[data-ei-template="resource-download"]
  .checklist
  li::before {
  color: var(--ei-v18-red) !important;
}

body.ei-brand-sot[data-ei-template="resource-download"]
  .comparison-table {
  width: 100%;
  border: 1px solid var(--ei-v18-border);
}

body.ei-brand-sot[data-ei-template="resource-download"]
  .comparison-table
  th {
  background: var(--ei-v18-black) !important;
  color: var(--ei-v18-white) !important;
}

/* Contact select uses the native control arrow. The malformed recovered SVG
 * otherwise renders as a stray glyph beside the label. */
body.ei-brand-sot[data-ei-page="contacts"] .select-caret-down-wrapper {
  display: none !important;
}

body.ei-brand-sot[data-ei-page="contacts"]
  .elementor-field-type-select
  select {
  appearance: auto !important;
  padding-right: 16px !important;
}

/* Comparison tables remain fully available on small screens instead of
 * being clipped by page-local overflow rules. */
body.ei-brand-sot.ei-ai-page-v2 .wrap {
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 1px solid var(--ei-v18-border) !important;
  -webkit-overflow-scrolling: touch;
}

body.ei-brand-sot.ei-ai-page-v2 table.cmp {
  width: 100% !important;
  min-width: 720px;
  table-layout: fixed;
}

@media (min-width: 768px) and (max-width: 1160px) {
  body.ei-brand-sot[data-ei-page]:not([data-ei-family="home"])
    .elementor:is(
      [data-elementor-type="wp-page"],
      [data-elementor-type="page"],
      [data-elementor-type="single-post"]
    )
    > .e-con.e-parent
    > .e-con-inner {
    width: min(calc(100% - 64px), var(--ei-v18-content)) !important;
    max-width: var(--ei-v18-content) !important;
    margin-inline: auto !important;
  }

  body.ei-brand-sot[data-ei-layout="editorial"]
    .elementor:is(
      [data-elementor-type="wp-page"],
      [data-elementor-type="page"]
    )
    > .e-con.e-parent
    > .e-con-inner {
    width: min(calc(100% - 64px), var(--ei-v18-editorial)) !important;
    max-width: var(--ei-v18-editorial) !important;
  }
}

@media (max-width: 767px) {
  /* The Figma mobile frame uses a 16px outside gutter. Recovered Elementor
   * values retained an extra 32px margin on many pages. */
  body.ei-brand-sot[data-ei-page]:not([data-ei-family="home"])
    .elementor:is(
      [data-elementor-type="wp-page"],
      [data-elementor-type="page"],
      [data-elementor-type="single-post"]
    )
    > .e-con.e-parent
    > .e-con-inner {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin-inline: auto !important;
  }

  body.ei-brand-sot[data-ei-page]:not([data-ei-family="home"])
    .elementor:is(
      [data-elementor-type="wp-page"],
      [data-elementor-type="page"],
      [data-elementor-type="single-post"]
    )
    > .e-con.e-parent
    h1.elementor-heading-title {
    max-width: 100%;
    font-size: clamp(40px, 12vw, 48px) !important;
    letter-spacing: -0.035em !important;
    line-height: 0.98 !important;
    overflow-wrap: break-word;
  }

  body.ei-brand-sot[data-ei-template="legacy-article"]
    .elementor-element-934fc0d {
    padding: 112px 16px 20px !important;
  }

  body.ei-brand-sot[data-ei-template="legacy-article"]
    .elementor-element-934fc0d
    > .e-con-inner {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
  }

  body.ei-brand-sot[data-ei-template="legacy-article"]
    .elementor-element-a0e267c {
    padding: 0 16px 48px !important;
  }

  body.ei-brand-sot[data-ei-template="legacy-article"]
    .elementor-element-a0e267c
    > .e-con-inner {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    padding: 40px 28px 48px !important;
  }

  body.ei-brand-sot[data-ei-template="legacy-article"]
    .elementor-element-a0e267c
    h1 {
    font-size: 44px !important;
    overflow-wrap: break-word;
  }

  body.ei-brand-sot[data-ei-template="legacy-article"]
    .elementor-element-a0e267c
    h2 {
    margin-top: 40px !important;
    font-size: 28px !important;
  }

  body.ei-brand-sot[data-ei-template="resource-download"] > .hero {
    padding: 128px 16px 64px !important;
  }

  body.ei-brand-sot[data-ei-template="resource-download"] > .hero h1 {
    font-size: clamp(42px, 12vw, 52px) !important;
  }

  body.ei-brand-sot[data-ei-template="resource-download"]
    > .hero
    .secondary-btn {
    display: block !important;
    width: max-content;
    margin: 16px auto 0 !important;
  }

  body.ei-brand-sot[data-ei-template="resource-download"]
    > .content-wrapper {
    margin: 56px auto !important;
  }

  body.ei-brand-sot[data-ei-template="resource-download"]
    > .content-wrapper
    > h2:first-child {
    font-size: 42px !important;
  }

  body.ei-brand-sot[data-ei-template="resource-download"]
    :where(.case-study, .form-block) {
    padding: 24px 20px !important;
  }

  body.ei-brand-sot.ei-ai-page-v2 table.cmp th,
  body.ei-brand-sot.ei-ai-page-v2 table.cmp td {
    padding: 16px !important;
    font-size: 14px !important;
  }
}