@charset "UTF-8";
/**
 * CAI — main stylesheet
 *
 * Loaded on the front end after the Hello Elementor parent styles.
 * Most visual styling should be driven by Elementor's Global Settings (kit)
 * and/or Automatic.css tokens. Use this file for:
 *   - global overrides that don't belong in the Elementor kit
 *   - custom widget styles (e.g. .cai-example below)
 *   - utility tweaks the design system needs everywhere
 */
/* -------------------------------------------------------------------------
 * Design tokens
 * Pulled from the CAI Design System Figma (file B4RZVAE1e2agITpTkvbHxG) on
 * 2026-07-09. UX lead confirmed these values are correct even though most
 * aren't wired to Figma variables yet — see cai-child/README.md for open
 * questions flagged during extraction (typeface, a few near-duplicate
 * near-black colors, undefined tab/disabled states). Re-sync when the Figma
 * file settles post-client-meeting.
 * If Automatic.css becomes the system of record, prefer its variables over
 * these; kept here as the fallback token layer either way.
 * ---------------------------------------------------------------------- */
:root {
  --root-font-size: 16px;
  /* =====================================================================
  * Color tokens — mirror of the Elementor kit Variables (the single
  * source of truth; see elementor-kit/variables.json + KIT.md). Each
  * token consumes the kit's :root custom property (emitted in the kit
  * CSS on every page) with a hard fallback for contexts where the kit
  * CSS isn't loaded. Renamed 2026-07-19 to the consolidated palette
  * measured from the new layouts (Figma node 37677-1847); values here
  * must track variables.json, not the other way around.
  * =================================================================== */
  --cai-blue-brand: #0085ca;
  --cai-blue-dark: #003e51;
  --cai-blue-mid: #0067a0;
  --cai-blue-light: #7bafd4;
  --cai-purple-dark: #2f2951;
  --cai-purple-mid: #6a6dcd;
  --cai-purple-light: #a7a4e0;
  --cai-gray-dark: #25282a;
  --cai-gray-mid: #7e7e82;
  --cai-gray-light: #d9d9d6; /* #B5B6B3 */
  /* Working palette (what the new layouts actually use) */
  --cai-color-navy: var(--navy, #1f3144); /* headings, dark bands */
  --cai-color-steel: var(--steel, #3883bf); /* headline accent, stat cards */
  --cai-color-action: var(--action, #6A6BD4); /* buttons, links, icons — brand purple (contrast-valid) */
  /* Interaction states for the action color. Buttons / pills / arrows use
     these so a future palette change only touches these three lines.
     hover  = brand dark purple; active = a fixed step darker still, derived
     from hover so it tracks any change automatically. Text links don't use
     these (their hover just fades — see button.scss .cai-btn-link). */
  --cai-color-action-hover: var(--cai-color-purple-dark, #2f2951);
  --cai-color-action-active: color-mix(in srgb, var(--cai-color-action-hover) 85%, #000);
  --cai-color-action-soft: var(
      --action-soft,
      #d3e7ff
  ); /* secondary button / chip bg */
  --cai-color-carbon: var(--carbon, #191a18); /* near-black bands, footer */
  --cai-color-slate: var(--slate, #494a46); /* dark card surfaces */
  --cai-color-ink: var(--ink, #141414); /* body text */
  --cai-color-body-muted: var(--body-muted, #606d7b); /* secondary text */
  --cai-color-smoke: var(--smoke, #f7f7f7); /* tinted sections */
  --cai-color-white: var(--white, #ffffff);
  --cai-color-border: var(--border, #dee2e6);
  /* Brand reserve (client brand guidelines; largely unused by the current
  layouts — kept for future use and the palette reconciliation with
  Creative). Kit labels carry the cai- prefix. */
  --cai-color-blue-brand: var(--cai-blue-brand, #0085ca);
  --cai-color-blue-dark: var(--cai-blue-dark, #003e51);
  --cai-color-blue-mid: var(--cai-blue-mid, #0067a0);
  --cai-color-blue-light: var(--cai-blue-light, #7bafd4);
  --cai-color-purple-dark: var(--cai-purple-dark, #2f2951);
  --cai-color-purple-mid: var(--cai-purple-mid, #6a6dcd);
  --cai-color-purple-light: var(--cai-purple-light, #a7a4e0);
  --cai-color-gray-dark: var(--cai-gray-dark, #25282a);
  --cai-color-gray-mid: var(--cai-gray-mid, #7e7e82);
  --cai-color-gray-light: var(--cai-gray-light, #d9d9d6);
  /* Ink transparency scale (base = ink #141414) */
  --cai-color-ink-80: rgba(20, 20, 20, 0.8);
  --cai-color-ink-64: rgba(20, 20, 20, 0.64);
  --cai-color-ink-56: rgba(20, 20, 20, 0.56);
  --cai-color-ink-40: rgba(20, 20, 20, 0.4);
  --cai-color-ink-24: rgba(20, 20, 20, 0.24);
  --cai-color-ink-16: rgba(20, 20, 20, 0.16);
  --cai-color-ink-8: rgba(20, 20, 20, 0.08);
  --cai-color-ink-4: rgba(20, 20, 20, 0.04);
  --cai-color-border-card: #b5b6b3;
  /* Typography — Arial confirmed with UX lead (2026-07-09) per Creative
  team direction. Any Inter/Figtree references still in the Figma file
  are stale leftovers and should be ignored. */
  --cai-font-base: Arial, Helvetica, sans-serif;
  /* ==========================================================================
     FLUID TYPOGRAPHY TOKENS (Scaled from 375px mobile to 1440px desktop)
     ========================================================================== */
  /* H1: 44px mobile → 85px desktop */
  --cai-fs-h1: clamp(44px, calc(29.56px + 3.85vw), 85px);
  --cai-lh-h1: 1.05;
  /* H2: 36px mobile → 78px desktop */
  --cai-fs-h2: clamp(36px, calc(28.96px + 1.88vw), 78px);
  --cai-lh-h2: 1.1;
  --cai-ls-h2: -2.34px;
  --cai-fs-h2-internal: clamp(36px, calc(28.96px + 1.88vw), 56px);
  --cai-lh-h2-internal: 1.1;
  --cai-ls-h2-internal: -2.34px;
  /* H3: 32px mobile → 48px desktop */
  --cai-fs-h3: clamp(32px, calc(26.37px + 1.5vw), 48px);
  --cai-lh-h3: 1.2;
  /* H4: 24px mobile → 32px desktop */
  --cai-fs-h4: clamp(24px, calc(21.18px + 0.75vw), 32px);
  --cai-lh-h4: 1.25;
  /* H5: 20px mobile → 24px desktop */
  --cai-fs-h5: clamp(20px, calc(18.59px + 0.38vw), 24px);
  --cai-lh-h5: 1.2;
  /* Lead / Lede Paragraph: 18px mobile → 22px desktop */
  --cai-fs-lead: clamp(18px, calc(16.59px + 0.38vw), 22px);
  --cai-lh-lead: 1.4;
  /* Eyebrow / Sub-title: 13px mobile → 15px desktop */
  --cai-fs-eyebrow: clamp(15px, calc(15.29px + 0.19vw), 18px);
  --cai-lh-eyebrow: 1.5;
  /* Body 1: 16px mobile → 18px desktop */
  --cai-fs-body-1: clamp(16px, calc(15.29px + 0.19vw), 18px);
  --cai-lh-body-1: 1.35;
  /* Body 2: 15px mobile → 16px desktop */
  --cai-fs-body-2: clamp(15px, calc(14.65px + 0.094vw), 16px);
  --cai-lh-body-2: 1.5;
  /* Body 2 Small: 13px mobile → 14px desktop */
  --cai-fs-body-2-small: clamp(13px, calc(12.65px + 0.094vw), 14px);
  --cai-lh-body-2-small: 1.55;
  /* CTA Link: 15px mobile → 16px desktop */
  --cai-fs-cta-link: clamp(15px, calc(14.65px + 0.094vw), 16px);
  --cai-lh-cta-link: 1.5;
  --cai-fs-subtitle: clamp(20px, calc(18.59px + 0.38vw), 24px);
  --cai-lh-subtitle: 1.167;
  /* Radius */
  --cai-radius-card: 8px;
  --cai-radius-input: 4px;
  --cai-radius-button: 4px;
  /* Nearly-square, per the 2026-07-13 wires update — tags (card badges)
  moved off the full pill shape. Tab/filter pills are unaffected and
  still use a 999px pill radius directly in their own widget CSS. */
  --cai-radius-tag: 4px;
  /* Shadow (elevation) */
  --cai-shadow-1:
      0 4px 6px 0 rgba(20, 20, 20, 0.2), 0 0 1px 0 rgba(20, 20, 20, 0.32);
  --cai-shadow-2:
      0 2px 2px 0 rgba(20, 20, 20, 0.06), 0 0 1px 0 rgba(20, 20, 20, 0.08);
  /* Bootstrap 4 Core Spacing Scale per Figma */
  --cai-spacer-0: 0;
  --cai-spacer-1: 0.25rem; /* 4px */
  --cai-spacer-2: 0.5rem; /* 8px */
  --cai-spacer-3: 1rem; /* 16px */
  --cai-spacer-4: 1.5rem; /* 24px */
  --cai-spacer-5: 3rem; /* 48px */
  /* Layout Max-Width Container — 1320px per the designed (hi-fi) Home page,
     confirmed by Chris 2026-07-14 (content width, padding not included). */
  --cai-container-max-width: 1320px;
}

/* -------------------------------------------------------------------------
 * Base reset — CAI owns this layer
 * -------------------------------------------------------------------------
 * Until launch the site runs alongside Automatic.css (ACSS) and remnants of
 * the client's old Bricks build. Both ship element-level resets that "bleed
 * through" onto our markup. Rather than fight those on a case-by-case basis,
 * this block re-asserts the base-element behavior ourselves so the page
 * renders IDENTICALLY whether ACSS/Bricks are loaded OR removed.
 *
 * How this stays authoritative:
 *   - main.css enqueues at wp_enqueue_scripts priority 20; ACSS's
 *     `automaticcss-core` enqueues at priority 10 — so this file already wins
 *     equal-specificity, source-order ties against ACSS.
 *   - The rules below mirror ONLY the ACSS baselines the current layouts were
 *     actually built against (verified against uploads/automatic-css/
 *     automatic.css). We intentionally do NOT add new visual opinions here —
 *     this is preservation, not a redesign. When ACSS/Bricks are pulled, these
 *     values persist unchanged and nothing shifts.
 * ---------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* MUST stay wired to --root-font-size, not a literal.
     ACSS ships `html{font-size:var(--root-font-size)!important}`. Our :root
     defines --root-font-size:16px and loads last (theme priority 20 vs ACSS's
     10), so ACSS's !important rule resolves to 16px and wins — which is why
     the site renders at a 16px root today. This rule previously hard-coded
     18px, so pulling ACSS would have silently switched the root to 18px and
     inflated every rem value by 12.5% — including all five --cai-spacer-*
     tokens, whose comments document 1rem = 16px. Reading the token keeps the
     computed value at 16px with OR without ACSS. Verified in-browser by
     disabling the ACSS stylesheets (2026-09-01). */
  font-size: var(--root-font-size, 16px);
  scroll-behavior: smooth;
}

body {
  min-block-size: 100vh;
  font-family: var(--cai-font-base, Arial, Helvetica, sans-serif);
  color: var(--cai-color-ink, #141414);
  /* ACSS sets this on body via --text-text-wrap and it inherits everywhere;
     without it every block reverts to `wrap`. Preservation, not a new
     opinion — see the blockquote rule below, which mirrors the same value. */
  text-wrap: pretty;
}
body p {
  font-size: var(--root-font-size, 16px);
}

/* Zero-margin baseline the layouts assume (Elementor/design controls own the
   spacing). ACSS imposed this via a zero-specificity :where() rule; we keep it
   at zero specificity too, so any real selector — and every Elementor style —
   still overrides it. Element list mirrors ACSS's exactly, so behavior is
   unchanged. */
:where(p, h1, h2, h3, h4, h5, h6, ul, ol, li) {
  margin-block: 0;
  font-weight: 400;
}

/* ACSS gives every heading `max-width: var(--hN-max-width)`, all six of which
   are configured to 100%. Without it headings compute to max-width:none, so a
   long unbroken string can overflow its container. Mirrored here so the
   behaviour survives ACSS removal. */
h1, h2, h3, h4, h5, h6 {
  max-width: 100%;
}

/* ACSS sets `p, li { line-height: calc(6px + 2ex) }`. Kept verbatim so list and
   paragraph leading don't jump when ACSS is pulled. */
p, li {
  line-height: calc(6px + 2ex);
}

p, h1, h2, h3, h4, h5, h6 {
  width: 100%;
}

h2,
.cai-h2,
.cai-h2-internal {
  font-size: clamp(36px, 28.96px + 1.88vw, 56px);
  line-height: 70px;
  letter-spacing: var(--cai-ls-h2-internal, -2.34px);
  color: var(--cai-color-navy, #1f3144);
  margin-bottom: 16px;
}

[data-elementor-post-type=policies] main h2,
.parent-pageid-15218 main h2,
.parent-pageid-16232 main h2,
.parent-pageid-16233 main h2,
.parent-pageid-16245 main h2 {
  font-size: 35px;
  line-height: var(--cai-lh-h3, 1.2);
  letter-spacing: -0.96px;
  color: var(--cai-color-navy, #1f3144);
  margin-bottom: 16px !important;
}
[data-elementor-post-type=policies] main h3,
.parent-pageid-15218 main h3,
.parent-pageid-16232 main h3,
.parent-pageid-16233 main h3,
.parent-pageid-16245 main h3 {
  font-size: 28px;
  line-height: var(--cai-lh-h5, 1.2);
  letter-spacing: -0.96px;
  color: var(--cai-color-navy, #1f3144);
  margin-bottom: 16px !important;
}
[data-elementor-post-type=policies] main a:not(.cai-btn),
.parent-pageid-15218 main a:not(.cai-btn),
.parent-pageid-16232 main a:not(.cai-btn),
.parent-pageid-16233 main a:not(.cai-btn),
.parent-pageid-16245 main a:not(.cai-btn) {
  color: var(--cai-color-action, #6A6BD4) !important;
  text-decoration: none !important;
}
[data-elementor-post-type=policies] main a:not(.cai-btn):hover,
.parent-pageid-15218 main a:not(.cai-btn):hover,
.parent-pageid-16232 main a:not(.cai-btn):hover,
.parent-pageid-16233 main a:not(.cai-btn):hover,
.parent-pageid-16245 main a:not(.cai-btn):hover {
  color: var(--cai-color-action-hover, #2f2951) !important;
  text-decoration: underline !important;
}

h3,
.cai-h3 {
  font-size: var(--cai-fs-h3, 48px);
  line-height: var(--cai-lh-h3, 1.2);
  letter-spacing: -0.96px;
  color: var(--cai-color-navy, #1f3144);
  margin-bottom: 16px;
}

ul.cai-bullets,
ol.cai-bullets {
  padding-inline-start: 2.5rem;
  margin-bottom: 20px;
}
ul.cai-bullets li,
ol.cai-bullets li {
  font-size: var(--cai-fs-body-1, 18px);
}

ul.cai-bullets {
  list-style: disc;
}

.elementor .cai-body-1 {
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 18px;
  color: var(--ink);
  line-height: 23px;
  margin-block-end: 20px;
}

.elementor .cai-body-2 {
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  color: var(--ink);
  line-height: 24px;
}

.elementor .cai-body-4 {
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  color: var(--cai-color-body-muted, #606d7b);
  line-height: 23px;
}

.elementor .cai-sub-h1-light {
  width: 100%;
  max-width: 720px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 56px;
  color: var(--white);
  letter-spacing: -0.96px;
  line-height: 60px;
}

/* Form controls inherit the typographic context (ACSS did this via
   `font: inherit`; written longhand per project rule — never the font
   shorthand). */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

blockquote {
  text-wrap: pretty;
}

[type=button]:focus,
[type=button]:hover,
[type=submit]:focus,
[type=submit]:hover,
button:focus,
button:hover {
  background-color: var(--cai-color-action-hover, #2f2951);
  color: #fff;
  text-decoration: none;
}

a {
  color: var(--cai-color-action, #6A6BD4);
  text-decoration: none;
}
a:hover {
  color: var(--cai-color-action-hover, #2f2951);
  text-decoration: underline;
}

/* Custom Hero Section Layout Layout Constraints */
.cai-hero-landing-parent {
  overflow: hidden !important;
}

/* -------------------------------------------------------------------------
 * Buttons — first pass from Figma "Buttons" page (node 11:41).
 * Figma only differentiates the Hover state via opacity; Disabled and
 * Pressed are not yet visually distinct in the design file, so they're
 * left unstyled here rather than guessed. Reskin expected once the UX
 * lead finalizes states — this is intentionally a v1.
 * ---------------------------------------------------------------------- */
.cai-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 11px 17px;
  border-radius: var(--cai-radius-button);
  border: 1px solid transparent;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

/* bg/border are one-off values not present on the Colors page palette —
   kept distinct from --cai-color-ink / --cai-color-ink rather than
   silently merged, since they may or may not be intentional variants. */
.cai-btn-primary {
  background: var(--cai-color-carbon, #191a18);
  border-color: var(--cai-color-carbon, #191a18);
  color: var(--cai-color-white);
}

.cai-btn-secondary {
  background: var(--cai-color-action-soft, #d3e7ff);
  border-color: var(--cai-color-action-soft, #d3e7ff);
  color: var(--cai-color-ink);
}

.cai-btn-secondary-light {
  background: var(--cai-color-white, #ffffff);
  border-color: var(--cai-color-action, #d3e7ff);
  color: var(--cai-color-ink);
}

.cai-btn-tertiary {
  background: var(--cai-color-action);
  border-color: var(--cai-color-action);
  color: var(--cai-color-white);
}

.cai-btn:disabled,
.cai-btn-disabled {
  cursor: not-allowed;
}

/* -------------------------------------------------------------------------
 * Tabs — first pass from Figma "Tabs" page (node 33553:642).
 * Only an unselected pill state was visible in the pull; no active/selected
 * style has been designed yet, so .is-active is left as a hook, not styled.
 * ---------------------------------------------------------------------- */
.cai-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cai-tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border: 1px solid var(--cai-color-border);
  border-radius: 999px;
  background: var(--cai-color-white);
  color: var(--cai-color-ink);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
}

/* -------------------------------------------------------------------------
 * Example widget styles (safe to delete with the example widget)
 * ---------------------------------------------------------------------- */
.cai-example {
  padding: 1.5rem;
  border: 1px dashed currentColor;
  border-radius: 8px;
}

.cai-example__heading {
  margin: 0 0 0.5rem;
}

.cai-example__body {
  margin: 0;
}

/* -------------------------------------------------------------------------
 * Clickable card (stretched link) — "Pattern C"
 * Makes an entire card clickable via one primary link while keeping nested
 * links (e.g. a category chip) independently clickable. Applied through
 * Elementor's "CSS Classes" field, not baked into any widget markup:
 *   - .cai-card-clickable  → the card CONTAINER (establishes the positioning
 *                            context the stretched link is measured against).
 *   - .cai-card-stretch    → the PRIMARY link only (the CAI Button <a> or the
 *                            title link); its ::after overlay covers the whole
 *                            card so a click anywhere follows this link.
 *   - .cai-card-above      → any element that must stay clickable ON TOP of the
 *                            stretch overlay (e.g. the category chip link).
 * ---------------------------------------------------------------------- */
.cai-card-clickable {
  position: relative !important;
}

.cai-proof-card-body {
  position: static !important;
}

.cai-card-stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Stretched link on a heading widget: the class sits on the <h3>, so the
   overlay is generated from the <a> inside it. */
.cai-card-stretch-heading a {
  color: inherit;
  text-decoration: none;
}

.cai-card-stretch-heading a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cai-card-clickable:hover .cai-card-stretch-heading a {
  text-decoration: underline;
}

/* Pointer across the whole card (images can carry their own cursor). Scoped
   to cards that actually contain a stretched heading link. */
.cai-card-clickable:has(.cai-card-stretch-heading),
.cai-card-clickable:has(.cai-card-stretch-heading) * {
  cursor: pointer;
}

/* 2. Neutralize positioning & overflow on Elementor wrapper divs */
.cai-card-clickable.cai-industry-card .e-con,
.cai-card-nested-stretch,
.cai-card-nested-stretch .elementor-widget-container,
.cai-card-nested-stretch .cai-btn-wrap {
  position: static !important;
  overflow: visible !important;
}

.cai-card-clickable.cai-industry-card .e-con.cai-industry-card-image {
  overflow: hidden !important;
}

/* 3. Strip position: relative off the <a> tag so it stops trapping ::after */
.cai-card-nested-stretch a.cai-btn {
  position: static !important;
}

/* 4. Force the ::after overlay onto the <a> tag with max priority */
.cai-card-nested-stretch a.cai-btn::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  cursor: pointer !important;
}

.cai-card-clickable:hover .cai-card-nested-stretch,
.cai-card-clickable:hover .cai-card-nested-stretch a.cai-btn {
  color: var(--cai-color-action, #6A6BD4);
}
.cai-card-clickable:hover .cai-card-nested-stretch.cai-card-hover-light,
.cai-card-clickable:hover .cai-card-nested-stretch a.cai-btn.cai-card-hover-light {
  background-color: #fafafa;
  box-shadow: 0 0 24px 2px rgba(0, 0, 0, 0.1);
}

.cai-card-clickable:hover.cai-card-hover-light,
.cai-card-clickable:hover a.cai-btn.cai-card-hover-light {
  background-color: #fafafa;
  box-shadow: 0 0 24px 2px rgba(0, 0, 0, 0.1);
}

.cai-card-above {
  position: relative;
  z-index: 2;
}

.cai-blockquote-citation-source:before {
  content: "— ";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.cai-blockquote-image.breakout-right {
  margin-right: calc(50% - 50vw);
}

/* Parent wrapper positioning */
.floating-field-group {
  position: relative !important;
}

/* Label initial state (centered inside the input) */
.floating-field-group .e-con-inner > .e-atomic-label,
.floating-field-group label {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  transition: all 0.2s ease-in-out;
  pointer-events: none;
  background-color: #ffffff;
  padding: 0 4px;
  z-index: 2;
}

/* Animate back up to top-left on focus or when input is filled */
.floating-field-group:focus-within label,
.floating-field-group:has(input:not(:placeholder-shown)) label,
.floating-field-group:has(textarea:not(:placeholder-shown)) label {
  top: -15px;
  left: 3px;
  transform: translateY(-50%);
  transform-origin: left center;
}

/* 1. Set base resting position for Textarea labels */
.floating-field-group:has(textarea) label {
  top: 9px; /* Adjust to match your textarea's top padding */
  transform: translateY(0); /* Override vertical centering */
  transition: all 0.2s ease-in-out;
}

/* 2. Animate up on focus OR when filled for Textareas */
.floating-field-group:has(textarea):focus-within label,
.floating-field-group:has(textarea:not(:placeholder-shown)) label {
  top: -15px; /* Floats up over the top border */
  left: 3px;
  transform-origin: left center;
}

.elementor-element.cai-general-card-parent-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.elementor-element.cai-general-card-parent-wrapper > .elementor-element.cai-industry-card {
  width: auto;
}
@media (max-width: 767px) {
  .elementor-element.cai-general-card-parent-wrapper > .elementor-element.cai-industry-card {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element.cai-general-card-parent-wrapper > .elementor-element.cai-industry-card {
    flex: 0 0 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
  }
  .elementor-element.cai-general-card-parent-wrapper > .elementor-element.cai-industry-card:nth-last-child(1 of .cai-industry-card):nth-child(odd of .cai-industry-card) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    flex-direction: row;
    align-items: center;
  }
  .elementor-element.cai-general-card-parent-wrapper > .elementor-element.cai-industry-card:nth-last-child(1 of .cai-industry-card):nth-child(odd of .cai-industry-card) .cai-general-image-container {
    width: 48%;
  }
}
@media (min-width: 1025px) {
  .elementor-element.cai-general-card-parent-wrapper > .elementor-element.cai-industry-card {
    flex: 0 0 calc((100% - 48px) / 3) !important;
    max-width: calc((100% - 48px) / 3) !important;
  }
  .elementor-element.cai-general-card-parent-wrapper > .elementor-element.cai-industry-card:first-of-type:nth-last-of-type(4), .elementor-element.cai-general-card-parent-wrapper > .elementor-element.cai-industry-card:first-of-type:nth-last-of-type(4) ~ .cai-industry-card {
    flex: 0 0 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
  }
  .elementor-element.cai-general-card-parent-wrapper > .elementor-element.cai-industry-card:first-of-type:nth-last-of-type(5) ~ .cai-industry-card:nth-of-type(n + 4) {
    flex: 0 0 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
  }
}

.mig-cta-slim {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 48px;
  padding: 40px 0 48px;
}
.mig-cta-slim h3 {
  grid-column: 1/2;
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 36px;
  color: var(--navy);
  letter-spacing: -0.34px;
  line-height: 44px;
  margin-block-end: 16px;
}
.mig-cta-slim p {
  grid-column: 1/2;
  margin: 0;
  width: auto;
  max-width: 1320px;
  display: inline-block;
  font-size: 24px;
  color: var(--ink);
}
.mig-cta-slim .wp-block-buttons {
  grid-column: 2/3;
  grid-row: 1/3;
  align-self: center;
}
.mig-cta-slim .wp-block-buttons .wp-block-button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mig-cta-slim .wp-block-buttons .wp-block-button a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 11px 17px;
  border-radius: var(--cai-radius-button);
  border: 1px solid rgba(255, 255, 255, 0);
  border-color: var(--cai-color-action-soft, #d3e7ff);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.15s ease;
  background: var(--cai-color-action-soft, #d3e7ff);
  color: var(--cai-color-ink, #141414);
}
.mig-cta-slim .wp-block-buttons .wp-block-button a:hover {
  background: #c2ddff;
  color: var(--cai-color-ink, #141414);
}

.pardot-iframe {
  width: 100%;
  height: 500px;
  border: 0;
}

/* Increase height on mobile to fit stacked form fields */
@media (max-width: 770px) {
  .pardot-iframe {
    height: 550px !important; /* Set to match full mobile form height */
  }
}
@media (max-width: 640px) {
  .pardot-iframe {
    height: 580px !important;
  }
}
@media (max-width: 580px) {
  .pardot-iframe {
    height: 610px !important;
  }
}
@media (max-width: 520px) {
  .pardot-iframe {
    height: 630px !important;
  }
}
@media (max-width: 485px) {
  .pardot-iframe {
    height: 790px !important;
    overflow: hidden !important;
  }
}
@media (max-width: 465px) {
  .pardot-iframe {
    height: 810px !important;
    overflow: hidden !important;
  }
}
@media (max-width: 455px) {
  .pardot-iframe {
    height: 830px !important;
    overflow: hidden !important;
  }
}
@media (max-width: 415px) {
  .pardot-iframe {
    height: 850px !important;
    overflow: hidden !important;
  }
}
@media (max-width: 405px) {
  .pardot-iframe {
    height: 875px !important;
    overflow: hidden !important;
  }
}
@media (max-width: 397px) {
  .pardot-iframe {
    height: 895px !important;
    overflow: hidden !important;
  }
}
@media (max-width: 374px) {
  .pardot-iframe {
    height: 925px !important;
    overflow: hidden !important;
  }
}
#printsupport a {
  color: var(--cai-color-action, #6A6BD4);
  text-decoration: none;
}
#printsupport a:hover {
  color: var(--cai-color-action-hover, #2f2951);
  text-decoration: underline;
}