/* =====================================================================
   ConduX landing page + homepage section
   fortispay.com/condux/
   ---------------------------------------------------------------------
   PORT THIS FILE. It is the only stylesheet the page adds to the theme.

   What it relies on from the live theme (do not duplicate these here):
     - Bootstrap 4.5.2 (.container)
     - theme style.css (.btn, .btn-primary, .section-heading,
       .sub-heading, .parent-section, .news-wrap, .curve1/.curve2,
       body and heading font families)
     - Adobe Fonts kit qqu7idd (bio-sans, indivisible)
     - Font Awesome 6.7.2 (fa-solid fa-angle-right)
     - AOS 2.3.1 and GSAP 3.12.2 + ScrollTrigger (theme JS)

   Everything new is namespaced .cdx-*. Tokens are --cdx-*.

   ABOUT !important: the theme sets `h1..h6 { font-weight: 300 !important }`,
   `h1`/`h2`/`h3` font-size and line-height with !important at three
   breakpoints (h3: 36px, 26px at 1440, 24px at 1024; the handoff's audit
   missed h3, so GTU added !important to the h3 sizes on the live site), and `.btn` / `.btn-primary` size, weight and padding with
   !important. Where our elements need other values, those specific
   properties carry !important here, always under a .cdx-* class.
   REUSE-MAP.md section 3 lists every one. Nothing else in this file
   uses !important except the reduced-motion guard at the end.
   ===================================================================== */

:root {
  /* Fortis brand colours as named in the Figma file (Condux LP) */
  --cdx-blue:        #1863B8;  /* ConduX Blue: accent, links, fills */
  --cdx-stacked:     #003057;  /* Stacked Blue: headings */
  --cdx-body:        #1D4A6E;  /* Body Text Blue */
  --cdx-network:     #00263A;  /* Network Blue: footer ground, H4 */
  --cdx-energy:      #FF6B00;  /* Energy Orange: CTAs, logo X, icons */
  --cdx-power:       #D64123;  /* Power Orange: accents, required marks */
  --cdx-pale:        #F6F6F6;  /* Pale Gray: Merchant Value ground */
  --cdx-level:       #D9D8D6;  /* Level Gray: column and list rules */
  --cdx-field:       #CCCCCC;  /* Light Gray: input borders */
  --cdx-legal:       #414042;
  --cdx-hero-top:    #F4F7FD;

  /* Glow and shadow tints (alpha versions of the brand values) */
  --cdx-glow-blue:   rgba(24, 99, 184, .16);
  --cdx-glow-coral:  rgba(255, 107, 61, .16);
  --cdx-shadow-dash: 0 30px 80px rgba(30, 64, 140, .14);
  --cdx-shadow-cta:  0 8px 24px 5px rgba(0, 0, 0, .16);
  --cdx-shadow-modal:0 5px 10px 5px rgba(0, 0, 0, .10);

  /* Families. The theme already sets these on body and h1..h6; the
     tokens exist for the few non-heading elements that use Bio Sans.
     Figtree is the review-link fallback only (the Adobe kit is domain
     locked); on fortispay.com the kit always wins. */
  --cdx-display: bio-sans, Figtree, sans-serif;
  --cdx-text:    indivisible, Figtree, sans-serif;

  --cdx-radius-tile: 24px;
  --cdx-radius-card: 20px;
}

/* ---------------------------------------------------------------------
   Page shell
   --------------------------------------------------------------------- */
.cdx-page { color: var(--cdx-body); overflow-x: hidden; overflow-x: clip; }   /* hidden: fallback for Safari 15 */
.cdx-page p { text-wrap: pretty; }

/* Large CTA size used across the page. Extends the theme's .btn-primary
   (gradient, pill, hover state all come from the theme). */
.cdx-btn-lg {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 53px;
  padding: 10px 60px !important;            /* theme: 8px 30px !important */
  font-size: 16px !important;
  line-height: 1.2;
}
.cdx-btn-lg .fa-angle-right { font-size: 15px; }

/* ---------------------------------------------------------------------
   Type scale. Fluid between the 390 mobile comp and the 1920 desktop
   comp: size = clamp(mobile, a + b*vw, desktop).
   --------------------------------------------------------------------- */
.cdx-h1 {
  font-family: var(--cdx-display);
  font-weight: 700 !important;
  font-size: clamp(32px, 23.84px + 2.092vw, 64px) !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em;
  color: var(--cdx-stacked);
  margin: 0;
}
.cdx-h2 {
  font-family: var(--cdx-display);
  font-weight: 300;                          /* theme already forces 300 */
  font-size: clamp(30px, 25.41px + 1.176vw, 48px) !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em;
  color: var(--cdx-stacked);
  margin: 0;
}
.cdx-h3 {
  font-family: var(--cdx-display);
  font-weight: 400 !important;
  font-size: clamp(26px, 22.43px + .915vw, 40px) !important;
  line-height: 1.2 !important;
  color: var(--cdx-stacked);
  margin: 0;
}
.cdx-lead {
  font-size: clamp(15px, 14.24px + .196vw, 18px);
  line-height: 1.6;
  color: var(--cdx-body);
  margin: 0;
}
.cdx-accent { color: var(--cdx-blue); }

/* Hero eyebrow: Bio Sans, ConduX Blue, wide tracking. Deliberately not
   the theme's .sub-heading (Indivisible, Power Orange). */
.cdx-eyebrow {
  font-family: var(--cdx-display);
  font-weight: 600;
  font-size: clamp(12px, 10.47px + .392vw, 18px);
  line-height: 1.2;
  letter-spacing: clamp(1.44px, .79px + .167vw, 4px);
  text-transform: uppercase;
  color: var(--cdx-blue);
  margin: 0 0 14px;
}

/* =====================================================================
   1. HERO
   ===================================================================== */
/* Theme header on this template. The live .site-header is absolute and
   transparent with a white logo and nav, built to sit over dark hero
   banners. Over the pale ConduX hero it disappears, so on this template it
   sits in the page flow on the navy header gradient the approved prototype
   shows. Scoped to the template so the homepage section is unaffected. */
.page-template-condux .site-header {
  position: relative;
  background: linear-gradient(173.5deg, #00263A 0%, #003057 45%, #1A4D6E 100%);
}

/* Hero F (Round 5, Oct 27 2026, approved by Christine).
   Centered type over two soft glows (ConduX Blue lower left, peach
   behind the headline), closed by four layered wave bands in ConduX
   Blue tints. The front band is white, so the hero runs straight into
   the white Platform Value section with no seam. Static: no motion
   beyond the page's usual AOS entrance.
*/
.cdx-hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: clamp(56px, 20px + 3.2vw, 118px) 0 calc(max(14.6vw, 96px) + 40px);
  text-align: center;
  background:
    radial-gradient(max(32vw, 280px) max(25vw, 220px) at 70.3% 39.5%, rgba(255,138,91,.34), rgba(255,138,91,.19) 45%, rgba(255,138,91,0)),
    radial-gradient(max(31vw, 270px) max(24.5vw, 215px) at 26.6% 67.4%, rgba(24,99,184,.26), rgba(24,99,184,.14) 45%, rgba(24,99,184,0)),
    linear-gradient(to bottom, #F5F7FB, #fff);
}
.cdx-hero__inner {
  display: flex; flex-direction: column; align-items: center;
  max-width: 1200px; margin: 0 auto;
}
.cdx-hero .cdx-eyebrow { margin-bottom: 14px; }
.cdx-hero__title {
  font-size: clamp(36px, 20px + 3.333vw, 84px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.015em;
}
.cdx-hero__lead {
  max-width: 780px;
  margin-top: 26px;
  font-size: clamp(16px, 13.6px + .4375vw, 22px);
  line-height: 1.55;
}
.cdx-hero__cta { padding-top: 40px; }
.cdx-hero__waves {
  position: absolute; left: 0; right: 0; bottom: -1px;   /* -1px: no hairline above Platform Value */
  display: block; width: 100%;
  height: max(14.58vw, 96px);   /* 280px at 1920; the bands stretch, never thinner than 96px */
  pointer-events: none;
}
.cdx-br-sm { display: none; }
@media (min-width: 576px) { .cdx-br-sm { display: inline; } }
@media (max-width: 991px) {
  .cdx-hero { padding-top: 48px; }
  .cdx-hero__lead { margin-top: 18px; }
  .cdx-hero__cta { padding-top: 28px; }
}
@media (max-width: 767px) {
  .cdx-hero { padding-bottom: calc(max(14.6vw, 96px) + 32px); }
  .cdx-hero__inner { align-items: stretch; }   /* full width button, as elsewhere on phones */
}

/* =====================================================================
   Graphic frames (iframe embeds of the approved HTML animations)
   ---------------------------------------------------------------------
   <div class="cdx-frame" style="--w:1220;--h:430">
     <iframe data-src="graphics/x.html" width="1220" height="430" ...>
   The frame keeps the source's aspect ratio; condux.js scales the
   iframe (transform) to the frame width and sets src when the frame
   first scrolls into view.
   ===================================================================== */
.cdx-frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--w) / var(--h);
  overflow: hidden;
}
.cdx-frame iframe {
  position: absolute; left: 0; top: 0;
  border: 0; background: transparent;
  max-width: none;                /* theme (Underscores) sets iframe { max-width: 100% }, which clipped every scaled graphic */
  transform-origin: 0 0;
  transform: scale(var(--s, 1));
  pointer-events: none;           /* decorative; nothing to click */
}
/* Breakpoint pairs: a frame marked desktop or mobile only renders at
   its own size, so condux.js never loads the hidden one. */
.cdx-only-mobile,
.cdx-only-mobile-lg { display: none; }

/* =====================================================================
   2. PLATFORM VALUE
   ===================================================================== */
.cdx-platform { position: relative; padding: 80px 0 224px; background: #fff; }   /* white on purpose: a clean break from the hero glow */
.cdx-platform__head { max-width: 916px; margin: 0 auto 48px; text-align: center; }
.cdx-cols { display: grid; grid-template-columns: repeat(3, 1fr); }
.cdx-col {
  border-left: 1px solid var(--cdx-level);
  padding: 4px 40px 4px 28px;
}
.cdx-col__icon { display: block; width: 60px; height: 60px; margin-bottom: 64px; }
.cdx-col__title {
  font-family: var(--cdx-display);
  font-weight: 600 !important;
  font-size: clamp(20px, 18.98px + .261vw, 24px) !important;
  line-height: 1.2 !important;
  color: var(--cdx-stacked);
  margin: 0 0 8px;
}

/* =====================================================================
   3. MERCHANT VALUE (pale ground with the two Fortis curves)
   ===================================================================== */
.cdx-merchant {
  position: relative;
  background: var(--cdx-pale);
  padding: 100px 0;
  overflow-x: clip;               /* AOS zoom-out starts at scale 1.2 */
}
.cdx-curve {                      /* 1087x123 Fortis section curve */
  position: absolute; display: block;
  width: 56.62%; height: auto; aspect-ratio: 1087 / 123;
  color: var(--cdx-pale); fill: currentColor;
  pointer-events: none;
}
.cdx-curve--top    { right: 0; bottom: calc(100% - 1px); transform: rotate(180deg); }
.cdx-curve--bottom { left: 0;  top: calc(100% - 1px); }

.cdx-merchant__head { max-width: 1316px; margin: 0 auto 48px; text-align: center; }
.cdx-merchant__head .cdx-lead { max-width: 816px; margin: 10px auto 0; color: var(--cdx-stacked); }
.cdx-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cdx-tile {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 36px;
  background: #fff;
  border-radius: var(--cdx-radius-tile);
  padding: 44px;
  overflow: hidden;
}
.cdx-tile--wide { grid-column: 1 / -1; padding: 48px; }
.cdx-tile__text { display: flex; flex-direction: column; gap: 13px; position: relative; }
.cdx-tile__text .cdx-lead { max-width: 560px; }
.cdx-tile--wide .cdx-tile__text .cdx-lead { max-width: none; }
.cdx-tile__media { position: relative; flex: 1 1 auto; display: flex; justify-content: center; align-items: flex-start; }

/* Per-tile graphic widths from the desktop comp */
.cdx-tile__media .cdx-frame--ar   { max-width: 1220px; }
.cdx-tile__media .cdx-frame--pay  { max-width: 588px; }
.cdx-tile__media .cdx-frame--leo  { width: calc(100% + 63px); max-width: none; margin: 0 -31.5px; } /* 623 in a 560 column, cropped by the tile */
.cdx-tile__media .cdx-frame--m    { max-width: 400px; }

/* Round 5: tiles 2 and 3 at 1200px and up show cropped tile builds of
   their graphics at about 85 to 100% scale, bleeding off the tile's right
   and bottom edges (the tile clips them). The full builds stay for
   768 to 1199px, where the tiles stack and have room. Mobile builds are
   unchanged. Insert directly after the .cdx-frame--m rule in section 3. */
.cdx-only-xl { display: none; }
.cdx-tile__media .cdx-frame--crop {
  width: calc(100% + 44px);       /* reach the tile's right edge (tile padding is 44px) */
  max-width: none;
  margin: 0 -44px -44px 0;        /* and its bottom edge */
  align-self: flex-end;           /* sit on the tile floor when the row is taller */
}
@media (min-width: 1200px) {
  .cdx-only-xl { display: block; }
  .cdx-hide-xl { display: none; }
}

/* Glows: the Figma ellipses as CSS radials. Each glow's box is given
   as --i (inset) in the markup so positions stay with the tile. */
.cdx-glow { position: absolute; inset: var(--i); z-index: -1; pointer-events: none; }
.cdx-glow--blue  { background: radial-gradient(closest-side, var(--cdx-glow-blue),  rgba(24,99,184,0)); }
.cdx-glow--coral { background: radial-gradient(closest-side, var(--cdx-glow-coral), rgba(255,107,61,0)); }

/* =====================================================================
   4. WHY FORTIS
   ===================================================================== */
.cdx-why { padding: 180px 0 100px; background: #fff; }
.cdx-why__row { display: flex; align-items: center; gap: 64px; }
.cdx-why__media { flex: 0 0 640px; max-width: 640px; }
.cdx-why__copy  { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.cdx-why__h2 .cdx-why__em { display: block; font-weight: 700; color: var(--cdx-energy); }
.cdx-points { list-style: none; margin: 0; padding: 0; }
.cdx-point { border-top: 1px solid var(--cdx-level); padding: 23px 0 24px; }
.cdx-point:last-child { padding-bottom: 0; }
.cdx-point__title {
  font-family: var(--cdx-display);
  font-weight: 700 !important;
  font-size: clamp(18px, 17.24px + .196vw, 21px) !important;
  line-height: 1.6 !important;
  color: var(--cdx-network);
  margin: 0 0 8px;
}

/* =====================================================================
   5. FINAL CTA
   Desktop: the card straddles the top edge of the theme footer, so
   the section's lower half is painted Network Blue to meet it.
   ===================================================================== */
.cdx-cta { background: linear-gradient(to bottom, #fff 50%, var(--cdx-network) 50%); }
.cdx-cta__card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 80px 60px;
  background: var(--cdx-blue);
  border-radius: var(--cdx-radius-card);
  box-shadow: var(--cdx-shadow-cta);
  text-align: center;
}
.cdx-cta__card::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -185px; height: 560px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(24,99,184,.35), rgba(24,99,184,0));
  pointer-events: none;
}
.cdx-cta__title {
  position: relative;
  font-family: var(--cdx-display);
  font-weight: 700 !important;
  font-size: clamp(32px, 26.39px + 1.438vw, 53px) !important;
  line-height: 1.2 !important;
  color: #fff;
  margin: 0;
}
.cdx-cta__card .cdx-lead { position: relative; color: #fff; max-width: 720px; }
.cdx-cta__card .btn { position: relative; }

/* =====================================================================
   6. EARLY ACCESS MODAL (native <dialog>)
   ===================================================================== */
.cdx-modal {
  width: min(960px, calc(100vw - 40px));
  max-width: none; max-height: calc(100vh - 40px);
  padding: 0; border: 0; border-radius: var(--cdx-radius-card);
  box-shadow: var(--cdx-shadow-modal);
  background: #fff; color: var(--cdx-body);
  overflow: hidden;
  opacity: 0; transform: translateY(16px);
  transition: opacity 300ms ease, transform 300ms ease;   /* theme's --fn-anim-speed */
}
.cdx-modal.is-open { opacity: 1; transform: none; }
.cdx-modal::backdrop { background: rgba(0, 48, 87, .6); opacity: 0; transition: opacity 300ms ease; }
.cdx-modal.is-open::backdrop { opacity: 1; }
.cdx-modal__inner { display: flex; max-height: calc(100vh - 40px); }
.cdx-modal__body {
  flex: 0 0 560px; max-width: 560px;
  padding: 40px 52px;
  display: flex; flex-direction: column; gap: 20px;
  overflow-y: auto; overscroll-behavior: contain;
}
.cdx-modal__photo {
  flex: 1 1 auto; min-width: 0;
  background: #2B4D86 url("../assets/condux-modal-photo-v2.jpg") center / cover no-repeat;   /* Oct 29: Christine's crop of Chris' pick (Oct 26 handoff), replaces the original design photo */
}
.cdx-modal__logo { display: block; width: 136px; height: 30px; margin-bottom: 24px; }
.cdx-modal__title {
  font-family: var(--cdx-display);
  font-weight: 700 !important;
  font-size: clamp(28px, 24.94px + .784vw, 40px) !important;
  line-height: 1.2 !important;
  color: var(--cdx-stacked);
  margin: 0;
}
.cdx-modal__close {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  width: 40px; height: 40px; border: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 38, 58, .5); color: #fff; cursor: pointer;
  transition: background-color .2s ease;
}
.cdx-modal__close:hover { background: rgba(0, 38, 58, .75); }
.cdx-modal__close:focus-visible { outline: 3px solid var(--cdx-energy); outline-offset: 2px; }
.cdx-req { color: var(--cdx-power); }
.cdx-form__note { font-size: 14px; line-height: 1.1; margin: 0; }
.cdx-form { display: flex; flex-direction: column; gap: 18px; }
.cdx-form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cdx-field { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.cdx-field label { font-size: 14px; font-weight: 600; line-height: 29px; color: var(--cdx-body); margin: 0; }
.cdx-field input {
  height: 40px; width: 100%;
  padding: 0 12px;
  border: 1px solid var(--cdx-field); border-radius: 8px;
  background: #fff; color: var(--cdx-stacked);
  font: inherit; font-size: 16px;      /* 16px stops iOS zooming on focus */
}
.cdx-field input:focus { outline: none; border-color: var(--cdx-blue); box-shadow: 0 0 0 3px rgba(24,99,184,.18); }
.cdx-field input[aria-invalid="true"] { border-color: var(--cdx-power); }
.cdx-form .btn { width: 100%; padding-left: 25px !important; padding-right: 25px !important; }
.cdx-form__legal { border-top: 0; padding-top: 20px; display: flex; flex-direction: column; gap: 9px; }
.cdx-form__legal p { font-size: 12px; line-height: 17px; color: var(--cdx-legal); margin: 0; }
.cdx-form__legal a { color: inherit; text-decoration: underline; }

/* Submit states. data-state on .cdx-modal__body: idle | sending | done | error.
   The Gravity Forms route uses "done" too (set from wp/functions-snippet.php). */
.cdx-form__status { display: none; margin: 0; }
.cdx-modal [data-state="done"]  .cdx-form,
.cdx-modal [data-state="done"]  .cdx-form__intro,
.cdx-modal [data-state="done"]  .cdx-form__legal { display: none; }   /* legal sits outside the form in the WordPress template */
.cdx-modal [data-state="done"]  .cdx-form__status--done { display: block; }
.cdx-modal [data-state="error"] .cdx-form__status--error { display: block; }
.cdx-form__status--done .cdx-lead { margin-top: 12px; }
.cdx-form__status--error { color: var(--cdx-power); font-size: 14px; line-height: 1.5; }

/* =====================================================================
   6b. GRAVITY FORMS INSIDE THE MODAL (GTU, production)
   Target values from IMPLEMENTATION-NOTES 1.3. Scoped to the modal so
   the site's other forms are untouched. GF's Orbital theme is driven by
   custom properties, so those are set first; the direct rules after them
   cover anything Orbital does not expose. Mobile values are kept here
   rather than in the breakpoint block so the GF styles stay in one place.
   ===================================================================== */
.cdx-modal .gform-theme--framework {
  --gf-color-primary: var(--cdx-blue);
  --gf-color-in-ctrl-primary: var(--cdx-blue);
  --gf-ctrl-border-color: var(--cdx-field);
  --gf-ctrl-border-color-focus: var(--cdx-blue);
  --gf-ctrl-radius: 8px;
  --gf-ctrl-size: 40px;
  --gf-ctrl-font-size: 16px;
  --gf-ctrl-color: var(--cdx-stacked);
  --gf-ctrl-label-color-primary: var(--cdx-body);
  --gf-ctrl-label-color-req: var(--cdx-power);
  --gf-color-danger: var(--cdx-power);
  --gf-form-gap-y: 18px;
  --gf-form-gap-x: 20px;
}
.cdx-modal .gform_wrapper { margin: 0; }
.cdx-modal .gform_wrapper .gfield_label,
.cdx-modal .gform_wrapper .gform-field-label {
  font-family: var(--cdx-text);
  font-size: 14px; font-weight: 600; line-height: 29px;
  color: var(--cdx-body);
  margin: 0 0 4px;
}
.cdx-modal .gform_wrapper .gfield_required { color: var(--cdx-power); }
.cdx-modal .gform_wrapper input[type="text"],
.cdx-modal .gform_wrapper input[type="email"],
.cdx-modal .gform_wrapper input[type="tel"] {
  height: 40px; width: 100%;
  padding: 0 12px;
  border: 1px solid var(--cdx-field); border-radius: 8px;
  background: #fff; color: var(--cdx-stacked);
  font: inherit; font-size: 16px;      /* 16px stops iOS zooming on focus */
  box-shadow: none;
}
.cdx-modal .gform_wrapper input[type="text"]:focus,
.cdx-modal .gform_wrapper input[type="email"]:focus,
.cdx-modal .gform_wrapper input[type="tel"]:focus {
  outline: none; border-color: var(--cdx-blue); box-shadow: 0 0 0 3px rgba(24,99,184,.18);
}
.cdx-modal .gform_wrapper .gfield_error input { border-color: var(--cdx-power); }
.cdx-modal .gform_wrapper .gfield_validation_message,
.cdx-modal .gform_wrapper .validation_message {
  color: var(--cdx-power); background: none; border: 0; padding: 4px 0 0; font-size: 13px;
}
.cdx-modal .gform_wrapper .gform_validation_errors {
  border-color: var(--cdx-power); border-radius: 8px; box-shadow: none;
}
.cdx-modal .gform_wrapper .gform_footer { margin: 6px 0 0; padding: 0; }
/* Full-width 53px CTA. !important answers the theme's own
   `.gform_button.button { padding ... !important }` and `.btn-primary`
   rules, and Orbital's sizing on the button (verified on the live site). */
.cdx-modal .gform_wrapper .gform_footer .gform_button.btn {
  width: 100% !important;
  height: auto !important;
  min-height: 53px !important;
  padding: 10px 25px !important;
  font-size: 16px !important;
}
.cdx-modal .gform_confirmation_message { font-size: 18px; line-height: 1.6; color: var(--cdx-body); }
.cdx-modal .gform_confirmation_message:focus { outline: none; }
.cdx-modal .gform_confirmation_message h2,
.cdx-modal .gform_confirmation_message h3,
.cdx-modal .gform_confirmation_message strong:first-child {
  display: block;
  font-family: var(--cdx-display);
  font-weight: 700 !important;
  font-size: clamp(28px, 24.94px + .784vw, 40px) !important;
  line-height: 1.2 !important;
  color: var(--cdx-stacked);
  margin: 0 0 12px;
}
@media (max-width: 767px) {
  .cdx-modal .gform-theme--framework { --gf-ctrl-size: 44px; --gf-form-gap-y: 14px; }
  .cdx-modal .gform_wrapper input[type="text"],
  .cdx-modal .gform_wrapper input[type="email"],
  .cdx-modal .gform_wrapper input[type="tel"] { height: 44px; }
  .cdx-modal .gform_wrapper .gform_footer .gform_button.btn { font-weight: 600 !important; }
}

/* =====================================================================
   7. HOMEPAGE: "Latest from Fortis" (sits below the homepage hero)
   Built on the theme's own news pattern: .parent-section gets the
   theme's GSAP curve draw, .news-wrap / .curve1 / .curve2 get the
   theme's positioning. .cdx-news only changes size and type.
   ===================================================================== */
.cdx-news { position: relative; padding: 64px 0 80px; background: #fff; }
.cdx-news::before {
  content: ""; position: absolute; left: 0; right: 0; top: 227px; height: 700px;
  background: radial-gradient(50% 50% at 50% 50%, var(--cdx-glow-blue), rgba(24,99,184,0));
  pointer-events: none;
}
/* The hero's bottom curve is a #F6F6F6 image, matched to the gray section that
   normally follows it. When this white section follows the hero, turn the curve white. */
.hero-banner:has(+ .cdx-news)::after { filter: brightness(1.05); }
.cdx-news .section-heading { margin-bottom: 0; padding: 0 0 24px; }
.cdx-news .section-heading p.sub-heading { font-weight: 500; margin: 0; }
.cdx-news__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.cdx-news .news-wrap { padding: 36px; margin-bottom: 0; }  /* theme: 60px 42px 60px 18px; 30px bottom margin at 1024 */
.cdx-news .news-wrap .curve1 { top: -10px; left: -10px; }
.cdx-news .news-wrap .curve2 { bottom: -10px; right: -10px; }
.cdx-news .latest-news { border: 0; padding: 0; }          /* theme draws side rules */
.cdx-news .latest-news a { display: flex; flex-direction: column; gap: 16px; }
.cdx-news .latest-news h3 {
  font-family: var(--cdx-display);
  font-weight: 700 !important;
  font-size: clamp(28px, 24.94px + .784vw, 40px) !important;
  line-height: 1.2 !important;
  color: var(--cdx-stacked);
  margin: 0;
}
.cdx-news .latest-news p {                                /* theme makes this a bold flex row */
  display: block; font-weight: 400; color: var(--cdx-body);
  font-size: clamp(15px, 14.24px + .196vw, 18px); line-height: 1.6;
  max-width: 480px; margin: 0;
}
.cdx-news .latest-news .link-b {
  display: inline-flex; align-items: center; gap: 8px; padding-top: 8px;
  color: var(--cdx-energy); font-weight: 400;
  font-size: clamp(15px, 14.24px + .196vw, 18px); line-height: 1.6;
}
.cdx-news .latest-news .link-b svg { position: static; }   /* theme absolutely positions .news-wrap svg */
.cdx-news .latest-news a:hover h3,
.cdx-news .latest-news a:hover .link-b { color: var(--cdx-power); }
.cdx-news .latest-news a:hover p { color: var(--cdx-body); }

/* =====================================================================
   Responsive. Grouped here, widest first, matching the theme's own
   breakpoints (1440, 1199, 991, 767).
   ===================================================================== */
@media (max-width: 1440px) {
  .cdx-why__media { flex-basis: 520px; max-width: 520px; }
  .cdx-platform__head { max-width: 760px; }
}

@media (max-width: 1199px) {
  /* Tiles 2 and 3 stack here: side by side, the payment methods panel
     would drop below half size and its 12px labels below 6px. */
  .cdx-tiles { grid-template-columns: 1fr; }
  .cdx-tile__media .cdx-frame--leo { width: 100%; max-width: 640px; margin: 0 auto; }
  .cdx-col { padding-right: 28px; }
  .cdx-why__row { gap: 40px; }
  .cdx-why__media { flex-basis: 440px; max-width: 440px; }
}

@media (max-width: 991px) {
  /* AR flow swaps to its vertical mobile build: the 1220-wide desktop
     graphic is unreadable below about 860px of tile width. */
  .cdx-only-desktop-lg { display: none; }
  .cdx-only-mobile-lg  { display: block; }


  .cdx-platform { padding: 64px 0 160px; }
  .cdx-platform__head { text-align: left; margin: 0 0 36px; max-width: 640px; }
  .cdx-cols { grid-template-columns: 1fr; gap: 28px; }
  .cdx-col { padding: 4px 0 4px 20px; }
  .cdx-col__icon { width: 48px; height: 48px; margin-bottom: 12px; }

  .cdx-merchant { padding: 64px 0; }
  .cdx-merchant__head { text-align: left; margin-bottom: 20px; }
  .cdx-merchant__head .cdx-lead { margin-left: 0; }
  .cdx-tile, .cdx-tile--wide { padding: 28px 24px; gap: 14px; border-radius: 20px; border: 1px solid #E5EBF2; }

  .cdx-why { padding: 120px 0 64px; }
  .cdx-why__row { flex-direction: column; align-items: stretch; gap: 32px; }
  .cdx-why__media { order: 2; flex: none; max-width: 640px; width: 100%; margin: 0 auto; }
  .cdx-why__copy { display: contents; }     /* heading above the diagram, points below */
  .cdx-why__h2 { order: 1; }
  .cdx-points { order: 3; }
  .cdx-point { border-top: 0; padding: 0 0 32px; }

  .cdx-news__grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 767px) {
  /* 30px phone gutters, as in the mobile comp and the theme's own
     section containers at this width. */
  .cdx-page .container, .cdx-news .container { padding-left: 30px; padding-right: 30px; }

  /* Payment methods and Leo chat swap to their mobile builds. */
  .cdx-only-desktop { display: none; }
  .cdx-only-mobile  { display: block; }

  .cdx-btn-lg { width: 100%; padding: 14px 24px !important; font-weight: 600 !important; }

  .cdx-cta { background: #fff; padding: 0 0 64px; }
  .cdx-cta__card { padding: 48px 28px; gap: 16px; }

  .cdx-modal {
    width: 100vw; margin: 40px 0 0; border-radius: 20px 20px 0 0;
    height: calc(100vh - 40px); max-height: calc(100vh - 40px);
    height: calc(100dvh - 40px); max-height: calc(100dvh - 40px);   /* dvh: clear of the iOS toolbar */
  }
  .cdx-modal__inner { height: 100%; max-height: none; }   /* fills the sheet, so a tap in empty space never reads as a backdrop click */
  .cdx-modal__body { flex: 1 1 auto; max-width: none; padding: 28px 24px; gap: 16px; }
  .cdx-modal__photo { display: none; }
  .cdx-modal__logo { width: 91px; height: 20px; margin-bottom: 16px; }
  .cdx-modal__close { top: 16px; right: 16px; }
  .cdx-form { gap: 14px; }
  .cdx-form__pair { grid-template-columns: 1fr; gap: 14px; }
  .cdx-field input { height: 44px; }
  .cdx-form__legal { padding-top: 8px; }
  .cdx-form__legal p { font-size: 11.5px; line-height: 1.4; color: var(--cdx-body); }

  .cdx-news { padding: 40px 0 48px; }
  .cdx-news .news-wrap { padding: 28px 20px; }
  .cdx-news .news-wrap::before,
  .cdx-news .news-wrap::after { content: none; }   /* theme swaps curves for two flat bars on phones */
  .cdx-news .news-wrap .curve1 { left: -6px; }
  .cdx-news .news-wrap .curve2 { right: -6px; }
}

/* =====================================================================
   Reduced motion. AOS 2.3.1 does not read prefers-reduced-motion, so
   this guard shows every [data-aos] element in its final state on this
   page. The graphics get their #static end state from condux.js, and
   the modal drops its transition.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cdx-page [data-aos],
  .cdx-news [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cdx-modal, .cdx-modal::backdrop { transition: none; }
}