:root {
  --cinefi-color-primary: #026d8b;
  --cinefi-color-primary-dark: #1e2a33;
  --cinefi-color-bg: #000;
  --cinefi-color-text: #fff;
  --cinefi-color-text-muted: rgb(255 255 255 / 70%);
  --cinefi-z-overlay: 1000;
  --cinefi-z-header: 100;
  --cinefi-z-base: 1;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
}
/* Match production's image reset. The "modern CSS reset" convention of
 * `img { display: block }` is *omitted* here because production's Hello
 * Elementor reset.css doesn't apply it; production also uses inline images
 * inside anchors (e.g. the OneTrust "Your Privacy Choices" badge in the
 * footer) which depend on default `display: inline` to flow with the
 * surrounding text. Forcing block-level on images breaks that line-flow
 * and adds ~12px per affected anchor. Keep `max-width:100%` for fluid
 * scaling, plus `height:auto` from the source reset to preserve aspect. */
img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}
button,
input,
select,
textarea {
  font: inherit;
}
/* Match production's paragraph reset. Hello Elementor's parent theme
 * reset.css sets `p { margin-block-start: 0 }` which the cinefi theme
 * doesn't inherit (no parent dependency); without this, browser default
 * `margin-block-start: 1em` pushes every <p> down 12-18px and the footer
 * grows ~55px taller than production. The Elementor kit auto-gen CSS sets
 * `margin-block-end: 1.5rem` on .elementor-kit-6 p, so we don't need to
 * port the reset's margin-block-end (kit wins anyway). */
p {
  -webkit-margin-before: 0;
          margin-block-start: 0;
}
/* Theme typography is primarily driven by Elementor Pro's Site Settings.
 * This file holds defensive defaults and overrides that should NOT live
 * in Elementor (e.g., a11y-focused adjustments, print-context type).
 */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}
/* Site header. Currently rendered by Elementor Pro Theme Builder
 * (template: elementor-header-10 / "Site Header and Menu").
 *
 * Theme-level header CSS is intentionally minimal — Elementor owns
 * the visual styling of the header widget. This file holds only
 * structural / chrome rules that should survive Elementor template
 * changes (e.g., the wrapper if we ever add one).
 */
/* Float the header out of normal flow so page content (hero, etc.)
 * renders from y=0 with the nav overlaying on top — matches prod's
 * about-hero absolute-positioning behavior, just inverted (we float
 * the header instead of absolute-positioning every hero placeholder).
 *
 * `position: fixed` (not absolute) so the nav stays put on scroll;
 * Elementor's own sticky JS then becomes a no-op for this nav (the
 * `.elementor-sticky--effects` toggling still happens for any
 * scroll-dependent style changes the template might add).
 *
 * GOTCHA: page sections without a hero will collide with the nav
 * because their top is now at y=0 instead of y=header-height. For
 * non-hero pages, sections need `padding-top: 80px` (or similar)
 * to compensate. Address on a per-page-template basis when those
 * pages migrate. */
body header.elementor-location-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 95;
}
/* Elementor popup templates should not participate in normal page flow while
 * closed. On local DevKinsta the mobile-menu popup can render as a direct body
 * child after the footer, adding a full viewport of phantom page height. When
 * Elementor opens a popup it moves/renders the content inside its modal shell,
 * so this only suppresses the closed template root. */
body:not(.elementor-editor-active) > .elementor-location-popup {
  display: none !important;
}
/* Section-heading max-width constraint — applies to standalone
 * Elementor `heading` widgets that carry the `cinefi-display-xl` class
 * (set via the migration's `_css_classes`). Prod section headings
 * cluster at ~761-765 px wide (centered) and wrap to 2 lines when the
 * title is long; without this constraint the heading would stretch
 * edge-to-edge of the viewport on desktop.
 *
 * Targets the widget WRAPPER (`.elementor-widget-heading`), not the
 * inner `<h2>`. cinefi widgets (hero-cinematic, media-card-cta) apply
 * the class to the `<h2>` itself + already own their max-width via
 * widget CSS, so this selector doesn't touch them.
 *
 * Specificity bump — match Elementor's
 * `.elementor.elementor .e-con > .elementor-widget { max-width: 100% }`
 * which would otherwise win over a flat
 * `.elementor-widget-heading.cinefi-display-xl` rule. The chained
 * `.elementor.elementor` doubles the class count and the `.e-con >`
 * pushes the count to (0,4,0). Our chain matches that count, and
 * since we load later we win in the cascade tie. */
.elementor.elementor .e-con > .elementor-widget-heading.cinefi-display-xl,
.e-con.e-con > .e-con-inner > .elementor-widget-heading.cinefi-display-xl {
  max-width: 800px;
  margin-inline: auto;
}
/* Site footer. Visual styling rendered by Elementor Pro Theme Builder
 * (template: elementor-footer-559 / "Global Footer"). Theme-level rules
 * here are limited to overrides the Theme Builder template doesn't cover. */
#dynamic-footer-text a {
  color: inherit;
  text-decoration: underline;
  transition-property: color;
  transition-timing-function: ease;
  transition-duration: 0.25s;
}
#dynamic-footer-text a:hover {
  color: #fff;
}
/* Cinefi Elementor container width.
 *
 * Constrains the boxed-container inner content to 1310px and centers
 * it inside the full-width outer wrapper. The cinefi Elementor kit
 * (post 6) does NOT define a `container_width` kit setting, so its
 * `--container-max-width` default of 1140px applies via the kit CSS,
 * which gives boxed containers a 1140px content area instead of the
 * 1310px we want across the cinefi widget system.
 *
 * Targets the inner element (`.e-con-boxed > .e-con-inner`) because
 * that's what Elementor's own rule constrains:
 *
 *   .e-con > .e-con-inner { max-width: var(--content-width); margin: 0 auto; }
 *
 * Per-container `boxed_width` settings in Elementor write
 * `--content-width` as an inline style on the outer, which takes
 * precedence over our 1310px default — that's why migration scripts
 * can override per-section without conflicting with this fallback.
 *
 * 1310px matches the widget-root max-widths already applied to
 * cinefi-icon-card-grid, cinefi-decorative-bg-feature-card,
 * cinefi-numbered-steps-cta, cinefi-topic-jump-nav,
 * cinefi-pdf-download-list, and cinefi-contact-card-pair.
 */
.e-con-boxed > .e-con-inner {
  max-width: 1310px;
  margin-inline: auto;
}
/* Top-level page container full-bleed (2026-06-01).
 *
 * The cinefi Elementor kit applies a DEFAULT `padding-inline: 10px` to
 * every `.e-con-full` (our page _elementor_data doesn't set it). That 10px
 * insets the TOP-LEVEL page container, so full-background sections
 * (the §0.10 "Cut to smarter checking." purple gradient band, the
 * app-download phone-collage bg, the §0.1 dark band, any media-bg CTA)
 * never reach the viewport's left/right edges — they read as a "boxed"
 * section with a thin gutter on each side.
 *
 * Prod zeroes the inline padding on the SAME top-level container (verified:
 * prod's `.elementor > .e-con-full` id e1ab26a computes `padding-inline:
 * 0px`) while keeping NESTED containers at the kit's 10px (those provide
 * legitimate content inset). The direct-child selector `.elementor >
 * .e-con-full` zeroes ONLY the top-level container, leaving nested
 * containers untouched. Boxed-content centering is unaffected because it's
 * handled by the `.e-con-boxed > .e-con-inner { max-width: 1310px }` rule
 * above, which centers content regardless of the outer container padding.
 *
 * Round 2 (2026-06-01): also zero the row-gap. The kit applies a DEFAULT
 * `--gap: 15px 15px` to the top-level flex-column container, inserting a 15px
 * gap between EVERY page section. Prod's same container computes `gap: 0px`
 * (sections sit flush, and prod even uses negative margins on some sections to
 * overlap). The 15px gap was the source of (a) the visible gap between §0.10
 * and the app-download section, (b) the gap before the footer, and (c) the
 * general vertical-rhythm drift from prod. Zeroing both `gap` and the kit's
 * `--gap` variable (per qa-page-validation L4 — set both for Elementor's
 * variable system) makes inter-section spacing match prod's flush rhythm.
 * Section-internal vertical padding (each widget's own padding-block) still
 * provides the breathing room; only the inter-section gap is removed. */
.elementor > .e-con-full {
  padding-inline: 0;

  /* padding-bottom: 0 so the last content section sits flush to the footer
   * (prod measures the top-level container `padding-block: 10px 0` — 10px top,
   * 0 bottom). The kit default is 10px bottom, which left a 10px gap before the
   * footer on ours. Keep the 10px top (matches prod). */
  padding-bottom: 0;
  gap: 0;

  --gap: 0px;
}
/* Per-page top-level inline padding — prod LADDER correction (2026-06-11,
 * QA sheet rows 25/26/53 = Dan's D2/D3 + faqs hero inset).
 *
 * The blanket zero above was verified 2026-06-01 against prod CHECKING
 * (e1ab26a computes 0) and generalized to all pages. Re-probing every
 * page pair (qa-validation/probe-page-padding3.mjs) shows prod actually
 * varies per page:
 *
 *   checking / savings        0px            (blanket rule correct)
 *   legal / privacy-policy    32px desktop / 8px ≤576 (post-572.css 0.5rem)
 *   faqs                      10px all widths (kit default kept)
 *   home / about / roll-sound hero container 10px, content container 0
 *                             (about content 16px ≤576) — structurally
 *                             split on prod; handled with those pages'
 *                             own rows, not here.
 *   scheduled-maintenance     144px desktop / 19.5px ≤576 — handled with
 *                             row 61 (its hero work), not here.
 *
 * ID selectors beat the blanket rule on specificity. The *-test-* /
 * authored container IDs persist after cutover (slug swap moves
 * _elementor_data; element IDs ride along). */
.elementor > #legal-test-container.e-con-full,
.elementor > #privacy-policy.e-con-full {
  padding-inline: 32px;
}
/* Privacy Policy desktop footer rhythm: prod keeps the final content section
 * 80px above the footer while the top-level page container itself remains
 * flush to the footer. Mobile already matches prod via the ProsePage
 * disclosure-table rule below. */
@media (width > 576px) {
  .elementor > #privacy-policy.e-con-full {
    padding-bottom: 80px;
  }
}
.elementor > #faqs-container.e-con-full {
  padding-inline: 10px;
}
@media (width > 768px) {
  .elementor > #about-container.e-con-full {
    -webkit-padding-after: 8px;
            padding-block-end: 8px;
  }

  #about-container .cinefi-numbered-steps-cta {
    -webkit-padding-before: 160px;
            padding-block-start: 160px;
    -webkit-margin-after: 62px;
            margin-block-end: 62px;
  }
}
@media (width <= 576px) {
  .elementor > #legal-test-container.e-con-full,
  .elementor > #privacy-policy.e-con-full {
    padding-inline: 8px;
  }

  /* About: prod's content container carries 16px inline padding at
   * mobile (probed 2026-06-11; QA rows 5/45). The hero wrapper's -16px
   * side margins were authored to break out of exactly this padding —
   * with the blanket zero they bled PAST the viewport instead. This
   * restores: content inset 16px, hero full-bleed edge-to-edge. */
  .elementor > #about-container.e-con-full {
    padding-inline: 16px;
  }

  /* About mobile hero handoff — prod's legacy split renders the purple
   * `#about-sub-hero` card from y=81 to y=547, then starts the
   * `bg-hero-card` section at y=563. The consolidated HeroCinematic
   * widget was still using the shared 632px mobile hero height, which
   * left roughly 100px of extra teal/green video space before the
   * "Made for life below the line." card. Scope the correction to the
   * About card-overlay instance only. */
  #about-container .cinefi-hero--card-overlay {
    --hero-min-height-desktop: 547px;
    --hero-min-height-mobile: 547px;
    --hero-content-stack-gap: 15px;

    align-items: flex-start;
    overflow: visible;
    padding-top: 65px;
  }

  /* Prod's About mobile build uses a separate absolute video layer that
   * continues behind the first 69px of the following "Made for life" section.
   * Extend only the background layer here so the card geometry remains fixed. */
  #about-container .cinefi-hero--card-overlay .cinefi-hero__bg {
    bottom: auto;
    height: 616px;
  }

  #about-container .cinefi-hero--card-overlay .cinefi-hero__bg-video {
    -o-object-position: 50% 50%;
       object-position: 50% 50%;
  }

  #about-container .cinefi-hero__content {
    transform: translateY(-11px);
  }

  #about-container .cinefi-hero__headline {
    letter-spacing: -2.4px;
  }

  /* The following `bg-hero-card` section starts immediately after the
   * About hero. Prod gives it 16px top / 54px bottom mobile padding;
   * the migrated container was carrying 51px / 80px, leaving a visible
   * teal/green runway before the "Made for life below the line." card. */
  #about-container > #bg-hero-card {
    padding-block: 16px 54px;
  }

  #about-container .cinefi-decorative-bg-feature-card {
    padding-block: 40px 22px;
  }

  #about-container .cinefi-decorative-bg-feature-card__media {
    padding: 16px 22px 10px;
  }

  /* Prod's legacy Elementor grid keeps the image inset constant, then lets
   * the text and lower card breathing scale between narrow and emulator-wide
   * mobile viewports. These clamps reproduce that rhythm in the widget stack. */
  #about-container .cinefi-decorative-bg-feature-card__content {
    gap: 15px;
    padding: clamp(20px, calc(50vw - 175px), 49px) 12px clamp(2px, calc(90vw - 349px), 54px);
  }

  #about-container .cinefi-decorative-bg-feature-card .cinefi-decorative-bg-feature-card__heading {
    --display-font-size: 36px;
    --display-line-height: 36px;

    font-size: 36px;
    line-height: 36px;
  }

  #about-container .cinefi-decorative-bg-feature-card .cinefi-decorative-bg-feature-card__body,
  #about-container .cinefi-decorative-bg-feature-card .cinefi-decorative-bg-feature-card__body a {
    font-size: 14px;
    line-height: 25.56px;
    letter-spacing: -0.28px;
  }

  #about-container .cinefi-decorative-bg-feature-card .cinefi-decorative-bg-feature-card__body a,
  #about-container .cinefi-decorative-bg-feature-card .cinefi-decorative-bg-feature-card__body a:hover,
  #about-container .cinefi-decorative-bg-feature-card .cinefi-decorative-bg-feature-card__body a:focus-visible {
    color: #fff;
    text-decoration: none;
    -webkit-text-decoration-color: #fff;
            text-decoration-color: #fff;
  }

  #about-container .cinefi-decorative-bg-feature-card .cinefi-decorative-bg-feature-card__body p {
    -webkit-margin-after: 24px;
            margin-block-end: 24px;
  }

  #about-container .cinefi-decorative-bg-feature-card .cinefi-decorative-bg-feature-card__body p:last-child {
    -webkit-margin-after: 0;
            margin-block-end: 0;
  }

  #about-container .cinefi-decorative-bg-feature-card .cinefi-decorative-bg-feature-card__cta {
    align-self: center;
    width: min(366px, calc(100% - 4px));
    -webkit-margin-before: 26px;
            margin-block-start: 26px;
    padding-inline: 0;
  }

  #about-container .cinefi-simple-cta-band {
    -webkit-margin-before: 16px;
            margin-block-start: 16px;
  }

  /* Prod leaves a 16px handoff after the Made card, then starts the
   * numbered-steps content 90px into the section. The shared widget's 97px
   * mobile top padding was close in isolation but landed the steps stack low
   * once the page-level section gap was restored. */
  #about-container .cinefi-numbered-steps-cta {
    -webkit-margin-before: 16px;
            margin-block-start: 16px;
    -webkit-padding-before: 90px;
            padding-block-start: 90px;
  }
}
/* Roll-sound hero headline size — page-specific prod values (QA sheet
 * row 60, probed 2026-06-11): prod renders this hero at 80px desktop /
 * 60px mobile, while the shared display-xl token (correct for the home
 * hero at 90px) gave it 90/45. ID-scoped per-instance override; the
 * token itself stays untouched. */
#roll-sound-test-container .cinefi-hero__headline.cinefi-display-xl {
  --display-font-size: 80px;
}
@media (width >= 577px) {
  #roll-sound-test-container .cinefi-hero__content {
    gap: 15px;
    transform: translateY(8px);
  }

  #roll-sound-test-container .cinefi-hero .cinefi-hero__eyebrow {
    -webkit-margin-after: 29px;
            margin-block-end: 29px;
    background: none;
    background-clip: border-box;
    color: #fff;
    -webkit-text-fill-color: #fff;
  }

  #roll-sound-test-container .cinefi-hero__headline.cinefi-display-xl {
    --display-letter-spacing: -1px;

    max-width: none;
  }

  #roll-sound-test-container .cinefi-hero__body {
    width: 553px;
    max-width: 553px;
    -webkit-margin-after: 24px;
            margin-block-end: 24px;
  }

  #roll-sound-test-container > .elementor-element-68d0b84 {
    -webkit-margin-before: 106px;
            margin-block-start: 106px;

    --margin-top: 106px;
  }

  #roll-sound-test-container .cinefi-section-divider-heading {
    padding-block: 0;
  }

  #roll-sound-test-container .elementor-element-bfbdea4 {
    width: 1180px;
    max-width: 1180px;
    margin-inline: 0;
    -moz-column-gap: 2px;
         column-gap: 2px;

    --column-gap: 2px;
  }

  #roll-sound-test-container > .elementor-widget-cinefi-icon-card-grid {
    -webkit-margin-before: 130px;
            margin-block-start: 130px;

    --margin-top: 130px;
  }

  #roll-sound-test-container > #bg-hero-card {
    -webkit-margin-before: 47px;
            margin-block-start: 47px;
    padding-block: 51px 55px;

    --margin-top: 47px;
  }

  #roll-sound-test-container .cinefi-decorative-bg-feature-card {
    min-height: 959px;
    padding-block: 0;
  }

  #roll-sound-test-container .cinefi-decorative-bg-feature-card__layout {
    min-height: 957px;
  }

  #roll-sound-test-container .cinefi-decorative-bg-feature-card__content {
    gap: 15px;
  }

  #roll-sound-test-container .cinefi-decorative-bg-feature-card .cinefi-decorative-bg-feature-card__body {
    width: 509.5px;
    max-width: 509.5px;
  }

  #roll-sound-test-container .cinefi-decorative-bg-feature-card .cinefi-decorative-bg-feature-card__body p:last-child {
    -webkit-margin-after: 24px;
            margin-block-end: 24px;
  }

  #roll-sound-test-container .cinefi-decorative-bg-feature-card__cta {
    padding-inline: 54px;
  }
}
@media (width <= 576px) {
  #roll-sound-test-container .cinefi-hero__headline.cinefi-display-xl {
    --display-font-size: 60px;
  }

  #roll-sound-test-container .cinefi-hero__content {
    transform: translateY(42px);
  }

  #roll-sound-test-container .cinefi-hero .cinefi-hero__eyebrow {
    background: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    color: #d2d2d2;
    -webkit-text-fill-color: #d2d2d2;
  }

  #roll-sound-test-container .cinefi-hero .cinefi-hero__eyebrow::before,
  #roll-sound-test-container .cinefi-hero .cinefi-hero__eyebrow::after {
    display: none;
  }

  #roll-sound-test-container .cinefi-hero__eyebrow .apy-underline {
    max-width: 284px;
    margin-inline: auto;
    font-size: 19px !important;
    line-height: 25.56px !important;
  }

  #roll-sound-test-container .cinefi-hero__eyebrow .apy-underline strong span {
    font-size: 19px !important;
  }

  #roll-sound-test-container .cinefi-hero__eyebrow .apy-underline > span:first-child {
    display: block;
    font-size: 14px !important;
  }

  #roll-sound-test-container > .elementor-element-68d0b84 {
    -webkit-margin-before: 195px;
            margin-block-start: 195px;

    --margin-top: 195px;
  }

  #roll-sound-test-container .cinefi-section-divider-heading {
    padding-block: 0;
    -webkit-margin-after: 0;
            margin-block-end: 0;
  }

  #roll-sound-test-container .cinefi-section-divider-heading .cinefi-section-divider-heading__title {
    --display-font-size: 36px;
    --display-line-height: 36px;
    --display-letter-spacing: -0.42px;

    letter-spacing: -0.42px;
    word-spacing: -0.42px;
  }

  #roll-sound-test-container .cinefi-gradient-feature-card {
    --grad-card-body-font-size: 14px;
    --grad-card-body-line-height: 28.8px;
    --grad-card-bullet-line-height: 28.8px;
    --grad-card-rate-font-size: 14px;

    height: 758px;
  }

  #roll-sound-test-container .cinefi-gradient-feature-card .cinefi-gradient-feature-card__cta {
    width: 100%;
    min-width: 0;
    padding-inline: 0;
  }

  #roll-sound-test-container .cinefi-gradient-feature-card--variant-savings {
    --grad-card-accent-size: 135px;
    --grad-card-content-max-width: 284px;
    --grad-card-content-stack-gap: 6px;

    width: 366px;
    max-width: calc(100% - 24px);
    margin-inline: 20px auto;
    padding-block: 24px 36px;
    padding-inline: 0 30px;
  }

  #roll-sound-test-container .cinefi-gradient-feature-card--variant-savings .cinefi-gradient-feature-card__inner {
    padding-inline: 26px;
  }

  #roll-sound-test-container .cinefi-gradient-feature-card--variant-cash {
    --grad-card-accent-size: 135px;
    --grad-card-content-max-width: 284px;
    --grad-card-content-stack-gap: 6px;

    width: 366px;
    max-width: calc(100% - 24px);
    margin-inline: 20px auto;
    padding-block: 24px 36px;
    padding-inline: 30px 0;
  }

  #roll-sound-test-container .cinefi-gradient-feature-card--variant-cash .cinefi-gradient-feature-card__inner {
    padding-inline: 26px;
  }

  #roll-sound-test-container > .elementor-widget-cinefi-icon-card-grid,
  #roll-sound-test-container > #bg-hero-card {
    -webkit-margin-before: 128px;
            margin-block-start: 128px;

    --margin-top: 128px;
  }

  #roll-sound-test-container .cinefi-icon-card-grid {
    --section-padding-block: 16px 54px;
    --section-gap: 24px;
    --grid-gap: 20px;
    --card-gap: 0px;
    --card-icon-area-height: 175px;
  }

  #roll-sound-test-container .cinefi-icon-card-grid__head {
    gap: 20px;
  }

  #roll-sound-test-container > #bg-hero-card {
    padding: 16px 16px 54px;
  }

  #roll-sound-test-container .cinefi-decorative-bg-feature-card {
    min-height: 1198px;
    padding: 61px 20px 56px;
  }

  #roll-sound-test-container .cinefi-decorative-bg-feature-card__content {
    align-items: center;
    gap: 15px;
    padding: 10px;
  }

  #roll-sound-test-container .cinefi-decorative-bg-feature-card .cinefi-decorative-bg-feature-card__heading {
    --display-font-size: 24px;
    --display-line-height: 24px;
    --display-letter-spacing: -0.72px;

    font-size: 24px;
    line-height: 24px;
    letter-spacing: -0.72px;
  }

  #roll-sound-test-container .cinefi-decorative-bg-feature-card .cinefi-decorative-bg-feature-card__body {
    width: 100%;
    max-width: 354px;
    font-size: 14px;
    line-height: 25.56px;
    letter-spacing: -0.28px;
  }

  #roll-sound-test-container .cinefi-decorative-bg-feature-card .cinefi-decorative-bg-feature-card__body p {
    -webkit-margin-after: 24px;
            margin-block-end: 24px;
  }

  #roll-sound-test-container .cinefi-decorative-bg-feature-card .cinefi-decorative-bg-feature-card__body p:last-child {
    -webkit-margin-after: 0;
            margin-block-end: 0;
  }

  #roll-sound-test-container .cinefi-decorative-bg-feature-card__cta {
    align-self: stretch;
    width: 100%;
    min-width: 0;
    padding-inline: 54px;
  }
}
/* Home hero eyebrow rhythm — page-scoped prod values (QA sheet rows
 * 13/17, probed 2026-06-11 at 1440). Live home renders the gradient
 * line ~40px below the eyebrow text (divider widget at y=295 vs text
 * bottom 255) and the headline 61px below the text bottom (eyebrow
 * margin-bottom 24 + divider + widget gaps); our shared widget default
 * (line -0.75em, stack gap 24) reads tight. Live ROLL-SOUND measures a
 * DIFFERENT rhythm (line 15px below, heading 35px below), so these are
 * page overrides, not widget-base changes. Scoped to >=577px: at <=576
 * the widget's own mobile treatment (centered, framed by ::before/
 * ::after gradient lines, margin-block 21px 31px) already mirrors the
 * legacy mobile eyebrow widget — leave it untouched. */
@media (width >= 577px) {
  #home-test-container .cinefi-hero__eyebrow {
    -webkit-margin-after: 37px;
            margin-block-end: 37px; /* + 24px stack gap = 61px text-to-headline */
  }

  #home-test-container .cinefi-hero__eyebrow::after {
    inset: auto 0 -2.3em;
  }
}
/* Home "Learn the financial rules" band bottom gap — QA row 15
 * (anchor-aligned probe 2026-06-11 at 1440): the band CONTENT is at
 * parity (ours 957 vs live 959 inner height) but live separates it
 * from "Made for life below the line." with its main-container 62px
 * row-gap; ours rolls inter-section spacing into section paddings and
 * this seam ended up with only the wrapper's own 10px padding each
 * side. 42px restores the live span (1087 + 42 = 1129 vs live 1131). */
#home-test-container > .elementor-element-6df5a85 {
  -webkit-margin-after: 42px;
          margin-block-end: 42px;
}
/* Checking/savings feature-card overlap rhythm — QA rows 46/48
 * (probed 2026-06-11 at 1440). Live tucks consecutive feature/CTA
 * cards under each other's media bleed with hand-tuned negative top
 * margins (checking: -140/-100/-140; savings: -50/-150/-170/-170);
 * the migration dropped them, so our cards stack flush and the pages
 * run several hundred px taller. Scoped by per-card elementor element
 * class (globally unique; rides along through cutover — the checking/
 * savings top-level containers share id e1ab26a so an id scope can't
 * distinguish pages). Visually verified side-by-side vs prod 2026-06-12:
 * tuck rhythm matches live on both pages, no card text/CTA clipped.
 * Cards remain intrinsically taller than live (checking +579 / savings
 * +728 cumulative) — per-card fidelity work, not a margin issue. */
/* The tuck is DESKTOP-ONLY on live (probed 2026-06-12: -140 at >=1024,
 * 0 between 768-1023, +65 at phone widths). Unscoped margins made our
 * mobile cards overlap where live spaces them. */
@media (width >= 1024px) {
  .elementor .elementor-element-9bc2a90,
  .elementor .elementor-element-a107236 {
    -webkit-margin-before: -140px;
            margin-block-start: -140px;
  }

  .elementor .elementor-element-6b0bfa6 {
    -webkit-margin-before: -100px;
            margin-block-start: -100px;
  }

  .elementor .elementor-element-ec94bad {
    -webkit-margin-before: -50px;
            margin-block-start: -50px;
  }

  .elementor .elementor-element-cbe7f61 {
    -webkit-margin-before: -150px;
            margin-block-start: -150px;
  }

  .elementor .elementor-element-4545e1c,
  .elementor .elementor-element-bee3fb5 {
    -webkit-margin-before: -170px;
            margin-block-start: -170px;
  }
}
@media (width <= 767px) {
  .elementor .elementor-element-9bc2a90,
  .elementor .elementor-element-a107236,
  .elementor .elementor-element-6b0bfa6,
  .elementor .elementor-element-ec94bad,
  .elementor .elementor-element-cbe7f61,
  .elementor .elementor-element-4545e1c,
  .elementor .elementor-element-bee3fb5 {
    -webkit-margin-before: 65px;
            margin-block-start: 65px;
  }

  .elementor .elementor-element-919281e {
    -webkit-margin-before: 45px;
            margin-block-start: 45px;
  }
}
/* Checking/savings feature-card image widths — QA rows 46/48 phase 2
 * (probed 2026-06-12 at 1440). Prod renders a DIFFERENT image width per
 * card (even round-up differs per page: 628 on checking, 600 on
 * savings); our widget's uniform 560px narrow-content cap made two
 * cards too tall and two too short. Per-instance pins below + the
 * uniform 20px card block padding in FlatTwoColumnCta.css bring every
 * card container to prod's exact height (image + 40). */
.elementor .elementor-element-eb0d963 .cinefi-flat-cta__image {
  max-width: 500px; /* Custom Transaction Folders (prod 500x716) */
}
.elementor .elementor-element-9bc2a90 .cinefi-flat-cta__image {
  max-width: 628px; /* Round-Up checking (prod 628x590) */
}
/* The 628px round-up image doesn't fit the column behind the default
 * 10px media gutters (640 - 20 = 620 usable) — prod renders the full
 * 628; tighten this instance's gutters to 6px so it fits. */
.elementor .elementor-element-9bc2a90 .cinefi-flat-cta__media {
  padding-inline: 6px;
}
.elementor .elementor-element-6b0bfa6 .cinefi-flat-cta__image {
  max-width: 450px; /* Cash Flow Insights (prod 450x625) */
}
.elementor .elementor-element-a107236 .cinefi-flat-cta__image {
  max-width: 450px; /* Your Score, Your Story (prod 450x672) */
}
.elementor .elementor-element-ec94bad .cinefi-flat-cta__image {
  max-width: 500px; /* Savings Goals with Purpose (prod 500x708) */
}
.elementor .elementor-element-cbe7f61 .cinefi-flat-cta__image {
  max-width: 600px; /* Round-Up savings (prod 600x564) */
}
.elementor .elementor-element-4545e1c .cinefi-flat-cta__image {
  max-width: 600px; /* Financial Insights (prod 600x701) */
}
.elementor .elementor-element-bee3fb5 .cinefi-flat-cta__image {
  max-width: 500px; /* Instant Transfers (prod 500x745) */
}
/* Home "Cut to where you want to be" flat CTA — QA row 16 (probed
 * 2026-06-12 at 1440). Band was 762 vs live 642 (+120): the widget
 * default 64px block padding vs live's effective 30/30, AND our
 * width:100% image rule upscaled home-img-last-1.svg from its natural
 * 491x582 to 535x634 (live renders it un-stretched — the SAME asset).
 * Natural-size image + 30/30 padding = 642 exactly. The 15px button
 * margin reproduces live's 39px body-to-button gap (live row-gap 15
 * + button offset; ours is a uniform 24 stack gap), which also lands
 * the heading at live's 176px offset from band top. Instance-scoped
 * by elementor element class (rides through cutover). */
.elementor .elementor-element-c7ae93c .cinefi-flat-cta {
  --section-padding-block: 30px;
}
.elementor .elementor-element-c7ae93c .cinefi-flat-cta__image {
  max-width: 491px;
}
.elementor .elementor-element-c7ae93c .cinefi-flat-cta__button {
  -webkit-margin-before: 15px;
          margin-block-start: 15px;
}
@media (width > 576px) {
  .elementor .elementor-element.elementor-element-c7ae93c.elementor-widget {
    margin: 72px 0 18px;

    --margin-top: 72px;
    --margin-bottom: 18px;
  }
}
/* Home hero mobile nav clearance — QA row 13 (probed 2026-06-12 at
 * 390). Our hero content started at y=21 under the transparent fixed
 * nav (eyebrow clipped) vs live y=142; the hero-to-"No minimums" run
 * was 147px shorter than live. 121px of top padding lands the eyebrow
 * at live's exact y=142 (and the seam within 26px — the residual is
 * internal eyebrow/headline spacing, not clearance). Page-scoped to
 * the home hero instance: live home and live roll-sound have
 * DIFFERENT hero rhythms; never adjust shared HeroCinematic CSS to
 * match one page. */
@media (width <= 576px) {
  .elementor .elementor-element-8c4e4d1 .cinefi-hero {
    background-color: #07131d;
  }

  .elementor .elementor-element-8c4e4d1 .cinefi-hero__bg {
    inset: 0 0 auto;
    height: var(--hero-min-height-mobile);
  }

  .elementor .elementor-element-8c4e4d1 .cinefi-hero__content {
    position: relative;
    z-index: 1;
    -webkit-padding-before: 121px;
            padding-block-start: 121px;
  }

  #home-test-container .cinefi-hero__eyebrow {
    margin-block: 21px 20.5px;
    padding-block: 1.125em calc(1.125em + 0.75em);
  }

  #home-test-container .cinefi-hero__eyebrow::after {
    inset: auto 0 0;
  }

  .elementor .elementor-element-8c4e4d1 .cinefi-hero__decorative {
    position: relative;
    z-index: 0;
    justify-content: flex-start;
    -webkit-margin-before: -67px;
            margin-block-start: -67px;

    --margin-top: -67px;
  }

  .elementor .elementor-element-8c4e4d1 .cinefi-hero__decorative-image {
    width: 392px;
    max-width: none;
    -webkit-margin-start: -60px;
            margin-inline-start: -60px;
  }

  #home-test-container .cinefi-icon-card-grid {
    --section-gap: 24px;
    --grid-gap: 20px;
  }

  #home-test-container .cinefi-icon-card-grid__head {
    gap: 20px;
  }

  #home-test-container .cinefi-icon-card-grid .cinefi-icon-card-grid__body {
    word-spacing: -0.28px;
  }

  #home-test-container .cinefi-icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 292px;
    gap: 0;
    padding: 8px;
  }

  #home-test-container .cinefi-icon-card .cinefi-icon-card__title,
  #home-test-container .cinefi-icon-card .cinefi-icon-card__body {
    margin: 0;
    font-size: 18px;
    line-height: 25.56px;
    letter-spacing: -0.28px;
    word-spacing: -0.28px;
  }

  #home-test-container .cinefi-icon-card:nth-child(1) .cinefi-icon-card__icon {
    margin-block: 50px 49px;
  }

  #home-test-container .cinefi-icon-card:nth-child(2) .cinefi-icon-card__icon {
    margin-block: 21px 22px;
  }

  #home-test-container .cinefi-icon-card:nth-child(3) .cinefi-icon-card__icon {
    margin-block: 12px 13px;
  }

  #home-test-container .cinefi-icon-card:nth-child(4) .cinefi-icon-card__icon {
    margin-block: 36px;
  }
}
/* Home mobile vertical rhythm — 2026-06-15 emulator pass.
 *
 * Keep prod as the visual reference without copying the old generated
 * Elementor cascade wholesale. The hero/"No minimums" seam is already
 * close after the nav-clearance fix above; the drift starts at the
 * product band and compounds through the app, promo, media, and final
 * CTA sections. Scope the rhythm to the home authored element IDs so
 * shared widgets and the checking/savings/about page rhythm stay put. */
@media (width <= 576px) {
  #home-test-container > .elementor-element-4c23d7e {
    -webkit-margin-before: 151px;
            margin-block-start: 151px;
    -webkit-padding-after: 0;
            padding-block-end: 0;

    --margin-top: 151px;
    --padding-bottom: 0px;
  }

  #home-test-container .cinefi-section-divider-heading__title {
    letter-spacing: -0.42px;
    word-spacing: -0.45px;
  }

  #home-test-container .cinefi-section-divider-heading {
    -webkit-padding-after: 0;
            padding-block-end: 0;
  }

  #home-test-container .elementor-element-e83e23b {
    row-gap: 110px;

    --row-gap: 110px;
  }

  #home-test-container .cinefi-gradient-feature-card {
    --grad-card-body-font-size: 14px;
    --grad-card-rate-font-size: 14px;

    height: auto;
  }

  #home-test-container .cinefi-gradient-feature-card__heading {
    order: 1;
  }

  #home-test-container .cinefi-gradient-feature-card__body {
    order: 2;
    line-height: var(--grad-card-body-line-height);
  }

  #home-test-container .cinefi-gradient-feature-card__divider {
    order: 3;
  }

  #home-test-container .cinefi-gradient-feature-card__rate {
    order: 4;
  }

  #home-test-container .cinefi-gradient-feature-card__inner::before {
    background-position: 0 0;
  }

  #home-test-container .cinefi-gradient-feature-card__divider:nth-of-type(2) {
    display: none;
  }

  #home-test-container .cinefi-gradient-feature-card__features {
    order: 5;
    -webkit-padding-start: 40px;
            padding-inline-start: 40px;
  }

  #home-test-container .cinefi-gradient-feature-card__cta {
    order: 6;
    width: 100%;
    min-width: 0;
  }

  #home-test-container .cinefi-gradient-feature-card--variant-savings {
    --grad-card-accent-size: 135px;
    --grad-card-content-max-width: 284px;
    --grad-card-body-line-height: 28.8px;
    --grad-card-interior: linear-gradient(60deg, #07131d 0%, #026d8b 100%);

    width: 366px;
    max-width: calc(100% - 20px);
    margin-inline: 10px auto;
    padding-block: 24px 0;
    padding-inline: 0 30px;
  }

  #home-test-container .cinefi-gradient-feature-card--variant-savings::before {
    inset: 0 11px auto auto;
  }

  #home-test-container .cinefi-gradient-feature-card--variant-savings .cinefi-gradient-feature-card__inner {
    min-height: 696px;
    padding-inline: 26px;
  }

  #home-test-container .cinefi-gradient-feature-card--variant-cash {
    --grad-card-accent-size: 135px;
    --grad-card-content-max-width: 284px;
    --grad-card-body-line-height: 28.8px;
    --grad-card-interior: linear-gradient(75deg, #07131d 0%, #6e00ba 100%);

    width: 366px;
    max-width: calc(100% - 20px);
    margin-inline: 10px auto;
    padding-block: 24px 0;
    padding-inline: 30px 0;
  }

  #home-test-container .cinefi-gradient-feature-card--variant-cash::before {
    inset: 0 auto auto 0;
  }

  #home-test-container .cinefi-gradient-feature-card--variant-cash .cinefi-gradient-feature-card__inner {
    min-height: 696px;
    padding-inline: 26px;
  }

  #home-test-container > .elementor-element-c278202 {
    -webkit-margin-before: 171px;
            margin-block-start: 171px;

    --margin-top: 171px;
  }

  #home-test-container > .elementor-element-c278202 .cinefi-app-download {
    --app-download-card-max-width: 345px;
    --app-download-card-min-height-mobile: 425px;
    --app-download-card-padding-inline-mobile: 36px;
    --app-download-body-font-size-mobile: 18px;
  }

  #home-test-container > .elementor-element-c278202 .cinefi-app-download__cta {
    width: 100%;
    padding-inline: 0;
  }

  #home-test-container > .elementor-element-6df5a85 {
    -webkit-margin-before: 128px;
            margin-block-start: 128px;

    --margin-top: 128px;
  }

  #home-test-container > .elementor-element-6df5a85 .cinefi-gradient-feature-promo__layout {
    min-height: 1234px;
  }

  #home-test-container > .elementor-element-9d1bcf3 {
    -webkit-margin-before: 86px;
            margin-block-start: 86px;

    --margin-top: 86px;
  }

  #home-test-container > .elementor-element-9d1bcf3 .cinefi-media-card-cta {
    --media-card-cta-card-padding-block-mobile: 235px 33px;
    --media-card-cta-card-padding-inline-mobile: 38px 28px;
  }

  #home-test-container > .elementor-element-c7ae93c {
    -webkit-margin-before: 71px;
            margin-block-start: 71px;

    --margin-top: 71px;
  }

  #home-test-container > .elementor-element-c7ae93c .cinefi-flat-cta {
    --section-padding-inline: 10px;
    --section-padding-block: 30px 82px;
  }

  #home-test-container > .elementor-element-c7ae93c .cinefi-flat-cta__button {
    --btn-bg-clip: border-box;

    box-shadow: 0 4px 14px rgb(0 0 0 / 30%);
  }
}
/* Decorative-bg-feature-card CTA — per-instance prod widths (QA sheet
 * rows 42/59, probed 2026-06-11). The widget base is fit-content (see
 * DecorativeBgFeatureCard.css); prod pins different widths per page. */
#about-container .cinefi-decorative-bg-feature-card__cta {
  min-width: 264px;
}
#roll-sound-test-container .cinefi-decorative-bg-feature-card__cta {
  min-width: 210px;
}
/* Noise canvas overlay. Class name intentionally matches the legacy
 * CSS-modules-style identifier `.noise_canvas___nLabs` — see AGENTS-LOG.md
 * Gotcha #2 for the rationale and the deferred-rename plan. */
/* stylelint-disable selector-class-pattern -- legacy class, see above */
.noise_canvas___nLabs {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  width: 100vw;
  height: 100vh;
  opacity: 0.0125;
  pointer-events: none;
}
@media screen and (width >= 577px) {
  .noise_canvas___nLabs {
    opacity: 0.045;
  }
}
@media (prefers-reduced-motion: reduce) {
  .noise_canvas___nLabs {
    display: none;
  }
}
/* Elementor button (and external-link-speedbump button) transition + hover
 * behavior, plus the `.muted` / `#login` translucent variant. Ported from
 * the Elementor kit Custom CSS field on 2026-05-05 as part of the
 * "developer-authored CSS lives in code, not the database" decision. */
.elementor-button {
  transition-property:
    transform, color, background, background-color, border-color, fill,
    stroke, opacity, box-shadow, -webkit-text-decoration-color;
  transition-property:
    transform, color, background, background-color, border-color, text-decoration-color, fill,
    stroke, opacity, box-shadow;
  transition-property:
    transform, color, background, background-color, border-color, text-decoration-color, fill,
    stroke, opacity, box-shadow, -webkit-text-decoration-color;
  transition-timing-function: ease;
  transition-duration: 0.25s;
}
.elementor-button:hover,
.elementor-button:focus,
.trelsb-button:hover,
.trelsb-button:focus {
  opacity: 0.75;
  box-shadow: 0 2px 30px rgb(0 0 0 / 20%);
}
.elementor-button.muted,
#login.elementor-button {
  background: rgb(255 255 255 / 8.5%);
  color: #fff;
}
/* Gradient-bordered box pattern used in CTA / value-prop blocks. Border
 * is faked with a solid-padding-box background plus a layered linear-gradient
 * pseudo-element so the inner background can also be a gradient. */
.gradient-box {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  color: #fff;
  background: linear-gradient(164deg, #03080c 66.18%, #6e00ba 109.58%) padding-box;
  border: 2px solid transparent;
  border-radius: 20px;
}
.gradient-box::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: -2px;
  background: linear-gradient(to bottom, #320054 2%, #00c9c9 36%, #d464ff 96%);
  border-radius: inherit;
}
/* bg-hero-card — decorative geometric SVG background applied to a wrapping
 * container. Used on:
 *
 *   - cinefi.com/about/        §1 "Made for life below the line."
 *   - cinefi.com/faqs/         hero section (gradient frame)
 *   - cinefi.com/roll-sound-financially-sound/ §4 "CineFi's Synopsis"
 *
 * Prod sources this as a 100K inline SVG data URL inside per-page
 * Elementor CSS (post-3412.css etc.). We keep the extracted SVG in the
 * theme assets so local/staging/prod do not depend on a manual uploads
 * file, then apply it via either id (#bg-hero-card) or class
 * (.bg-hero-card) on the wrapping Elementor container.
 *
 * Apply to the element by setting `_element_id: 'bg-hero-card'` OR
 * `css_classes: 'bg-hero-card'` in the migration script.
 */
#bg-hero-card,
.bg-hero-card {
  background-image: url('../../assets/images/bg-hero-card-shape.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 0;
  filter: drop-shadow(0 100px 40px rgb(0 0 0 / 20%));
}
/* The home gradient-feature promo sits inside a late Elementor `.e-parent`
 * container. Elementor's lazy-background guard can inject
 * `background-image: none !important` on those later sections, which hides
 * the decorative grid even though the semantic `bg-hero-card` class is present.
 * Restore the SVG only for bg-card wrappers that contain this promo widget. */
body .elementor .e-con.e-parent.bg-hero-card:has(.cinefi-gradient-feature-promo) {
  background-image: url('../../assets/images/bg-hero-card-shape.svg') !important;
}
/* gradient-hero-card — cyan→dark gradient hero card with halftone SVG overlay.
 *
 * Used on prod cinefi.com/faqs/ as the wrapping container for the hero
 * heading. NOT the same as bg-hero-card (which uses a figma-blur SVG
 * applied on about §1, roll-sound §4).
 *
 * Prod source (faqs):
 *   #header-container { border-radius: 20px; background: linear-gradient(96deg, #00C9C9 9.66%, #07131D 76.4%); box-shadow: 10px 0 24px 24px rgba(0,0,0,0.25); }
 *   #header-card-bg = absolute image widget overlaying faq-header-full.svg (halftone)
 *
 * Apply by setting `_element_id: 'header-container'` AND
 * `css_classes: 'gradient-hero-card'` on the Elementor container that
 * wraps the hero. Set the container's `content_width: 'boxed'` so
 * Elementor wraps the contents in an `.e-con-inner` child — the
 * gradient + halftone visuals apply to that inner element so the outer
 * full-bleed wrapper provides the dark-page-bg gutter at the viewport
 * edges (matches prod's structure).
 *
 * The halftone overlay sits inside the gradient card via ::after.
 */
/* The .e-con-inner of an e-con-boxed wrapper is what Elementor centers
 * + constrains via --content-width. Applying the gradient styles there
 * (instead of the outer wrapper) so the visible card has visible
 * rounded corners and matches prod's geometry. */
.gradient-hero-card.e-con-boxed > .e-con-inner,
#header-container.e-con-boxed > .e-con-inner {
  position: relative;
  border-radius: 20px;
  background: linear-gradient(96deg, #00c9c9 9.66%, #07131d 76.4%);
  box-shadow: 10px 0 24px 24px rgb(0 0 0 / 25%);
  padding: 9.66px 9px;
  overflow: hidden;
}
/* Halftone SVG overlay — decorative; pointer-events: none keeps the
 * heading/chip nav interactive. The SVG is INSET by 9px on all sides
 * so an equal-thickness strip of the underlying linear-gradient
 * shows through at every edge — that strip is the "thick gradient
 * border". (Prod's overlay is asymmetric: 10/9/2/9 — we even it out
 * to 9px all sides because the asymmetry is jarring at small
 * viewports and reads as a layout bug.) The border-radius matches
 * the card's 20px so the SVG corners look rounded the same way. */
.gradient-hero-card.e-con-boxed > .e-con-inner::after,
#header-container.e-con-boxed > .e-con-inner::after {
  content: '';
  position: absolute;
  inset: 9px;
  pointer-events: none;
  background-image: url('/wp-content/uploads/faq-header-full.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 14px;
  opacity: 1;
}
/* Heading inside the gradient card needs to stack above the ::after
 * overlay via z-index. */
.gradient-hero-card.e-con-boxed > .e-con-inner > *,
#header-container.e-con-boxed > .e-con-inner > * {
  position: relative;
  z-index: 1;
}
/* Vertical breathing room around the gradient card. Top places the card
 * below the fixed-position theme header to match prod's card-top
 * viewport-y. Re-measured 2026-06-11 (QA sheet row 7 + Brandon's faqs
 * "header gap 83 vs 73"): prod card-top is 168px at desktop (gap 73
 * under the 95px nav) and 138px at mobile (gap 73 under the 65px nav);
 * the previous 115px landed ours at 178/178. Bottom is 0 because the
 * parent's row-gap handles inter-section spacing. */
.gradient-hero-card.e-con-boxed,
#header-container.e-con-boxed {
  -webkit-margin-before: 105px;
          margin-block-start: 105px;
}
@media (width <= 576px) {
  .gradient-hero-card.e-con-boxed,
  #header-container.e-con-boxed {
    /* Mobile nav is 65px; prod gap stays 73 (card-top 138). */
    -webkit-margin-before: 75px;
            margin-block-start: 75px;
  }

  #faqs-container #header-container.e-con-boxed {
    --min-height: 428px;

    min-height: 428px;
    -webkit-margin-before: 65px;
            margin-block-start: 65px;
  }
}
/* When a cinefi-prose-page-hero widget is the visible content of the
 * gradient-hero-card, its inner content layer should expand to fill
 * the card (prod's heading spans ~1207 of 1245 card width). The
 * default content max-width is 912 which is too narrow for this
 * context. */
.gradient-hero-card .cinefi-prose-hero__content,
#header-container .cinefi-prose-hero__content {
  max-width: 100%;
}
/* Prose-hero inside the gradient card should stretch to fill the
 * card vertically so its centered content lands at the card's vertical
 * center (matches prod where heading sits at card center 214 of 428).
 * Each wrapper level (widget → widget-container → prose-hero) needs to
 * stretch vertically. The default flex-direction is row, so cross-axis
 * (height) stretch happens via align-items: stretch (the default).
 * Width:100% + min-height:100% on each level forces vertical fill. */
.gradient-hero-card .elementor-widget-cinefi-prose-page-hero,
#header-container .elementor-widget-cinefi-prose-page-hero {
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.gradient-hero-card .elementor-widget-cinefi-prose-page-hero > .elementor-widget-container,
#header-container .elementor-widget-cinefi-prose-page-hero > .elementor-widget-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* Also centers the headline vertically: the prose-hero is already
 * flex-centered (align/justify center), but its base padding-block is
 * top-heavy (200px/128px), which shifts the centered content ~36px low —
 * Brandon flagged 2026-06-01 the headline sat below center ("uneven
 * padding"). Symmetric padding centers it to match prod. Scoped to this
 * context (via the widget-qualified selector) so privacy/legal/contact
 * flat prose heroes keep their base top-heavy padding. */
.gradient-hero-card .elementor-widget-cinefi-prose-page-hero .cinefi-prose-hero,
#header-container .elementor-widget-cinefi-prose-page-hero .cinefi-prose-hero {
  flex: 1 1 auto;
  width: 100%;

  --prose-hero-padding-block: 80px;
}
@media (width <= 576px) {
  #faqs-container #header-container .elementor-widget-cinefi-prose-page-hero .cinefi-prose-hero {
    --prose-hero-padding-inline: 0;
  }

  #faqs-container #header-container .cinefi-prose-hero .cinefi-prose-hero__headline {
    font-size: 60px;
    line-height: 59.4px;
    letter-spacing: -2.4px;
  }
}
/* faqs section-stack — apply consistent 63px gap between top-level
 * sections on faqs (#faqs-container). Prod renders chips → search →
 * accordions with 63px vertical rhythm; without this rule those
 * sections sit flush.
 *
 * Targets #faqs-container directly to avoid affecting other pages.
 * If a future page needs the same rhythm, use the .gap-stack-63 class
 * exported below.
 */
#faqs-container.e-con,
.gap-stack-63.e-con {
  --row-gap: 63px;

  row-gap: 63px;
}
@media (width <= 576px) {
  #faqs-container.e-con {
    --row-gap: 73px;

    row-gap: 73px;
  }
}
/* Styling for the external-link "speed bump" confirmation modal injected
 * by the `traction-external-links-speed-bump` plugin (handle prefix:
 * .trelsb-*). Ported from the Elementor kit Custom CSS field on 2026-05-05. */
.trelsb-modal-overlay {
  background: rgb(5 15 24 / 80%);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
#trelsb-external-link-modal {
  max-width: 850px;
  background:
    linear-gradient(96deg, rgb(7 19 29 / 56.5%) 9.66%, #07131d 76.4%),
    url('/wp-content/uploads/faq-header-full.svg'),
    linear-gradient(96deg, #00c9c9 9.66%, #07131d 76.4%);
  background-size: cover;
  border-radius: 20px;
}
#trelsb-external-link-modal-message {
  padding: 3em;
  background-color: rgb(0 0 0 / 10%);
  border: 1.5px solid #026d8b;
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
}
.trelsb-modal-overlay .trelsb-external-link-modal-continue,
.trelsb-modal-overlay .trelsb-external-link-modal-continue:focus {
  background: linear-gradient(92deg, #026d8b -138.25%, #6e00ba 77.17%);
  border-radius: 0 0 0 20px;
}
.trelsb-modal-overlay .trelsb-external-link-modal-continue:hover {
  background: #4a27ab;
}
.trelsb-modal-overlay .trelsb-external-link-modal-close {
  background: linear-gradient(96deg, #1e2a33 18.64%, #07131d 64.56%);
  border-radius: 0 0 20px;
}
.trelsb-modal-overlay .trelsb-external-link-modal-close:hover,
.trelsb-modal-overlay .trelsb-external-link-modal-close:focus {
  background: #1e2a33;
}
.trelsb-modal-overlay .trelsb-button {
  border: 1.5px solid #510487;
  transition-property: opacity, box-shadow;
  transition-timing-function: ease;
  transition-duration: 0.25s;
}
/* Fallback contact UI shown only when the CXone loader fails (network
 * error, ad blocker, CSP block, or 10s timeout). The bridge in
 * src/cxone-loader.ts toggles `data-active="true"` on this element when
 * any of those conditions trigger. Visually styled to mirror the legacy
 * chat bubble's bottom-right placement so users find it in the same
 * spot they'd expect to see chat. */
.cinefi-cxone-fallback {
  display: none;
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: var(--cinefi-z-overlay);
}
.cinefi-cxone-fallback[data-active='true'] {
  display: block;
}
.cinefi-cxone-fallback-link {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  color: #fff;
  background: var(--cinefi-color-primary);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgb(0 0 0 / 25%);
  transition: transform 0.2s ease;
}
.cinefi-cxone-fallback-link:hover,
.cinefi-cxone-fallback-link:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  text-decoration: none;
}
/* Distinguishes inline links inside prose contexts from surrounding text
 * with more than color alone, satisfying WCAG 2.1 Success Criterion 1.4.1
 * (Use of Color) and Pa11y's `link-in-text-block` axe rule.
 *
 * Scoped to `.elementor p > a` so the rule:
 *   - lives at specificity (0,1,2) and overrides Elementor's
 *     `custom-frontend.min.css` rule `.elementor a { text-decoration: none }`
 *     (specificity (0,1,1)), which would otherwise win the cascade and
 *     keep links underlined-by-color-only;
 *   - only matches `<a>` whose immediate parent is `<p>` (prose context),
 *     leaving Elementor button widgets, nav-menu items, and chrome links
 *     untouched (none of those wrap their anchor in a `<p>`);
 *   - applies inside any Elementor widget root (text-editor, html, FAQ
 *     content, etc.), not just `.elementor-widget-text-editor`, so prose
 *     links flagged on multiple widget types all get the same treatment.
 *
 * Adds the underline plus a focus-visible outline so keyboard navigation
 * remains visible even when kit color overrides obscure the underline. */
/* Two complementary selectors that together cover the six axe
 * `link-in-text-block` findings from the 2026-05-05 baseline:
 *
 *   - `.elementor p a` (specificity 0,1,2) overrides Elementor's
 *     `.elementor a { text-decoration: none }` (0,1,1) and catches
 *     inline links wrapped in `<span>`, `<strong>`, `<em>`, etc.
 *     inside paragraphs.
 *   - `.elementor-widget-text-editor a` (0,1,1) matches Elementor's
 *     specificity but wins via cascade order (theme.css loads after
 *     custom-frontend.min.css). Catches text-editor widgets where the
 *     link sits directly in a `<div>` without a paragraph wrapper —
 *     mostly mailto links and short call-outs. */
/* Selector order matters for stylelint's `no-descending-specificity`:
 * specificity must ascend through the file. The base block sits at
 * (0,1,1) → (0,1,2); the focus-visible block at (0,2,1) → (0,2,2).
 * No separate hover override — the base text-decoration sticks on
 * hover because nothing in the cascade tries to remove it on hover
 * specifically. */
.elementor-widget-text-editor a,
.elementor p a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.elementor-widget-text-editor a:focus-visible,
.elementor p a:focus-visible {
  outline: 2px solid var(--cinefi-color-primary);
  outline-offset: 2px;
}
/* Shared gradient-border treatment used by the cinefi card family
 * (icon card, feature card, feature promo). Replaces what was
 * previously per-element Elementor "Border Type: Gradient" settings
 * stored in `_elementor_data` for each card individually — the
 * conic-gradient values below are lifted from the live computed
 * styles on cinefi.com home §1 so the visual matches.
 *
 * Phase G — see component-audit/_inventory.md, "gradient-border
 * (CSS base)" entry.
 *
 * Mechanism: layered backgrounds clipped differently.
 *  - First layer (`linear-gradient(<inner-fill>, <inner-fill>)`) is a
 *    solid fill clipped to padding-box. This is what shows inside the
 *    card.
 *  - Second layer (the conic gradient) is clipped to border-box. The
 *    1px transparent border becomes a window onto this layer,
 *    producing the colored highlight at the card edge.
 *
 * Variant variables: each consumer can override the inner-fill color
 * or the gradient stops via the documented custom properties below.
 * Defaults match cinefi.com's home §1 treatment exactly so adopters
 * who don't override get the canonical look.
 *
 * Distinct from `gradient-box.css` — that uses a linear-gradient
 * border for a different (older) treatment. The conic-gradient form
 * is what live cinefi.com renders today on the icon cards.
 */
.cinefi-gradient-card {
  /* Inner solid fill (clipped to padding-box). #07131d matches the
   * legacy card's inner background exactly. Override via the
   * containing widget when a variant needs a different inner fill
   * (e.g., a translucent or branded card). */
  --cinefi-gradient-card-inner-fill: #07131d;

  /* Conic-gradient border colors. Five-stop sequence matches the
   * legacy treatment (purple → magenta → cyan → teal → dark teal).
   * Origin at 79.85% 57.72% mirrors the legacy reference point.
   * Override the whole list via `--cinefi-gradient-card-border-image`
   * if a future variant needs a different gradient palette. */
  --cinefi-gradient-card-border-image: conic-gradient(
    from 211deg at 79.85% 57.72%,
    #6e00ba 79.2deg,
    #d464ff 123.67deg,
    #00e0f6 241.2deg,
    #02708e 348.91deg,
    #026d8b 360deg
  );

  /* Card geometry. */
  --cinefi-gradient-card-border-radius: 20px;
  --cinefi-gradient-card-border-width: 1px;

  /* Default text color matches legacy section container color exactly
   * (rgb(245 255 254) = #f5fffe). Override at the widget level if a
   * variant needs different inherited text color. */
  --cinefi-gradient-card-color: #f5fffe;

  position: relative;
  border: var(--cinefi-gradient-card-border-width) solid transparent;
  border-radius: var(--cinefi-gradient-card-border-radius);
  background-image:
    linear-gradient(var(--cinefi-gradient-card-inner-fill), var(--cinefi-gradient-card-inner-fill)),
    var(--cinefi-gradient-card-border-image);
  background-clip: padding-box, border-box;

  /* Two values to match the legacy live treatment exactly: layer 1
   * (solid inner fill) is positioned within the padding box; layer 2
   * (conic-gradient border) is positioned within the border box.
   * Visually equivalent to the single-value form because layer 1 is
   * solid, but the regression spec asserts on the exact computed
   * value so we mirror the legacy here. */
  background-origin: padding-box, border-box;
  color: var(--cinefi-gradient-card-color);
}
/* Per-widget styles co-locate with their PHP class under theme/Elementor/Widgets/.
 * They're imported here so the existing PostCSS bundle pipeline picks them up. */
/* Layout for the cinefi-icon-card-grid widget — section heading +
 * body lede above an auto-fit grid of icon cards. Each card carries
 * `.cinefi-gradient-card` (shared treatment in gradient-card.css)
 * plus `.cinefi-icon-card` for the icon + title + body layout.
 *
 * Phase G — extracted from home §1 (post 4099). Replaces ~30 wrapper
 * elements per card with a clean <li>.
 *
 * All design values live as widget-scoped CSS custom properties on
 * the `.cinefi-icon-card-grid` root. Why widget-scoped: keeps the
 * values discoverable and editable in one place without committing
 * them as theme-wide tokens before we know which values are shared.
 * Once we've built 3+ widgets we'll review which custom properties
 * have converged and promote those to `src/css/base/variables.css`.
 *
 * Specificity note: card-level + grid-level rules are written as
 * `.cinefi-icon-card-grid .cinefi-icon-card-grid__<element>` (0,2,0)
 * to outrank Elementor's kit heading rules (e.g. `.elementor h3` at
 * 0,1,1). Without the parent-chain, kit typography wins.
 */
.cinefi-icon-card-grid {
  /* Typography ---------- */

  /* Section heading. Values lifted from the legacy section's heading
   * widget settings (`_elementor_data` for post 4099). */
  --heading-font-size: 60px;
  --heading-font-weight: 800;
  --heading-letter-spacing: -2.4px;
  --heading-line-height: 1;
  --heading-color: #ebfffe;

  /* Section body lede + card body share the same prose treatment.
   * Letter-spacing -0.02em × 18px = -0.36px, matching legacy. */
  --body-font-size: 1.125rem;
  --body-font-weight: 400;
  --body-letter-spacing: -0.02em;
  --body-line-height: 1.42;
  --body-color: rgb(245 255 254 / 90%);

  /* Card title — same size + spacing as body, only the weight + color
   * differ. Matches the legacy `<strong>` rendering inside the
   * text-editor widget. */
  --card-title-font-weight: 700;
  --card-title-color: #ebfffe;

  /* Inherited section-level letter-spacing. Cards inherit this on
   * the container but text widgets override per-element. */
  --section-letter-spacing: -0.03em;

  /* Default text color for the section. Cards inherit this on their
   * container; title + body widgets override per-element. */
  --section-text-color: #f5fffe;

  /* Layout ---------- */

  /* Outer max-widths: list + heading-head share 1310 (matches legacy
   * grid width); heading constrained to 800 to wrap at 2 lines on
   * desktop (prod observed at 761 wide — see Brandon's 2026-05-22
   * feedback on home-test parity); body lede 820 to give Linux fonts
   * breathing room at the spec runner (legacy renders at 795 on macOS
   * / wraps at 782 on Linux Chromium without this slack). */
  --content-max-width: 1310px;
  --heading-max-width: 100%;
  --body-max-width: 820px;

  /* Card-level. Padding `29px 36px` matches the legacy card's
   * computed padding exactly. The card uses a fixed-height icon row
   * + auto-height title + body grid (see below), so the icon area
   * occupies the same vertical space on every card regardless of
   * icon natural size. Title + body sit at the bottom edge.
   *
   * The legacy version normalized icon-area height by setting
   * different `padding` on each image-widget per card (32+30 on the
   * narrow location pin, 0 on the square dollar/calendar, 35+34 on
   * the narrow ribbon — measured ~168px tall in all four cases).
   * Our widget reads the target height as a single constant and
   * lets each icon center inside without per-card tuning. */
  --card-padding-block: 29px;
  --card-padding-inline: 36px;
  --card-gap: 0.25rem;
  --card-icon-area-height: 168px;

  /* Grid-level. The grid is responsive with a fixed column count at
   * each breakpoint (NOT auto-fit/auto-fill) to prevent off-step
   * wraps like "3 + 1" at narrow tablet widths. Breakpoint at
   * 769px matches the legacy section's behavior probed live:
   * ≤768px renders 2 columns, ≥769px renders 4 columns. */
  --grid-gap: 1.5rem;
  --grid-columns-mobile: 2;
  --grid-columns-desktop: 4;

  /* Section-level. Padding-inline 12px matches the legacy section's
   * computed horizontal padding at all desktop+tablet viewports
   * (lifted from `_elementor_data` settings: `padding: 132 12 132 12`).
   * Mobile override below bumps to 16px to match legacy at <=576. */
  --section-gap: 2.5rem;
  --section-padding-block: 4rem;
  --section-padding-inline: 12px;

  /* ---------- Component ---------- */
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  padding-block: var(--section-padding-block);
  padding-inline: var(--section-padding-inline);
  color: var(--section-text-color);
  letter-spacing: var(--section-letter-spacing);
  text-align: center;
}
/* Mobile responsive overrides — match the legacy section's mobile
 * settings exactly. Probed live on the legacy section: the kit's
 * mobile-typography breakpoint fires at exactly 577px (Bootstrap-
 * standard xs/sm boundary). The grid breakpoint is separate at
 * 768/769 (so 577–768px is "narrow tablet" — desktop typography
 * with 2-column grid). Two breakpoints, two media queries:
 *
 *   Typography + card-padding: ≤576px (legacy's `mobile_extra`)
 *   - Heading: 38 / 0 letter-spacing / 40.4px line-height
 *     (vs desktop 60 / -2.4px / 1)
 *   - Body + card text: 14px (vs desktop 18). Line-height stays at
 *     25.56px (the desktop computed value), NOT scaled with the
 *     smaller font. Fixed px here instead of unitless matches the
 *     legacy kit's behavior of holding line-height constant when
 *     font shrinks.
 *   - Section padding-inline 24 → 16 (legacy 16px gutters at mobile)
 *   - Card padding 29×36 → 8 all-sides (legacy drops card padding
 *     aggressively at mobile to give content room in narrow cards)
 *   - Icon-area-height bumps 168 → 189 to absorb cross-platform
 *     text-wrap variance at the test mobile viewport (390). The
 *     longest card title wraps to 2 lines on Linux Chromium Docker
 *     vs 1 line on macOS Chrome at 14px / 169px-wide cards;
 *     adjusting icon area lands all cards at the same total height
 *     regardless. */
@media (width <= 576px) {
  .cinefi-icon-card-grid {
    --heading-font-size: 38px;
    --heading-letter-spacing: 0;
    --heading-line-height: 40.4px;
    --body-font-size: 14px;
    --body-line-height: 25.56px;
    --section-padding-inline: 16px;
    --card-padding-block: 8px;
    --card-padding-inline: 8px;
    --card-icon-area-height: 189px;
  }
}
/* Width 100% ensures the head stretches to fill the parent's
 * cross-axis. Without `width: 100%` the auto-margin shrink-wrap
 * leaves the head at intrinsic content width. */
.cinefi-icon-card-grid__head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
}
.cinefi-icon-card-grid .cinefi-icon-card-grid__heading {
  align-self: center;
  width: 100%;
  max-width: var(--heading-max-width);
  margin: 0;
  font-size: var(--heading-font-size);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  color: var(--heading-color);
}
.cinefi-icon-card-grid .cinefi-icon-card-grid__body {
  align-self: center;
  width: 100%;
  max-width: var(--body-max-width);
  margin: 0;
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  color: var(--body-color);
}
.cinefi-icon-card-grid__list {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns-mobile), 1fr);

  /* Equal-height rows across the entire grid: cards in row 2 stretch
   * to match row 1's tallest card. Mirrors the legacy section's
   * behavior (probed live, the legacy renders explicit equal row
   * heights at multi-row breakpoints). Without this, mobile cards 1
   * and 2 sit at content-min while cards 3 and 4 fill more vertical
   * space when card 4's title wraps to two lines. */
  grid-auto-rows: 1fr;
  gap: var(--grid-gap);
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
/* Above the legacy section's 768px max-width breakpoint, expand the
 * grid to 4 columns. Mirrors the legacy responsive behavior exactly
 * (probed live: 768 → 2 cols, 769 → 4 cols). */
@media (width >= 769px) {
  .cinefi-icon-card-grid__list {
    grid-template-columns: repeat(var(--grid-columns-desktop), 1fr);
  }
}
/* Card layout. Visual treatment (gradient border) comes from
 * `.cinefi-gradient-card` in gradient-card.css.
 *
 * Three-row grid: row 1 (1fr) holds the icon and absorbs all the
 * leftover vertical space; rows 2 and 3 (auto) hold the title and
 * body at their natural heights. The icon centers inside row 1 via
 * `align-items: center`, so:
 *   - text (title + body) is anchored to the bottom of every card,
 *     at a consistent vertical position across the row
 *   - icons of varying natural-height (the SVG set spans ~60–108px)
 *     all share the same icon-center y-position, since row 1 has
 *     identical height across cards (forced by the grid's
 *     equal-height stretch behavior)
 *
 * `text-align: start` resets to match the legacy outer container's
 * value (the kit/section default). Visible centering still works:
 *   - `justify-items: center` centers grid items on the inline axis
 *   - title / body each set `text-align: center` directly. */
.cinefi-icon-card {
  display: grid;
  grid-template-rows: var(--card-icon-area-height) auto auto;
  place-items: center center;
  gap: var(--card-gap);
  padding: var(--card-padding-block) var(--card-padding-inline);
  text-align: start;
}
.cinefi-icon-card__link {
  display: contents;
  color: inherit;
  text-decoration: none;
}
/* Render the icon SVG inside the fixed-height icon row at its
 * natural size, capped to the row dimensions. `align-items: center`
 * (inherited from `.cinefi-icon-card`'s `place-items: center
 * center`) vertically centers the icon inside the row, so cards
 * with different icon natural-sizes (the SVG set spans 72×99 →
 * 167×167) all share the same icon-area footprint without per-card
 * padding tuning. */
.cinefi-icon-card .cinefi-icon-card__icon {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
/* Title is rendered as `<h3>` (semantic, screen-reader friendly).
 * Visual matches the legacy `<strong>` text inside the text-editor
 * widget — same font-size + line-height + letter-spacing as body
 * prose, only weight + color differ. */
.cinefi-icon-card .cinefi-icon-card__title {
  margin: 0;
  font-size: var(--body-font-size);
  font-weight: var(--card-title-font-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  color: var(--card-title-color);
  text-align: center;
}
.cinefi-icon-card .cinefi-icon-card__body {
  margin: 0;
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  color: var(--body-color);
  text-align: center;
}
/* Layout for the cinefi-flat-two-column-cta widget — image on one
 * side, content (heading + body + CTA button) on the other.
 *
 * Phase G — extracted from home §7 (post 4099). Originally replaced 4
 * separate Elementor widgets in nested columns with a clean grid
 * widget covering home §7's instance only.
 *
 * Phase G consolidation passes (2026-05-07):
 *   1. Heading desktop AND mobile typography supplied by the shared
 *      `.cinefi-display-{xl|lg|md|sm}` utility classes (in
 *      `src/css/utilities/display-typography.css`). Widget-scoped
 *      concerns are color + margin only.
 *   2. Button visual treatment supplied by the shared `.cinefi-btn-{style}`
 *      utility classes (in `src/css/utilities/buttons.css`). Two styles
 *      cover all instances: `cinefi-btn-fill` for primary CTAs,
 *      `cinefi-btn-gradient-outline` for secondary CTAs.
 *   3. Optional `image_mobile` field swaps in at <=576 when set
 *      (originally added for borde-fresa cards on checking + savings
 *      §0.4–§0.7).
 *   4. `column_layout` control (equal | narrow-content) drives BOTH
 *      column proportions AND the tablet stacking breakpoint:
 *        - equal:           1140 max-width / 50-50 cols / stacks ≤576
 *          (home §7 instance, equal layout works at 577+)
 *        - narrow-content:  1310 max-width / 50-50 cols + 5em content
 *          inner padding / stacks ≤768 (borde-fresa instance, the
 *          asymmetric "narrow text + wide image" needs more total
 *          width to be readable, so it stacks at the kit's tablet
 *          breakpoint instead of the mobile one)
 *
 * Single widget covers home §7 + checking/savings §0.4–§0.7 (9
 * instances total). Regression specs:
 *   - tests/visual/compare-flat-two-column-cta.spec.ts (home §7)
 *   - tests/visual/compare-borde-fresa-card.spec.ts (checking §0.4)
 */
.cinefi-flat-cta {
  /* Typography ---------- */

  /* Heading typography (font-size/weight/line-height/letter-spacing)
   * comes from the `.cinefi-display-{size}` utility class applied
   * alongside the widget heading class. Only color lives here. */
  --heading-color: #ebfffe;

  /* Body — desktop 18/400/-0.02em/25.56px, mobile 14 with same
   * letter-spacing em (so px scales). Color rgb(245 255 254 / 90%). */
  --body-font-size: 1.125rem;
  --body-font-weight: 400;
  --body-line-height: 1.42;
  --body-letter-spacing: -0.02em;
  --body-color: rgb(245 255 254 / 90%);

  /* Button typography + chrome comes from the `.cinefi-btn-{style}`
   * utility class — see `src/css/utilities/buttons.css`. Widget rule
   * below consumes the `--btn-*` vars via `var()`. */

  /* Layout ---------- */

  /* Card max-width default 1140px (equal layout). Narrow-content
   * variant overrides to 1310px for borde-fresa-style cards. */
  --content-max-width: 1140px;
  --column-gap: 30px;
  --content-stack-gap: 1.5rem;

  /* Column inner padding default 10px (equal layout). Narrow-content
   * variant overrides to 5em for borde-fresa-style cards (matches the
   * legacy `.elementor-element-929a82a` per-column padding). */
  --column-inner-padding-inline: 10px;

  /* Section. Padding-inline 12px matches legacy (`padding: 0 10px`
   * on section root + 10px column padding ≈ 12px effective at the
   * content edge). Mobile bumps to 16 to match legacy. */
  --section-padding-block: 4rem;
  --section-padding-inline: 12px;

  /* ---------- Component ---------- */
  display: flex;
  flex-direction: column;
  padding-block: var(--section-padding-block);
  padding-inline: var(--section-padding-inline);
  color: var(--body-color);
  letter-spacing: var(--body-letter-spacing);
}
/* Mobile responsive overrides — match legacy at <=576px (Bootstrap
 * xs/sm boundary, the legacy kit's typography breakpoint).
 *  - Body 18 → 14 (line-height stays at 25.56px fixed, not scaled)
 *  - Section padding-inline 12 → 16
 *  - Heading mobile sizing handled by the display utility class
 *  - Button mobile sizing handled by the cinefi-btn utility class
 *
 * Note: the per-widget mobile heading override (e.g., 60→36 for xl)
 * is now in the display-typography utility, so widgets only override
 * here when they want NON-DEFAULT scaling. */
@media (width <= 576px) {
  .cinefi-flat-cta {
    --body-font-size: 14px;
    --body-line-height: 25.56px;
    --section-padding-inline: 16px;
  }

  /* Narrow-content variant uses 12px section padding at mobile (legacy
   * borde-fresa cards have `padding-inline: 12` on their column wrapper)
   * AND removes column inner padding (legacy column has 0 inner padding
   * at mobile so body + button fill the full column width).
   * Equal layout keeps 16 + 10 to match home §7's spec-locked behavior. */
  .cinefi-flat-cta:has(.cinefi-flat-cta__layout--narrow-content) {
    --section-padding-inline: 12px;
    --column-inner-padding-inline: 0;
  }

  /* Prod renders the card images FULL-BLEED at phone widths (390px wide
   * at 390 viewport, probed 2026-06-12); ours sat inset at ~346. Break
   * the media column out of the padded container. */
  .cinefi-flat-cta:has(.cinefi-flat-cta__layout--narrow-content) .cinefi-flat-cta__media {
    padding: 0;
    margin-inline: calc(50% - 50vw);
  }

  .cinefi-flat-cta__layout--narrow-content .cinefi-flat-cta__image {
    max-width: none;
  }

  .cinefi-flat-cta--savings-goals .cinefi-flat-cta__layout {
    -webkit-padding-before: 10px;
            padding-block-start: 10px;
  }

  .cinefi-flat-cta--round-up-savings,
  .cinefi-flat-cta--financial-insights,
  .cinefi-flat-cta--instant-transfers {
    -webkit-margin-before: -20px;
            margin-block-start: -20px;
  }

  .cinefi-flat-cta--round-up-savings .cinefi-flat-cta__layout,
  .cinefi-flat-cta--financial-insights .cinefi-flat-cta__layout,
  .cinefi-flat-cta--instant-transfers .cinefi-flat-cta__layout {
    -webkit-padding-before: 0;
            padding-block-start: 0;
  }

  .cinefi-flat-cta--instant-transfers .cinefi-flat-cta__layout {
    -webkit-padding-after: 65px;
            padding-block-end: 65px;
  }

  .cinefi-flat-cta--cut-smarter-savings.cinefi-flat-cta--has-background {
    --section-padding-block: 10px;
    --section-padding-inline: 10px;
    --column-inner-padding-inline: 0;
    --content-stack-gap: 24px;
    --body-font-size: 14px;
    --body-line-height: 25.56px;
    --body-letter-spacing: -0.28px;

    min-height: 590px;
  }

  .cinefi-flat-cta--cut-smarter-savings .cinefi-flat-cta__layout {
    max-width: 428px;
  }

  .cinefi-flat-cta--cut-smarter-savings .cinefi-flat-cta__content {
    width: 100%;
  }

  .cinefi-flat-cta.cinefi-flat-cta--cut-smarter-savings .cinefi-flat-cta__heading {
    --display-letter-spacing: -0.45px;

    width: 100%;
    -webkit-margin-after: 5px;
            margin-block-end: 5px;
    color: #f5fffe;
    word-spacing: -0.45px;
  }

  .cinefi-flat-cta--cut-smarter-savings .cinefi-flat-cta__body:has(+ p) {
    display: none;
  }

  .cinefi-flat-cta--cut-smarter-savings .cinefi-flat-cta__content > p {
    align-self: center;
    width: 328px;
    max-width: 100%;
    margin: 0;
    font-size: 14px;
    line-height: 25.56px;
    letter-spacing: -0.28px;
    word-spacing: -0.28px;
  }

  .cinefi-flat-cta--cut-smarter-savings .cinefi-flat-cta__content > p:has(strong) {
    -webkit-margin-after: 29px;
            margin-block-end: 29px;
  }

  .cinefi-flat-cta--cut-smarter-savings .cinefi-flat-cta__content > p:empty {
    display: none;
  }

  /* Stretch the button to full column width at mobile — legacy
   * renders the button column-width when the layout collapses to
   * single-column stack. Matches Docker Chromium's render of the
   * legacy section at the test mobile viewport (390x844). */
  .cinefi-flat-cta .cinefi-flat-cta__button {
    width: 100%;
  }

  .cinefi-flat-cta--savings-goals .cinefi-flat-cta__button,
  .cinefi-flat-cta--round-up-savings .cinefi-flat-cta__button,
  .cinefi-flat-cta--financial-insights .cinefi-flat-cta__button,
  .cinefi-flat-cta--instant-transfers .cinefi-flat-cta__button,
  .cinefi-flat-cta--cut-smarter-savings .cinefi-flat-cta__button {
    --btn-padding-block: 20px;
    --btn-border: 1px solid #f5fffe;

    align-self: flex-start;
    width: 300px;
    max-width: 300px;
    background-color: #6e00ba;
  }

  .cinefi-flat-cta--round-up-savings .cinefi-flat-cta__button,
  .cinefi-flat-cta--instant-transfers .cinefi-flat-cta__button,
  .cinefi-flat-cta--cut-smarter-savings .cinefi-flat-cta__button {
    --btn-padding-inline: 80px;
  }

  .cinefi-flat-cta--cut-smarter-savings .cinefi-flat-cta__button {
    align-self: center;
  }

  .cinefi-flat-cta--savings-goals .cinefi-flat-cta__button {
    --btn-padding-inline: 30px;
  }

  .cinefi-flat-cta--financial-insights .cinefi-flat-cta__button {
    --btn-padding-inline: 20px;
  }

  .elementor .elementor-element-eb0d963 .cinefi-flat-cta__button {
    align-self: flex-start;
    width: 300px;
    max-width: 300px;
    padding-block: 20px;
    border: 1px solid #f5fffe;
  }

  .elementor .elementor-element-9bc2a90 .cinefi-flat-cta__button,
  .elementor .elementor-element-6b0bfa6 .cinefi-flat-cta__button,
  .elementor .elementor-element-a107236 .cinefi-flat-cta__button {
    align-self: flex-start;
    width: 300px;
    max-width: 300px;
    padding-block: 20px;
    border: 1px solid #f5fffe;
  }

  .elementor .elementor-element-9bc2a90 .cinefi-flat-cta__button,
  .elementor .elementor-element-a107236 .cinefi-flat-cta__button {
    padding-inline: 80px;
  }

  .elementor .elementor-element-6b0bfa6 .cinefi-flat-cta__button {
    padding-inline: 20px;
  }

  .elementor .elementor-element-6b0bfa6 .cinefi-flat-cta__content {
    -webkit-padding-before: 10px;
            padding-block-start: 10px;
  }

  .elementor .elementor-element-edf5209 .cinefi-flat-cta--has-background {
    --section-padding-block: 0;
    --section-padding-inline: 12px;
    --column-inner-padding-inline: 0;
    --content-stack-gap: 0;
    --body-line-height: 25.2px;
    --body-letter-spacing: -0.28px;

    min-height: 590px;
  }

  .elementor .elementor-element-edf5209 .cinefi-flat-cta__heading {
    --display-letter-spacing: -0.45px;

    -webkit-margin-after: 15px;

            margin-block-end: 15px;
    color: #f5fffe;
    word-spacing: -0.45px;
  }

  .elementor .elementor-element-edf5209 .cinefi-flat-cta__content > p {
    margin: 0;
    font-size: 14px;
    line-height: 25.2px;
    letter-spacing: -0.28px;
    word-spacing: -0.28px;
  }

  .elementor .elementor-element-edf5209 .cinefi-flat-cta__body {
    -webkit-padding-before: 14px;
            padding-block-start: 14px;
  }

  .elementor .elementor-element-edf5209 .cinefi-flat-cta__body + p {
    margin-block: 24px 60px;
  }

  .elementor .elementor-element-edf5209 .cinefi-flat-cta__content > p strong,
  .elementor .elementor-element-edf5209 .cinefi-flat-cta__content > p span {
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
  }

  .elementor .elementor-element-edf5209 .cinefi-flat-cta__button {
    align-self: center;
    width: 300px;
    max-width: 300px;
    padding-block: 20px;
    padding-inline: 80px;
    border: 1px solid #f5fffe;
    background-color: #6e00ba;
  }
}
/* Layout container — defaults to stacked, modifier classes activate
 * 2-column at the right breakpoint per `column_layout`. */
.cinefi-flat-cta__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--column-gap);
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
}
/* Equal layout — stacks at <=576, 50/50 at >=577. Matches home §7. */
@media (width >= 577px) {
  .cinefi-flat-cta__layout--equal {
    grid-template-columns: 1fr 1fr;
  }

  .cinefi-flat-cta__layout--equal.cinefi-flat-cta__layout--image-right .cinefi-flat-cta__media {
    order: 2;
  }
}
/* Narrow-content layout — stacks at <=768, 50/50 at >=769 with 5em
 * content inner padding (the "narrow text + wide image" feel comes
 * from the inner padding, not from asymmetric column widths). Matches
 * checking/savings §0.4–§0.7 borde-fresa cards.
 *
 * The card is also 1310px wide (vs 1140px for equal) to give the
 * content + image both enough room.
 *
 * Heading color also switches to the kit's `text` global (`#f5fffe`)
 * vs the equal layout's `#ebfffe` per-widget override — borde-fresa
 * cards in the legacy use the kit standard rather than the home §7
 * per-instance override. */
.cinefi-flat-cta__layout--narrow-content {
  --content-max-width: 1310px;

  /* Prod's borde-fresa cards are uniformly image-height + 40px: every
   * one of the 8 checking/savings card containers measures exactly 40
   * taller than its rendered image (probed 2026-06-12 at 1440 — QA
   * rows 46/48 phase 2). Ours collapsed to the image height. */
  padding-block: 20px;
}
.cinefi-flat-cta:has(.cinefi-flat-cta__layout--narrow-content) {
  --heading-color: #f5fffe;

  /* Prod's borde-fresa card containers carry NO section padding — the
   * card visual IS the section, and consecutive cards tuck via their
   * negative top margins directly. Our default 4rem shell padding
   * added 64+64 = 128px per seam, which is exactly the uniform +128
   * per-card strip delta the 2026-06-12 pixel-diff measured after the
   * card containers themselves reached parity (QA rows 46/48 phase 2). */
  --section-padding-block: 0;
}
@media (width >= 769px) {
  .cinefi-flat-cta__layout--narrow-content {
    grid-template-columns: 1fr 1fr;

    --column-inner-padding-inline: 5em;
  }

  .cinefi-flat-cta__layout--narrow-content.cinefi-flat-cta__layout--image-right
    .cinefi-flat-cta__media {
    order: 2;
  }
}
/* Column-inset padding (default 10px, narrow-content overrides to
 * 5em). Mirrors the legacy column containers' inner padding.
 *
 * 2026-06-01: scoped the inset to the CONTENT column only. Prior code
 * applied the 5em narrow-content inset to BOTH columns, which shrank the
 * image to ~423px inside its ~603px column (603 − 2×80px = 443 → 423px
 * rendered). Prod does NOT inset the media column — its phone images fill
 * to 500px (image-right) / 603px (image-left), reading much larger and
 * consistent between positions. Removing the media inset lets our images
 * fill their column to ~580px, matching prod's larger, position-consistent
 * sizing. The content inset lives on the `.cinefi-flat-cta__content` rule
 * below; the media column keeps a small 10px gutter via its own rule here. */
.cinefi-flat-cta__media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 10px;
}
/* Image fills its column width (prod parity). The natural aspect ratio is
 * preserved via height:auto. */
.cinefi-flat-cta__image {
  width: 100%;
  max-width: 100%;
  height: auto;
}
/* Narrow-content (checking/savings §0.4–§0.7 borde-fresa phone shots):
 * cap the image at 560px so the near-square round-up image doesn't
 * over-stretch past prod's ~603px, while the tall folders/cashflow
 * images still fill comfortably. Equal layout (home §7) keeps 100%. */
.cinefi-flat-cta__layout--narrow-content .cinefi-flat-cta__image {
  max-width: 560px;
}
/* Desktop / mobile image swap. The mobile image is hidden by default
 * (only renders when the editor sets `image_mobile`). At <=576px:
 *   - When BOTH images exist (`:has(__image--mobile)`), swap them.
 *   - When only the desktop image exists, leave it visible at mobile.
 * Without `:has()`, hiding the desktop image unconditionally at mobile
 * would break home §7 (single-image instance). */
.cinefi-flat-cta__image--mobile {
  display: none;
}
@media (width <= 576px) {
  .cinefi-flat-cta__media:has(.cinefi-flat-cta__image--mobile) .cinefi-flat-cta__image--desktop {
    display: none;
  }

  .cinefi-flat-cta__media:has(.cinefi-flat-cta__image--mobile) .cinefi-flat-cta__image--mobile {
    display: block;
  }
}
.cinefi-flat-cta__content {
  display: flex;
  flex-direction: column;
  gap: var(--content-stack-gap);
  align-items: flex-start;
  justify-content: center;
  padding-inline: var(--column-inner-padding-inline);
}
/* =====================================================================
 * CENTERED layout mode (2026-06-01) — single centered column, no image.
 * Used by full-bleed CTA bands like checking §0.10 ("Cut to smarter
 * checking.") on the purple gradient. Heading + body + button are all
 * horizontally centered. There is no media column, so the layout grid
 * collapses to a single centered track. Additive: existing equal /
 * narrow-content instances are unaffected.
 * ===================================================================== */
.cinefi-flat-cta__layout--centered {
  grid-template-columns: 1fr;
  max-width: 760px;
  text-align: center;
}
.cinefi-flat-cta__layout--centered .cinefi-flat-cta__content {
  align-items: center;
  text-align: center;
}
/* Optional full-bleed section background (e.g. §0.10 purple gradient).
 * The inline `background:` value is set in render() from the
 * `section_background` control.
 *
 * Round 2 (2026-06-01): prod §0.10 measures exactly 603px tall with
 * `min-height: 603px` + only 10px block padding (content vertically centered
 * by justify-content). Round-1 used 112px (7rem) padding which produced a
 * 543px band — shorter than prod. Switch to prod's model: min-height 603px +
 * centered content (the `.cinefi-flat-cta` shell is already display:flex
 * column; centering the content gives the prod look). Keep modest block
 * padding so content doesn't touch the edges at narrow widths.
 *
 * Full-bleed is achieved at the page-container level — see
 * `src/css/layout/container.css` `.elementor > .e-con-full { padding-inline:
 * 0 }` (and the row-gap:0 there), which zeroes the kit's default 10px inset +
 * 15px row-gap on the TOP-LEVEL container so full-background sections reach the
 * viewport edges AND sit flush against neighbours (prod parity). This widget
 * only needs `width: 100%` to fill that now-edge-to-edge container. */
.cinefi-flat-cta--has-background {
  --section-padding-block: 1.5rem;

  justify-content: center;
  width: 100%;
  min-height: 603px;
}
/* Heading typography (size/weight/line-height/letter-spacing) comes
 * from the display utility class. Color + margin live here. */
.cinefi-flat-cta .cinefi-flat-cta__heading {
  margin: 0;
  font-size: var(--display-font-size);
  font-weight: var(--display-font-weight);
  line-height: var(--display-line-height);
  letter-spacing: var(--display-letter-spacing);
  color: var(--heading-color);
}
.cinefi-flat-cta .cinefi-flat-cta__body {
  margin: 0;
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  color: var(--body-color);
}
.cinefi-flat-cta .cinefi-flat-cta__body a {
  color: #fff;
}
/* Button — typography + chrome comes from the .cinefi-btn-{style}
 * utility class via the `--btn-*` custom properties. Widget-scoped
 * concerns: layout (inline-flex), text alignment, hover transitions. */
.cinefi-flat-cta .cinefi-flat-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--btn-padding-block);
  padding-inline: var(--btn-padding-inline);
  border: var(--btn-border);
  border-radius: var(--btn-border-radius);
  background-image: var(--btn-bg-image);
  background-clip: var(--btn-bg-clip);
  background-origin: var(--btn-bg-origin);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  color: var(--btn-color);

  /* Match legacy `.elementor-button` rule from the kit, which sets
   * text-align: center. Required even though the button is a flex
   * container (so the property doesn't directly position the
   * button-text span) because the regression spec asserts on the
   * computed value. */
  text-align: center;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    box-shadow 0.25s ease;
}
.cinefi-flat-cta .cinefi-flat-cta__button:hover,
.cinefi-flat-cta .cinefi-flat-cta__button:focus-visible {
  opacity: 0.75;
  box-shadow: 0 2px 30px rgb(0 0 0 / 20%);
}
.cinefi-flat-cta__button-text {
  display: inline-block;
}
@media (width > 576px) {
  .elementor-widget-cinefi-flat-two-column-cta:has(.cinefi-flat-cta--cut-smarter-savings) {
    background: transparent !important;
  }

  .cinefi-flat-cta--cut-smarter-savings.cinefi-flat-cta--has-background {
    --section-padding-block: 10px;
    --section-padding-inline: 10px;
    --content-stack-gap: 15px;
    --heading-color: #f5fffe;

    min-height: 804px;
    background: transparent !important;
  }

  .cinefi-flat-cta--cut-smarter-savings .cinefi-flat-cta__layout--centered {
    max-width: none;
  }

  .cinefi-flat-cta--cut-smarter-savings .cinefi-flat-cta__content {
    width: 100%;
    padding-inline: 0;
  }

  .cinefi-flat-cta--cut-smarter-savings .cinefi-flat-cta__heading {
    --display-font-size: 52px;
    --display-line-height: 52px;
    --display-letter-spacing: -0.65px;

    width: 100%;
  }

  .cinefi-flat-cta--cut-smarter-savings .cinefi-flat-cta__body,
  .cinefi-flat-cta--cut-smarter-savings .cinefi-flat-cta__content > p {
    width: 684px;
    max-width: 100%;
    margin: 0;
    font-size: 18px;
    line-height: 25.56px;
    letter-spacing: -0.36px;
    color: rgb(245 255 254 / 90%);
  }

  .cinefi-flat-cta--cut-smarter-savings .cinefi-flat-cta__body {
    display: none;
    margin: 0;
  }

  .cinefi-flat-cta--cut-smarter-savings .cinefi-flat-cta__content > p {
    -webkit-margin-after: 9px;
            margin-block-end: 9px;
  }

  .cinefi-flat-cta--cut-smarter-savings .cinefi-flat-cta__content > p:where(:has(strong)) {
    -webkit-margin-after: 24px;
            margin-block-end: 24px;
  }

  .cinefi-flat-cta--cut-smarter-savings .cinefi-flat-cta__body:empty,
  .cinefi-flat-cta--cut-smarter-savings .cinefi-flat-cta__content > p:where(:empty) {
    display: none;
    margin: 0;
  }

  .elementor .elementor-element-edf5209 .cinefi-flat-cta--has-background {
    --section-padding-block: 10px;
    --section-padding-inline: 10px;
    --content-stack-gap: 15px;
    --heading-color: #f5fffe;

    min-height: 67vh;
  }

  .elementor .elementor-element-edf5209 .cinefi-flat-cta__layout--centered {
    max-width: none;
  }

  .elementor .elementor-element-edf5209 .cinefi-flat-cta__content {
    width: 100%;
    padding-inline: 0;
  }

  .elementor .elementor-element-edf5209 .cinefi-flat-cta__heading {
    --display-font-size: 52px;
    --display-line-height: 52px;
    --display-letter-spacing: -0.65px;
  }

  .elementor .elementor-element-edf5209 .cinefi-flat-cta__body,
  .elementor .elementor-element-edf5209 .cinefi-flat-cta__content > p {
    width: 720px;
    max-width: 100%;
    margin: 0;
    font-size: 18px;
    line-height: 25.56px;
    letter-spacing: -0.36px;
    color: rgb(245 255 254 / 90%);
  }

  .elementor .elementor-element-edf5209 .cinefi-flat-cta__body + p {
    margin-block: 9px;
  }

  .elementor .elementor-element-edf5209 .cinefi-flat-cta__content > p strong,
  .elementor .elementor-element-edf5209 .cinefi-flat-cta__content > p span {
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
  }

  .cinefi-flat-cta--savings-goals .cinefi-flat-cta__button,
  .cinefi-flat-cta--round-up-savings .cinefi-flat-cta__button,
  .cinefi-flat-cta--financial-insights .cinefi-flat-cta__button,
  .cinefi-flat-cta--instant-transfers .cinefi-flat-cta__button,
  .cinefi-flat-cta--cut-smarter-savings .cinefi-flat-cta__button {
    --btn-border: 1px solid #f5fffe;

    width: 300px;
    max-width: 300px;
    background-color: #6e00ba;
  }

  .cinefi-flat-cta--savings-goals .cinefi-flat-cta__button {
    --btn-padding-inline: 30px;
  }

  .cinefi-flat-cta--round-up-savings .cinefi-flat-cta__button,
  .cinefi-flat-cta--instant-transfers .cinefi-flat-cta__button,
  .cinefi-flat-cta--cut-smarter-savings .cinefi-flat-cta__button {
    --btn-padding-inline: 80px;
  }

  .cinefi-flat-cta--financial-insights .cinefi-flat-cta__button {
    --btn-padding-inline: 20px;
  }

  .elementor .elementor-element-edf5209 .cinefi-flat-cta__button {
    --btn-border: 1px solid #f5fffe;
    --btn-padding-inline: 80px;

    align-self: center;
    width: 300px;
    max-width: 300px;
    background-color: #6e00ba;
  }

  .elementor .elementor-element-eb0d963 .cinefi-flat-cta__button,
  .elementor .elementor-element-9bc2a90 .cinefi-flat-cta__button,
  .elementor .elementor-element-6b0bfa6 .cinefi-flat-cta__button,
  .elementor .elementor-element-a107236 .cinefi-flat-cta__button {
    --btn-border: 1px solid #f5fffe;

    width: 300px;
    max-width: 300px;
    background-color: #6e00ba;
  }

  .elementor .elementor-element-eb0d963 .cinefi-flat-cta__button {
    --btn-padding-inline: 30px;
  }

  .elementor .elementor-element-9bc2a90 .cinefi-flat-cta__button,
  .elementor .elementor-element-a107236 .cinefi-flat-cta__button {
    --btn-padding-inline: 80px;
  }

  .elementor .elementor-element-6b0bfa6 .cinefi-flat-cta__button {
    --btn-padding-inline: 20px;
  }
}
/* Layout for the cinefi-gradient-feature-promo widget — wide
 * horizontal gradient-bordered card with image-left + content-right
 * (heading + sub-heading + body + CTA). Reuses the
 * `.cinefi-gradient-card` base from gradient-card.css for the
 * border treatment.
 *
 * Phase G — extracted from home §5 (post 4099). Replaces 5 separate
 * Elementor widgets in nested columns + a hand-built gradient
 * border with one custom widget.
 *
 * Layout values lifted from `_elementor_data`:
 *  - section padding 55 vertical (no horizontal)
 *  - card max-width 1310, padding 0 117 desktop / 12 tablet / 61 20 56 20 mobile
 *  - grid 2-col → 1-col flip at <=1024 (Elementor's tablet breakpoint)
 *  - heading + body have legacy `_css_classes: sub-hero-text` →
 *    max-width: 553px (sub-heading and button are unconstrained)
 *
 * Regression spec: tests/visual/compare-gradient-feature-promo.spec.ts.
 */
.cinefi-gradient-feature-promo {
  /* Typography ---------- */

  /* Heading: 60/900/-2.4px desktop, 24/-0.72px mobile (smaller than
   * other sections — this section's specific Elementor setting). */
  --heading-font-size: 60px;
  --heading-font-weight: 900;
  --heading-line-height: 1;
  --heading-letter-spacing: -2.4px;
  --heading-color: #ebfffe;

  /* Sub-heading: 22/400/35px line-height/-0.66px letter-spacing
   * desktop, 14/28lh mobile. Distinct from body — sits between heading
   * and prose. */
  --subheading-font-size: 22px;
  --subheading-font-weight: 400;
  --subheading-line-height: 35px;
  --subheading-letter-spacing: -0.66px;
  --subheading-color: #ebfffe;

  /* Body: matches the standard prose treatment (18/400/-0.02em/
   * 25.56px) used across cinefi widgets. */
  --body-font-size: 1.125rem;
  --body-font-weight: 400;
  --body-line-height: 1.42;
  --body-letter-spacing: -0.02em;
  --body-color: rgb(245 255 254 / 90%);

  /* Button: standard cinefi gradient CTA (20/500/-0.54/teal→purple
   * gradient/5px radius/18×54 padding — wider horizontal padding
   * than other widgets). */
  --button-font-size: 20px;
  --button-font-weight: 500;
  --button-letter-spacing: -0.54px;
  --button-line-height: 20px;
  --button-color: #fff;
  --button-padding-block: 18px;
  --button-padding-inline: 54px;
  --button-border-radius: 5px;
  --button-bg-image: linear-gradient(92deg, rgb(2 109 139) -138.25%, rgb(110 0 186) 77.17%);

  /* Layout ---------- */

  /* Card max-width 1310 (legacy `#home-hero-3` custom CSS). Section
   * provides only vertical padding; card provides horizontal. Column
   * gap 20px matches Elementor's default `--widgets-spacing`; column
   * inner padding 10px matches Elementor's default container padding
   * (visible on `.elementor-element-6ed292a` in the live render).
   *
   * Card min-height 957 matches prod's `grid-template-rows: 957px` on
   * the legacy c7fd074 e-grid. Without this the grid row collapses to
   * the image's natural display height (~759 desktop), leaving ours
   * ~64px short at the top and bottom vs prod — the gap Brandon flagged
   * 2026-05-22 as "greater vertical padding than ours." Columns
   * already have `justify-content: center` so content vertically
   * centers within the taller row. */
  --card-max-width: 1310px;
  --card-min-height: 957px;
  --column-gap: 20px;
  --column-inner-padding: 10px;
  --content-stack-gap: 1.5rem;

  /* Section padding lifted from b5abfaa: 55 top/bottom, 0 inline. */
  --section-padding-block-start: 55px;
  --section-padding-block-end: 55px;
  --section-padding-inline: 0;

  /* Card padding lifted from c7fd074: 0 117 desktop. */
  --card-padding-block-start: 0;
  --card-padding-block-end: 0;
  --card-padding-inline: 117px;

  /* Constraint applied to heading + body via legacy `sub-hero-text`. */
  --content-max-width: 553px;

  /* ---------- Component ---------- */
  display: flex;
  flex-direction: column;
  padding-block: var(--section-padding-block-start) var(--section-padding-block-end);
  padding-inline: var(--section-padding-inline);
  color: var(--body-color);
  letter-spacing: var(--body-letter-spacing);
}
/* Tablet (Elementor's tablet breakpoint = max-width 768 in this kit's
 * `elementor_active_breakpoints` config). Card padding shrinks to 12
 * all around per c7fd074 padding_tablet. */
@media (width <= 768px) {
  .cinefi-gradient-feature-promo {
    --card-padding-block-start: 12px;
    --card-padding-block-end: 12px;
    --card-padding-inline: 12px;
  }
}
/* Mobile responsive overrides — match the legacy section's mobile
 * settings at <=576px (Bootstrap xs/sm boundary, the kit's
 * typography breakpoint).
 *  - Heading: 60 → 24, letter-spacing -2.4 → -0.72
 *  - Sub-heading: 22 → 14, line-height 35 → 28
 *  - Body: 18 → 14, line-height fixed at 25.56px
 *  - Button: 16 + 16 line-height (matches Docker render)
 *  - Section padding 55/0 → 16 vertical/inline (legacy section
 *    padding_mobile 16/16/54/16 — we use 16 across; bottom 54
 *    drift is within tolerance after card padding-block 56 stacks)
 *  - Card padding 0/117 → 61 20 56 20 (legacy padding_mobile) */
@media (width <= 576px) {
  .cinefi-gradient-feature-promo {
    --heading-font-size: 24px;
    --heading-letter-spacing: -0.72px;
    --subheading-font-size: 14px;
    --subheading-line-height: 28px;
    --body-font-size: 14px;
    --body-line-height: 25.56px;
    --button-font-size: 16px;
    --button-line-height: 16px;
    --section-padding-block-start: 16px;
    --section-padding-block-end: 54px;
    --section-padding-inline: 16px;
    --card-padding-block-start: 61px;
    --card-padding-block-end: 56px;
    --card-padding-inline: 20px;
  }

  /* Match legacy mobile button stretch (`_element_width_mobile: inherit`
   * resolves to column-content width via Elementor's default flex
   * alignment). Without this the button is text+padding wide (~186)
   * vs legacy ~296. */
  .cinefi-gradient-feature-promo .cinefi-gradient-feature-promo__button {
    width: 100%;
  }
}
/* The card itself uses the shared `.cinefi-gradient-card` class
 * from gradient-card.css for the conic-gradient border treatment.
 * This rule adds layout: 2-column row at >=1025, stacked below.
 * Breakpoint matches Elementor's tablet breakpoint (where the legacy
 * grid container flips from 2 col / 1 row → 1 col / 2 rows). */
.cinefi-gradient-feature-promo__layout {
  /* Legacy #home-hero-3 uses a translucent black panel over the decorative
   * bg-card art, not the shared conic gradient-card fill. Override the shared
   * card background on this promo element only. */
  --cinefi-gradient-card-inner-fill: rgb(0 0 0 / 50%);

  display: grid;
  grid-template-columns: 1fr;
  gap: var(--column-gap);
  width: 100%;
  max-width: var(--card-max-width);
  min-height: var(--card-min-height);
  margin: 0 auto;
  padding-block: var(--card-padding-block-start) var(--card-padding-block-end);
  padding-inline: var(--card-padding-inline);
  border-color: #6e00ba;
  background-color: var(--cinefi-gradient-card-inner-fill);
  background-image: none;
  box-shadow: 0 10px 24px rgb(0 0 0 / 45%);
}
/* Elementor's lazy-background guard injects `background-image: none !important`
 * on later `.e-parent` sections and descendants. Keep that same no-image
 * contract even after the container becomes `.e-lazyloaded`; this promo panel
 * should be translucent, not the shared conic gradient-card treatment. */
body .elementor .e-con.e-parent.bg-hero-card:has(.cinefi-gradient-feature-promo) .cinefi-gradient-feature-promo__layout.cinefi-gradient-card {
  background-image: none !important;
}
@media (width >= 769px) {
  .cinefi-gradient-feature-promo__layout {
    grid-template-columns: 1fr 1fr;
  }

  .cinefi-gradient-feature-promo__layout--image-right .cinefi-gradient-feature-promo__media {
    order: 2;
  }
}
.cinefi-gradient-feature-promo__media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--column-inner-padding);
}
.cinefi-gradient-feature-promo__image {
  max-width: 100%;
  height: auto;
}
.cinefi-gradient-feature-promo__content {
  display: flex;
  flex-direction: column;
  gap: var(--content-stack-gap);
  align-items: flex-start;
  justify-content: center;
  padding: var(--column-inner-padding);
}
/* Heading + body inherit the legacy `sub-hero-text` 553px clamp.
 * Sub-heading and button intentionally fill the column width
 * (legacy doesn't apply the class to them). */
.cinefi-gradient-feature-promo .cinefi-gradient-feature-promo__heading {
  max-width: var(--content-max-width);
  margin: 0;
  font-size: var(--heading-font-size);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  color: var(--heading-color);
}
.cinefi-gradient-feature-promo .cinefi-gradient-feature-promo__subheading {
  margin: 0;
  font-size: var(--subheading-font-size);
  font-weight: var(--subheading-font-weight);
  line-height: var(--subheading-line-height);
  letter-spacing: var(--subheading-letter-spacing);
  color: var(--subheading-color);
}
.cinefi-gradient-feature-promo .cinefi-gradient-feature-promo__body {
  max-width: var(--content-max-width);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  color: var(--body-color);
}
.cinefi-gradient-feature-promo .cinefi-gradient-feature-promo__body p {
  margin: 0 0 1em;
}
.cinefi-gradient-feature-promo .cinefi-gradient-feature-promo__body p:last-child {
  margin-bottom: 0;
}
.cinefi-gradient-feature-promo .cinefi-gradient-feature-promo__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--button-padding-block);
  padding-inline: var(--button-padding-inline);
  border: 0;
  border-radius: var(--button-border-radius);
  background-image: var(--button-bg-image);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: var(--button-line-height);
  letter-spacing: var(--button-letter-spacing);
  color: var(--button-color);
  text-align: center;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    box-shadow 0.25s ease;
}
.cinefi-gradient-feature-promo .cinefi-gradient-feature-promo__button:hover,
.cinefi-gradient-feature-promo .cinefi-gradient-feature-promo__button:focus-visible {
  opacity: 0.75;
  box-shadow: 0 2px 30px rgb(0 0 0 / 20%);
}
/* Layout for the cinefi-press-carousel widget — section heading above a
 * Swiper-driven row of press / publication slides. Behavior (track,
 * scroll-snap, slides-per-view, loop, autoplay, pagination) is owned by
 * Swiper.js (Elementor-bundled). This stylesheet:
 *   - themes the carousel with cinefi typography + colors
 *   - overrides Swiper's default arrow chevron (`::after` content) so our
 *     own SVG is the only visible glyph
 *   - lifts the pagination block out of Swiper's default absolute
 *     positioning so it flows below the swiper container
 *   - pins the cinefi arrows to the swiper container's vertical centerline
 *     via the existing `.swiper-button-prev|next` markers
 */
.cinefi-press-carousel {
  /* Typography — heading: 60/900/-2.5 desktop, 36/-0.42 mobile. Lifted
   * directly from `_elementor_data` settings on the legacy section
   * heading widget 6abf9d0. */
  --heading-font-size: 60px;
  --heading-font-weight: 900;
  --heading-line-height: 1;
  --heading-letter-spacing: -2.5px;
  --heading-color: #ebfffe;

  /* Section layout */
  --section-padding-block-start: 4rem;
  --section-padding-block-end: 4rem;
  --section-padding-inline: 12px;
  --content-max-width: 1140px;
  --head-margin-block-end: 2.5rem;

  /* Slide chrome */
  --slide-height: 308px;

  /* Arrow + pagination colors. Arrow size 20px matches legacy
   * `.elementor-swiper-button` (the standard Elementor Swiper button size).
   * Was 40 prior to PC-1 fix 2026-05-20. */
  --arrow-color: #f5fffe;
  --arrow-hover-opacity: 0.6;
  --arrow-size: 20px;
  --arrow-inset: 0px;
  --pagination-color-active: #f5fffe;
  --pagination-color-inactive: #7e8f97;
  --pagination-dot-size: 6px;
  --pagination-margin-block-start: 1.25rem;

  /* ---------- Component ---------- */
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-block: var(--section-padding-block-start) var(--section-padding-block-end);
  padding-inline: var(--section-padding-inline);
  color: var(--heading-color);
}
/* Tablet (Elementor's `tablet` breakpoint = max-width 768). */
@media (width <= 768px) {
  .cinefi-press-carousel {
    --slide-height: 240px;
  }
}
/* Mobile (Bootstrap xs/sm boundary, kit's `mobile` breakpoint at 576). */
@media (width <= 576px) {
  .cinefi-press-carousel {
    --heading-font-size: 36px;
    --heading-letter-spacing: -0.42px;
    --section-padding-block-start: 10px;
    --section-padding-block-end: 12px;
    --section-padding-inline: 10px;
    --slide-height: 277.5px;
    --head-margin-block-end: 15px;

    -webkit-margin-before: 128px;

            margin-block-start: 128px;
  }
}
.cinefi-press-carousel__head {
  -webkit-margin-after: var(--head-margin-block-end);
          margin-block-end: var(--head-margin-block-end);
  text-align: center;
}
.cinefi-press-carousel .cinefi-press-carousel__heading {
  max-width: 800px;
  margin-block: 0;
  margin-inline: auto;
  font-size: var(--heading-font-size);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  color: var(--heading-color);
}
/* Swiper container — positioned so absolute children (arrows) can pin to
 * its bounds. Swiper handles track / slide layout via its own classes. */
.cinefi-press-carousel__swiper {
  position: relative;
  width: 100%;
}
/* The Swiper wrapper is authored as a <ul role="list"> for semantic list
 * markup, but the UA stylesheet adds `padding-inline-start: 40px` to <ul>
 * for the bullet marker space. Swiper's own CSS doesn't reset this because
 * its docs use <div>. Left unset, the 40px shifts the entire slide row
 * right relative to the swiper container. Zero out list padding/margin and
 * suppress markers. */
.cinefi-press-carousel__swiper .swiper-wrapper {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Slide cell. Swiper.js sets width via inline style at runtime from the
 * `slidesPerView` config; we just enforce height + image-fit so slides
 * with mixed aspect ratios render consistently. */
.cinefi-press-carousel__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--slide-height);
}
.cinefi-press-carousel__slide-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  transition: opacity 0.25s ease;
}
.cinefi-press-carousel__slide-link:hover,
.cinefi-press-carousel__slide-link:focus-visible {
  opacity: 0.8;
}
.cinefi-press-carousel__slide-image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
/* Slide link absent — image still fills the slide. */
.cinefi-press-carousel__slide > .cinefi-press-carousel__slide-image {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
/* Cinefi arrow chrome. Parent-class qualifier
 * (`.cinefi-press-carousel .cinefi-press-carousel__arrow`) bumps
 * specificity to (0,2,0) to beat the kit's `.elementor-kit-6 button`
 * rule at (0,1,1) which ships a gradient background-image +
 * `border-radius: 5px` on all `<button>` elements. Same cascade-bypass
 * pattern as the headline rule + other Phase G widgets. */
.cinefi-press-carousel .cinefi-press-carousel__arrow {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--arrow-size);
  height: var(--arrow-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  color: var(--arrow-color);
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 0.25s ease;
  z-index: 2;
}
.cinefi-press-carousel .cinefi-press-carousel__arrow--prev {
  left: var(--arrow-inset);
}
.cinefi-press-carousel .cinefi-press-carousel__arrow--next {
  right: var(--arrow-inset);
}
.cinefi-press-carousel .cinefi-press-carousel__arrow:hover,
.cinefi-press-carousel .cinefi-press-carousel__arrow:focus-visible {
  opacity: var(--arrow-hover-opacity);
}
/* Swiper marks disabled prev/next buttons with `.swiper-button-disabled`.
 * Loop mode (config.loop=true) means this rarely fires, but the rule is
 * present so non-loop configurations dim correctly. */
.cinefi-press-carousel .cinefi-press-carousel__arrow.swiper-button-disabled {
  cursor: default;
  opacity: 0.3;
}
/* Suppress Swiper's default unicode-chevron glyph (`::after`) — we ship
 * our own SVG inside the button. */
.cinefi-press-carousel .swiper-button-prev::after,
.cinefi-press-carousel .swiper-button-next::after {
  content: none;
}
.cinefi-press-carousel__arrow-icon {
  display: block;
  width: 100%;
  height: 100%;
}
/* Pagination — lift out of Swiper's default absolute positioning so dots
 * flow below the swiper container. `position: static` + the Swiper class
 * scope keeps the layout in normal flow without losing Swiper's
 * click-handling behavior. Uses `text-align: center` + Swiper's default
 * `display: inline-block` + `margin: 0 6px` on bullets to produce a 12px
 * edge-to-edge gap, matching live cinefi.com exactly. Flex `gap` stacks
 * with Swiper's margin and would double the spacing, so block layout. */
.cinefi-press-carousel .cinefi-press-carousel__pagination {
  position: static;
  display: block;
  margin: 0;
  -webkit-margin-before: var(--pagination-margin-block-start);
          margin-block-start: var(--pagination-margin-block-start);
  padding: 0;
  width: 100%;
  text-align: center;
}
/* Inter-bullet spacing is supplied by Swiper's own
 * `.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet`
 * rule at specificity (0,3,0), which sets `margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)`.
 * Elementor's `e-swiper.css` raises `--swiper-pagination-bullet-horizontal-gap`
 * to 6px on `.elementor-element`, giving the 12px edge-to-edge gap we see
 * on live cinefi.com. We don't redeclare `margin` here to avoid masking
 * Swiper's intent. */
.cinefi-press-carousel .swiper-pagination-bullet {
  width: var(--pagination-dot-size);
  height: var(--pagination-dot-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pagination-color-inactive);
  opacity: 1;
  cursor: pointer;
  transition: background 0.25s ease;
}
.cinefi-press-carousel .swiper-pagination-bullet-active {
  background: var(--pagination-color-active);
}
.cinefi-press-carousel .swiper-pagination-bullet:focus-visible {
  outline: 2px solid var(--pagination-color-active);
  outline-offset: 2px;
}
.cinefi-testimonial-carousel {
  --testimonial-heading-color: #fff;
  --testimonial-card-background: #06141c;
  --testimonial-card-border: #07565b;
  --testimonial-text-color: #fff;
  --testimonial-dot-color: #829097;
  --testimonial-dot-active-color: #fff;
  --testimonial-arrow-color: #fff;
  --testimonial-edge-fade-width: 48px;

  position: relative;
  width: 100%;
  background: transparent;
}
.cinefi-testimonial-carousel .cinefi-testimonial-carousel__heading {
  max-width: 960px;
  margin: 0 auto 56px;
  color: var(--testimonial-heading-color);
  font-size: 48px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -1.4px;
  text-align: center;
}
.cinefi-testimonial-carousel__stage {
  position: relative;
}
.cinefi-testimonial-carousel .cinefi-testimonial-carousel__swiper {
  width: auto;
  margin-inline: 56px;
  overflow: hidden;
}
.cinefi-testimonial-carousel--fade-edges.is-edge-fading .cinefi-testimonial-carousel__swiper {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--testimonial-edge-fade-width),
    #000 calc(100% - var(--testimonial-edge-fade-width)),
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--testimonial-edge-fade-width),
    #000 calc(100% - var(--testimonial-edge-fade-width)),
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.cinefi-testimonial-carousel__swiper .swiper-wrapper {
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cinefi-testimonial-carousel__slide {
  display: flex;
  height: 100%;
}
.cinefi-testimonial-carousel__card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  height: var(--testimonial-card-equal-height, auto);
  min-width: 0;
  min-height: 362px;
  margin: 0;
  padding: 50px 58px 46px;
  border: 1px solid var(--testimonial-card-border);
  border-radius: 10px;
  background: var(--testimonial-card-background);
  color: var(--testimonial-text-color);
}
.cinefi-testimonial-carousel__identity {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
}
.cinefi-testimonial-carousel__image {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
}
.cinefi-testimonial-carousel__image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.cinefi-testimonial-carousel__person {
  min-width: 0;
}
.cinefi-testimonial-carousel .cinefi-testimonial-carousel__name,
.cinefi-testimonial-carousel .cinefi-testimonial-carousel__meta,
.cinefi-testimonial-carousel .cinefi-testimonial-carousel__copy {
  margin: 0;
  color: var(--testimonial-text-color);
}
.cinefi-testimonial-carousel .cinefi-testimonial-carousel__name {
  -webkit-margin-after: 6px;
          margin-block-end: 6px;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.08;
}
.cinefi-testimonial-carousel .cinefi-testimonial-carousel__meta {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}
.cinefi-testimonial-carousel__quote {
  margin: 50px 0 0;
  padding: 0;
  border: 0;
}
.cinefi-testimonial-carousel .cinefi-testimonial-carousel__copy {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}
.cinefi-testimonial-carousel .cinefi-testimonial-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--testimonial-arrow-color);
  cursor: pointer;
  transform: translateY(-50%);
}
.cinefi-testimonial-carousel .cinefi-testimonial-carousel__arrow[hidden] {
  display: none;
}
.cinefi-testimonial-carousel .cinefi-testimonial-carousel__arrow--prev {
  left: 0;
}
.cinefi-testimonial-carousel .cinefi-testimonial-carousel__arrow--next {
  right: 0;
}
.cinefi-testimonial-carousel__arrow svg {
  display: block;
  width: 28px;
  height: 28px;
}
.cinefi-testimonial-carousel__arrow:hover,
.cinefi-testimonial-carousel__arrow:focus-visible {
  opacity: 0.75;
}
.cinefi-testimonial-carousel__arrow:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 3px;
}
.cinefi-testimonial-carousel .cinefi-testimonial-carousel__pagination {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 36px 0 0;
  padding: 0;
  text-align: center;
}
.cinefi-testimonial-carousel .cinefi-testimonial-carousel__pagination[hidden] {
  display: none;
}
.cinefi-testimonial-carousel__pagination .swiper-pagination-bullet {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--testimonial-dot-color);
  opacity: 1;
  cursor: pointer;
}
.cinefi-testimonial-carousel__pagination .swiper-pagination-bullet-active {
  background: var(--testimonial-dot-active-color);
}
.cinefi-testimonial-carousel__pagination .swiper-pagination-bullet:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 3px;
}
.cinefi-testimonial-carousel:not(.is-overflowing) .cinefi-testimonial-carousel__arrow,
.cinefi-testimonial-carousel:not(.is-overflowing) .cinefi-testimonial-carousel__pagination {
  display: none;
}
@media (width <= 768px) {
  .cinefi-testimonial-carousel {
    --testimonial-edge-fade-width: 40px;
  }

  .cinefi-testimonial-carousel .cinefi-testimonial-carousel__heading {
    -webkit-margin-after: 44px;
            margin-block-end: 44px;
    font-size: 40px;
  }

  .cinefi-testimonial-carousel .cinefi-testimonial-carousel__swiper {
    margin-inline: 48px;
  }

  .cinefi-testimonial-carousel__card {
    min-height: 340px;
    padding: 42px 40px;
  }
}
@media (width <= 576px) {
  .cinefi-testimonial-carousel {
    --testimonial-edge-fade-width: 32px;
  }

  .cinefi-testimonial-carousel .cinefi-testimonial-carousel__heading {
    -webkit-margin-after: 32px;
            margin-block-end: 32px;
    font-size: 34px;
    line-height: 1.18;
    letter-spacing: -0.8px;
  }

  .cinefi-testimonial-carousel .cinefi-testimonial-carousel__swiper {
    margin-inline: 0;
  }

  .cinefi-testimonial-carousel__card {
    min-height: 330px;
    padding: 32px 28px;
  }

  .cinefi-testimonial-carousel__image {
    width: 80px;
    height: 80px;
  }

  .cinefi-testimonial-carousel__name {
    font-size: 22px;
  }

  .cinefi-testimonial-carousel__quote {
    -webkit-margin-before: 36px;
            margin-block-start: 36px;
  }

  .cinefi-testimonial-carousel .cinefi-testimonial-carousel__arrow {
    top: auto;
    bottom: -66px;
    transform: none;
  }

  .cinefi-testimonial-carousel .cinefi-testimonial-carousel__arrow--prev {
    left: 4px;
  }

  .cinefi-testimonial-carousel .cinefi-testimonial-carousel__arrow--next {
    right: 4px;
  }

  .cinefi-testimonial-carousel .cinefi-testimonial-carousel__pagination {
    min-height: 44px;
    -webkit-margin-before: 22px;
            margin-block-start: 22px;
    padding-inline: 52px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cinefi-testimonial-carousel--fade-edges.is-edge-fading .cinefi-testimonial-carousel__swiper {
    -webkit-mask-image: none;
            mask-image: none;
  }

  .cinefi-testimonial-carousel__arrow,
  .cinefi-testimonial-carousel__pagination .swiper-pagination-bullet {
    transition: none;
  }
}
/* Layout for the cinefi-hero-cinematic widget — full-bleed hero with
 * bg + overlay layered behind a centered content stack, optional
 * right-column decorative image.
 *
 * Phase G — extracted from home / about / roll-sound §0 (legacy
 * `502f49c` + `cd04e00.children[0]` two-container split). The legacy
 * uses a positioned-absolute sibling shell to provide the bg image
 * behind content that lives in a separate container. Our extraction
 * collapses to a single `<section>` with bg + overlay layered via
 * z-index inside the section. See hero-cinematic-brief.md for the
 * locked architecture rationale.
 *
 * Coverage:
 *  - home §0 (bg=image cinefi-hero-v2.jpg, eyebrow + headline xl + body
 *    + CTA + decorative card mockup + NCUA disclaimer)
 *  - about §0 (bg=video About-hero.mp4, headline md + body, no
 *    eyebrow / CTA / decorative)
 *  - roll-sound §0 (bg=image cameramic.webp, eyebrow + headline lg +
 *    body + CTA, no decorative / disclaimer)
 *
 * NOT covered: checking + savings §0.0 — those use a 3-layer
 * responsive video composition + frosted-glass `product-qr-block`
 * overlay + dark→teal CTA gradient. They're a separate
 * `product-hero-video` widget per the locked decision.
 *
 * Heading typography: the visual size lives in shared
 * `cinefi-display-{xl|lg|md}` utility classes (custom-property
 * cascade), but the hero overrides their `--display-font-size` /
 * `--display-letter-spacing` to hero-scale values (90/45, 80/60,
 * 60/42 desktop/mobile) since the existing utility's xl=60 is too
 * small for the home hero's 90px.
 *
 * Button: uses existing `cinefi-btn-fill` utility (teal→purple
 * gradient). Legacy home/roll-sound hero buttons have 18×0 padding
 * with fixed 265×56 dimensions — different from the utility's default
 * 18×32 padding. The hero CTA rule below applies a hero-specific
 * size override on top of the utility's chrome.
 */
.cinefi-hero {
  /* Layout ---------- */
  --hero-min-height-desktop: 908px;
  --hero-min-height-mobile: 632px;
  --hero-content-max-width: 1310px;
  --hero-content-stack-gap: 1.5rem;
  --hero-content-padding-inline: 24px;

  /* Overlay color — defaults to transparent. The legacy data has
   * `background_overlay_color: #00000099` but Elementor doesn't
   * actually render the overlay div on these instances (verified via
   * live DOM probe). Matching legacy means NO dark overlay. The var
   * stays defined so a future hero variant can opt back in. */
  --hero-overlay-color: transparent;

  /* Typography defaults ---------- */

  /* Headline color is the per-widget override applied by the legacy
   * heading widget (`#ebfffe`); body / eyebrow / disclaimer use the
   * kit's `text` color (`#f5fffe`) at 90% alpha — verified via live
   * computed styles on home §0. */
  --hero-headline-color: rgb(235 255 254);
  --hero-body-font-size: 18px;
  --hero-body-line-height: 25.56px;
  --hero-body-color: rgb(245 255 254 / 90%);
  --hero-eyebrow-font-size: 18px;
  --hero-eyebrow-color: rgb(245 255 254 / 90%);
  --hero-eyebrow-gradient: linear-gradient(91deg, #00e0f6 6.22%, #7ed4e7 53.88%, #d464ff 99.41%);
  --hero-disclaimer-font-size: 18px;
  --hero-disclaimer-color: rgb(245 255 254 / 90%);

  /* CTA button size override — hero CTAs are 265×56 with 18×0
   * padding (fixed width centers via min-width, not horizontal
   * padding). Mobile stretches to the content column width with
   * 16px font. The `cinefi-btn-fill` utility supplies the gradient
   * + colors; these vars override its sizing. */
  --hero-cta-min-width: 265px;
  --hero-cta-height: 56px;
  --hero-cta-padding-block: 18px;
  --hero-cta-padding-inline: 0;

  /* Section ---------- */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hero-min-height-desktop);
  overflow: hidden;
  isolation: isolate; /* contain z-index of bg/overlay/content */
  color: var(--hero-body-color);
}
@media (width <= 576px) {
  .cinefi-hero {
    --hero-min-height-desktop: var(--hero-min-height-mobile);
    --hero-body-font-size: 14px;
    --hero-eyebrow-font-size: 14px;
    --hero-disclaimer-font-size: 14px;
    --hero-cta-min-width: 0;
    --hero-cta-height: 52px;
  }
}
/* Background layer — CSS background-image for classic, `<video>` for
 * video. Absolute-positioned to fill the section. z-index 0 (behind
 * overlay + content). The classic bg uses `background-size: cover` so
 * the image fills the full section regardless of natural aspect ratio
 * (matches Elementor's default bg behavior — `<img>` would only fill
 * its natural aspect within the section box and leave gaps). */
.cinefi-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}
.cinefi-hero__bg-video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 0%;
     object-position: 50% 0%;
}
/* Mobile bg-image override. Renders as a fully-positioned div on top
 * of the desktop bg only at <=576px, replacing it visually. Hidden at
 * desktop by `display: none`. When no mobile variant is set, the
 * `<div class="cinefi-hero__bg-mobile">` element isn't rendered, and
 * the desktop bg (on `.cinefi-hero__bg`) shows at all viewports. */
.cinefi-hero__bg-mobile {
  position: absolute;
  inset: 0;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  display: none;
}
@media (width <= 576px) {
  .cinefi-hero__bg-mobile {
    display: block;
  }
}
/* Overlay layer — defaults to fully transparent (see
 * `--hero-overlay-color` declaration above). Element stays in DOM so
 * future variants can opt in by overriding the var. */
.cinefi-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--hero-overlay-color);
  pointer-events: none;
}
/* Layout grid — relative positioned (above bg + overlay), centered
 * horizontally inside the section. When the decorative image is set,
 * splits into a 2-column grid (1.4fr/0.6fr at desktop, 1.5fr/0.5fr at
 * tablet, 1-col stack at mobile) matching legacy `7223548` behavior.
 * When no decorative is set, a single content column. */
.cinefi-hero__layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--hero-content-stack-gap);
  width: 100%;
  max-width: var(--hero-content-max-width);
  margin: 0 auto;
  padding-inline: var(--hero-content-padding-inline);
}
@media (width >= 769px) {
  .cinefi-hero__layout--with-decorative {
    grid-template-columns: 1.4fr 0.6fr;
  }
}
@media (width >= 577px) and (width <= 768px) {
  .cinefi-hero__layout--with-decorative {
    grid-template-columns: 1.5fr 0.5fr;
  }
}
/* Card-overlay variant — wraps the content stack in a gradient card
 * sitting over the bg-video. Matches prod cinefi.com/about/'s
 * `#about-sub-hero` (3b69a23) which renders as a 1265×736px card with
 * 20px radius, 117px horizontal padding, a 89-degree purple-magenta
 * gradient bg, and an offset box-shadow. The bg-video remains
 * full-bleed underneath (matches prod's separate `#about-hero` absolute
 * sibling — our widget consolidates both into one section per the
 * locked architecture decision in hero-cinematic-brief.md). */
/* Hero section padding-top — biases the centered card down so the
 * visible card-top lands at the same y-coordinate as prod's
 * `#about-sub-hero` (y=111 from page top). The cd04e00 about-container
 * loses its kit-default 16px top padding via per-page _elementor_data
 * override (prod's same 16px padding is visually hidden by its absolute
 * positioned `#about-hero` bg-video sibling — ours consolidates the
 * bg-video into the hero widget so the padding shows as an unwanted
 * gap). With cd04e00 padding-top now 0 and section height 908px minus
 * 50px padding-top = 858px content area, the 736px-tall card centers
 * at (858-736)/2=61px from padding-top, total 111px from section-top
 * = 111px from page-top. Matches prod. */
.cinefi-hero--card-overlay {
  padding-top: 50px;
}
.cinefi-hero__layout--card-overlay {
  min-height: 736px;
  padding-inline: 117px;
  border-radius: 20px;
  background-image: linear-gradient(89deg, rgb(110 0 186 / 80%) 24.86%, rgb(7 19 29 / 0%) 98.77%);
  box-shadow: 10px 0 24px 24px rgb(0 0 0 / 25%);
}
/* Mobile card-overlay — match prod cinefi.com/about/ at 390 viewport:
 *   #about-sub-hero: 358×466, min-height 466px,
 *   padding: 0px 18px 0px 41px, border-radius: 20px.
 * Section padding-top reset to 0 so card centers vertically inside the
 * 632px hero section (matches prod's natural flex centering — y=81
 * top, 85 bottom). Padding-inline is asymmetric per prod design (more
 * left to balance the gradient's purple density on the left side). */
@media (width <= 576px) {
  .cinefi-hero--card-overlay {
    padding-top: 0;

    /* Full-bleed escape at mobile — the kit's default ≤576px
     * container padding (16px each side on the parent e-con) crops the
     * bg-video at 358px instead of letting it span the 390px viewport.
     * Prod escapes this via `position: absolute` on `#about-hero`;
     * our consolidated widget bleeds via negative margin instead. */
    margin-inline: -16px;
  }

  .cinefi-hero__layout--card-overlay {
    min-height: 466px;
    padding-inline: 41px 18px;

    /* Inset the gradient card 16px from the now-full-bleed hero edges
     * (matches prod where #about-sub-hero is 358 wide on a 390 viewport,
     * 16px gutter each side). Centered via the layout's inherited
     * `margin: 0 auto`. */
    max-width: calc(100% - 32px);
  }
}
/* Content column — flex stack of eyebrow / heading / body / cta /
 * disclaimer. Aligned to flex-start so each item sizes to its content
 * (or its own max-width) rather than stretching. */
.cinefi-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--hero-content-stack-gap);
}
/* Eyebrow — small text above headline (optional, supports rate
 * dynamic tags via WYSIWYG). Line-height fixed in px (not unitless
 * ratio) so it stays at 25.56 even when font-size shrinks on mobile —
 * matches the legacy text-editor widget's per-instance line-height. */
/* Prod applies the rate eyebrow gradient to the text itself by clipping
 * a linear-gradient background to the text fill, with the same gradient
 * reused for the underline. */
.cinefi-hero .cinefi-hero__eyebrow {
  position: relative;
  display: inline-block;
  font-size: var(--hero-eyebrow-font-size);
  line-height: 25.56px;
  letter-spacing: -0.02em;
  word-spacing: -0.02em;
  color: var(--hero-eyebrow-color);
  background: var(--hero-eyebrow-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cinefi-hero .cinefi-hero__eyebrow::after {
  content: '';
  position: absolute;
  inset: auto 0 -0.75em;
  width: 100%;
  height: 2px;
  background: var(--hero-eyebrow-gradient);
}
/* Rate-eyebrow preset — the rate value spans render at 28px (vs the
 * surrounding 18px text) for visual emphasis on the rate numbers.
 * The "Earn more with" prefix renders smaller (14px) to de-emphasize.
 * Mirrors the legacy inline `<span style="font-size: 14|28px">` markup
 * via shared utility classes so editors don't author inline styles. */
.cinefi-hero .cinefi-hero__eyebrow-prefix {
  font-size: 14px;
}
.cinefi-hero .cinefi-hero__eyebrow-rate {
  font-size: 28px;
  padding-left: 2px;
}
/* Mobile rate font-size — legacy's `697cb11` (mobile-only eyebrow
 * widget) renders rates at 19px, not 28px. The two-widget responsive
 * pattern collapses into one widget here, so we override at mobile. */
@media (width <= 576px) {
  .cinefi-hero .cinefi-hero__eyebrow-rate {
    font-size: 19px;
  }
}
/* Mobile-break — `<br>` between "Savings and" and the second rate.
 * Hidden at desktop so the eyebrow renders as 2 lines (matches legacy
 * `d361eed`); shown at <=576 so the rates wrap to 3 lines (matches
 * legacy `697cb11`). */
.cinefi-hero .cinefi-hero__eyebrow-mobile-break {
  display: none;
}
@media (width <= 576px) {
  .cinefi-hero .cinefi-hero__eyebrow-mobile-break {
    display: inline;
  }
}
@media (width <= 576px) {
  /* Mobile eyebrow — centers the text, adds vertical padding so the
   * gradient lines (top via `::before`, bottom via `::after`) sit
   * with breathing room around the content, and a subtle backdrop
   * blur over the bg image. Mirrors legacy
   * `.sup-hero-text .elementor-widget-container { padding: 1.125em 0;
   * backdrop-filter: blur(20px) }`. */
  .cinefi-hero .cinefi-hero__eyebrow::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: 2px;
    background: var(--hero-eyebrow-gradient);
  }

  .cinefi-hero .cinefi-hero__eyebrow {
    /* Stretch to full content-column width so the gradient `::before`
     * + `::after` lines span edge-to-edge — matches legacy `697cb11`
     * which renders at `width: 100%`. Without this, the eyebrow box
     * shrinks to text content width (~197px) and the gradient lines
     * are too narrow. */
    width: 100%;

    /* Outer spacing matches legacy: 21px above (legacy's column
     * justify-center math leaves that gap above the first flex item)
     * and 31px below (legacy has an invisible divider widget between
     * the eyebrow and heading; we collapse that to a margin here so
     * editors don't manage a non-content element). The 31px stacks on
     * top of the layout's 24px flex-gap to produce the same 55px gap
     * legacy renders between eyebrow and heading. */
    margin-block: 21px 31px;
    padding-block: 1.125em;
    line-height: 1.3;
    text-align: center;
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
  }
}
/* Headline — always renders as `<h1>` (locked decision; widget owns
 * tag). The `cinefi-display-{xl|lg|md}` utility class supplies the
 * default custom properties; we override here for hero-scale values
 * (utility's xl=60 is too small for the hero's 90px).
 *
 * `max-width: 873px` matches the legacy content-column width on home
 * (`0c7ebc7` is 873px wide at desktop). Without this constraint, the
 * heading takes the wider content-stack max-width (1310px) and wraps
 * differently than the legacy. */
.cinefi-hero .cinefi-hero__headline {
  margin: 0;

  /* Legacy: at desktop (>=992) the heading widget container has a
   * custom-CSS `max-width: 36em` rule (where 1em = the widget
   * container's 18px font-size, so 36em = 648px). Below 992 it's
   * `width: 100%; max-width: 100%`. Reproduce that here. */
  width: 100%;
  max-width: 100%;
  font-size: var(--display-font-size);
  font-weight: var(--display-font-weight);
  line-height: var(--display-line-height);
  letter-spacing: var(--display-letter-spacing);
  color: var(--hero-headline-color);
}
@media (width >= 992px) {
  .cinefi-hero .cinefi-hero__headline {
    max-width: 648px;
  }
}
/* Hero-scale typography — overrides the cinefi-display-* utility's
 * font-size / letter-spacing. Specificity (0,2,0) beats utility's
 * (0,1,0). Letter-spacing kept em-based so it scales with mobile
 * font-size shrinks. */
.cinefi-hero .cinefi-hero__headline.cinefi-display-xl {
  --display-font-size: 90px;
  --display-letter-spacing: -0.03em;
}
.cinefi-hero .cinefi-hero__headline.cinefi-display-lg {
  --display-font-size: 80px;
  --display-letter-spacing: -0.0125em;
}
.cinefi-hero .cinefi-hero__headline.cinefi-display-md {
  --display-font-size: 60px;
  --display-letter-spacing: -0.04em;
}
@media (width <= 576px) {
  .cinefi-hero .cinefi-hero__headline.cinefi-display-xl {
    --display-font-size: 45px;
  }

  .cinefi-hero .cinefi-hero__headline.cinefi-display-lg {
    --display-font-size: 60px;
  }

  .cinefi-hero .cinefi-hero__headline.cinefi-display-md {
    --display-font-size: 42px;
  }
}
/* Body — paragraph copy. WYSIWYG content rendered through
 * `wp_kses_post` (allows inline HTML for footnotes, links, emphasis). */
.cinefi-hero .cinefi-hero__body {
  font-size: var(--hero-body-font-size);
  line-height: var(--hero-body-line-height);
  letter-spacing: -0.02em;
  word-spacing: -0.02em;
  color: var(--hero-body-color);

  /* Mirrors `.sub-hero-text p { max-width: 692px !important }` in the
   * legacy kit CSS — the home + roll-sound hero body widgets carry
   * the `sub-hero-text` class which applies this constraint. */
  max-width: 692px;
}
/* CTA button — uses `cinefi-btn-fill` utility for chrome (gradient +
 * color). Hero applies its own sizing (fixed desktop width + 18×0
 * padding; full content-column width on mobile). */
.cinefi-hero .cinefi-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--hero-cta-min-width);
  height: var(--hero-cta-height);
  padding-block: var(--hero-cta-padding-block);
  padding-inline: var(--hero-cta-padding-inline);
  border: var(--btn-border);
  border-radius: var(--btn-border-radius);
  background-image: var(--btn-bg-image);
  background-clip: var(--btn-bg-clip);
  background-origin: var(--btn-bg-origin);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  color: var(--btn-color);
  text-align: center;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    box-shadow 0.25s ease;
}
.cinefi-hero .cinefi-hero__cta:hover,
.cinefi-hero .cinefi-hero__cta:focus-visible {
  opacity: 0.85;
  box-shadow: 0 2px 30px rgb(0 0 0 / 20%);
}
@media (width <= 576px) {
  .cinefi-hero .cinefi-hero__cta {
    width: 100%;
  }
}
.cinefi-hero__cta-text {
  display: inline-block;
}
/* Disclaimer — small text below CTA. Used on home for the NCUA
 * insurance line. Line-height fixed in px so mobile (14px font) keeps
 * the same 25.56 line-height as desktop (18px font) — matches legacy. */
.cinefi-hero .cinefi-hero__disclaimer {
  margin: 0;

  /* Legacy disclaimer (`195376c`) is sized to a fixed `width: 264px;
   * max-width: 264px` at non-mobile viewports (matches the NCUA copy
   * "Federally insured by NCUA." at 18px). At mobile, expands to
   * `width: 100%` to fill the column. */
  width: 264px;
  max-width: 100%;
  font-size: var(--hero-disclaimer-font-size);
  line-height: 25.56px;
  letter-spacing: -0.02em;
  word-spacing: -0.02em;
  color: var(--hero-disclaimer-color);
  text-align: center;
}
@media (width <= 576px) {
  .cinefi-hero .cinefi-hero__disclaimer {
    width: 100%;
  }
}
/* Decorative image column — right column in the 2-column grid
 * layout, in-flow (not absolute). Matches legacy `71294ca` which is
 * a flex container with `justify-content: flex-end` (right-aligned)
 * and `align-items: center` (vertically centered). */
.cinefi-hero__decorative {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  /* Initial state — element starts invisible and rotated, matching the
   * "from" keyframe. Animation only runs when the
   * `cinefi-hero__decorative--in-view` class is added by the
   * IntersectionObserver in `src/hero-cinematic.ts` — same
   * scroll-into-view trigger as Elementor's
   * `elementor-invisible` → `animated` swap. */
  opacity: 0;
  transform-origin: right bottom;
  transform: rotate3d(0, 0, 1, 45deg);
}
.cinefi-hero__decorative--in-view {
  /* Animation matches legacy `71294ca`'s
   * `animation: 1.25s rotateInDownRight` (Elementor's Animate.css
   * preset). The card swings in from the bottom-right at a +45°
   * rotation as the element scrolls into view. Reproduced via local
   * @keyframes so the widget doesn't depend on the Animate.css
   * library being loaded site-wide. Respects `prefers-reduced-motion`. */
  animation: cinefi-hero-rotate-in-down-right 1.25s ease-out both;
}
@keyframes cinefi-hero-rotate-in-down-right {
  from {
    transform-origin: right bottom;

    /* Elementor's Animate.css uses `+45deg` (clockwise tilt at the
     * right-bottom pivot) — verified by reading the bundled
     * `wp-content/plugins/elementor/assets/lib/animations/animations.min.css`.
     * Counter-clockwise (`-45deg`) makes the card swing in from the
     * opposite direction; this matches the legacy. */
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    transform-origin: right bottom;
    transform: none;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* Override both the initial-hidden state AND the in-view animation
   * so the element renders at its final state immediately for users
   * who opted out of motion. */
  .cinefi-hero__decorative {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.cinefi-hero__decorative-image {
  display: block;
  width: 100%;
  max-width: 471px;
  height: auto;
}
/* Layout for the cinefi-product-hero-video widget — product-page hero
 * (checking + savings) with a responsive bg-video pair and a content
 * column sitting on top.
 *
 * Phase G — extracted from checking + savings §0.0 (legacy 2-sibling
 * pattern: `42070c4` desktop+laptop video container with the content
 * stack inside, plus `b29d0af` / `014587f` tablet+mobile video
 * container with a duplicate content stack inside). The extraction
 * collapses to a single `<section>` with one content column and two
 * `<video>` elements CSS-swapped at the 576px breakpoint. See
 * `clients/cinefi/projects/elementor-migration/product-hero-video-brief.md`
 * for the locked architecture rationale.
 *
 * Distinct from `cinefi-hero-cinematic`:
 *   - Smaller heading typography (50.4/42 vs 60-90 across hero-cinematic
 *     variants).
 *   - No decorative card shell (no `bg-hero-card` SVG layer).
 *   - No eyebrow preset, no disclaimer slot.
 *   - Optional mobile content gradient overlay (purple-dark / teal-dark)
 *     for text readability over the bg video — only renders at <=576px,
 *     matching the legacy `b05d8bc.custom_css` `@media (max-width: 567px)`
 *     block.
 *   - CTA uses the existing `cinefi-btn-gradient-outline` utility with
 *     widget-scoped overrides (1px border vs utility's 3px, square 15px
 *     padding, fixed 300×50 dimensions).
 *
 * Coverage:
 *   - /checking/  bg-video CashAccount_Hero-Video-Desktop.mp4 +
 *                 CheckingAccount_Hero-Video-mobile.mp4
 *   - /savings/   bg-video SavingsAccount_Hero-Video.mp4 +
 *                 SavingsAccount_Hero-Video-mobile.mp4
 */
.cinefi-product-hero {
  /* Layout ---------- */
  --product-hero-max-width: 1310px;
  --product-hero-border-radius: 20px;
  --product-hero-padding-block: 144px; /* 8em at the kit's 18px text base */

  /* Top gap so the rounded card sits BELOW the fixed nav (95px). On
   * prod the hero card top sits at viewport-y 133 because prod's nav
   * is static and pushes content down 95px, then the card has 38px
   * additional margin. Our nav is fixed (out of flow), so the card
   * starts at y=10 by default and the 20px rounded corners hide
   * behind the nav. Set explicit top margin to match prod's
   * card-top viewport-y. Reset to 0 at the mobile breakpoint where
   * the card goes full-bleed (no border-radius). Measured via
   * bin/probe-hero-card.mjs + bin/probe-savings-prod.mjs 2026-05-29. */
  --product-hero-margin-block-start: 123px;
  --product-hero-content-padding-left-desktop: 90px;
  --product-hero-content-padding-left-laptop: 24px;
  --product-hero-content-padding-mobile: 24px;
  --product-hero-content-max-width: 648px;
  --product-hero-content-stack-gap: 1rem;

  /* Typography defaults ---------- */
  --product-hero-headline-font-size: 50.4px;
  --product-hero-headline-font-size-mobile: 42px;
  --product-hero-headline-line-height: 1;
  --product-hero-headline-letter-spacing: -0.0125em;
  --product-hero-headline-word-spacing: -0.0125em;
  --product-hero-headline-color: #f5fffe;
  --product-hero-body-font-size: 18px;
  --product-hero-body-font-size-mobile: 14px;

  /* Body line-height stays fixed at 25.56px (NOT a ratio of font-size)
   * so it matches the legacy per-element typography setting, which
   * resolves to 25.56px at all viewports regardless of font-size shrink
   * to 14 at mobile. Legacy data has empty `typography_line_height` —
   * the 25.56 px value comes from the kit's body text rule and stays
   * fixed in px. A unitless `1.42` ratio would shrink to 19.88 at
   * 14px mobile and fail typography parity. */
  --product-hero-body-line-height: 25.56px;
  --product-hero-body-letter-spacing: -0.02em;
  --product-hero-body-word-spacing: -0.02em;
  --product-hero-body-color: rgb(245 255 254 / 90%);

  /* CTA chrome — uses cinefi-btn-gradient-outline utility for the
   * dark-slate→near-black inner gradient + silver border (the same
   * 2-layer gradient-clip trick). Widget overrides border-width,
   * padding, and dimensions for the product-hero-specific shape.
   * The legacy CTA is 300×50 with 15px square padding + 1px border —
   * different from the utility's 20×30 padding + 3px border default. */
  --product-hero-cta-min-width: 300px;
  --product-hero-cta-height: 50px;
  --product-hero-cta-padding-block: 15px;
  --product-hero-cta-padding-inline: 15px;
  --product-hero-cta-border: 1px solid transparent;

  /* Mobile content overlay — per-page gradient picked via the
   * `content_overlay` editor control. Defaults to transparent so the
   * variant modifier classes (`--overlay-purple-dark`, etc.) override
   * it on the specific instance. Only applied at <=576px. */
  --product-hero-mobile-overlay: transparent;

  /* Section ---------- */
  position: relative;
  display: flex;
  align-items: center;

  /* Width is FIXED 1310px at desktop+laptop (not max-width). This
   * matches legacy `8cce1a0` which is hardcoded 1310px regardless
   * of viewport — at narrow desktop viewports (e.g., 1024) the
   * section overflows past the viewport's right edge by ~286px,
   * and the parent Elementor container's `overflow: hidden` clips
   * the visible area at the viewport. The phone in the right
   * portion of the bg-video naturally goes off-canvas right at
   * those viewports, leaving the text column unobstructed —
   * matching Brandon's editor-facing review requirement.
   *
   * `margin-inline: auto` centers the section when the viewport is
   * wide enough (≥1310px); at narrower viewports, auto margins
   * compute to negative values producing equal-overflow centering
   * (section extends past parent both left + right equally). This
   * isn't quite legacy's behavior (legacy left-anchors), but it
   * keeps content + phone roughly centered in the viewport which
   * is the practical outcome editors want at narrow desktop. */
  width: var(--product-hero-max-width);
  max-width: var(--product-hero-max-width);
  -webkit-margin-before: var(--product-hero-margin-block-start);
          margin-block-start: var(--product-hero-margin-block-start);
  margin-inline: auto;
  padding-block: var(--product-hero-padding-block);
  overflow: hidden;
  border-radius: var(--product-hero-border-radius);
  isolation: isolate; /* contain z-index of bg + content */
  color: var(--product-hero-body-color);
}
@media (width <= 768px) {
  /* Tablet + mobile — restructure from overlay (content on bg-video)
   * to vertical STACK (content above, bg-video region below).
   * Matches legacy `b29d0af` / `014587f` (tablet+mobile variant) which
   * is a flex column with two children: content column on top + bg-video
   * container below (the legacy `f8cd4b8` / `1bd8c87` has
   * `min-height: 641px` via custom_css carving out a dedicated region
   * for the phone/product video). The desktop overlay pattern compresses
   * content + phone into the same area at narrow viewports, which forces
   * the phone to overlap the heading; stacking gives the phone its own
   * region.
   *
   * Also revert the fixed `width: 1310px` from desktop to viewport-wide
   * — the stack pattern doesn't need to overflow the viewport. */
  .cinefi-product-hero {
    flex-direction: column;
    min-height: auto;
    padding-block: 0;

    /* Tablet nav-clearance — the fixed nav is 85px tall at ≤768
     * (65px at ≤576, next breakpoint). Live's static nav pushes the
     * hero to exactly nav-bottom (first-section top = nav height,
     * probed 2026-06-11). The previous reset-to-0 slid the hero's
     * video bg under the transparent fixed nav (QA sheet rows 18/20
     * "Hero needs to display below the header nav container"). */
    -webkit-margin-before: 85px;
            margin-block-start: 85px;
    width: 100%;
    max-width: 100%;
  }
}
@media (width <= 576px) {
  .cinefi-product-hero {
    /* Mobile still uses the rounded hero shell on prod. The fixed
     * local nav is out of flow, so include nav clearance (65px) plus
     * the live 18px gap before the rounded card begins. */
    border-radius: var(--product-hero-border-radius);
    -webkit-margin-before: 83px;
            margin-block-start: 83px;
  }
}
/* Background layer — absolute-positioned, full-bleed inside the
 * section AT DESKTOP. z-index 0 (behind content). Two `<video>`
 * elements live here; CSS swaps them at the 576px breakpoint so only
 * one is ever visible at a time. The mobile `<video>` reuses the
 * desktop source when no mobile video is set (handled in PHP).
 *
 * AT TABLET + MOBILE, the bg-layer flips from `position: absolute`
 * (overlay) to `position: relative` (a stacked sibling below content)
 * — see the `@media (width <= 768px)` block at the bottom of this
 * file. */
.cinefi-product-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
@media (width <= 768px) {
  .cinefi-product-hero__bg {
    position: relative;
    inset: auto;
    width: 100%;
    height: 641px;
    order: 2; /* stack BELOW content */
    border-radius: var(--product-hero-border-radius);
  }
}
/* Video element — fixed 1310px wide at desktop+laptop, vertically
 * centered, left-anchored. Matches the legacy product-hero pattern
 * exactly: legacy `42070c4` (desktop video container) is hardcoded
 * 1290px wide regardless of viewport, with the video filling that
 * container at object-fit:cover. At narrow desktop viewports (e.g.,
 * 1024), the legacy section overflows past the viewport right edge
 * by ~270px; the phone in the right portion of the video naturally
 * extends off-canvas, leaving the text column unobstructed.
 *
 * Reproduced here by setting `width: 1310px` (matches our section's
 * max-width) on the video element. At wider viewports (≥1310), the
 * section fits within viewport and video aligns with section bounds.
 * At narrow viewports (992-1309), the video extends past section
 * right edge; section `overflow: hidden` clips the overflow at the
 * viewport edge. Phone in the video's right portion goes off-canvas
 * right — matching legacy.
 *
 * Vertical centering via `top: 50%; transform: translateY(-50%)` so
 * the video stays vertically centered in the section even when its
 * natural-aspect height (1310 × 9/16 ≈ 737) exceeds the section
 * height (604). The 66px overflow above + below crops via section
 * overflow.
 *
 * `max-width: none` overrides Elementor's kit rule which sets
 * `max-width: 100%` on media. */
.cinefi-product-hero__bg-video {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1310px;
  height: auto;
  max-width: none;
  transform: translateY(-50%);
}
.cinefi-product-hero__bg-video--desktop {
  display: block;
}
.cinefi-product-hero__bg-video--mobile {
  display: none;
}
/* Video-swap breakpoint matches the legacy `b29d0af` / `014587f`
 * (tablet+mobile variant) hide-class boundary of 768. Below 768 the
 * mobile bg-video shows; at and above 768 the desktop bg-video shows.
 *
 * At tablet+mobile, the video reverts to filling its (stacked) bg
 * region — the fixed `width: 1310px` from desktop would overflow the
 * narrower viewport unnecessarily. Reset to `width: 100%; height:
 * 100%; object-fit: cover` so the video fills the 641-tall stacked
 * bg region. */
@media (width <= 768px) {
  .cinefi-product-hero__bg-video--desktop {
    display: none;
  }

  .cinefi-product-hero__bg-video--mobile {
    display: block;
  }

  .cinefi-product-hero__bg-video {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transform: none;
  }
}
/* Content layer — relative-positioned above the bg. Single flex
 * column anchored left across breakpoints. The content column has its
 * own max-width so long headlines don't span the full hero width —
 * legacy content column is 648px wide (`b05d8bc` at desktop). */
.cinefi-product-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--product-hero-content-stack-gap);
  width: 100%;
  max-width: var(--product-hero-content-max-width);
  padding-left: var(--product-hero-content-padding-left-desktop);
}
@media (width >= 992px) and (width <= 1024px) {
  /* Laptop — legacy `42070c4` content column has padding-left:24
   * via per-element `padding_laptop` setting. Match. */
  .cinefi-product-hero__content {
    padding-left: var(--product-hero-content-padding-left-laptop);
  }
}
@media (width <= 768px) {
  /* Tablet + mobile — content sits in its own region above the
   * bg-video region (vertical stack). Has its own gradient bg
   * (purple-dark / teal-dark, per the `content_overlay` editor
   * control) covering the FULL content area. Min-height 641 carves
   * out a dedicated content region matching the bg-video region's
   * height. Legacy `b29d0af` / `014587f` does the same: content
   * column has its own gradient + min-height; video container is a
   * separate sibling. */
  .cinefi-product-hero__content {
    order: 1; /* stack ABOVE bg-video */
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: 641px;
    padding: var(--product-hero-content-padding-mobile);
    text-align: start;
    background: var(--product-hero-mobile-overlay);
  }
}
/* Mobile/tablet content overlay variants. Each modifier maps to a
 * specific page palette. The variable is only consumed at <=768px
 * (see the content rule above) so wider viewports never paint this
 * gradient. */
.cinefi-product-hero--overlay-purple-dark {
  --product-hero-mobile-overlay: linear-gradient(196deg, #6e00ba 11.48%, #07131d 56.62%);
}
.cinefi-product-hero--overlay-teal-dark {
  --product-hero-mobile-overlay: linear-gradient(196deg, #00c9c9 11.48%, #07131d 56.62%);
}
@media (width <= 576px) {
  .cinefi-product-hero--overlay-teal-dark {
    --product-hero-content-padding-mobile: 24px 34px;
  }
}
/* Headline — always renders as <h1> (locked decision; widget owns
 * tag). Typography is widget-internal (50.4/42 size tier isn't part
 * of the cinefi-display-* utility scale). Letter-spacing kept em-based
 * so it scales with the mobile font-size shrink.
 *
 * Parent-class qualifier (`.cinefi-product-hero .cinefi-product-hero__headline`)
 * pushes specificity to (0,2,0) so we beat the kit's `.elementor-kit-6 h1`
 * rule (specificity 0,1,1) which sets font-size: 80px + letter-spacing:
 * -0.0125px globally on h1 elements. Same cascade-bypass pattern as
 * `.cinefi-hero .cinefi-hero__headline`. */
.cinefi-product-hero .cinefi-product-hero__headline {
  margin: 0;
  width: 100%;
  font-family: Inter, sans-serif;
  font-size: var(--product-hero-headline-font-size);
  font-weight: 900;
  line-height: var(--product-hero-headline-line-height);
  letter-spacing: var(--product-hero-headline-letter-spacing);
  word-spacing: var(--product-hero-headline-word-spacing);
  color: var(--product-hero-headline-color);
}
@media (width <= 576px) {
  .cinefi-product-hero .cinefi-product-hero__headline {
    font-size: var(--product-hero-headline-font-size-mobile);
  }
}
/* Body — paragraph copy. WYSIWYG content rendered through
 * `wp_kses_post` (allows inline HTML for footnotes, links, emphasis).
 * Parent-class qualifier for the same cascade-bypass reason as the
 * headline rule above. */
.cinefi-product-hero .cinefi-product-hero__body {
  font-family: Inter, sans-serif;
  font-size: var(--product-hero-body-font-size);
  font-weight: 400;
  line-height: var(--product-hero-body-line-height);
  letter-spacing: var(--product-hero-body-letter-spacing);
  word-spacing: var(--product-hero-body-word-spacing);
  color: var(--product-hero-body-color);

  /* No explicit max-width — the body fills its parent content column.
   * At desktop the content column is 648 with 90px left-padding → body
   * ends up 558 wide. At narrow viewports the content column expands
   * to fill the section, giving the body more wrap-room (matches the
   * legacy behavior where body width is parent-driven, not body-locked). */
}
.cinefi-product-hero .cinefi-product-hero__body p {
  margin: 0;
}
@media (width <= 576px) {
  .cinefi-product-hero .cinefi-product-hero__body {
    font-size: var(--product-hero-body-font-size-mobile);
  }
}
/* CTA button — uses cinefi-btn-gradient-outline utility for the
 * dark→near-black gradient + silver border. Widget overrides the
 * utility's default padding + border-width + dimensions to match the
 * legacy product-hero CTA shape (300×50 fixed with 15px square
 * padding + 1px transparent border).
 *
 * Parent-class qualifier `.cinefi-product-hero .cinefi-product-hero__cta`
 * (specificity 0,2,0) beats the kit's `.elementor a` color rule and any
 * other (0,1,1) rules targeting button typography. Same cascade-bypass
 * pattern as the headline rule. */
.cinefi-product-hero .cinefi-product-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--product-hero-cta-min-width);
  height: var(--product-hero-cta-height);
  padding-block: var(--product-hero-cta-padding-block);
  padding-inline: var(--product-hero-cta-padding-inline);

  /* Override the utility's 3px transparent border with 1px to match
   * legacy. The silver-gradient border-box layer still fills whatever
   * border-width we set, so this trims the visible silver frame. */
  border: var(--product-hero-cta-border);
  border-radius: var(--btn-border-radius);
  background-image: var(--btn-bg-image);
  background-clip: var(--btn-bg-clip);
  background-origin: var(--btn-bg-origin);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  color: var(--btn-color);
  text-align: center;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    box-shadow 0.25s ease;
}
.cinefi-product-hero .cinefi-product-hero__cta:hover,
.cinefi-product-hero .cinefi-product-hero__cta:focus-visible {
  opacity: 0.85;
  box-shadow: 0 2px 30px rgb(0 0 0 / 20%);
}
.cinefi-product-hero__cta-text {
  display: inline-block;
}
/* Layout for the cinefi-prose-page-hero widget — centered prose-page
 * hero (heading + optional body) for pages with no full-bleed media or
 * decorative chrome.
 *
 * Phase G phase 2 widget 3 of 6 — see
 * `clients/cinefi/projects/elementor-migration/prose-page-hero-brief.md`
 * for the locked architecture rationale.
 *
 * Distinct from `cinefi-hero-cinematic`, `cinefi-product-hero-video`:
 *   - No bg-video, no overlay, no decorative SVG shell, no CTA
 *   - Two headline-size tiers (md = 64/41, lg = 80/42)
 *   - Two body-size tiers (md = 22/18, sm = 18/16)
 *   - Always centered
 *
 * Coverage:
 *   - /scheduled-maintenance/ — headline_size=md (64), body_size=md (22)
 *   - /legal/                 — headline_size=lg (80), body_size=sm (18)
 *   - /contact-us/            — headline_size=lg (80), body_size=sm (18)
 *
 * NOT covered (deferred to separate widgets per the brief):
 *   - faq-hero (positioned-absolute SVG + rounded card chrome)
 *   - simple-cta-band (heading + button, no body)
 *   - section-divider-heading (heading-only inside multi-section pages)
 */
.cinefi-prose-hero {
  /* Layout ---------- */
  --prose-hero-max-width: 1310px;

  /* Base/fallback header padding. Per-context values live on the size
   * variants below — the chosen flat-page value (195/80) is on
   * `--headline-lg` (privacy/contact-us/legal), and `--headline-md`
   * (scheduled-maintenance) keeps 224/128. This base only governs the
   * card-nested `--headline-sm` faqs hero, which is a DIFFERENT context
   * (prose-hero nested inside `.bg-hero-card`, not a flat page-top
   * section). The 195 nav-clearance value does NOT suit that context, so
   * the faqs/card case is deliberately left on the prior 200/128 and its
   * real card-internal padding is tracked as separate work. Mobile 80px. */
  --prose-hero-padding-block: 200px 128px;
  --prose-hero-padding-block-mobile: 80px;
  --prose-hero-padding-inline: 24px;
  --prose-hero-content-max-width: 912px;
  --prose-hero-content-stack-gap: 1.5rem;

  /* Typography defaults ---------- */
  --prose-hero-headline-line-height: 1;
  --prose-hero-headline-letter-spacing: -0.0125em;
  --prose-hero-headline-word-spacing: -0.0125em;
  --prose-hero-headline-color: #f5fffe;
  --prose-hero-body-font-weight: 400;
  --prose-hero-body-line-height: 25.56px;
  --prose-hero-body-letter-spacing: -0.02em;
  --prose-hero-body-word-spacing: -0.02em;
  --prose-hero-body-color: #f5fffe;

  /* Per-size token defaults; overridden by `--headline-*` / `--body-*`
   * modifier classes below. Defaults to lg + sm because most v1
   * instances are legal + contact-us. */
  --prose-hero-headline-font-size: 80px;
  --prose-hero-headline-font-size-mobile: 42px;
  --prose-hero-body-font-size: 18px;
  --prose-hero-body-font-size-mobile: 16px;

  /* Section ---------- */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--prose-hero-max-width);
  margin: 0 auto;
  padding-block: var(--prose-hero-padding-block);
  padding-inline: var(--prose-hero-padding-inline);
  color: var(--prose-hero-body-color);
}
@media (width <= 576px) {
  .cinefi-prose-hero {
    padding-block: var(--prose-hero-padding-block-mobile);
  }

  /* Legal page parity: identify the page by the PDF download-list widget
   * rather than a page/Elementor id so slug swaps do not orphan the rhythm. */
  .elementor:has(.cinefi-pdf-download-list) .cinefi-prose-hero {
    --prose-hero-content-stack-gap: 15px;
    --prose-hero-padding-inline: 0;

    padding-block: 97px 39px;
  }

  /* Privacy-policy parity: identify this flat policy page by the FFIEC
   * disclosure table widget instead of a numeric page/Elementor id. */
  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-hero {
    --prose-hero-content-stack-gap: 15px;
    --prose-hero-padding-inline: 0;

    padding-block: 97px 39px;
  }
}
/* Headline size variants — pure CSS-custom-property overrides. Same
 * cascade-bypass pattern as `cinefi-display-*` and the hero-cinematic
 * size variants. */
.cinefi-prose-hero--headline-sm {
  --prose-hero-headline-font-size: 60px;
  --prose-hero-headline-font-size-mobile: 36px;
}
.cinefi-prose-hero--headline-md {
  --prose-hero-headline-font-size: 64px;
  --prose-hero-headline-font-size-mobile: 41px;

  /* Scheduled-maintenance uses md size. Re-probed 2026-06-11 (QA rows
   * 61/62): prod now renders 144px hero padding both sides with the h1
   * at viewport-y 239 (prod content drifted since the 2026-05-29
   * 223/224 measurement). Top = 95px nav clearance + 144 = 239;
   * bottom matches prod's 144. Stack gap 33px (prod h1-to-body gap;
   * the shared default is 1.5rem/24). */
  --prose-hero-padding-block: 239px 144px;
  --prose-hero-content-stack-gap: 33px;

  /* Mobile: flat-page nav clearance — see the lg note below. */
  --prose-hero-padding-block-mobile: 105px 80px;
}
.cinefi-prose-hero--headline-lg {
  --prose-hero-headline-font-size: 80px;
  --prose-hero-headline-font-size-mobile: 42px;

  /* Chosen flat-page header padding (Brandon 2026-06-01): 195px top / 80px
   * bottom. Scoped to lg (the standalone full-bleed pages: privacy /
   * contact-us / legal) so it does NOT bleed into the card-nested sm faqs
   * hero. Of the 195 top, ~95px clears the fixed nav (the hero is the page's
   * first element); ~100px is breathing room. Bottom 80px tightens the gap to
   * the content below. (privacy's legacy wrapper 80px top padding is zeroed in
   * bin/migrate-prose-page.py so this value alone governs.) */
  --prose-hero-padding-block: 195px 80px;

  /* Mobile (added 2026-06-11, QA rows 22/55 mobile aspect): the uniform
   * 80px mobile padding left only 15px of visible gap under the 65px
   * fixed nav vs live's 32-46px (live mobile h1-y: legal 97, contact-us
   * 111). Same standardization philosophy as the desktop value: 65px
   * clears the nav + 40px breathing = 105px top; bottom stays 80.
   * Scoped to the flat-page variants (lg + md) — the card-nested sm
   * faqs hero keeps the base 80px (it is mid-page, no nav clearance). */
  --prose-hero-padding-block-mobile: 105px 80px;
}
/* Content layer — centered flex stack. `align-items: center` centers
 * the headline + body horizontally; the content max-width keeps long
 * lines from running edge-to-edge on wide viewports. */
.cinefi-prose-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--prose-hero-content-stack-gap);
  width: 100%;
  max-width: var(--prose-hero-content-max-width);
  text-align: center;
}
/* Headline — always renders as <h1> (locked decision; widget owns
 * tag). Typography is widget-internal (md/lg sizes don't fit the
 * existing `cinefi-display-*` utility scale).
 *
 * Parent-class qualifier (`.cinefi-prose-hero .cinefi-prose-hero__headline`)
 * pushes specificity to (0,2,0) so we beat the kit's `.elementor-kit-6 h1`
 * rule (specificity 0,1,1) which sets font-size: 80px + letter-spacing:
 * -0.0125px globally on h1 elements. Same cascade-bypass pattern as
 * `.cinefi-hero .cinefi-hero__headline` and
 * `.cinefi-product-hero .cinefi-product-hero__headline`. */
.cinefi-prose-hero .cinefi-prose-hero__headline {
  margin: 0;
  width: 100%;
  font-family: Inter, sans-serif;
  font-size: var(--prose-hero-headline-font-size);
  font-weight: 900;
  line-height: var(--prose-hero-headline-line-height);
  letter-spacing: var(--prose-hero-headline-letter-spacing);
  word-spacing: var(--prose-hero-headline-word-spacing);
  color: var(--prose-hero-headline-color);
  text-align: center;
}
@media (width <= 576px) {
  .cinefi-prose-hero .cinefi-prose-hero__headline {
    font-size: var(--prose-hero-headline-font-size-mobile);
  }
}
/* Body — paragraph copy. WYSIWYG content rendered through
 * `wp_kses_post`. Same parent-class qualifier for cascade-bypass. */
.cinefi-prose-hero .cinefi-prose-hero__body {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: var(--prose-hero-body-font-size);
  font-weight: var(--prose-hero-body-font-weight);
  line-height: var(--prose-hero-body-line-height);
  letter-spacing: var(--prose-hero-body-letter-spacing);
  word-spacing: var(--prose-hero-body-word-spacing);
  color: var(--prose-hero-body-color);
  text-align: center;
}
.cinefi-prose-hero .cinefi-prose-hero__body p {
  margin: 0;
}
.cinefi-prose-hero .cinefi-prose-hero__body--md {
  --prose-hero-body-font-size: 22px;
  --prose-hero-body-font-size-mobile: 18px;
}
.cinefi-prose-hero .cinefi-prose-hero__body--sm {
  --prose-hero-body-font-size: 18px;
  --prose-hero-body-font-size-mobile: 16px;
}
@media (width <= 576px) {
  .cinefi-prose-hero .cinefi-prose-hero__body {
    font-size: var(--prose-hero-body-font-size-mobile);
  }

  /* Contact page parity: the page is identified by the contact-card-pair
   * widget instead of a page/Elementor id so slug swaps do not orphan this
   * mobile rhythm. */
  .elementor:has(.cinefi-contact-card-pair) .cinefi-prose-hero--headline-lg {
    --prose-hero-padding-block-mobile: 111px 40px;
    --prose-hero-padding-inline: 10px;
    --prose-hero-content-stack-gap: 33px;
  }

  .elementor:has(.cinefi-contact-card-pair) .cinefi-prose-hero .cinefi-prose-hero__body--sm {
    --prose-hero-body-font-size-mobile: 18px;

    letter-spacing: -0.36px;
  }
}
/* Layout for the cinefi-media-bg-cta widget — full-bleed image background
 * with a purple-gradient overlay tint and a centered content stack
 * (h2 + body + CTA) for checking/savings §0.8 (2 instances in v1).
 *
 * Phase G phase 2 widget 4 of 6 — see
 * `clients/cinefi/projects/elementor-migration/media-bg-cta-brief.md`
 * for the locked architecture rationale.
 *
 * Distinct from `cinefi-hero-cinematic`, `cinefi-product-hero-video`,
 * `cinefi-prose-page-hero`:
 *   - Full-bleed image bg (no decorative card, no responsive video swap)
 *   - Hardcoded purple-gradient overlay tint, not editor-controllable
 *   - Centered content (vs hero-cinematic's left-anchored)
 *   - <h2> not <h1> (parent pages already have an <h1> from §0.0)
 *   - CTA reuses cinefi-btn-gradient-outline at widget-scoped 300×60
 *     (vs product-hero-video's 300×50)
 *
 * Coverage:
 *   - /checking/ §0.8 — bg=Section-5_image.png, "Bank between takes."
 *   - /savings/  §0.8 — bg=Section-5_image.jpg, "Build resilience between gigs."
 *
 * NOT covered (deferred per refute-the-consolidation):
 *   - home §6 (nested rounded-card with own media bg, left-anchored)
 *   - bg_type=video variant (no v1 instance uses it)
 */
.cinefi-media-bg-cta {
  /* Layout ---------- */
  --media-bg-cta-min-height: 100vh;
  --media-bg-cta-min-height-mobile: 100vh;
  --media-bg-cta-content-max-width: 100%;
  --media-bg-cta-body-max-width: 648px;
  --media-bg-cta-padding-block: 10px;
  --media-bg-cta-padding-block-mobile: 10px;
  --media-bg-cta-padding-inline: 10px;
  --media-bg-cta-content-stack-gap: 15px;

  /* Overlay treatment — purple gradient from transparent at the top to
   * opaque at 70% down. Editor controls the visibility per-instance via
   * the `overlay_opacity` slider (0-100, default 0 = invisible).
   *
   * Prod cross-check 2026-05-20: prod /savings/ §0.8 renders this overlay
   * via section `::before` pseudo at opacity 0.5 (matches slider value 50);
   * prod /checking/ §0.8 renders the same `::before` but with the gradient
   * collapsed to a transparent purple (slider value 0 effectively).
   *
   * Color is currently hardcoded; expose `--media-bg-cta-overlay-color`
   * as a follow-up if a future instance needs a non-purple tint. */
  --media-bg-cta-overlay: linear-gradient(
    180deg,
    rgb(110 0 186 / 0%) 0%,
    rgb(110 0 186 / 100%) 70%
  );
  --media-bg-cta-overlay-opacity: 0;

  /* Typography defaults — both v1 instances render identical to these. */
  --media-bg-cta-headline-font-size: 52px;
  --media-bg-cta-headline-font-size-mobile: 36px;
  --media-bg-cta-headline-line-height: 1;
  --media-bg-cta-headline-letter-spacing: -0.0125em;
  --media-bg-cta-headline-word-spacing: -0.0125em;
  --media-bg-cta-headline-color: #f5fffe;
  --media-bg-cta-body-font-size: 18px;
  --media-bg-cta-body-font-size-mobile: 14px;
  --media-bg-cta-body-padding-block: 12.046px 24px;
  --media-bg-cta-body-padding-block-mobile: 23.375px 52px;
  --media-bg-cta-body-padding-inline: 0;
  --media-bg-cta-body-padding-inline-mobile: 14px;

  /* Default/checking follows the legacy kit fallback: 25.56px at 18px on
   * desktop and 25.2px at 14px on mobile. Savings keeps its explicit 1.8em
   * rhythm through the build-resilience variant below. */
  --media-bg-cta-body-line-height: 25.56px;
  --media-bg-cta-body-line-height-mobile: 25.2px;

  /* Letter-spacing + word-spacing -0.02em — matches legacy
   * typography_letter_spacing / typography_word_spacing both set to
   * -0.02em on both instances. At 18px = -0.36px. */
  --media-bg-cta-body-letter-spacing: -0.02em;
  --media-bg-cta-body-word-spacing: -0.02em;
  --media-bg-cta-body-color: rgb(245 255 254 / 90%);

  /* CTA — widget-scoped overrides for the cinefi-btn-gradient-outline
   * utility. Legacy §0.8 buttons render at 300×60 with 20px square
   * padding (vs product-hero-video's 300×50 + 15px). */
  --media-bg-cta-cta-min-width: 300px;
  --media-bg-cta-cta-min-height: 0px;
  --media-bg-cta-cta-padding-block: 20px;
  --media-bg-cta-cta-padding-inline: 20px;

  /* Section ---------- */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--media-bg-cta-min-height);
  padding-block: var(--media-bg-cta-padding-block);
  padding-inline: var(--media-bg-cta-padding-inline);

  /* Background image is inline-styled on the element from PHP render.
   * These properties shape how it renders. `background-attachment: fixed`
   * matches the legacy parallax behavior at desktop; iOS/mobile browsers
   * commonly ignore this property and fall back to scroll, which is the
   * acceptable behavior on small viewports anyway. */
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}
.cinefi-media-bg-cta--build-resilience {
  --media-bg-cta-body-line-height: 1.8;
}
@media (width <= 576px) {
  body .elementor .elementor-element.elementor-widget-cinefi-media-bg-cta {
    -webkit-margin-before: 65px;
            margin-block-start: 65px;
  }

  .cinefi-media-bg-cta {
    min-height: var(--media-bg-cta-min-height-mobile);
    padding-block: var(--media-bg-cta-padding-block-mobile);
    background-attachment: scroll;
  }

  .cinefi-media-bg-cta--build-resilience {
    --media-bg-cta-min-height-mobile: 100vh;
    --media-bg-cta-padding-block-mobile: 10px;
    --media-bg-cta-padding-inline: 10px;
    --media-bg-cta-content-stack-gap: 15px;
    --media-bg-cta-body-font-size-mobile: 14px;
    --media-bg-cta-cta-min-height: 58px;
  }
}
/* Overlay layer — sits above the bg image (z-index 1), below the content
 * (z-index 2). Aria-hidden in HTML; purely visual. Opacity is editor-
 * controlled via the `overlay_opacity` slider (0-100), emitted by PHP
 * render as `--media-bg-cta-overlay-opacity` inline style on the section. */
.cinefi-media-bg-cta__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--media-bg-cta-overlay);
  opacity: var(--media-bg-cta-overlay-opacity);
  pointer-events: none;
}
/* Content layer — centered flex stack above the overlay. */
.cinefi-media-bg-cta__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--media-bg-cta-content-stack-gap);
  width: 100%;
  max-width: var(--media-bg-cta-content-max-width);
  text-align: center;
}
/* Headline — always <h2>. Parent-class qualifier
 * (`.cinefi-media-bg-cta .cinefi-media-bg-cta__headline`) pushes
 * specificity to (0,2,0) to beat the kit's `.elementor-kit-6 h2` rule
 * (specificity 0,1,1). Same cascade-bypass pattern as hero-cinematic,
 * product-hero-video, prose-page-hero. */
.cinefi-media-bg-cta .cinefi-media-bg-cta__headline {
  margin: 0;
  width: 100%;
  font-family: Inter, sans-serif;
  font-size: var(--media-bg-cta-headline-font-size);
  font-weight: 900;
  line-height: var(--media-bg-cta-headline-line-height);
  letter-spacing: var(--media-bg-cta-headline-letter-spacing);
  word-spacing: var(--media-bg-cta-headline-word-spacing);
  color: var(--media-bg-cta-headline-color);
  text-align: center;
}
@media (width <= 576px) {
  .cinefi-media-bg-cta .cinefi-media-bg-cta__headline {
    font-size: var(--media-bg-cta-headline-font-size-mobile);
  }

  .cinefi-media-bg-cta:not(.cinefi-media-bg-cta--build-resilience)
    .cinefi-media-bg-cta__headline {
    font-size: clamp(32.5px, calc(6vw + 9px), var(--media-bg-cta-headline-font-size-mobile));
  }
}
/* Body — paragraph copy. Same parent-class cascade-bypass.
 * Body width constrained narrower than the headline column for prod
 * parity — prod /checking/ §0.8 renders heading at 1477px (full
 * section width) but body at 648px (narrower for line-length
 * readability). Asymmetric layout: wide heading, constrained body. */
.cinefi-media-bg-cta .cinefi-media-bg-cta__body {
  margin: 0;
  max-width: var(--media-bg-cta-body-max-width);
  padding-block: var(--media-bg-cta-body-padding-block);
  padding-inline: var(--media-bg-cta-body-padding-inline);
  box-sizing: border-box;
  font-family: Inter, sans-serif;
  font-size: var(--media-bg-cta-body-font-size);
  font-weight: 400;
  line-height: var(--media-bg-cta-body-line-height);
  letter-spacing: var(--media-bg-cta-body-letter-spacing);
  word-spacing: var(--media-bg-cta-body-word-spacing);
  color: var(--media-bg-cta-body-color);
  text-align: center;
}
.cinefi-media-bg-cta .cinefi-media-bg-cta__body p {
  margin: 0;
}
.cinefi-media-bg-cta .cinefi-media-bg-cta__body > span {
  display: block;
}
@media (width <= 576px) {
  .cinefi-media-bg-cta .cinefi-media-bg-cta__body {
    padding-block: var(--media-bg-cta-body-padding-block-mobile);
    padding-inline: var(--media-bg-cta-body-padding-inline-mobile);
    font-size: var(--media-bg-cta-body-font-size-mobile);
    line-height: var(--media-bg-cta-body-line-height-mobile);
  }

  .cinefi-media-bg-cta--build-resilience .cinefi-media-bg-cta__body {
    width: calc(100% - 100px);
    max-width: calc(100% - 100px);
    padding-block: 14px 33.375px;
    padding-inline: 0;
  }
}
@supports (-webkit-touch-callout: none) {
  @media (width <= 576px) {
    .cinefi-media-bg-cta:not(.cinefi-media-bg-cta--build-resilience) {
      --media-bg-cta-body-padding-block-mobile: 23.375px 33.375px;
      --media-bg-cta-body-padding-inline-mobile: 24px;
    }

    .cinefi-media-bg-cta:not(.cinefi-media-bg-cta--build-resilience)
      .cinefi-media-bg-cta__headline {
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
      max-width: calc(100% - 8px);
      font-size: clamp(32.5px, calc(6vw + 9px), var(--media-bg-cta-headline-font-size-mobile));
    }
  }
}
@media (width <= 576px) {
  .cinefi-media-bg-cta--build-resilience .cinefi-media-bg-cta__cta {
    --btn-border: 1px solid transparent;
  }
}
/* CTA — consumes the cinefi-btn-gradient-outline utility custom
 * properties, with widget-scoped overrides for size (300×60 instead
 * of the utility default that auto-sizes to content + padding).
 * The utility default border is 3px transparent + silver-gradient
 * border-box clip — we keep that as-is (matches legacy .gradient-button). */
.cinefi-media-bg-cta .cinefi-media-bg-cta__cta {
  --btn-border: 1px solid #f5fffe;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--media-bg-cta-cta-min-width);
  min-height: var(--media-bg-cta-cta-min-height);
  padding-block: var(--media-bg-cta-cta-padding-block);
  padding-inline: var(--media-bg-cta-cta-padding-inline);
  border: var(--btn-border);
  border-radius: var(--btn-border-radius);
  background-color: #6e00ba;
  background-image: var(--btn-bg-image);
  background-clip: var(--btn-bg-clip);
  background-origin: var(--btn-bg-origin);
  font-family: Inter, sans-serif;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  line-height: var(--btn-line-height);
  color: var(--btn-color);
  text-decoration: none;
  cursor: pointer;
  transition: filter 150ms ease;
}
.cinefi-media-bg-cta .cinefi-media-bg-cta__cta:hover,
.cinefi-media-bg-cta .cinefi-media-bg-cta__cta:focus-visible {
  filter: brightness(1.1);
}
.cinefi-media-bg-cta .cinefi-media-bg-cta__cta-text {
  display: inline-block;
}
/* Layout for the cinefi-media-card-cta widget — three-layer chrome:
 * outer full-bleed section with bg-video + black wash, nested rounded
 * card with purple→transparent gradient background, left-aligned
 * H2 + body + CTA stack.
 *
 * Phase H widget 1 of N — see
 * `clients/cinefi/projects/elementor-migration/media-card-cta-brief.md`
 * for the locked architecture rationale.
 *
 * Distinct from `cinefi-media-bg-cta`:
 *   - Three layers (outer + bg-layer + card) vs single container
 *   - Left-aligned content vs centered
 *   - bg-video + black wash vs bg-image + purple gradient overlay
 *   - Inner card with own gradient + box-shadow vs no card chrome
 *   - CTA uses `cinefi-btn-fill` (teal→purple filled) vs the outline variant
 *
 * Coverage:
 *   - / (home) §6 — bg-video Splash-Video.mp4, "Made for life below the line."
 *
 * NOT covered (deferred until 2nd instance proves the pattern):
 *   - Editor-controlled overlay color (currently hardcoded #000)
 *   - Right-aligned content layout
 *   - Heading-tag selector (locked to h2)
 */
.cinefi-media-card-cta {
  /* Layout ---------- */
  --media-card-cta-section-padding-block: 96px;
  --media-card-cta-section-padding-block-mobile: 16px;
  --media-card-cta-section-padding-inline: 0;
  --media-card-cta-section-padding-inline-mobile: 16px;
  --media-card-cta-card-max-width: 1310px;
  --media-card-cta-card-min-height: 736px;
  --media-card-cta-card-min-height-mobile: 466px;
  --media-card-cta-card-border-radius: 20px;
  --media-card-cta-card-padding-block: 1px 0;
  --media-card-cta-card-padding-block-mobile: 48px 48px;
  --media-card-cta-card-padding-inline: 117px;
  --media-card-cta-card-padding-inline-mobile: 24px;
  --media-card-cta-card-box-shadow: 10px 0 24px 24px rgb(0 0 0 / 25%);

  /* Inner card gradient — purple→transparent, anchored at left.
   * Sampled from prod `#home-made-for-life` custom_css 2026-05-22:
   * linear-gradient(89deg, rgba(110,0,186,.80) 24.86%, rgba(7,19,29,0) 98.77%) */
  --media-card-cta-card-bg: linear-gradient(
    89deg,
    rgb(110 0 186 / 80%) 24.86%,
    rgb(7 19 29 / 0%) 98.77%
  );

  /* Outer overlay (black wash above the bg-video). Opacity drives
   * editor `overlay_strength` slider via inline style on the section. */
  --media-card-cta-overlay-color: #000;
  --media-card-cta-overlay-opacity: 0.6;

  /* Content ----------
   * Both heading and body cap at 553px to match prod. The
   * inner card's `.sub-hero-text` rule sets `max-width: 553px !important`
   * on both the heading widget AND the text-editor widget; baking
   * the same constraint here matches the column-shape of the legacy. */
  --media-card-cta-content-max-width: 553px;
  --media-card-cta-body-max-width: 553px;

  /* Prod-matched gap: 15px (probe 2026-06-01 confirmed; brief had 24px) */
  --media-card-cta-stack-gap: 15px;

  /* Typography — prod-matched from live probe 2026-06-01 (1280×900 desktop).
   * Heading: Inter 60 / 900 / line-height 60px / #EBFFFE / letter-spacing -2.4px.
   *   NOTE: the brief's -0.0125em (=-0.75px at 60px) does NOT match prod;
   *   prod uses the legacy `.sub-hero-text` applied -2.4px absolute.
   *   DIVERGENCE: brief said -0.0125em; prod is -2.4px → matched prod.
   * Body: Inter 18 / 400 / line-height 25.56px / rgb(245 255 254 / 90%).
   *   NOTE: the brief normalized alpha to opaque; prod uses 0.9 on the
   *   text-editor container — DIVERGENCE: brief said opaque; prod is 0.9 →
   *   matched prod (per batch-surface divergence policy 2026-06-01).
   * Body mobile: 14px (not 16px; prod: typography_font_size_mobile = 14).
   *   DIVERGENCE: brief said 16px; prod is 14px → matched prod. */
  --media-card-cta-headline-font-size: 60px;
  --media-card-cta-headline-font-size-mobile: 36px;
  --media-card-cta-headline-line-height: 1;
  --media-card-cta-headline-letter-spacing: -2.4px;
  --media-card-cta-headline-word-spacing-mobile: -0.45px;
  --media-card-cta-headline-color: #ebfffe;
  --media-card-cta-body-font-size: 18px;
  --media-card-cta-body-font-size-mobile: 14px;
  --media-card-cta-body-line-height: 25.56px;
  --media-card-cta-body-letter-spacing: -0.02em;
  --media-card-cta-body-word-spacing: -0.02em;

  /* 90% alpha matches prod text-editor container color (all viewports) */
  --media-card-cta-body-color: rgb(245 255 254 / 90%);

  /* CTA — widget-scoped overrides for cinefi-btn-fill. Prod button is
   * 275×60 with the teal→purple filled gradient + 20/500 typography,
   * border-radius 5px, padding 12px 24px. Honor align_mobile: right
   * via .cinefi-media-card-cta__cta at mobile breakpoint. */
  --media-card-cta-cta-width: 275px;
  --media-card-cta-cta-min-height: 60px;
  --media-card-cta-cta-padding-block: 12px;
  --media-card-cta-cta-padding-inline: 24px;
  --media-card-cta-cta-font-size: 20px;
  --media-card-cta-cta-font-size-mobile: 16px;
  --media-card-cta-cta-font-weight: 500;
  --media-card-cta-cta-border-radius: 5px;

  /* Section ---------- */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-block: var(--media-card-cta-section-padding-block);
  padding-inline: var(--media-card-cta-section-padding-inline);
  overflow: hidden;
}
/* bg-layer holds the video + black wash overlay. Full-bleed section
 * background — the video spans the whole section edge-to-edge, the
 * card sits on top as a separate opacified container. (Prod's boxed
 * wrapper constrained the video to 1140w; we deliberately drop that
 * — cleaner mental model, simpler responsive behavior.) */
.cinefi-media-card-cta__bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cinefi-media-card-cta__bg-video,
.cinefi-media-card-cta__bg-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.cinefi-media-card-cta__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--media-card-cta-overlay-color);
  opacity: var(--media-card-cta-overlay-opacity);
}
/* Inner rounded card — left-aligned content stack with the
 * purple→transparent gradient background + box-shadow. */
.cinefi-media-card-cta__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: var(--media-card-cta-card-max-width);
  min-height: var(--media-card-cta-card-min-height);
  margin-inline: auto;
  padding-block: var(--media-card-cta-card-padding-block);
  padding-inline: var(--media-card-cta-card-padding-inline);
  background-image: var(--media-card-cta-card-bg);
  border-radius: var(--media-card-cta-card-border-radius);
  box-shadow: var(--media-card-cta-card-box-shadow);
  gap: var(--media-card-cta-stack-gap);
}
/* Headline — consumes `cinefi-display-xl` custom properties for font-size,
 * weight, and line-height, but overrides letter-spacing with the prod-matched
 * absolute value (-2.4px, from the legacy `.sub-hero-text` class applied to
 * the heading widget on prod). Parent-class qualifier pushes specificity to
 * (0,2,0) to beat the kit's `.elementor-kit-6 h2` rule (0,1,1). */
.cinefi-media-card-cta .cinefi-media-card-cta__headline {
  max-width: var(--media-card-cta-content-max-width);
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: var(--display-font-size);
  font-weight: var(--display-font-weight);
  line-height: var(--display-line-height);
  letter-spacing: var(--media-card-cta-headline-letter-spacing);
  color: var(--media-card-cta-headline-color);
  text-align: left;
}
/* Body — parent-class qualifier matches the headline pattern to win
 * against any kit `.elementor` text rules that might target the body.
 * `word-spacing` is explicitly set to override the kit's `-0.54px`
 * cascading from `<body>` — legacy's per-element typography sets it
 * to `-0.02em` (=-0.36px at 18px), and the tighter inherited value
 * makes our text wrap into fewer lines than prod (Workflow Gotcha
 * #18 from product-hero-video — word-spacing matters for typography
 * parity). */
.cinefi-media-card-cta .cinefi-media-card-cta__body {
  max-width: var(--media-card-cta-body-max-width);
  font-family: Inter, sans-serif;
  font-size: var(--media-card-cta-body-font-size);
  font-weight: 400;
  line-height: var(--media-card-cta-body-line-height);
  letter-spacing: var(--media-card-cta-body-letter-spacing);
  word-spacing: var(--media-card-cta-body-word-spacing);
  color: var(--media-card-cta-body-color);
  text-align: left;
}
/* Match the legacy text-editor's wp_autop rendering: 24px
 * margin-bottom between paragraphs, but drop the trailing margin so
 * the body container collapses to the legacy's effective height
 * (paragraphs + inter-paragraph gaps, not paragraphs + trailing gap).
 * Legacy is `display: flex; flex-direction: column` on the inner
 * card, which propagates so the body container doesn't collapse the
 * last `<p>`'s margin into the next sibling — the last margin would
 * push the CTA down by 24px vs legacy. */
.cinefi-media-card-cta__body p {
  margin: 0 0 24px;
}
.cinefi-media-card-cta__body p:last-child {
  margin-bottom: 0;
}
/* CTA — consumes `cinefi-btn-fill` custom properties via `var()` to
 * bypass kit `.elementor-button` specificity (Workflow Gotcha #10).
 * Widget-scoped vars override font-size + dimensions; the utility
 * still supplies bg-image, color, border, and bg clipping. */
.cinefi-media-card-cta .cinefi-media-card-cta__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--media-card-cta-cta-width);
  min-height: var(--media-card-cta-cta-min-height);
  padding-block: var(--media-card-cta-cta-padding-block);
  padding-inline: var(--media-card-cta-cta-padding-inline);
  font-family: Inter, sans-serif;
  font-size: var(--media-card-cta-cta-font-size);
  font-weight: var(--media-card-cta-cta-font-weight);
  line-height: var(--btn-line-height);
  color: var(--btn-color);
  text-decoration: none;
  background-image: var(--btn-bg-image);
  background-clip: var(--btn-bg-clip);
  background-origin: var(--btn-bg-origin);
  border: var(--btn-border);
  border-radius: var(--media-card-cta-cta-border-radius);
}
/* Mobile (≤567) — outer section drops to small padding, card padding
 * collapses, video can be hidden via the modifier class, and the card
 * gradient rotates to vertical (0deg) to match prod at mobile viewport.
 * Breakpoint matches the kit's mobile rule (the inner card's prod
 * custom_css uses `@media (max-width: 567px)`). Prod probe 2026-06-01
 * confirms heading 36px (not 40px as brief suggested; matched prod). */
@media (width <= 567px) {
  .cinefi-media-card-cta {
    padding-block: var(--media-card-cta-section-padding-block-mobile);
    padding-inline: var(--media-card-cta-section-padding-inline-mobile);
  }

  .cinefi-media-card-cta__card {
    min-height: var(--media-card-cta-card-min-height-mobile);
    padding-block: var(--media-card-cta-card-padding-block-mobile);
    padding-inline: var(--media-card-cta-card-padding-inline-mobile);

    /* Mobile gradient: prod rotates to 0deg (vertical, bottom-anchored purple)
     * with 0.9 alpha start stop. DIVERGENCE vs brief (which didn't document
     * mobile gradient rotation) — matched prod 2026-06-01. */
    background-image: linear-gradient(
      0deg,
      rgb(110 0 186 / 90%) 4.11%,
      rgb(7 19 29 / 0%) 98.28%
    );
  }

  .cinefi-media-card-cta .cinefi-media-card-cta__headline {
    /* Prod mobile: 36px (same as cinefi-display-xl default at ≤576).
     * Brief had 40px — matched prod 36px. */
    --display-font-size: 36px;

    /* Prod mobile applies per-element word spacing here; without it the
     * inherited body spacing pulls "the" onto line one at wider mobile widths. */
    word-spacing: var(--media-card-cta-headline-word-spacing-mobile);
  }

  .cinefi-media-card-cta .cinefi-media-card-cta__body {
    font-size: var(--media-card-cta-body-font-size-mobile);
  }

  .cinefi-media-card-cta .cinefi-media-card-cta__cta {
    align-self: flex-end;
    font-size: var(--media-card-cta-cta-font-size-mobile);
  }

  .cinefi-media-card-cta--video-hidden-mobile .cinefi-media-card-cta__bg-video {
    display: none;
  }

  .cinefi-media-card-cta--cta-hidden-mobile .cinefi-media-card-cta__body {
    -webkit-margin-after: 24px;
            margin-block-end: 24px;
  }

  .cinefi-media-card-cta--cta-hidden-mobile .cinefi-media-card-cta__cta {
    display: none;
  }
}
/* Layout for the cinefi-app-download-card widget — full-bleed video bg
 * with a centered rounded card containing heading + body + QR code +
 * CTA. Covers home §4 + checking §0.11 + savings §0.11 (3 instances).
 *
 * Phase G phase 2 widget 5 of 6 — see
 * `clients/cinefi/projects/elementor-migration/app-download-card-brief.md`
 * for the locked architecture rationale.
 *
 * Distinct from prior widgets:
 *   - Full-bleed video bg with overlay (vs media-bg-cta's image bg)
 *   - Rounded inner card chrome (max-width 658, border-radius 20)
 *   - CTA reuses cinefi-btn-fill (kit's teal→purple gradient primary,
 *     NOT cinefi-btn-gradient-outline)
 *   - <h2> heading (parent pages have <h1> from §0.0)
 *
 * Coverage:
 *   - / §4 — overlay=gradient-mask, height=fixed-1095
 *   - /checking/ §0.11 — overlay=dark-tint, height=vh-100
 *   - /savings/  §0.11 — overlay=dark-tint, height=vh-80
 *
 * NOT covered (audit-correction refutes, see brief):
 *   - bg_type=image variant (all 3 instances use video bg; audit was wrong)
 *   - cinefi-frosted-glass utility (legacy .blur-filter renders nothing)
 */
.cinefi-app-download {
  /* Layout ---------- */
  --app-download-card-max-width: 658px;
  --app-download-card-max-height: 678px;

  /* Card min-height 600px ensures content has vertical breathing room
   * matching prod (e.g., prod /checking/ §0.11 card is 662px tall with
   * justify-content: center distributing empty space above/below the
   * content stack). Prior 343 produced a tight 470px card that packed
   * content close to the top + bottom edges. AD-2 fix 2026-05-20. */
  --app-download-card-min-height: 600px;
  --app-download-card-min-height-mobile: 346px;
  --app-download-card-padding-block: 0;
  --app-download-card-padding-inline: 111px;
  --app-download-card-padding-inline-mobile: 32px;
  --app-download-card-border-radius: 20px;
  --app-download-card-border-color: #a41fff;

  /* Card background — 2026-06-01 prod-parity, round-2 correction.
   * Deeper re-probe of prod /checking/ §0.11 (element 2edd968) showed the
   * card's darkness comes from a `background-image:
   * linear-gradient(rgba(7,19,29,0.8), rgba(7,19,29,0.8))` — a flat 80%-opaque
   * dark fill — LAYERED WITH `backdrop-filter: blur(10px)`. (The bg-COLOR is
   * transparent, but the bg-IMAGE is the 80% fill, so prod is effectively
   * ~80% opaque + frosted.) Round-1's first probe read only the bg-color
   * (transparent) and I dropped the tint to 22%, which Brandon flagged as too
   * transparent. Restoring 80% (prod's effective opacity) while KEEPING the
   * blur(10px) reproduces prod's darker frosted panel. */
  --app-download-card-bg-color: rgb(7 19 29 / 80%);
  --app-download-card-backdrop-blur: 10px;
  --app-download-card-bg-overlay-opacity: 0.8;
  --app-download-content-stack-gap: 16px;

  /* Typography defaults — both legacy instances render identical. */
  --app-download-heading-font-size: 52px;
  --app-download-heading-font-size-mobile: 36px;
  --app-download-heading-line-height: 1;

  /* Legacy heading carries `sub-hero-text` class which applies a tighter
   * letter-spacing (-2.4px fixed) than the typical -0.0125em em-based
   * value used in other widgets. Match empirically. word-spacing stays
   * em-based and matches legacy (-0.0125em = -0.65px at 52px). */
  --app-download-heading-letter-spacing: -2.4px;
  --app-download-heading-letter-spacing-mobile: -1.6px;
  --app-download-heading-word-spacing: -0.0125em;
  --app-download-heading-color: #ebfffe;
  --app-download-body-font-size: 18px;
  --app-download-body-font-size-mobile: 16px;
  --app-download-body-line-height: 25.56px;
  --app-download-body-letter-spacing: -0.02em;
  --app-download-body-word-spacing: -0.02em;
  --app-download-body-color: rgb(245 255 254 / 90%);
  --app-download-cta-lead-font-size: 16px;
  --app-download-cta-lead-font-weight: 700;
  --app-download-cta-lead-color: #f5fffe;

  /* QR rendered size + corner radius match prod (live cinefi.com /checking/
   * renders 162×162 with border-radius 10px). Prior 200px hardcode was
   * a build-time guess that didn't match prod. */
  --app-download-qr-size: 162px;
  --app-download-qr-border-radius: 10px;

  /* Section ---------- */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  padding-block: 64px;
  padding-inline: 16px;
}
/* Outer min-height tiers — picked by editor via outer_min_height. */
.cinefi-app-download--height-vh-100 {
  min-height: 100vh;
}
.cinefi-app-download--height-vh-80 {
  min-height: 80vh;
}
.cinefi-app-download--height-fixed-1095 {
  min-height: 1095px;
}
@media (width <= 768px) {
  .cinefi-app-download--height-fixed-1095 {
    /* Home uses fixed-1095 as an authored scenic band, not a viewport
     * utility. Keep the named height stable on mobile. */
    min-height: 1095px;
  }
}
/* Bg video — absolute-positioned behind overlay + card, fills the
 * section, object-fit cover so aspect ratio matches container. */
.cinefi-app-download__bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
}
/* Overlay layer — above the video (z-index 1), below the card.
 * Style varies by overlay_style modifier. */
.cinefi-app-download__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* dark-tint variant — no OUTER overlay. Prod /checking/ + /savings/ §0.11
 * (verified 2026-05-20 via DOM probe walking up from the bg-video element):
 * the outer section's `::before` pseudo has opacity 0.73 but no
 * background-color/image, so the OUTER tint is effectively invisible.
 * The visible dark wash is on the INNER card itself via the card's
 * translucent bg-color (--app-download-card-bg-color = rgba(7,19,29,0.8)
 * per AD-5 fix). gradient-mask variant DOES have an outer overlay (matches
 * home /) — keep that rule below. AD-1 final fix 2026-05-21. */
.cinefi-app-download--overlay-dark-tint .cinefi-app-download__overlay,
.cinefi-app-download--overlay-none .cinefi-app-download__overlay {
  display: none;
}
.cinefi-app-download--overlay-gradient-mask .cinefi-app-download__overlay {
  background-image:
    linear-gradient(319deg, rgb(110 0 186 / 0%) 52.02%, rgb(110 0 186 / 20%) 106.83%),
    linear-gradient(0deg, rgb(0 0 0 / 50%) 0%, rgb(0 0 0 / 50%) 100%);
  background-blend-mode: color, normal;
}
/* Card — centered rounded container above the overlay (z-index 2). */
.cinefi-app-download__card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--app-download-content-stack-gap);
  width: 100%;
  max-width: var(--app-download-card-max-width);
  max-height: var(--app-download-card-max-height);
  min-height: var(--app-download-card-min-height);
  padding-block: var(--app-download-card-padding-block);
  padding-inline: var(--app-download-card-padding-inline);
  border: 1px solid var(--app-download-card-border-color);
  border-radius: var(--app-download-card-border-radius);
  background-color: var(--app-download-card-bg-color);

  /* Frosted-glass blur (prod parity, 2026-06-01). The blur visually blends
   * the card into the collage so it sits flush rather than reading as a
   * hard opaque box. Autoprefixer adds the -webkit- prefix for Safari. */
  -webkit-backdrop-filter: blur(var(--app-download-card-backdrop-blur));
          backdrop-filter: blur(var(--app-download-card-backdrop-blur));
  text-align: center;
}
@media (width <= 768px) {
  .cinefi-app-download__card {
    min-height: var(--app-download-card-min-height-mobile);
    padding-inline: var(--app-download-card-padding-inline-mobile);
  }

  .cinefi-app-download--overlay-dark-tint {
    --app-download-card-max-width: 345px;
    --app-download-card-min-height-mobile: 346px;
    --app-download-card-padding-inline-mobile: 36px;
    --app-download-body-font-size-mobile: 18px;
    --app-download-content-stack-gap: 12px;

    min-height: 872px;
    padding-block: 263px;
    padding-inline: 8px;
  }

  .cinefi-app-download.cinefi-app-download--overlay-dark-tint .cinefi-app-download__body {
    -webkit-margin-after: 12px;
            margin-block-end: 12px;
  }
}
/* Heading — always <h2>. Same parent-class cascade-bypass pattern as
 * prior widgets (specificity 0,2,0 to beat kit's .elementor-kit-6 h2). */
.cinefi-app-download .cinefi-app-download__heading {
  margin: 0;
  width: 100%;
  font-family: Inter, sans-serif;
  font-size: var(--app-download-heading-font-size);
  font-weight: 900;
  line-height: var(--app-download-heading-line-height);
  letter-spacing: var(--app-download-heading-letter-spacing);
  word-spacing: var(--app-download-heading-word-spacing);
  color: var(--app-download-heading-color);
  text-align: center;
}
@media (width <= 576px) {
  .cinefi-app-download .cinefi-app-download__heading {
    font-size: var(--app-download-heading-font-size-mobile);
    letter-spacing: var(--app-download-heading-letter-spacing-mobile);
  }
}
/* Body — paragraph copy. Same parent-class cascade-bypass. */
.cinefi-app-download .cinefi-app-download__body {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: var(--app-download-body-font-size);
  font-weight: 400;
  line-height: var(--app-download-body-line-height);
  letter-spacing: var(--app-download-body-letter-spacing);
  word-spacing: var(--app-download-body-word-spacing);
  color: var(--app-download-body-color);
  text-align: center;
}
.cinefi-app-download .cinefi-app-download__body p {
  margin: 0;
}
@media (width <= 576px) {
  .cinefi-app-download .cinefi-app-download__body {
    font-size: var(--app-download-body-font-size-mobile);
  }
}
/* QR code image — square, fixed size, centered. Parent-class qualifier
 * (`.cinefi-app-download .cinefi-app-download__qr`) bumps specificity to
 * (0,2,0) to beat Elementor's `.elementor img { border-radius: 0px }`
 * rule at (0,1,1). Same cascade-bypass pattern used elsewhere in this
 * widget (heading, body, cta) and in the other Phase G widgets. */
.cinefi-app-download .cinefi-app-download__qr {
  display: block;
  width: var(--app-download-qr-size);
  height: var(--app-download-qr-size);
  border-radius: var(--app-download-qr-border-radius);
  -o-object-fit: contain;
     object-fit: contain;
}
/* CTA lead — small heading above the button. Hardcoded text in PHP. */
.cinefi-app-download .cinefi-app-download__cta-lead {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: var(--app-download-cta-lead-font-size);
  font-weight: var(--app-download-cta-lead-font-weight);
  color: var(--app-download-cta-lead-color);
  text-align: center;
}
/* CTA button — consumes the cinefi-btn-fill utility custom properties.
 * Utility provides padding 18 / 32, font 20/16, gradient bg. Widget
 * overrides only as needed; legacy renders the kit's default button
 * shape so we let the utility's defaults stand. */
.cinefi-app-download .cinefi-app-download__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--btn-padding-block);
  padding-inline: var(--btn-padding-inline);
  border: var(--btn-border);
  border-radius: var(--btn-border-radius);
  background-image: var(--btn-bg-image);
  font-family: Inter, sans-serif;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  line-height: var(--btn-line-height);
  color: var(--btn-color);
  text-decoration: none;
  cursor: pointer;
  transition: filter 150ms ease;
}
.cinefi-app-download .cinefi-app-download__cta:hover,
.cinefi-app-download .cinefi-app-download__cta:focus-visible {
  filter: brightness(1.1);
}
.cinefi-app-download__cta-text {
  display: inline-block;
}
/* AD-4 responsive CTA — prod renders this widget with two distinct
 * affordances per viewport (verified via DOM probe 2026-05-20):
 *   - Desktop (>768px): QR code + static text caption "Download the
 *     CineFi app." (font-weight 700). No button; user scans QR with phone.
 *   - Mobile (≤768px): gradient button "Download the CineFi App". No QR
 *     visible (user can't scan their own phone).
 * Both DOM elements always render; CSS swaps visibility per breakpoint.
 * Matches prod /checking/ pattern via Elementor's elementor-hidden-mobile
 * class on QR + caption + the hidden-on-desktop CTA-button column. */
@media (width <= 768px) {
  .cinefi-app-download .cinefi-app-download__qr,
  .cinefi-app-download .cinefi-app-download__cta-lead {
    display: none;
  }

  .cinefi-app-download--overlay-dark-tint .cinefi-app-download__cta {
    width: 100%;
    padding-inline: 0;
  }
}
@media (width > 768px) {
  .cinefi-app-download .cinefi-app-download__cta {
    display: none;
  }
}
/* Layout for the cinefi-gradient-feature-card widget — single product
 * card with HTML/CSS chrome (offset accent box behind + dark-gradient
 * interior front card with gradient border + halftone overlay) +
 * centered content stack. Covers home §2 + roll-sound §1.1 (2 cards
 * each = 4 instances).
 *
 * Phase G phase 2 widget 6 of 6 — rebuilt 2026-05-26 (Brandon).
 *
 * REBUILD DECISION (2026-05-26): the prior implementation used two
 * fixed-aspect SVG bg layers (`gradient-card-frame-{variant}.svg` on
 * the outer wrapper + `home-grid-2-element-1-mask.svg` on `__inner`).
 * Both prod and our copy failed at tablet/mobile because the full-frame
 * SVG doesn't scale with content. Rebuilt the front card in HTML/CSS so
 * it sizes with its content naturally. Decorative textures plus each
 * variant's backplate and face gradients remain isolated SVG layers where
 * preserving their source transforms matters.
 *
 * Layer stack (z-axis, bottom → top):
 *  1. `.cinefi-gradient-feature-card::before` — back-card accent.
 *     Positioned absolute, offset diagonally from the front card. Each
 *     desktop variant uses an accent-only SVG to preserve Figma's transformed
 *     gradient exactly. Mobile uses cropped SVG layers for both variants.
 *  2. `.cinefi-gradient-feature-card__inner` — front card. Each desktop
 *     variant uses a face-only SVG with its source fill and border vectors;
 *     mobile retains scalable CSS gradients. The desktop shadow uses a 24px
 *     CSS blur to match the source filter's 12px standard deviation.
 *  3. `.cinefi-gradient-feature-card__inner::before` — halftone
 *     overlay (the home-grid-2-element-1-mask.svg as `background-size:
 *     cover`). Because `__inner` is now sized to its natural content,
 *     `cover` correctly scales the SVG to fill — no more overshoot.
 *  4. Content stack — `position: relative; z-index: 1` to sit above
 *     the halftone. Desktop visual order follows the homepage product
 *     cards: heading / body / dividers / rate / features / CTA.
 *
 * The CSS gradients below remain the fallback and mobile foundation.
 * Desktop overrides use the variant-specific source SVG paint layers.
 *
 * Distinct from prior widgets:
 *   - Single-card widget (editor places 2 in a section to recreate
 *     the legacy 2-up pair)
 *   - Rate display as WYSIWYG (preserves legacy HTML authoring)
 *   - Bullet repeater (each item is a single HTML string with
 *     <strong> leadings)
 *   - <h2> heading (parent pages have <h1> from §0.0)
 *   - CTA reuses cinefi-btn-fill (same primary button as app-download-card)
 */
.cinefi-gradient-feature-card {
  /* Layout ---------- */
  --grad-card-content-max-width: 410px;
  --grad-card-content-stack-gap: 16px;
  --grad-card-padding-block: 80px;
  --grad-card-padding-inline: 48px;
  --grad-card-padding-block-mobile: 48px;
  --grad-card-padding-inline-mobile: 24px;

  /* Halftone mask SVG — shared across variants. Stays SVG because
   * it's a texture pattern, not geometry. */
  --grad-card-mask-svg: url('../../assets/images/home-grid-2-element-1-mask.svg');
  --grad-card-backplate-cash-svg: url('../../assets/images/gradient-feature-card-backplate-cash.svg');
  --grad-card-backplate-cash-mobile-svg: url('../../assets/images/gradient-feature-card-backplate-cash-mobile.svg');
  --grad-card-backplate-savings-svg: url('../../assets/images/gradient-feature-card-backplate-savings.svg');
  --grad-card-backplate-savings-mobile-svg: url('../../assets/images/gradient-feature-card-backplate-mobile.svg');
  --grad-card-front-cash-svg: url('../../assets/images/gradient-feature-card-front-cash.svg');
  --grad-card-front-savings-svg: url('../../assets/images/gradient-feature-card-front-savings.svg');

  /* Front-card border — shared conic-gradient palette lifted from the
   * canonical `.cinefi-gradient-card` pattern in
   * `src/css/components/gradient-card.css`. Same 5-stop sequence
   * (purple → magenta → cyan → teal → dark teal). Origin at
   * 79.85% 57.72% mirrors the legacy reference point. */
  --grad-card-accent-conic: conic-gradient(
    from 211deg at 79.85% 57.72%,
    #6e00ba 79.2deg,
    #d464ff 123.67deg,
    #00e0f6 241.2deg,
    #02708e 348.91deg,
    #026d8b 360deg
  );
  --grad-card-backplate-conic: conic-gradient(
    from 90deg at 79.85% 57.72%,
    #026d8b 0deg,
    #6e00ba 79.1965deg,
    #d464ff 123.67deg,
    #00e0f6 241.2deg,
    #01708d 348.907deg,
    #026d8b 360deg
  );
  --grad-card-border-gradient: var(--grad-card-accent-conic);

  /* Front-card interior fill — variant override below sets the actual
   * gradient. Default value matches the savings variant so the widget
   * still renders with a single class. */
  --grad-card-interior: linear-gradient(142deg, #07131d 0%, #026d8b 100%);

  /* Back-accent geometry — stacked-cards model with a SQUARE accent
   * offset diagonally per variant (Brandon design 2026-05-26):
   *   - savings (left column): accent anchored TOP-RIGHT, offset 40px
   *     above + right of the front card
   *   - cash (right column): accent anchored BOTTOM-LEFT, offset 40px
   *     below + left of the front card
   * Desktop accent size mirrors the legacy SVG backplate ratio
   * (about 467px inside a 589px frame).
   * Offset = 30px fixed across viewports for a consistent peek weight. */
  --grad-card-accent-offset: 30px;
  --grad-card-accent-size: 79.3%;
  --grad-card-accent-radius: 20px;
  --grad-card-accent-shadow: 0 4px 4px rgb(0 0 0 / 25%);

  /* Typography defaults — match legacy empirical probe on home §2. */
  --grad-card-heading-font-size: 36px;
  --grad-card-heading-font-size-mobile: 28px;
  --grad-card-heading-line-height: 1.3;
  --grad-card-heading-line-height-mobile: 46.8px;

  /* Legacy heading carries kit `sub-hero-text`-adjacent rule producing
   * letter-spacing -2.4px fixed (same pattern as app-download-card). */
  --grad-card-heading-letter-spacing: -2.4px;
  --grad-card-heading-letter-spacing-mobile: -1.8px;
  --grad-card-heading-word-spacing: -0.0125em;
  --grad-card-heading-color: #ebfffe;
  --grad-card-heading-font-weight: 800;
  --grad-card-body-font-size: 18px;
  --grad-card-body-line-height: 1.8;
  --grad-card-body-letter-spacing: -0.02em;
  --grad-card-body-word-spacing: -0.02em;
  --grad-card-body-color: #f5fffe;
  --grad-card-rate-font-size: 18px;
  --grad-card-rate-line-height: 25.56px;
  --grad-card-rate-letter-spacing: -0.02em;
  --grad-card-rate-word-spacing: -0.02em;
  --grad-card-rate-color: #f5fffe;
  --grad-card-bullet-font-size: 14px;
  --grad-card-bullet-line-height: 1.6;
  --grad-card-bullet-letter-spacing: -0.02em;
  --grad-card-bullet-word-spacing: -0.02em;
  --grad-card-bullet-color: #fff;

  /* Divider — matches prod elementor-divider on home §2 (#ebfffe near-
   * white, 162px wide span inside a 465px-wide widget container).
   * Brandon visual correction 2026-05-26: was previously #2a3b4a /
   * 80px which read as a too-subtle grey. */
  --grad-card-divider-color: #ebfffe;
  --grad-card-divider-width: 162px;

  /* Wrapper ----------
   * Width is grid-driven (the §2 layout places 2 cards in a 1fr 1fr
   * grid). `height: 100%` fills the grid cell so neighboring cards
   * with different content lengths stretch equal. Padding per variant
   * (see variant rules below) reserves space for the back-card accent
   * to peek diagonally. */
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}
/* Back-card accent — colorful conic-gradient SQUARE, anchored
 * diagonally per variant. Default positioning here is the savings
 * variant (top-right); the cash variant override below flips it
 * to bottom-left. */
.cinefi-gradient-feature-card::before {
  content: '';
  position: absolute;
  width: var(--grad-card-accent-size);
  aspect-ratio: 1 / 1;
  border-radius: var(--grad-card-accent-radius);
  background: var(--grad-card-backplate-conic);
  box-shadow: var(--grad-card-accent-shadow);
  z-index: 0;
  pointer-events: none;
}
/* Variant modifiers --------------------------------------------------
 * Each variant sets:
 *   1. The front-card interior linear-gradient stops
 *   2. The outer wrapper padding (creates the back-accent peek area)
 *   3. The back-accent's diagonal anchor (top-right vs bottom-left)
 */
.cinefi-gradient-feature-card--variant-savings {
  --grad-card-interior: linear-gradient(142deg, #07131d 0%, #026d8b 100%);

  /* Savings: back accent anchored TOP-RIGHT, front card occupies the
   * bottom-left area (so 40px peek above + 40px peek right). */
  padding-top: var(--grad-card-accent-offset);
  padding-right: var(--grad-card-accent-offset);
}
.cinefi-gradient-feature-card--variant-savings::before {
  top: 0;
  right: 0;
}
.cinefi-gradient-feature-card--variant-cash {
  /* Cash interior gradient is mirrored across the vertical axis from
   * savings (218deg = 360 - 142): dark TOP-RIGHT → purple BOTTOM-LEFT,
   * so the gradient flows TOWARD the back-accent corner (which sits
   * bottom-left for this variant). Visually coheres with the mirrored
   * layout. */
  --grad-card-interior: linear-gradient(218deg, #07131d 0%, #6e00ba 100%);

  /* Cash: mirrored. Back accent anchored BOTTOM-LEFT, front card
   * occupies the top-right area (so 30px peek below + 30px peek left). */
  padding-bottom: var(--grad-card-accent-offset);
  padding-left: var(--grad-card-accent-offset);
}
.cinefi-gradient-feature-card--variant-cash::before {
  bottom: 0;
  left: 0;
}
/* Inner front card — applies the gradient-card border pattern
 * directly (layered backgrounds clipped to padding-box and border-box
 * so the 1px transparent border becomes a window onto the conic
 * gradient). The interior fill is the variant-specific linear-gradient
 * set above; the conic palette is shared. */
.cinefi-gradient-feature-card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--grad-card-content-stack-gap);
  flex-grow: 1;
  width: 100%;

  /* Gradient-card chrome (lifted from .cinefi-gradient-card). */
  border: 1px solid transparent;
  border-radius: 20px;
  background-image: var(--grad-card-interior), var(--grad-card-border-gradient);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;

  /* Drop-shadow mimics legacy SVG filter1_d_780_660 (dy=10, blur=12, 25% black). */
  box-shadow: 0 10px 12px rgb(0 0 0 / 25%);
  padding-block: var(--grad-card-padding-block);
  padding-inline: var(--grad-card-padding-inline);
  text-align: center;

  /* Sits above the back accent */
  z-index: 1;
}
/* Halftone overlay — SVG texture rendered inside the front card.
 * `cover` works correctly now that __inner is HTML-flow-sized (no
 * more fixed SVG aspect). Layered above the interior gradient but
 * below the content. */
.cinefi-gradient-feature-card__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--grad-card-mask-svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
/* Content children stack above the halftone overlay. */
.cinefi-gradient-feature-card__inner > * {
  position: relative;
  z-index: 1;
}
@media (width >= 577px) {
  .cinefi-gradient-feature-card {
    --grad-card-content-max-width: 465px;
    --grad-card-content-stack-gap: 24px;
    --grad-card-padding-block: 0;
    --grad-card-padding-inline: 32px;
  }

  .cinefi-gradient-feature-card--variant-savings {
    height: calc(100% + 20px);
    -webkit-margin-before: -20px;
            margin-block-start: -20px;
    padding-block: 32px 58px;
    padding-inline: 26px 34px;
  }

  /* Preserve the source SVG's complete Figma gradient transform on the
   * desktop savings backplate. A plain CSS conic-gradient can reproduce the
   * stops, but not the export's rotated and non-uniformly scaled color field.
   * The SVG uses the original 589 x 787 coordinate system, so sizing it to
   * the wrapper width also preserves the backplate's x/y placement. */
  .cinefi-gradient-feature-card--variant-savings::before {
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    background: var(--grad-card-backplate-savings-svg) top right / 100% auto no-repeat;
    box-shadow: none;
  }

  .cinefi-gradient-feature-card--variant-cash {
    padding-block: 16px 58px;
    padding-inline: 38px 22px;
  }

  /* Cash uses its own 593 x 777 Figma coordinate system. Painting that
   * complete accent-only canvas preserves the lower-left plate's transformed
   * conic field, rounded geometry, and source shadow. */
  .cinefi-gradient-feature-card--variant-cash::before {
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    background: var(--grad-card-backplate-cash-svg) top left / 100% auto no-repeat;
    box-shadow: none;
  }

  .cinefi-gradient-feature-card__inner {
    padding-block: var(--grad-card-padding-block);
    padding-inline: var(--grad-card-padding-inline);
  }

  /* The source face uses explicit SVG gradient vectors rather than an
   * angle-only CSS approximation: navy-to-teal across the panel and a
   * separate teal-to-cyan-to-purple border. Keep the scalable HTML panel,
   * but paint it with those exact normalized vectors. */
  .cinefi-gradient-feature-card--variant-savings .cinefi-gradient-feature-card__inner {
    background-image: var(--grad-card-front-savings-svg);
    background-clip: border-box;
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-shadow: 0 10px 24px rgb(0 0 0 / 25%);
  }

  .cinefi-gradient-feature-card--variant-cash .cinefi-gradient-feature-card__inner {
    background-image: var(--grad-card-front-cash-svg);
    background-clip: border-box;
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-shadow: 0 10px 24px rgb(0 0 0 / 25%);
  }

  .cinefi-gradient-feature-card__heading {
    order: 1;
  }

  .cinefi-gradient-feature-card__body {
    order: 2;
  }

  .cinefi-gradient-feature-card__divider:first-of-type {
    order: 3;
  }

  .cinefi-gradient-feature-card__rate {
    order: 4;
  }

  .cinefi-gradient-feature-card__divider:nth-of-type(2) {
    order: 5;
  }

  .cinefi-gradient-feature-card__features {
    order: 6;
  }

  .cinefi-gradient-feature-card__cta {
    order: 7;
  }

  /* Homepage legacy card row parity. Elementor's migrated grid defaults to
   * the kit's 1140px content width and 15px column gap, which compresses the
   * product cards. Prod's home section uses an 1180px row with a 2px seam:
   * two 589px outer cards, each yielding a 529px front panel after the
   * variant-specific padding. Scope by the home body class and widget
   * presence so Roll Sound can keep its page-specific row treatment. */
  .home .e-con-boxed.e-grid:has(.elementor-widget-cinefi-gradient-feature-card) > .e-con-inner {
    width: 1180px;
    max-width: min(100%, 1180px);
    grid-template-columns: repeat(2, minmax(0, 589px));
    -moz-column-gap: 2px;
         column-gap: 2px;

    --content-width: 1180px;
    --gap: 0 2px;
  }

  .home .cinefi-gradient-feature-card__inner {
    min-height: 720px;
  }
}
@media (width <= 576px) {
  .cinefi-gradient-feature-card {
    --grad-card-accent-size: 88%;
    --grad-card-accent-radius: 10px;
    --grad-card-accent-shadow: 0 3px 2px rgb(0 0 0 / 25%);
  }

  .cinefi-gradient-feature-card__inner {
    padding-block: var(--grad-card-padding-block-mobile);
    padding-inline: var(--grad-card-padding-inline-mobile);
  }

  .cinefi-gradient-feature-card--variant-savings {
    --grad-card-interior: linear-gradient(60.2deg, #07131d 47%, #026d8b 79.8%);
    --grad-card-border-gradient: linear-gradient(
      181.5deg,
      #026d8b 0%,
      #00e0f6 44.8118%,
      #d464ff 99.0391%
    );
  }

  .cinefi-gradient-feature-card--variant-cash {
    --grad-card-interior: linear-gradient(74.5deg, #07131d 46.5%, #6e00ba 82%);
    --grad-card-border-gradient: linear-gradient(
      90.5deg,
      #d464ff 0.9609%,
      #00e0f6 55.1882%,
      #026d8b 100%
    );
  }

  .cinefi-gradient-feature-card__inner::before {
    background-position: 0 0;
  }

  .cinefi-gradient-feature-card--variant-savings::before {
    right: 10px;
    background-image:
      var(--grad-card-backplate-savings-mobile-svg), var(--grad-card-backplate-conic);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }

  .cinefi-gradient-feature-card--variant-cash::before {
    top: 0;
    bottom: auto;
    left: 0;
    background-image: var(--grad-card-backplate-cash-mobile-svg), var(--grad-card-backplate-conic);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
}
/* Heading — always <h2>. Same parent-class cascade-bypass as prior widgets. */
.cinefi-gradient-feature-card .cinefi-gradient-feature-card__heading {
  margin: 0;
  width: 100%;
  max-width: var(--grad-card-content-max-width);
  font-family: Inter, sans-serif;
  font-size: var(--grad-card-heading-font-size);
  font-weight: var(--grad-card-heading-font-weight);
  line-height: var(--grad-card-heading-line-height);
  letter-spacing: var(--grad-card-heading-letter-spacing);
  word-spacing: var(--grad-card-heading-word-spacing);
  color: var(--grad-card-heading-color);
  text-align: center;
}
@media (width <= 576px) {
  .cinefi-gradient-feature-card .cinefi-gradient-feature-card__heading {
    font-size: var(--grad-card-heading-font-size-mobile);
    line-height: var(--grad-card-heading-line-height-mobile);
  }
}
/* Body */
.cinefi-gradient-feature-card .cinefi-gradient-feature-card__body {
  margin: 0;
  width: 100%;
  max-width: var(--grad-card-content-max-width);
  font-family: Inter, sans-serif;
  font-size: var(--grad-card-body-font-size);
  font-weight: 400;
  line-height: var(--grad-card-body-line-height);
  letter-spacing: var(--grad-card-body-letter-spacing);
  word-spacing: var(--grad-card-body-word-spacing);
  color: var(--grad-card-body-color);
  text-align: center;
}
.cinefi-gradient-feature-card .cinefi-gradient-feature-card__body p {
  margin: 0;
}
/* Divider — parent-class qualifier bumps specificity to (0,2,0) so it
 * beats Elementor kit's `hr` baseline (which was clobbering background-
 * color back to transparent without the bump). Verified missing 2026-05-26
 * via DOM probe (bgColor: rgba(0,0,0,0) on the unqualified rule). */
.cinefi-gradient-feature-card .cinefi-gradient-feature-card__divider {
  width: var(--grad-card-divider-width);
  height: 1px;
  margin: 4px 0;
  border: none;
  background-color: var(--grad-card-divider-color);
}
/* Rate display — preserves legacy WYSIWYG HTML; widget styles the
 * container. Inner spans / nested elements inherit by default unless
 * the editor's inline styles override. */
.cinefi-gradient-feature-card .cinefi-gradient-feature-card__rate {
  margin: 0;
  width: 100%;
  max-width: var(--grad-card-content-max-width);
  font-family: Inter, sans-serif;
  font-size: var(--grad-card-rate-font-size);
  font-weight: 400;
  line-height: var(--grad-card-rate-line-height);
  letter-spacing: var(--grad-card-rate-letter-spacing);
  word-spacing: var(--grad-card-rate-word-spacing);
  color: var(--grad-card-rate-color);
  text-align: center;
}
.cinefi-gradient-feature-card .cinefi-gradient-feature-card__rate p {
  margin: 0;
}
/* Features bullet list */
.cinefi-gradient-feature-card .cinefi-gradient-feature-card__features {
  margin: 0;
  padding: 0 0 0 1.25em; /* hanging indent for bullet markers */
  width: 100%;
  max-width: var(--grad-card-content-max-width);
  list-style: disc;
  font-family: Inter, sans-serif;
  font-size: var(--grad-card-bullet-font-size);
  font-weight: 400;
  line-height: var(--grad-card-bullet-line-height);
  letter-spacing: var(--grad-card-bullet-letter-spacing);
  word-spacing: var(--grad-card-bullet-word-spacing);
  color: var(--grad-card-bullet-color);
  text-align: left;
}
.cinefi-gradient-feature-card .cinefi-gradient-feature-card__features li {
  margin: 0 0 8px;
}
.cinefi-gradient-feature-card .cinefi-gradient-feature-card__features li:last-child {
  margin-bottom: 0;
}
@media (width >= 577px) {
  .cinefi-gradient-feature-card .cinefi-gradient-feature-card__features {
    -webkit-padding-start: 40px;
            padding-inline-start: 40px;
  }

  .cinefi-gradient-feature-card .cinefi-gradient-feature-card__features li {
    margin: 0;
    -webkit-padding-after: 12px;
            padding-block-end: 12px;
  }

  .cinefi-gradient-feature-card .cinefi-gradient-feature-card__features li:last-child {
    margin-bottom: 0;
    -webkit-padding-after: 12px;
            padding-block-end: 12px;
  }
}
/* CTA — consumes cinefi-btn-fill utility custom properties.
 * min-width 312px: prod renders this card family's CTA at 312px on
 * every instance probed (roll-sound product cards x2, home s2 cards —
 * 2026-06-11, QA sheet row 58; ours collapsed to the 167px intrinsic). */
.cinefi-gradient-feature-card .cinefi-gradient-feature-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 312px;
  margin-top: 8px;
  padding-block: var(--btn-padding-block);
  padding-inline: var(--btn-padding-inline);
  border: var(--btn-border);
  border-radius: var(--btn-border-radius);
  background-image: var(--btn-bg-image);
  font-family: Inter, sans-serif;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  line-height: var(--btn-line-height);
  color: var(--btn-color);
  text-decoration: none;
  cursor: pointer;
  transition: filter 150ms ease;
}
@media (width >= 577px) {
  .cinefi-gradient-feature-card .cinefi-gradient-feature-card__cta {
    margin-top: 0;
    padding-inline: 0;
  }
}
.cinefi-gradient-feature-card .cinefi-gradient-feature-card__cta:hover,
.cinefi-gradient-feature-card .cinefi-gradient-feature-card__cta:focus-visible {
  filter: brightness(1.1);
}
.cinefi-gradient-feature-card__cta-text {
  display: inline-block;
}
/* Layout for the cinefi-comparison-table widget. Renders a brand-vs-
 * competitor feature comparison table. Replaces the legacy /checking/
 * inline HTML+JS render with a semantic <table> + server-side markup.
 *
 * Phase G follow-up COMP-1 — see
 * clients/cinefi/projects/elementor-migration/comparison-table-brief.md.
 *
 * Visual treatment mirrors prod /checking/ — verified via DOM probe
 * 2026-05-21. Key features:
 *  - Container: 20px border-radius + overflow:hidden (rounded corners)
 *  - Rows: 5-column equal-width grid; near-black-blue (#07131D) default
 *    bg; gradient bottom border (purple→cyan→teal) as the divider
 *  - First two columns (Feature + CineFi): purple (#6E00BA) bg override
 *  - Last three columns: default near-black-blue bg
 *  - Cell padding: 20px all sides; header row +10px top
 *  - CineFi column: 140% font-size baseline; check cells get 175% + white
 *  - Feature column: left-aligned + bold feature label
 *  - Crosses: dark grey (#555) at 1.25rem
 *
 * Class naming uses BEM with `cinefi-comparison-table` block prefix
 * to avoid the kit-CSS collision pattern Phase G surfaced repeatedly.
 *
 * Markup: <table> with <thead> / <tbody> for semantic a11y. Layout via
 * `display: grid` on <tr> + `grid-template-columns` matches prod's
 * div-grid layout. Browsers' default table layout is overridden via
 * `display: contents` on <thead> + <tbody> so the <tr>s become direct
 * grid containers without table-layout's column-width auto-sizing.
 */
.cinefi-comparison-table {
  /* Layout ---------- */
  --comp-table-section-padding-block: 4rem;
  --comp-table-section-padding-inline: 1.5rem;

  /* Header (section heading above the table) typography */
  --comp-table-heading-font-size: 38px;
  --comp-table-heading-font-size-mobile: 28px;
  --comp-table-heading-font-weight: 800;
  --comp-table-heading-line-height: 1.1;
  --comp-table-heading-letter-spacing: -1px;
  --comp-table-heading-color: #ebfffe;
  --comp-table-subheading-font-size: 18px;
  --comp-table-subheading-color: rgb(245 255 254 / 90%);
  --comp-table-header-margin-block-end: 2.5rem;

  /* Table chrome (matches prod /checking/) */
  --comp-table-border-radius: 20px;
  --comp-table-row-bg: #07131d;
  --comp-table-row-bg-emphasis: #6e00ba;
  --comp-table-row-border-gradient: linear-gradient(
    91deg,
    rgb(212 100 255) 26.41%,
    rgb(0 224 246) 54.96%,
    rgb(2 109 139) 78.55%
  );
  --comp-table-cell-padding: 20px;
  --comp-table-header-padding-top-extra: 10px;

  /* Column header typography */
  --comp-table-col-header-font-weight: 700;
  --comp-table-col-header-color: #ebfffe;
  --comp-table-col-header-font-size: 16px;

  /* Row-header (feature label) typography */
  --comp-table-row-header-font-size: 16px;
  --comp-table-row-header-line-height: 1.4;
  --comp-table-row-header-color: #f5fffe;

  /* Check / cross / text cells */
  --comp-table-cell-font-size: 1.5rem;
  --comp-table-cinefi-font-size: 140%;
  --comp-table-check-color: #d464ff;
  --comp-table-check-color-cinefi: #fff;
  --comp-table-check-font-size-cinefi: 175%;
  --comp-table-cross-color: #555;
  --comp-table-cross-font-size: 1.25rem;

  /* Footer / footnote */
  --comp-table-footer-margin-block-start: 2rem;
  --comp-table-footer-font-size: 14px;
  --comp-table-footer-line-height: 1.5;
  --comp-table-footer-color: rgb(245 255 254 / 70%);

  /* Section ---------- */
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-block: var(--comp-table-section-padding-block);
  padding-inline: var(--comp-table-section-padding-inline);
}
/* Header (heading + subheading) ---------- */
.cinefi-comparison-table__head {
  -webkit-margin-after: var(--comp-table-header-margin-block-end);
          margin-block-end: var(--comp-table-header-margin-block-end);
  text-align: center;
}
.cinefi-comparison-table .cinefi-comparison-table__heading {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: var(--comp-table-heading-font-size);
  font-weight: var(--comp-table-heading-font-weight);
  line-height: var(--comp-table-heading-line-height);
  letter-spacing: var(--comp-table-heading-letter-spacing);
  color: var(--comp-table-heading-color);
}
@media (width > 576px) {
  .elementor .elementor-element-2e1f176 .cinefi-comparison-table__heading {
    --comp-table-heading-font-size: 52px;
    --comp-table-heading-font-weight: 900;
    --comp-table-heading-line-height: 52px;
    --comp-table-heading-letter-spacing: -0.65px;
    --comp-table-heading-color: #f5fffe;
  }
}
@media (width > 768px) {
  .cinefi-comparison-table--savings {
    --comp-table-section-padding-block: 0;
    --comp-table-section-padding-inline: 0;
    --comp-table-heading-font-size: 52px;
    --comp-table-heading-font-weight: 900;
    --comp-table-heading-line-height: 52px;
    --comp-table-heading-letter-spacing: -0.65px;
    --comp-table-heading-color: #f5fffe;
    --comp-table-col-header-font-size: 18px;
    --comp-table-col-header-color: #f5fffe;
    --comp-table-row-header-font-size: 18px;
    --comp-table-row-header-line-height: 25.56px;
    --comp-table-header-margin-block-end: 15px;
    --comp-table-footer-margin-block-start: 15px;
    --comp-table-footer-font-size: 13px;
    --comp-table-footer-line-height: 25.56px;
    --comp-table-footer-color: rgb(245 255 254 / 75%);
  }

  .cinefi-comparison-table.cinefi-comparison-table--savings
    .cinefi-comparison-table__subheading {
    min-height: 49.56px;
    -webkit-margin-before: 15px;
            margin-block-start: 15px;
    letter-spacing: -0.36px;
  }

  .cinefi-comparison-table.cinefi-comparison-table--savings
    .cinefi-comparison-table__row-header {
    font-weight: 700;
  }

  .cinefi-comparison-table.cinefi-comparison-table--savings
    .cinefi-comparison-table__cell--text {
    font-size: var(--comp-table-row-header-font-size);
  }

  .cinefi-comparison-table.cinefi-comparison-table--savings
    .cinefi-comparison-table__cell--cinefi.cinefi-comparison-table__cell--text {
    font-size: var(--comp-table-cinefi-font-size);
    font-weight: 700;
  }

  .cinefi-comparison-table.cinefi-comparison-table--savings
    .cinefi-comparison-table__footer {
    letter-spacing: -0.26px;
  }
}
@media (width <= 576px) {
  .cinefi-comparison-table {
    --comp-table-heading-font-size-mobile: 36px;
    --comp-table-heading-font-weight: 900;
    --comp-table-heading-line-height: 1;
    --comp-table-heading-letter-spacing: -0.45px;
    --comp-table-heading-color: #f5fffe;
    --comp-table-subheading-font-size: 14px;
    --comp-table-header-margin-block-end: 39px;

    padding-inline: 0;
  }

  .cinefi-comparison-table .cinefi-comparison-table__heading {
    font-size: var(--comp-table-heading-font-size-mobile);
  }

  .cinefi-comparison-table--savings {
    padding-block: 0;
  }
}
.cinefi-comparison-table .cinefi-comparison-table__subheading {
  margin: 0.5rem 0 0;
  font-family: Inter, sans-serif;
  font-size: var(--comp-table-subheading-font-size);
  font-weight: 400;
  color: var(--comp-table-subheading-color);
}
@media (width <= 576px) {
  .cinefi-comparison-table .cinefi-comparison-table__subheading {
    -webkit-margin-before: 15px;
            margin-block-start: 15px;
    line-height: 25.56px;
    letter-spacing: -0.28px;
  }

  .elementor .elementor-element-2e1f176 .cinefi-comparison-table__heading {
    max-width: 300px;
    margin-inline: auto;
  }

  .elementor .elementor-element-2e1f176 .cinefi-comparison-table {
    padding-block: 0;
  }

  .cinefi-comparison-table__footer {
    --comp-table-footer-font-size: 11px;
    --comp-table-footer-line-height: 25.56px;
    --comp-table-footer-color: rgb(245 255 254 / 75%);

    letter-spacing: -0.22px;
    word-spacing: -0.22px;
  }
}
/* Table ---------- */
/* The <table> element is the rounded-corner container. `display: grid`
 * promotes it from default table-layout to grid; `display: contents` on
 * <thead> + <tbody> lets the <tr>s participate as direct grid children
 * (their `display: grid` then handles column layout per row). */
.cinefi-comparison-table__table {
  display: grid;
  width: 100%;
  border-radius: var(--comp-table-border-radius);
  overflow: hidden;
  font-family: Inter, sans-serif;
}
.cinefi-comparison-table__table thead,
.cinefi-comparison-table__table tbody {
  display: contents;
}
/* Each <tr> is its own 5-column grid. `grid-template-columns: repeat(N, 1fr)`
 * is set inline via `--comp-cols` so the widget can scale to any column
 * count. CSS custom property fallback: 5 (the default). */
.cinefi-comparison-table__row {
  display: grid;
  grid-template-columns: repeat(var(--comp-cols, 5), 1fr);
  background-color: var(--comp-table-row-bg);
  border-bottom: 1px solid;
  -o-border-image: var(--comp-table-row-border-gradient) 1 / 1 / 0 stretch;
     border-image: var(--comp-table-row-border-gradient) 1 / 1 / 0 stretch;
}
/* Strip the bottom border on the FINAL data row only — scoped to tbody
 * because thead's single header row also matches a bare `:last-child`
 * (it's the only-child of <thead>), which would silently strip the
 * header→body separator. */
.cinefi-comparison-table__table tbody .cinefi-comparison-table__row:last-child {
  border-bottom-style: none;
}
/* Each cell is a flex centered container with 20px padding all sides. */
.cinefi-comparison-table__table th,
.cinefi-comparison-table__table td {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--comp-table-cell-padding);
  font-family: Inter, sans-serif;
  text-align: center;
}
/* Header row gets extra top padding (prod has +10px on .comparison-header
 * .comparison-cell — 30px total top vs 20px on body rows). Scoped to
 * `thead .row` not `:first-child` — `display: contents` on tbody doesn't
 * change `:first-child` semantics, so a `:first-child` selector would
 * also fire on the first data row (which IS first-child of tbody). */
.cinefi-comparison-table__table thead .cinefi-comparison-table__row th {
  padding-top: calc(var(--comp-table-cell-padding) + var(--comp-table-header-padding-top-extra));
}
/* Column headers (top row) ---------- */
.cinefi-comparison-table .cinefi-comparison-table__col-header {
  font-size: var(--comp-table-col-header-font-size);
  font-weight: var(--comp-table-col-header-font-weight);
  color: var(--comp-table-col-header-color);
}
/* First column (Feature) headers + cells: purple background, left-aligned. */
.cinefi-comparison-table .cinefi-comparison-table__col-header--feature,
.cinefi-comparison-table__row > :first-child {
  background-color: var(--comp-table-row-bg-emphasis);
  justify-content: flex-start;
  text-align: left;
}
/* Second column (CineFi by convention) cells: purple background + 140%
 * baseline font size. Check cells in this column get an additional bump
 * to 175% + white via the --cinefi modifier rule below. */
.cinefi-comparison-table .cinefi-comparison-table__col-header--cinefi,
.cinefi-comparison-table__row > :nth-child(2) {
  background-color: var(--comp-table-row-bg-emphasis);
  font-size: var(--comp-table-cinefi-font-size);
}
/* Row headers (feature label column) — bold + bright. */
.cinefi-comparison-table .cinefi-comparison-table__row-header {
  font-size: var(--comp-table-row-header-font-size);
  font-weight: 400;
  line-height: var(--comp-table-row-header-line-height);
  color: var(--comp-table-row-header-color);
}
/* Value cells — check / cross / text variants. */
.cinefi-comparison-table .cinefi-comparison-table__cell {
  font-size: var(--comp-table-cell-font-size);
}
.cinefi-comparison-table .cinefi-comparison-table__cell--check {
  color: var(--comp-table-check-color);
}
.cinefi-comparison-table .cinefi-comparison-table__cell--cross {
  color: var(--comp-table-cross-color);
  font-size: var(--comp-table-cross-font-size);
}
.cinefi-comparison-table .cinefi-comparison-table__cell--text {
  font-size: var(--comp-table-row-header-font-size);
  color: var(--comp-table-row-header-color);
}
/* CineFi-column emphasis — check cells in the CineFi column render
 * bigger + white (175% size + white). Matches prod's
 * `.comparison-row .check.comparison-cell:nth-child(2)` rule. */
.cinefi-comparison-table
  .cinefi-comparison-table__cell--cinefi.cinefi-comparison-table__cell--check {
  color: var(--comp-table-check-color-cinefi);
  font-size: var(--comp-table-check-font-size-cinefi);
}
/* Mobile carousel variant ----------
 * Pinned-left Feature column + pinned-left CineFi column on the left of the
 * carousel-wrapper; swipeable competitor columns on the right with dot +
 * prev/next nav. Hidden at desktop via display:none default; revealed at
 * `@media (max-width: 768px)` below. Pattern matches prod /checking/'s
 * mobile carousel (different DOM but same UX). */
/* Mobile carousel — rewritten 2026-05-21 to match prod /checking/ exactly.
 * Computed-style probe of prod captured these values:
 *  - .fixed-columns: display grid; grid-template-columns 120px 120px (NOT proportional)
 *  - .fixed-cell: padding 20px 10px; height 85px; bg rgb(110,0,186) (purple BOTH columns)
 *  - .fixed-left .fixed-cell:nth-child(n+2): font-size 11.5px (feature data rows only)
 *  - .scrollable-wrap: max-width calc(100vw - 256px)
 *  - .scrollable-area: overflow-x auto; scroll-snap-type x mandatory; scrollbar-width none
 *  - .carousel-column: flex 0 0 100%; scroll-snap-align center
 *  - .carousel-cell: padding 20px; height 85px; bg rgb(7,19,29)
 *  - .carousel-cell:first-child: font-size 14px (per-competitor header)
 *  - .controls-bar: position absolute; top 0; height 80px; pointer-events none; z-index 50
 *  - .nav-btn: font-size 24px; color rgb(0,224,246); pointer-events auto
 *  - .dot: 24x6 rectangle; bg rgb(85,85,85); border-radius 1px
 *  - .dot.active: bg rgb(2,109,139); width 30px
 *  - .check inside .fixed-right: color rgb(255,255,255)
 *
 * Switched from JS-driven transform to native overflow-x scroll + scroll-snap
 * (matches prod mechanism + simpler). JS now only updates dot state on scroll
 * + handles dot/prev/next click → scrollLeft mutation.
 */
.cinefi-comparison-table__mobile {
  /* Pinned column geometry (matches prod .fixed-columns 120px 120px) */
  --comp-mobile-pinned-col-width: 120px;
  --comp-mobile-pinned-total-width: 240px;

  /* Cell geometry */
  --comp-mobile-cell-height: 85px;
  --comp-mobile-pinned-cell-padding: 20px 10px;
  --comp-mobile-carousel-cell-padding: 20px;

  /* Pinned bg / colors (prod has purple BOTH pinned columns) */
  --comp-mobile-pinned-bg: var(--comp-table-row-bg-emphasis);

  /* Competitor cell bg (prod: near-black-blue) */
  --comp-mobile-carousel-bg: var(--comp-table-row-bg);

  /* Feature column data-row font (prod 11.5px) */
  --comp-mobile-feature-data-font-size: 11.5px;

  /* Per-competitor header font (prod 14px) */
  --comp-mobile-comp-header-font-size: 14px;

  /* Controls bar (prod absolute-positioned overlay) */
  --comp-mobile-controls-height: 80px;
  --comp-mobile-controls-padding-inline: 10px;

  /* Nav button — prod is white 18px (kit-CSS overrides anything else
   * unless we hit (0,2,0) specificity; see selector prefix below). */
  --comp-mobile-nav-font-size: 18px;
  --comp-mobile-nav-color: rgb(255 255 255);

  /* Dots (prod rectangles, NOT circles) */
  --comp-mobile-dot-width-inactive: 24px;
  --comp-mobile-dot-width-active: 30px;
  --comp-mobile-dot-height: 6px;
  --comp-mobile-dot-color-inactive: rgb(85 85 85);
  --comp-mobile-dot-color-active: rgb(2 109 139);

  display: none;
  position: relative;
  width: 100%;
  border-radius: var(--comp-table-border-radius);
  overflow: hidden;
}
.cinefi-comparison-table__mobile-flex {
  display: flex;
  width: 100%;
}
/* Pinned columns container — CSS grid with two fixed-width tracks. Children
 * are the two pinned columns; each column's cells stack as block elements
 * within the column. Row-height synchronization across the two columns
 * happens because both columns render the same number of cells in same
 * order — visually the gradient borders align even though no explicit
 * row syncing happens (matches prod's behavior). */
.cinefi-comparison-table__mobile-pinned {
  display: grid;
  grid-template-columns: var(--comp-mobile-pinned-col-width) var(--comp-mobile-pinned-col-width);
  flex-shrink: 0;
  background-color: var(--comp-mobile-pinned-bg);
}
.cinefi-comparison-table__mobile-col--feature,
.cinefi-comparison-table__mobile-col--cinefi {
  background-color: var(--comp-mobile-pinned-bg);
}
/* Scrollable wrap — width is `viewport - pinned (240) - 16 px gutter` per
 * prod. Computed: max-width: calc(100vw - 256px). */
.cinefi-comparison-table__mobile-scroll {
  flex: 1 1 auto;
  max-width: calc(100vw - 256px);
  position: relative;
}
/* Track is the native-scroll container. scroll-snap-type ensures the
 * release lands on a competitor column. scrollbar-width:none + the
 * ::-webkit-scrollbar rule hide the scrollbar so the carousel looks
 * intentional, not an overflow afterthought. */
.cinefi-comparison-table__mobile-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  position: relative;
  width: 100%;
}
.cinefi-comparison-table__mobile-track::-webkit-scrollbar {
  display: none;
}
.cinefi-comparison-table__mobile-col--competitor {
  flex: 0 0 100%;
  scroll-snap-align: center;
  position: relative;
}
/* Base cell rule (covers both pinned + competitor cells). Declared before
 * specificity-higher rules below to satisfy no-descending-specificity.
 *
 * Row dividers are rendered via a `::after` pseudo-element with the
 * gradient as `background-image` (NOT `border-image`). Reason: border-image
 * with a linear-gradient source + `slice: 1` renders inconsistently across
 * sibling cells when the cells are `display: flex` divs (vs `<td>`s on the
 * desktop variant). Pseudo-element with background-image is a stable
 * fallback that produces the same visual divider for every cell. */
.cinefi-comparison-table__mobile-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--comp-mobile-cell-height);
  padding: var(--comp-mobile-pinned-cell-padding);
  font-family: Inter, sans-serif;
  color: var(--comp-table-row-header-color);
}
.cinefi-comparison-table__mobile-cell::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--comp-table-row-border-gradient);
  pointer-events: none;
}
.cinefi-comparison-table__mobile-cell:last-child::after {
  display: none;
}
.cinefi-comparison-table__mobile-cell--header {
  font-weight: 700;
}
/* Pinned cells: purple bg (already inherited via the column rule above
 * but explicit per cell for cells of pinned cols to win against
 * .check / .cross color rules if needed). */
.cinefi-comparison-table__mobile-col--feature .cinefi-comparison-table__mobile-cell,
.cinefi-comparison-table__mobile-col--cinefi .cinefi-comparison-table__mobile-cell {
  background-color: var(--comp-mobile-pinned-bg);
}
/* Feature column: left-aligned content + extra left padding. */
.cinefi-comparison-table__mobile-col--feature .cinefi-comparison-table__mobile-cell {
  justify-content: flex-start;
  padding-left: 20px;
  text-align: left;
}
/* Competitor cell bg — near-black-blue, padding 20px, height 85px (already
 * set via the base rule). Declared before the feature :nth-child rule below
 * so stylelint no-descending-specificity stays happy. */
.cinefi-comparison-table__mobile-col--competitor .cinefi-comparison-table__mobile-cell {
  background-color: var(--comp-mobile-carousel-bg);
  padding: var(--comp-mobile-carousel-cell-padding);
}
.cinefi-comparison-table__mobile-col--competitor .cinefi-comparison-table__mobile-cell:first-child {
  font-size: var(--comp-mobile-comp-header-font-size);
}
/* Feature column data rows (rows 2+): smaller 11.5px font per prod. Header
 * (first child) keeps the default size to stay readable. */
.cinefi-comparison-table__mobile-col--feature
  .cinefi-comparison-table__mobile-cell:nth-child(n + 2) {
  font-size: var(--comp-mobile-feature-data-font-size);
}
/* Check / cross styling. CineFi-column checks override to white per prod's
 * `div.fixed-right .check { color: rgb(255, 255, 255); }`. */
.cinefi-comparison-table__mobile-cell--check {
  color: var(--comp-table-check-color);
  font-size: var(--comp-table-cell-font-size);
}
.cinefi-comparison-table__mobile-cell--cross {
  color: var(--comp-table-cross-color);
  font-size: var(--comp-table-cross-font-size);
}
.cinefi-comparison-table__mobile-col--cinefi .cinefi-comparison-table__mobile-cell--check {
  color: var(--comp-table-check-color-cinefi);
}
/* Controls bar — absolutely positioned overlay at the top of the carousel.
 * pointer-events:none so the bar itself doesn't block scroll; nav buttons +
 * dots restore pointer-events:auto individually. z-index 50 to stay above
 * the carousel track. */
.cinefi-comparison-table__mobile-controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--comp-mobile-controls-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--comp-mobile-controls-padding-inline);
  z-index: 50;
  pointer-events: none;
}
/* Nav button — white text, transparent bg, padded for click target. Selectors
 * are prefixed with `.cinefi-comparison-table__mobile` (specificity 0,2,0)
 * to beat Elementor kit's `.elementor-kit-6 button` (0,1,1) — Gotcha #2
 * pattern. Without the prefix, kit's font-size 18px, border-radius 5px,
 * background transparent silently win. Active state scales down 10%. */
.cinefi-comparison-table__mobile .cinefi-comparison-table__mobile-nav {
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  padding: 8px 16px;
  color: var(--comp-mobile-nav-color);
  font-size: var(--comp-mobile-nav-font-size);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 100ms ease;
}
.cinefi-comparison-table__mobile .cinefi-comparison-table__mobile-nav:active {
  transform: scale(0.9);
}
.cinefi-comparison-table__mobile .cinefi-comparison-table__mobile-nav:disabled {
  opacity: 0.3;
  cursor: default;
}
/* Dots container — absolute-positioned at the TOP of the controls bar (8px
 * down from its top edge), horizontally centered via transform. Mirrors
 * prod's `.carousel-dots { position: absolute; top: 8px; }`. The nav buttons
 * remain vertically centered in the controls bar via its flex layout, so
 * the dots sit above the arrows/header text visually. */
.cinefi-comparison-table__mobile-dots {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.cinefi-comparison-table__mobile-dot-item {
  display: flex;
  pointer-events: auto;
}
.cinefi-comparison-table__mobile .cinefi-comparison-table__mobile-dot {
  width: var(--comp-mobile-dot-width-inactive);
  height: var(--comp-mobile-dot-height);
  padding: 0;
  border: 0;
  border-radius: 1px;
  background-color: var(--comp-mobile-dot-color-inactive);
  cursor: pointer;
  transition:
    background-color 0.3s,
    width 0.3s;
}
.cinefi-comparison-table__mobile .cinefi-comparison-table__mobile-dot.is-active {
  background-color: var(--comp-mobile-dot-color-active);
  width: var(--comp-mobile-dot-width-active);
}
/* Mobile swap — at ≤768px, hide the desktop table and show the carousel.
 * Mirrors prod's `.comparison-container { display: none }` rule scoped to
 * the same breakpoint. */
@media (width <= 768px) {
  .cinefi-comparison-table__table {
    display: none;
  }

  .cinefi-comparison-table__mobile {
    display: block;
  }
}
/* Footer (footnote text) ---------- */
.cinefi-comparison-table__footer {
  -webkit-margin-before: var(--comp-table-footer-margin-block-start);
          margin-block-start: var(--comp-table-footer-margin-block-start);
  font-size: var(--comp-table-footer-font-size);
  line-height: var(--comp-table-footer-line-height);
  color: var(--comp-table-footer-color);
  text-align: center;
}
.cinefi-comparison-table__footer p {
  margin: 0;
}
/* cinefi-simple-cta-band widget — outro "Questions?" / "Contact Us"
 * band used at the bottom of /about/. Centered heading + CTA inside a
 * rounded card with a turquoise gradient overlay + dotted SVG bg and a
 * heavy drop-shadow.
 *
 * Reuses design-system primitives:
 *   - `.cinefi-btn-gradient-outline` / `.cinefi-btn-fill` for the CTA's
 *     custom-property base; widget-scoped rules below override the vars
 *     to match the prod about-page button instance (12/24 padding,
 *     16/600 typography, 180deg charcoal gradient, solid silver border).
 *
 * Hardcoded values (flagged in build decisions):
 *   - Heading typography: 68/900/-2.4px desktop, 48/900/-0.42px mobile.
 *     Display tier `.cinefi-display-xl` is 60/900/-2.4px (close but not
 *     exact) — using widget-scoped values to preserve prod fidelity
 *     rather than extend display-typography for a 1-instance variant.
 *   - Card min-height: 343px desktop / 346px mobile — matches prod
 *     `_elementor_data` and renders the chrome as a tall band rather
 *     than letting it shrink-wrap content.
 */
.cinefi-simple-cta-band {
  /* Outer transparent wrapper — page bg shows through. The card chrome
   * lives on __card. Vertical gutter (40px top + 40px bottom) matches
   * the gutter that prod's `.e-con-inner` parent contributes around
   * `1ee3a69`'s card — verified via prod probe at 1280: section height
   * 423 = card 343 + e-con-inner padding 40+40. Our composer drops this
   * widget into an `e-con-full` (no `.e-con-inner`), so the widget owns
   * its own vertical rhythm rather than relying on container padding.
   * Lateral padding stays 0 (prod's e-con-inner is full-width at
   * desktop; tablet/mobile get padding-inline from the @media queries
   * below). */
  display: block;
  padding-block: 40px;
  padding-inline: 0;
  background: transparent;
}
@media (width <= 768px) and (width > 576px) {
  .cinefi-simple-cta-band {
    padding-inline: 12px;
  }
}
/* Mobile (≤576px): lateral padding so the card doesn't bleed to the
 * viewport edge. Prod's parent `.e-con-inner` supplies this via the
 * kit's mobile container padding (16px each side, yielding a 358px
 * card on a 390px viewport). Bake into the widget itself so it
 * renders correctly outside an `e-con-boxed` parent context. */
@media (width <= 576px) {
  .cinefi-simple-cta-band {
    padding-inline: 16px;
  }
}
.cinefi-simple-cta-band__card {
  /* Card chrome — gradient overlay + bg image + radius + shadow.
   * Two-layer background: turquoise→transparent gradient on top, dotted
   * SVG on the bottom. The desktop SVG url is supplied as the
   * `--card-bg-image-desktop` custom property by the inline style attr;
   * the mobile SVG (when set) is in `--card-bg-image-mobile`.
   *
   * `max-width: 1140px; margin: 0 auto` matches the e-con default
   * content-max-width that constrained the legacy `1ee3a69`
   * container — required so the widget renders correctly outside an
   * `e-con-boxed` parent (e.g., when dropped into a full-width
   * container during page migration). Mobile drops the constraint to
   * fit the full content area. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  max-width: 1140px;
  min-height: 343px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 20px;
  background-image:
    linear-gradient(92deg, #00c9c9 17.35%, rgb(7 19 29 / 0%) 100.67%),
    var(--card-bg-image-desktop, none);
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  box-shadow: 10px 0 24px 24px rgb(0 0 0 / 25%);
}
/* Mobile bg-image swap. Prod swaps to a portrait-oriented SVG at
 * ≤567px in the legacy custom_css; we use the kit's documented mobile
 * breakpoint (≤576px) which matches the canonical responsive
 * breakpoints in design-system-reference.md. */
@media (width <= 576px) {
  .cinefi-simple-cta-band__card {
    min-height: 346px;
    background-image:
      linear-gradient(92deg, #00c9c9 17.35%, rgb(7 19 29 / 0%) 100.67%),
      var(--card-bg-image-mobile, var(--card-bg-image-desktop, none));
  }
}
/* Heading — display typography hardcoded per build decision (see file
 * header comment). Color matches `#ebfffe` heading constant from the
 * design-system palette. */
.cinefi-simple-cta-band .cinefi-simple-cta-band__heading {
  margin: 0;
  font-family: var(--font-inter, Inter, sans-serif);
  font-size: 68px;
  font-weight: 900;
  line-height: 68px;
  letter-spacing: -2.4px;
  color: #ebfffe;
  text-align: center;
}
@media (width <= 576px) {
  .cinefi-simple-cta-band .cinefi-simple-cta-band__heading {
    font-size: 48px;
    line-height: 48px;
    letter-spacing: -0.42px;
  }
}
/* CTA button — consumes `--btn-*` from the paired `.cinefi-btn-*`
 * utility class, then overrides the relevant vars at the widget scope
 * to match the prod about-page button instance. Parent-class qualifier
 * supplies (0,2,0) specificity to beat the kit's `.elementor-button`
 * baseline.
 *
 * Override surface (vs the utility defaults):
 *   - padding 12/24 (utility: 20/30)
 *   - font-size 16, weight 600, line-height 16 (utility: 18/500/18)
 *   - bg-image: 180deg charcoal gradient single layer (utility:
 *     96deg charcoal + silver-on-border-box 2-layer)
 *   - border: 2px solid #D2D2D2 (utility: 3px transparent + silver
 *     gradient on border-box)
 *   - bg-clip / bg-origin reset to default (utility: padding-box,
 *     border-box for the 2-layer silver effect)
 * Rationale: prod instance pre-dates the utility class and renders a
 * simpler solid-border treatment. Matching prod is the QA gate. */
.cinefi-simple-cta-band .cinefi-simple-cta-band__cta {
  --btn-padding-block: 12px;
  --btn-padding-inline: 24px;
  --btn-font-size: 16px;
  --btn-font-weight: 600;
  --btn-line-height: 16px;
  --btn-letter-spacing: -0.54px;
  --btn-bg-image: linear-gradient(180deg, #1e2a33 18.64%, #07131d 64.56%);
  --btn-bg-clip: border-box;
  --btn-bg-origin: padding-box;
  --btn-border: 2px solid #d2d2d2;
  --btn-border-radius: 5px;

  /* `display: flex; justify-content: center` matches prod's default
   * .elementor-button rendering. `align-items: normal` (the initial
   * value, not overridden) is what prod uses; centering vertically is
   * already provided by the fixed 60px height + the equal padding. */
  display: flex;
  justify-content: center;
  width: 260px;
  height: 60px;
  padding-block: var(--btn-padding-block);
  padding-inline: var(--btn-padding-inline);
  border: var(--btn-border);
  border-radius: var(--btn-border-radius);
  background-image: var(--btn-bg-image);
  background-clip: var(--btn-bg-clip);
  background-origin: var(--btn-bg-origin);
  font-family: var(--font-inter, Inter, sans-serif);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  color: var(--btn-color);
  text-align: center;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    box-shadow 0.25s ease;
}
.cinefi-simple-cta-band .cinefi-simple-cta-band__cta:hover,
.cinefi-simple-cta-band .cinefi-simple-cta-band__cta:focus-visible {
  opacity: 0.85;
  box-shadow: 0 2px 30px rgb(0 0 0 / 20%);
}
/* Mobile button font scaling — the utility's @media (<=576px) override
 * sets --btn-font-size:16 (matches us). Re-affirm here so a future
 * utility change doesn't drift the widget. */
@media (width <= 576px) {
  .cinefi-simple-cta-band .cinefi-simple-cta-band__cta {
    --btn-font-size: 16px;
    --btn-line-height: 16px;
  }
}
/* cinefi-numbered-steps-cta widget — "Who can join?" 2-col step
 * walkthrough used at §2 of /about/. Eyebrow centered heading + body,
 * 2-col grid (left: intro + primary CTA; right: 3 numbered steps), and
 * a secondary CTA that is hidden at desktop but visible on mobile/tablet
 * once the grid stacks to 1-col.
 *
 * Prod probe findings 2026-05-26 (deviations from brief documented in
 * numbered-steps-cta-brief.md "Build decisions"):
 *
 * Grid responsive:
 *  - ≥769px: 2-col (1fr 1fr), gap 15px, padding 10px
 *  - ≤768px: 1-col, gap 15px, padding 0 36px (tablet/tablet-narrow)
 *  - ≤576px: 1-col, gap 15px, padding 0 (mobile — outer page padding handles edge)
 *
 * Secondary CTA: display:none ≥769px, display:flex ≤768px.
 *
 * Typography drops (prod probe):
 *  - Eyebrow heading: 60px desktop/tablet/narrow; 36px mobile (≤576px).
 *  - Intro heading: 28px desktop/tablet/narrow; 24px mobile.
 *  - Step number:   52px all viewports.
 *  - Step body:     18px desktop/tablet/narrow; 14px mobile.
 *    (letter-spacing drops from -0.36px to -0.28px on mobile too.)
 *
 * Step divider: gradient rendered as `background` on the divider element
 * itself (div, not hr) — same pattern as prod's `.join-divider` Elementor
 * custom CSS approach. Parent-class qualifier (0,2,0) specificity beats
 * any kit baseline. Height: 2px.
 *
 * Button: re-uses `.cinefi-btn-fill` with no overrides — prod CTA
 * matches the utility defaults exactly (92deg purple→teal, 20/500,
 * 21px padding-block).
 *
 * Eyebrow centering: prod achieves centering via the Elementor
 * `e-con-inner` `align-items: center` on the flex column. In our widget
 * we set `align-items: center` on the `__eyebrow` header element.
 */
/* === SECTION WRAPPER === */
.cinefi-numbered-steps-cta {
  display: block;
  width: 100%;

  /* 1140px, not the 1310px cinefi default — prod's about who-can-join
   * grid is the Elementor 1140 content width (probed 2026-06-11,
   * QA sheet row 43: wrapper x=150 w=1140 at 1440 viewport). */
  max-width: 1140px;
  margin-inline: auto;
}
/* === EYEBROW === */
.cinefi-numbered-steps-cta__eyebrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
}
/* Eyebrow heading — uses .cinefi-display-xl for the CSS custom-property
 * cascade (60/900/-2.4px), then the widget scopes a color + text-align
 * override at (0,2,0) specificity. Mobile: .cinefi-display-xl sets 36px
 * About prod uses 36px at mobile — widget overrides inside the mobile
 * @media query. */
.cinefi-numbered-steps-cta .cinefi-numbered-steps-cta__eyebrow-heading {
  margin: 0;
  font-family: var(--font-inter, Inter, sans-serif);
  font-size: var(--display-font-size, 60px);
  font-weight: var(--display-font-weight, 900);
  line-height: var(--display-line-height, 1);
  letter-spacing: var(--display-letter-spacing, -2.4px);
  color: #ebfffe;
  text-align: center;
}
.cinefi-numbered-steps-cta .cinefi-numbered-steps-cta__eyebrow-body {
  margin: 0;
  font-family: var(--font-inter, Inter, sans-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: -0.36px;
  color: #f5fffe;
  text-align: center;
}
/* === GRID === */
.cinefi-numbered-steps-cta__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  padding: 10px;
  margin-top: 32px;
}
/* === INTRO COLUMN (left) === */
.cinefi-numbered-steps-cta__intro {
  /* Prod constrains the intro content to a 400px box inside its 552px
   * grid cell (probed 2026-06-11, QA row 43 — left column read as 637px
   * wide with the button pushed to the section edge before this). */
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
/* Intro heading — 28/700/44.8lh/-0.84px. New tier not in display-
 * typography.css; inline per brief decision (one instance, not generic). */
.cinefi-numbered-steps-cta .cinefi-numbered-steps-cta__intro-heading {
  margin: 0;
  font-family: var(--font-inter, Inter, sans-serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 44.8px;
  letter-spacing: -0.84px;
  color: #ebfffe;
}
.cinefi-numbered-steps-cta__intro-body {
  font-family: var(--font-inter, Inter, sans-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 28.8px;
  letter-spacing: -0.36px;
  color: rgb(245 255 254 / 90%);
}
.cinefi-numbered-steps-cta__intro-body p {
  margin: 0;
}
/* Primary CTA — consumes .cinefi-btn-fill CSS custom properties.
 * Prod button is 284×62, padding 21/0 (horizontal width from content
 * width control, vertical padding 21px). The utility's default
 * --btn-padding-block: 18px is close but prod is 21px. Override to
 * match exactly. Parent qualifier (0,2,0) for specificity parity. */
.cinefi-numbered-steps-cta .cinefi-numbered-steps-cta__cta {
  --btn-padding-block: 21px;
  --btn-padding-inline: 0px;

  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 284px;
  padding-block: var(--btn-padding-block);
  padding-inline: var(--btn-padding-inline);
  border: var(--btn-border);
  border-radius: var(--btn-border-radius);
  background-image: var(--btn-bg-image);
  font-family: var(--font-inter, Inter, sans-serif);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  color: var(--btn-color);
  text-align: center;
  text-decoration: none;
  transition:
    opacity 0.25s ease,
    box-shadow 0.25s ease;
}
.cinefi-numbered-steps-cta .cinefi-numbered-steps-cta__cta:hover,
.cinefi-numbered-steps-cta .cinefi-numbered-steps-cta__cta:focus-visible {
  opacity: 0.85;
  box-shadow: 0 2px 20px rgb(0 0 0 / 20%);
}
/* === STEPS COLUMN (right) === */
.cinefi-numbered-steps-cta__steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 10px;
  margin: 0;
  list-style: none;
}
.cinefi-numbered-steps-cta__step {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
}
/* Step number — 52/900/44.8lh/-0.84px, cinefi-magenta #D464FF.
 * Rendered as a <div> (not <h2>) to avoid semantic heading level
 * confusion: it's visually large but not a document-outline heading.
 * Parent qualifier (0,2,0) for kit specificity. */
.cinefi-numbered-steps-cta .cinefi-numbered-steps-cta__step-number {
  margin: 0;
  font-family: var(--font-inter, Inter, sans-serif);
  font-size: 52px;
  font-weight: 900;
  line-height: 44.8px;
  letter-spacing: -0.84px;
  color: #d464ff;
}
/* Step divider — 2px gradient bar (magenta → cyan → teal).
 * Rendered as a div with background gradient at 2px height.
 * Parent-class qualifier (0,2,0) beats kit's hr/div resets.
 * Gradient matches prod's `.join-divider` custom CSS:
 *   linear-gradient(91deg, #D464FF 26.41%, #00E0F6 54.96%, #02708E 78.55%)
 * Brief had stop3 at 100% but prod probe CSS shows 78.55% — using prod value. */
.cinefi-numbered-steps-cta .cinefi-numbered-steps-cta__step-divider {
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(91deg, #d464ff 26.41%, #00e0f6 54.96%, #02708e 78.55%);
  border: none;
  margin: 0;
}
/* Step heading — same 28/700/44.8lh/-0.84px tier as intro heading.
 * Color is #ebfffe (same as other headings). */
.cinefi-numbered-steps-cta .cinefi-numbered-steps-cta__step-heading {
  margin: 0;
  font-family: var(--font-inter, Inter, sans-serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 44.8px;
  letter-spacing: -0.84px;
  color: #ebfffe;
}
/* Step body — 18/400/28.8lh/-0.36px, semi-transparent near-white.
 * Same as intro body. */
.cinefi-numbered-steps-cta__step-body {
  font-family: var(--font-inter, Inter, sans-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 28.8px;
  letter-spacing: -0.36px;
  color: rgb(245 255 254 / 90%);
}
.cinefi-numbered-steps-cta__step-body p {
  margin: 0;
}
/* === SECONDARY CTA WRAP === */
/* Hidden at desktop (≥769px): provides a second conversion path when the
 * grid stacks to 1-col (mobile/tablet). Exact prod breakpoint from probe:
 * display:none at desktop 1440, display:flex at tablet 768. The switch
 * is at ≤768px (Elementor's tablet breakpoint). */
.cinefi-numbered-steps-cta__cta-secondary-wrap {
  display: none;
}
/* Secondary CTA — same visual as primary (.cinefi-btn-fill). Parent
 * qualifier (0,2,0). */
.cinefi-numbered-steps-cta .cinefi-numbered-steps-cta__cta-secondary {
  --btn-padding-block: 21px;
  --btn-padding-inline: 0px;

  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-block: var(--btn-padding-block);
  padding-inline: var(--btn-padding-inline);
  border: var(--btn-border);
  border-radius: var(--btn-border-radius);
  background-image: var(--btn-bg-image);
  font-family: var(--font-inter, Inter, sans-serif);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  color: var(--btn-color);
  text-align: center;
  text-decoration: none;
  transition:
    opacity 0.25s ease,
    box-shadow 0.25s ease;
}
.cinefi-numbered-steps-cta .cinefi-numbered-steps-cta__cta-secondary:hover,
.cinefi-numbered-steps-cta .cinefi-numbered-steps-cta__cta-secondary:focus-visible {
  opacity: 0.85;
  box-shadow: 0 2px 20px rgb(0 0 0 / 20%);
}
/* =====================================================================
 * RESPONSIVE — ≤768px (tablet + narrow + mobile): 1-col stack
 * ===================================================================== */
@media (width <= 768px) {
  .cinefi-numbered-steps-cta__grid {
    grid-template-columns: 1fr;
    padding: 0 36px;
  }

  /* Secondary CTA flips visible when grid stacks. */
  .cinefi-numbered-steps-cta__cta-secondary-wrap {
    display: flex;
    justify-content: flex-start;
  }

  /* Primary CTA hides when the grid stacks — the secondary CTA (placed
   * after the steps list) takes over the conversion role. Without this
   * rule, BOTH CTAs render on mobile/tablet (caught in about-test QA
   * 2026-05-28). Specificity (0,2,0) matches the existing
   * `.cinefi-numbered-steps-cta .cinefi-numbered-steps-cta__cta` rule
   * that sets `display: flex`. */
  .cinefi-numbered-steps-cta .cinefi-numbered-steps-cta__cta {
    display: none;
  }
}
/* =====================================================================
 * RESPONSIVE — ≤576px (mobile)
 * ===================================================================== */
@media (width <= 576px) {
  .cinefi-numbered-steps-cta {
    -webkit-padding-before: 97px;
            padding-block-start: 97px;
  }

  /* Eyebrow heading: current About prod mobile renders 36px with the
   * tighter legacy letter spacing. */
  .cinefi-numbered-steps-cta .cinefi-numbered-steps-cta__eyebrow-heading {
    --display-font-size: 36px;

    font-size: 36px;
    line-height: 36px;
    letter-spacing: -0.42px;
  }

  .cinefi-numbered-steps-cta__eyebrow {
    gap: 15px;
  }

  .cinefi-numbered-steps-cta .cinefi-numbered-steps-cta__eyebrow-body {
    max-width: 388px;
    font-size: 14px;
    line-height: 25.56px;
    letter-spacing: -0.28px;
  }

  /* Intro heading: 24px on mobile (28px desktop). */
  .cinefi-numbered-steps-cta .cinefi-numbered-steps-cta__intro-heading {
    font-size: 24px;
    line-height: 44.8px;
  }

  .cinefi-numbered-steps-cta__intro {
    max-width: none;
  }

  .cinefi-numbered-steps-cta__intro-body {
    font-size: 14px;
    letter-spacing: -0.28px;
    word-spacing: -0.28px;
  }

  .cinefi-numbered-steps-cta__grid {
    margin-top: 43px;
    padding: 0;
  }

  .cinefi-numbered-steps-cta__steps {
    padding: 0;
  }

  /* Step heading: same drop as intro heading. */
  .cinefi-numbered-steps-cta .cinefi-numbered-steps-cta__step-heading {
    font-size: 20px;
    line-height: 44.8px;
  }

  .cinefi-numbered-steps-cta__step:first-child .cinefi-numbered-steps-cta__step-heading {
    line-height: 36px;
  }

  /* Step body: 14px/-0.28px on mobile (18px/-0.36px desktop). */
  .cinefi-numbered-steps-cta__step-body {
    font-size: 14px;
    letter-spacing: -0.28px;
    word-spacing: -0.28px;
  }

  /* Primary CTA: no max-width at mobile — fill column width. */
  .cinefi-numbered-steps-cta .cinefi-numbered-steps-cta__cta {
    max-width: none;
  }

  .cinefi-numbered-steps-cta__cta-secondary-wrap {
    justify-content: center;
  }

  .cinefi-numbered-steps-cta .cinefi-numbered-steps-cta__cta-secondary {
    width: calc(100% - 24px);
    max-width: 392px;
  }
}
/* Layout for the cinefi-decorative-bg-feature-card widget — 2-column
 * feature card (image left + content right) wrapped in a dark semi-
 * transparent chrome overlay on a decorative SVG background section.
 *
 * Chrome values lifted from prod computed-style probes at 1481-wide
 * content viewport (about §1 fbf3529 / roll-sound §1.3 c7fd074):
 *   - background-color: rgb(0 0 0 / 50%)
 *   - border-radius: 20px
 *   - padding: 10px
 *
 * Grid values from the inner layout container (c859d00 / c7fd074):
 *   - grid-template-columns: 1fr 1fr at >=1025px
 *   - padding-inline: 117px at desktop
 *   - stacks to 1-col at <=1024px (Elementor tablet breakpoint)
 *
 * Typography primitives:
 *   - Heading: .cinefi-display-xl utility (60/900/-2.4px)
 *   - Body: 18/400/25.56lh/-0.36px, color rgb(245 255 254 / 90%)
 *   - CTA: .cinefi-btn-fill utility (no padding override — prod shows
 *     default 18px padding-block; the about page CTA is full-width via
 *     flex-column stretch, not a padding override)
 *
 * Phase H — see decorative-bg-feature-card-brief.md.
 * Regression spec: tests/visual/compare-decorative-bg-feature-card.spec.ts.
 *
 * Prod probe delta vs brief (2026-05-26):
 *   - Body line-height: prod=25.56px (1.42), brief said 28.8px (1.6).
 *     Widget uses prod-measured value.
 *   - CTA padding-block: prod=18px (default .cinefi-btn-fill), brief said
 *     override to 21px. No override applied — prod evidence wins.
 *   - max-width 553px on heading/body: not applied as explicit constraint;
 *     column auto-sizing provides equivalent natural wrapping at desktop.
 */
/* ---------- Card chrome ---------- */
/* Border + box-shadow lifted from prod about §1 (`#about-g-hero-3`)
 * computed-style probe 2026-05-28 (was missing from the initial widget
 * spec — re-probed during about-test page QA). The 1px purple stroke +
 * offset shadow are part of prod's design and complete the "card on a
 * dark cinematic background" treatment. Vertical padding bumped from
 * 10px to 40px per Brandon's review — gives the heading/body/image
 * stack more breathing room inside the dark card chrome. */
.cinefi-decorative-bg-feature-card {
  background-color: rgb(0 0 0 / 50%);
  border: 1px solid rgb(110 0 186);
  border-radius: 20px;
  padding: 40px 10px;
  max-width: 1310px;
  margin-inline: auto;
  color: rgb(245 255 254 / 90%);
  box-shadow: 0 10px 24px 0 rgb(0 0 0 / 45%);
}
/* ---------- 2-col grid ---------- */
.cinefi-decorative-bg-feature-card__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding-inline: 0;
}
/* Desktop: 2-col with 117px inner horizontal padding matching prod
 * gap: 15px per brief (column gutter between media and content). */
@media (width >= 1025px) {
  .cinefi-decorative-bg-feature-card__layout {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding-inline: 117px;
  }
}
/* ---------- Media column ---------- */
.cinefi-decorative-bg-feature-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.cinefi-decorative-bg-feature-card__image {
  display: block;
  max-width: 100%;
  height: auto;
}
/* ---------- Content column ---------- */
.cinefi-decorative-bg-feature-card__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
  justify-content: center;
  padding: 10px;
}
/* ---------- Heading ---------- */
/* (0,2,0) specificity to beat Elementor kit h2 reset */
.cinefi-decorative-bg-feature-card .cinefi-decorative-bg-feature-card__heading {
  margin: 0;
  font-size: var(--display-font-size);
  font-weight: var(--display-font-weight);
  line-height: var(--display-line-height);
  letter-spacing: var(--display-letter-spacing);
  color: #ebfffe;
}
/* Mobile heading: 42px to match about §1 prod pattern (numbered-steps-cta
 * probe showed eyebrow drops to 42px at mobile; same utility same override) */
@media (width <= 576px) {
  .cinefi-decorative-bg-feature-card .cinefi-decorative-bg-feature-card__heading {
    --display-font-size: 42px;

    font-size: 42px;
  }
}
/* ---------- Body ---------- */
/* (0,2,0) specificity on the container to beat kit baseline */
.cinefi-decorative-bg-feature-card .cinefi-decorative-bg-feature-card__body {
  font-size: 18px;
  font-weight: 400;
  line-height: 25.56px;
  letter-spacing: -0.36px;
  color: rgb(245 255 254 / 90%);
}
.cinefi-decorative-bg-feature-card .cinefi-decorative-bg-feature-card__body p {
  margin: 0 0 1em;
}
.cinefi-decorative-bg-feature-card .cinefi-decorative-bg-feature-card__body p:last-child {
  margin-bottom: 0;
}
/* ---------- CTA button ---------- */
/* Reuses .cinefi-btn-fill utility for the purple→teal gradient primary CTA.
 * The widget-scoped rule applies layout concerns (display, alignment) and
 * consumes the utility's --btn-* custom properties.
 *
 * Width CORRECTION 2026-06-11 (QA sheet rows 42/59): the original
 * "full-width to match prod" claim was wrong — prod renders this CTA at
 * its intrinsic width (about made-for-life: 264px; roll-sound synopsis:
 * 210px, probed), not stretched to the 500px content column. Base is
 * fit-content; per-instance prod widths are pinned via page-scoped
 * min-widths in src/css/layout/container.css. */
.cinefi-decorative-bg-feature-card .cinefi-decorative-bg-feature-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding-block: var(--btn-padding-block);
  padding-inline: var(--btn-padding-inline);
  border: var(--btn-border);
  border-radius: var(--btn-border-radius);
  background-clip: var(--btn-bg-clip);
  background-image: var(--btn-bg-image);
  background-origin: var(--btn-bg-origin);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  color: var(--btn-color);
  text-align: center;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    box-shadow 0.25s ease;
}
.cinefi-decorative-bg-feature-card .cinefi-decorative-bg-feature-card__cta:hover,
.cinefi-decorative-bg-feature-card .cinefi-decorative-bg-feature-card__cta:focus-visible {
  opacity: 0.75;
  box-shadow: 0 2px 30px rgb(0 0 0 / 20%);
}
/* cinefi-contact-card-pair — §1 of /contact-us/
 *
 * Card chrome (gradient bg, 2px outline, 20px radius) comes from the
 * `.gradient-box` utility class in `src/css/components/gradient-box.css`.
 * Padding + flex-direction are overridden here with (0,2,0) specificity
 * to beat Elementor's kit baseline on `.gradient-box`.
 *
 * Heading typography: Inter 55px/800/-1.1px desktop. Matches the prod
 * computed result (the Elementor editor stores 66px but the legacy
 * section's custom_css forces `h2 { font-size: 55px !important; }` at
 * ≥992px). We emit the same value directly here.
 *
 * Grid: 2-col at ≥769px, 1-col stack below. All selectors use
 * `.cinefi-contact-card-pair .<child>` (0,2,0) to beat Elementor's
 * reset rules on `ul` and `.gradient-box` elements.
 *
 * Body color: #f5fffe (solid, not rgba — prod computed-style probe
 * 2026-05-26 confirmed `rgb(245, 255, 254)`).
 */
/* ── Section wrapper — constrains widget when placed in a full-width
 *    container so it doesn't bleed to the viewport edge. ───────────── */
.cinefi-contact-card-pair {
  display: block;

  /* Match prod card-pair total width — measured 1120px at 2000×900
   * (each card 534 + 52px gap). Theme-wide max-width is 1310 (used by
   * prose-page-hero, etc.) but the contact card-pair on prod is
   * narrower. Verified via bin/probe-cards.mjs 2026-05-29.
   * Was 1310 pre-2026-05-29. */
  max-width: 1120px;
  margin-inline: auto;

  /* Bottom breathing between the card pair and the page footer. The
   * composer doesn't wrap this widget in an outer container (unlike
   * legal-test which uses a wrapping container with bottom padding),
   * so the widget owns its own footer-gap. Caught in contact-us-test
   * QA 2026-05-28: without this, the card pair butts up against the
   * footer. */
  -webkit-margin-after: 80px;
          margin-block-end: 80px;
}
/* ── Grid ─────────────────────────────────────────────────────────── */
.cinefi-contact-card-pair .cinefi-contact-card-pair__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;

  /* 52px matches prod's measured card gap at 2000×900 (was 2rem/32px). */
  gap: 52px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* ── Card chrome — (0,2,0) to beat `.gradient-box` kit overrides ──── */
.cinefi-contact-card-pair .cinefi-contact-card-pair__card {
  flex-direction: column;
  align-items: flex-start;
  padding: 64px;
}
/* ── Heading ───────────────────────────────────────────────────────── */
.cinefi-contact-card-pair .cinefi-contact-card-pair__heading {
  margin: 0 0 1em;
  font-family: Inter, sans-serif;
  font-size: 55px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #f5fffe;
}
/* ── Body ──────────────────────────────────────────────────────────── */
.cinefi-contact-card-pair .cinefi-contact-card-pair__body {
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #f5fffe;
}
/* Equal-height desktop cards need their body copy to participate in the
 * card's flex column. Push the final security warning into a consistent
 * bottom region without imposing a fixed height on the card itself. */
@media (width >= 769px) {
  .cinefi-contact-card-pair .cinefi-contact-card-pair__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
  }

  .cinefi-contact-card-pair .cinefi-contact-card-pair__body > p:last-child {
    min-block-size: 4.8rem;
    margin-top: auto;
  }

  /* Chat and Call store an extra leading <br> inside the warning span;
   * Email uses a separate spacer paragraph. Normalize the visible start. */
  .cinefi-contact-card-pair
    .cinefi-contact-card-pair__body
    > p:last-child
    > span
    > br:first-child {
    display: none;
  }
}
.cinefi-contact-card-pair .cinefi-contact-card-pair__body p {
  margin: 0 0 1em;
}
.cinefi-contact-card-pair .cinefi-contact-card-pair__body p:last-child {
  margin-bottom: 0;
}
/* Preserve inline link color from prod WYSIWYG (e.g. #00c9c9), but the
 * contact-card email link should not be underlined. */
.cinefi-contact-card-pair .cinefi-contact-card-pair__body a {
  text-decoration: none;
}
.cinefi-contact-card-pair .cinefi-contact-card-pair__body a:hover,
.cinefi-contact-card-pair .cinefi-contact-card-pair__body a:focus-visible {
  text-decoration: none;
}
/* ── Optional CTA ──────────────────────────────────────────────────── */
.cinefi-contact-card-pair .cinefi-contact-card-pair__cta {
  display: inline-flex;
  margin-top: 1.5em;
}
/* ── Three-column desktop variant ────────────────────────────────────
 * Opt-in via the widget's Desktop layout control. Existing two-card
 * instances retain the original 1120px / 64px-padding presentation. */
.cinefi-contact-card-pair--columns-3 {
  max-width: 1310px;
}
.cinefi-contact-card-pair--columns-3 .cinefi-contact-card-pair__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.cinefi-contact-card-pair--columns-3 .cinefi-contact-card-pair__card {
  padding: 40px;
}
.cinefi-contact-card-pair--columns-3 .cinefi-contact-card-pair__heading {
  font-size: 44px;
}
/* Keep the original two-card geometry and let the third card span the
 * complete second row. Because every item is still the same component,
 * the border, background gradient, padding, and typography stay exact. */
.cinefi-contact-card-pair--columns-2-plus-1
  .cinefi-contact-card-pair__card:nth-child(3) {
  grid-column: 1 / -1;
}
/* ── Responsive breakpoints ────────────────────────────────────────── */
/* Three cards become too narrow below this point. Stack them instead
 * of leaving the third card orphaned on a second grid row. */
@media (width <= 1180px) {
  .cinefi-contact-card-pair--columns-3 .cinefi-contact-card-pair__grid {
    grid-template-columns: 1fr;
  }

  .cinefi-contact-card-pair--columns-3 .cinefi-contact-card-pair__card {
    padding: 48px;
  }
}
/* Tablet narrow + mobile: 1-col stack */
@media (width <= 768px) {
  .cinefi-contact-card-pair .cinefi-contact-card-pair__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .cinefi-contact-card-pair .cinefi-contact-card-pair__card {
    padding: 48px;
  }

  .cinefi-contact-card-pair .cinefi-contact-card-pair__heading {
    font-size: 40px;
  }
}
/* Mobile */
@media (width <= 576px) {
  .cinefi-contact-card-pair {
    -webkit-margin-after: 64px;
            margin-block-end: 64px;
  }

  .cinefi-contact-card-pair .cinefi-contact-card-pair__grid {
    gap: 32px;
  }

  .cinefi-contact-card-pair .cinefi-contact-card-pair__card {
    padding: 32px;
  }

  .cinefi-contact-card-pair .cinefi-contact-card-pair__heading {
    -webkit-margin-after: 33px;
            margin-block-end: 33px;
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .cinefi-contact-card-pair .cinefi-contact-card-pair__body {
    font-size: 16px;
    line-height: 25.56px;
    letter-spacing: -0.02em;
  }

  .cinefi-contact-card-pair .cinefi-contact-card-pair__body p,
  .cinefi-contact-card-pair .cinefi-contact-card-pair__body p:last-child {
    margin-block: 0 24px;
  }
}
/*
 * cinefi-topic-jump-nav — In-page anchor navigation widget.
 *
 * Chip chrome mirrors prod's `.faq-topic` custom-CSS treatment (from the
 * Elementor grid container's custom_css field in post 3202):
 *   background: linear-gradient(96deg, #1e2a33 18.64%, #07131d 64.56%)
 *   border: 1px solid #d2d2d2
 *   border-radius: 10px
 *   min-height: 95px (desktop)
 * RETRACTION (2026-06-12): a 2026-06-11 probe (QA row 54) concluded
 * "live no longer renders the border (computed 0px)" and the border was
 * removed here — but that probe measured the INNER `<a.elementor-button>`
 * (border 0); prod renders the border on the per-chip Elementor WRAPPER
 * div (`.elementor-element-bc2ece1` etc.: 1px solid #d2d2d2, radius
 * 10px — re-probed up the wrapper chain + confirmed at 2x zoom
 * 2026-06-12). Our chip merges wrapper + anchor into one element, so
 * the border belongs on the chip. Caught by the
 * compare-topic-jump-nav.spec.ts chrome assertions, whose 2026-05-26
 * prod probe had it right.
 *
 * Layout: 2-column CSS grid matching the prod grid container
 * (grid_columns_grid: 2fr, gap: 23.5px column / 24px row; mobile: 12px).
 *
 * Typography: 22px / 700 / -0.02px / Inter — matches the prod Elementor
 * button widget's custom typography_font_size setting.
 *
 * No hover state beyond the standard browser :focus-visible ring — prod
 * only applies Elementor's generic `.elementor-button:hover { opacity: 0.75 }`.
 */
/* ---------- Layout ---------- */
.cinefi-topic-jump-nav {
  display: block;

  /* 1245px to align with the faqs hero card + FAQ accordion (both 1245)
   * and prod. Was 1310 (site default), which rendered the category boxes
   * wider than the hero/accordion — Brandon flagged 2026-06-01. Widget is
   * faqs-only (post 5852), so this default change is safe. */
  max-width: 1245px;
  margin-inline: auto;
}
.cinefi-topic-jump-nav .cinefi-topic-jump-nav__grid {
  display: grid;

  /* Prod uses a 4-column grid at desktop (288px × 4 + 23.5px gaps). */
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 23.5px;
}
/* 2-column at narrower viewports (tablet / mobile). */
@media (width <= 1024px) {
  .cinefi-topic-jump-nav .cinefi-topic-jump-nav__grid {
    grid-template-columns: 1fr 1fr;
  }
}
/* Mobile keeps the same two-column grid as prod's legacy `.faq-topic`
 * wrappers. At 448px, prod renders 198px chips at x=20/230 with a 12px
 * gutter; intrinsic/flex rows made migrated chips too narrow. */
@media (width <= 576px) {
  .cinefi-topic-jump-nav {
    padding-inline: 10px;
  }

  .cinefi-topic-jump-nav .cinefi-topic-jump-nav__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}
/* ---------- Chip chrome ----------
 * (0,2,0) specificity via parent qualifier beats kit `<a>` baseline. */
.cinefi-topic-jump-nav .cinefi-topic-jump-nav__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 95px;
  padding-block: 12px;
  padding-inline: 11%;
  border: 1px solid #d2d2d2;
  border-radius: 10px;
  background: linear-gradient(96deg, #1e2a33 18.64%, #07131d 64.56%);
  color: #f5fffe;
  font-family: Inter, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02px;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.cinefi-topic-jump-nav .cinefi-topic-jump-nav__chip:hover,
.cinefi-topic-jump-nav .cinefi-topic-jump-nav__chip:focus {
  opacity: 0.75;
  color: #f5fffe;
  text-decoration: none;
}
/* ---------- Responsive ---------- */
/* Tablet (≤768px): reduce gap to match mobile Elementor setting */
@media (width <= 768px) {
  .cinefi-topic-jump-nav .cinefi-topic-jump-nav__grid {
    gap: 12px;
  }

  .cinefi-topic-jump-nav .cinefi-topic-jump-nav__chip {
    min-height: 60px;
    font-size: 18px;
    padding-inline: 16px;
  }
}
/* Mobile (≤576px): prod chip metrics — full-width two-column chips,
 * 52px tall, 13px/700 text, with text centered inside the card. */
@media (width <= 576px) {
  .cinefi-topic-jump-nav .cinefi-topic-jump-nav__chip {
    width: 100%;
    min-height: 52px;
    max-width: none;
    font-size: 13px;
    line-height: 1;
    padding: 0 24px;
  }
}
/* cinefi-pdf-download-list — §0 of /legal/
 *
 * Prod probe 2026-05-26 (1440px desktop):
 *  - Card chrome: linear-gradient(171deg, rgba(4,67,88,.5) -30.33%,
 *    rgba(7,19,29,.5) 69.91%); border-radius 30px.
 *  - Card padding: 80px top/right/left, 160px bottom (desktop);
 *    5rem all sides (≤992px); 4rem/1rem/6rem/1rem (≤768px).
 *  - Icon: far fa-file-pdf, rgba(203,214,217,0.72), 28px desktop /
 *    24px ≤768px / 21px ≤576px; vertically aligned to flex-start at
 *    ≤768px (matches prod `icon_self_vertical_align_tablet: flex-start`).
 *  - Text: rgb(245,255,254), 18px/500/Inter/32px; 14px at ≤576px.
 *  - Link color: rgb(0,201,201) (cyan), no underline.
 *    Hover: same color (#00C9C9).
 *  - Item gap: 0.67rem desktop; 1rem ≤768px (from Elementor CSS rules
 *    `padding-block-end: calc(0.67rem)` + `margin-block-start: calc(0.67rem)`
 *    on items — replicated here as `row-gap` on the flex list).
 *
 * All selectors use (0,2,0) parent-class qualifier to beat Elementor kit
 * defaults on `<ul>`, `<li>`, `<a>`, and `<i>`.
 */
/* ── Section wrapper — constrains widget when placed in a full-width
 *    container so it doesn't bleed to the viewport edge. ───────────── */
.cinefi-pdf-download-list {
  display: block;

  /* 1232px + 160px bottom gap before the footer — prod-probed
   * 2026-06-11 (QA rows 36/56): live card is 1232 wide centered with a
   * 160px gap to the footer (80px gap at <=576); ours spanned the full
   * 1310 widget default and butted the footer (gap -1px). */
  max-width: 1232px;
  margin-inline: auto;
  -webkit-margin-after: 160px;
          margin-block-end: 160px;
}
/* ── Card chrome ──────────────────────────────────────────────────── */
.cinefi-pdf-download-list .cinefi-pdf-download-list__card {
  background: linear-gradient(171deg, rgb(4 67 88 / 50%) -30.33%, rgb(7 19 29 / 50%) 69.91%);
  border-radius: 30px;
  padding: 80px 80px 160px;
  box-sizing: border-box;
  width: 100%;
}
/* ── PDF link list ────────────────────────────────────────────────── */
.cinefi-pdf-download-list .cinefi-pdf-download-list__items {
  display: flex;
  flex-direction: column;
  row-gap: 0.67rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* ── Individual link row ──────────────────────────────────────────── */
.cinefi-pdf-download-list .cinefi-pdf-download-list__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgb(0 201 201);
  text-decoration: none;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.36px;
  transition: color 0.3s;
}
.cinefi-pdf-download-list .cinefi-pdf-download-list__link:hover {
  color: #00c9c9;
}
/* ── Icon ──────────────────────────────────────────────────────────── */
/* Inline SVG (file-pdf path baked into the widget render — see PHP).
 * Width/height instead of font-size since we're sizing an `<svg>` not
 * a Font Awesome glyph `<i>`. `currentColor` on the path lets the
 * color rule below control the fill. */
.cinefi-pdf-download-list .cinefi-pdf-download-list__icon {
  display: inline-flex;
  align-self: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: rgb(203 214 217 / 72%);
  transition: color 0.3s;
}
/* ── Text span ─────────────────────────────────────────────────────── */
.cinefi-pdf-download-list .cinefi-pdf-download-list__text {
  color: rgb(245 255 254);
}
/* ── Optional heading ─────────────────────────────────────────────── */
.cinefi-pdf-download-list .cinefi-pdf-download-list__heading {
  margin: 0 0 0.5em;
  font-family: Inter, sans-serif;
  color: rgb(245 255 254);
}
/* ── Optional intro ───────────────────────────────────────────────── */
.cinefi-pdf-download-list .cinefi-pdf-download-list__intro {
  margin-bottom: 1.5em;
  font-family: Inter, sans-serif;
  color: rgb(245 255 254);
}
.cinefi-pdf-download-list .cinefi-pdf-download-list__intro p {
  margin: 0 0 1em;
}
.cinefi-pdf-download-list .cinefi-pdf-download-list__intro p:last-child {
  margin-bottom: 0;
}
/* ── Responsive: tablet (≤992px) ─────────────────────────────────── */
@media (width <= 992px) {
  .cinefi-pdf-download-list .cinefi-pdf-download-list__card {
    padding: 5rem;
  }
}
/* ── Responsive: tablet/mobile (≤768px) ──────────────────────────── */
@media (width <= 768px) {
  .cinefi-pdf-download-list .cinefi-pdf-download-list__card {
    /* prod mobile card padding: 48px 24px 80px (probed 2026-06-11) */
    padding: 48px 24px 80px;
    margin-inline: auto;
  }

  .cinefi-pdf-download-list .cinefi-pdf-download-list__items {
    row-gap: 1rem;
  }

  .cinefi-pdf-download-list .cinefi-pdf-download-list__link {
    align-items: flex-start;
  }

  .cinefi-pdf-download-list .cinefi-pdf-download-list__icon {
    width: 24px;
    height: 24px;
    margin-top: 3.5px;
  }
}
/* ── Responsive: mobile (≤576px) ─────────────────────────────────── */
@media (width <= 576px) {
  .cinefi-pdf-download-list {
    /* prod gap to footer is 80px at mobile (160px desktop, root rule) */
    -webkit-margin-after: 80px;
            margin-block-end: 80px;
  }

  .cinefi-pdf-download-list .cinefi-pdf-download-list__items {
    row-gap: 32px;
  }

  .cinefi-pdf-download-list .cinefi-pdf-download-list__link {
    gap: 5px;
    font-size: 14px;
    letter-spacing: -0.28px;
  }

  .cinefi-pdf-download-list .cinefi-pdf-download-list__text {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    -webkit-padding-start: 5px;
            padding-inline-start: 5px;
  }

  .cinefi-pdf-download-list .cinefi-pdf-download-list__icon {
    width: 21px;
    height: 21px;
    margin-top: 6px;
  }
}
/* cinefi-prose-page — long-form policy/legal body widget.
 *
 * Covers: /privacy-policy/ §1+§2 body (v1); /legal/ body (v2 candidate).
 * NOT the page hero (cinefi-prose-page-hero) or the FFIEC grid
 * (cinefi-disclosure-table).
 *
 * Typography start values from sister-widget precedents (confirmed
 * pre-build from display-typography.css + prose-page-hero-brief):
 *   - h2 heading: 32px/900 (.cinefi-display-md) with -0.0125em letter-spacing
 *   - Body: 18px/400/Inter, line-height 25.56px (~1.42 × 18)
 *   - Links: rgb(0 201 201) cyan, underline (body prose convention)
 *   - Last-updated: 14px, rgba(245,255,254,0.7)
 *   - Divider: rgba(245,255,254,0.2) 1px solid, 48px margin-block
 *
 * All selectors use (0,2,0) parent-class qualifier to beat Elementor
 * kit defaults on block-level elements. Pattern from PdfDownloadList.css
 * and ProsePageHero.css.
 *
 * Probe status: start values used from sister-widget measurements.
 * Verify against prod /privacy-policy/ before finalizing migration.
 */
/* ── Root wrapper ────────────────────────────────────────────────── */
.cinefi-prose-page {
  /* CSS custom properties — allow per-instance overrides via
   * Elementor container's Custom CSS or page-level stylesheet. */

  /* Rhythm re-probed against prod /privacy-policy/ 2026-06-11 (QA sheet
   * rows 30/34 = Dan's D7/D11): prod renders a UNIFORM ~30px gap between
   * every block (body→heading 30, heading→body 30 — no extra section
   * break above headings), and dividers sit 30 below the previous block
   * with ~61 to the next heading. The previous 24/48/48 start values
   * (sister-widget precedents, never prod-verified) produced 72px
   * body→heading and 121px divider→heading — the 2-4× drift Dan saw. */
  --prose-block-gap: 30px;
  --prose-heading-margin-top: 0px;
  --prose-divider-margin-block: 0 30px; /* top: prev block's gap provides 30; bottom: 30 + 30 gap = 60 to next heading (prod: 61) */

  /* Prose measure re-probed against prod /privacy-policy/ 2026-06-11
   * (QA sheet row 29 = Dan's D6 "copy padding more than live"): prod's
   * copy column runs 1072px at 1440 (inset 184/side); the original
   * 912px start value (borrowed from the hero content measure, never
   * prod-verified) inset the copy 264/side. Centers within
   * .e-con-boxed > .e-con-inner (max-width 1310px). */
  display: block;
  max-width: 1072px;
  margin-inline: auto;

  /* Font-family and base color for all descendants */
  font-family: Inter, sans-serif;
  color: rgb(203 214 217);

  /* Prevents long unbroken URLs (e.g., www.optoutprescreen.com) from
   * overflowing the prose column at narrow viewports. */
  overflow-wrap: break-word;
}
/* ── Last-updated line ────────────────────────────────────────────── */
.cinefi-prose-page .cinefi-prose-page__last-updated {
  margin: 0 0 var(--prose-block-gap);
  font-size: 14px;
  color: rgb(245 255 254 / 70%);
  text-align: center;
}
.cinefi-prose-page .cinefi-prose-page__last-updated-label,
.cinefi-prose-page .cinefi-prose-page__last-updated-value {
  /* Inline — stay on same line. Space between them is a literal " " in
   * the PHP template (prevents "Last Updated:08/01/2025" regression). */
  display: inline;
}
/* ── Blocks container ────────────────────────────────────────────── */
.cinefi-prose-page .cinefi-prose-page__blocks {
  display: flex;
  flex-direction: column;
  gap: var(--prose-block-gap);
}
/* ── Heading blocks ──────────────────────────────────────────────── */
/* Heading blocks use `.cinefi-display-{size}` utility classes for the
 * visual typography token set (font-size, weight, line-height,
 * letter-spacing via CSS custom properties). The widget-scoped rule
 * below consumes those tokens. Parent-class qualifier (0,2,0) beats
 * Elementor kit heading rules (0,1,1). */
.cinefi-prose-page .cinefi-prose-page__heading {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: var(--display-font-size);
  font-weight: var(--display-font-weight);
  line-height: var(--display-line-height);
  letter-spacing: var(--display-letter-spacing);
  color: rgb(235 255 254);
}
/* Add extra top-margin on heading blocks to create a visual section
 * break when a heading follows a body or definition block.
 * The `+ .cinefi-prose-page__heading` selector targets headings that
 * are NOT the first child, preserving the flex gap for the first block. */
.cinefi-prose-page .cinefi-prose-page__blocks > * + .cinefi-prose-page__heading {
  margin-top: var(--prose-heading-margin-top);
}
/* ── Body blocks ──────────────────────────────────────────────────── */
.cinefi-prose-page .cinefi-prose-page__body {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 25.56px;
  color: rgb(203 214 217);
}
/* Paragraph rhythm inside body blocks */
.cinefi-prose-page .cinefi-prose-page__body p {
  margin: 0 0 1em;
}
.cinefi-prose-page .cinefi-prose-page__body p:last-child {
  margin-bottom: 0;
}
/* Links inside body blocks — cyan with underline (body prose convention).
 * pdf-download-list uses no underline for its icon-list links; prose
 * body links should underline for in-text readability. */
.cinefi-prose-page .cinefi-prose-page__body a {
  color: rgb(0 201 201);
  text-decoration: underline;
  transition: color 0.3s;
}
.cinefi-prose-page .cinefi-prose-page__body a:hover {
  color: #00c9c9;
}
/* List styles inside body blocks */
.cinefi-prose-page .cinefi-prose-page__body ul,
.cinefi-prose-page .cinefi-prose-page__body ol {
  margin: 0 0 1em;

  /* 40px, not 1.5em — prod uses the browser-default 40px list indent
   * (probed 2026-06-11, QA row 31 = Dan's D8: ours computed 24px at
   * mobile / 27px desktop, visibly shallower). */
  -webkit-padding-start: 40px;
          padding-inline-start: 40px;
}
.cinefi-prose-page .cinefi-prose-page__body ul {
  list-style: disc;
}
.cinefi-prose-page .cinefi-prose-page__body ol {
  list-style: decimal;
}
/* Marker color inherits from the <li> text color (rgb(203 214 217)) */
.cinefi-prose-page .cinefi-prose-page__body li::marker {
  color: inherit;
}
/* Nested list indent */
.cinefi-prose-page .cinefi-prose-page__body ul ul,
.cinefi-prose-page .cinefi-prose-page__body ol ol,
.cinefi-prose-page .cinefi-prose-page__body ul ol,
.cinefi-prose-page .cinefi-prose-page__body ol ul {
  margin-bottom: 0;
}
/* ── Definition blocks ────────────────────────────────────────────── */
.cinefi-prose-page .cinefi-prose-page__definition {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
/* Definition term — real h3/h4 element replacing the legacy
 * `<strong>X</strong> then paragraph` pattern. Visual treatment
 * matches the legacy bold-prefix; semantics are correct underneath. */
.cinefi-prose-page .cinefi-prose-page__definition-term {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: rgb(245 255 254);
}
.cinefi-prose-page .cinefi-prose-page__definition-desc {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 25.56px;
  color: rgb(203 214 217);
}
/* stylelint-disable-next-line no-descending-specificity -- definition-desc p
 * and body p are independent DOM contexts; linter false-positive. */
.cinefi-prose-page .cinefi-prose-page__definition-desc p {
  margin: 0 0 1em;
}
.cinefi-prose-page .cinefi-prose-page__definition-desc p:last-child {
  margin-bottom: 0;
}
/* ── CTA-card blocks ──────────────────────────────────────────────── */
/* Gradient call-out card mid-prose — prod privacy "Questions?" section.
 * All values probed from prod 2026-06-11 (QA sheet row 33 / D10):
 * card at the prose measure, radius 20, padding 64/48 (32/16 mobile),
 * h2 at 58px/900 (28px mobile), body 18px/400 in rgb(245 255 254).
 * Desktop layout is a two-column ROW — heading in the left half, body
 * left-aligned from the card's midpoint (screenshot-verified); mobile
 * stacks left-aligned. Links render in the card's white, not the prose
 * cyan (screenshot-verified). */
.cinefi-prose-page .cinefi-prose-page__cta-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  padding: 64px 48px;
  text-align: left;
  background-image: linear-gradient(100deg, rgb(7 19 29) 74%, rgb(110 0 186) 113%);
  border-radius: 20px;
}
.cinefi-prose-page .cinefi-prose-page__cta-card-heading {
  flex: 1 1 50%;
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 58px;
  font-weight: 900;
  line-height: 1;
  color: rgb(245 255 254);
}
.cinefi-prose-page .cinefi-prose-page__cta-card-body {
  flex: 1 1 50%;
  font-size: 18px;
  font-weight: 400;
  line-height: 25.56px;
  color: rgb(245 255 254);
}
/* Card links: white like the surrounding card copy (prod), keeping the
 * underline; overrides the prose cyan link convention inside the card. */
/* stylelint-disable-next-line no-descending-specificity -- cta-card-body a
 * and body a:hover are independent DOM contexts; linter false-positive
 * (same pattern as definition-desc p above). */
.cinefi-prose-page .cinefi-prose-page__cta-card-body a {
  color: rgb(245 255 254);
}
/* ── Divider blocks ───────────────────────────────────────────────── */
/* Real <hr> — replaces the legacy Elementor divider widget's <div>
 * wrappers with ::before strokes (audit line 99). */
.cinefi-prose-page .cinefi-prose-page__divider {
  border: none;
  border-top: 1px solid rgb(245 255 254 / 20%);
  margin-block: var(--prose-divider-margin-block);
  width: 100%;
}
/* ── Responsive: mobile (≤576px) ────────────────────────────────── */
@media (width <= 576px) {
  .cinefi-prose-page {
    /* No widget padding at mobile (was a 16px "safety net" predating the
     * page padding ladder). With the per-page container padding restored
     * (container.css, 2026-06-11) the surrounding containers provide the
     * inset; the extra 16px pushed the copy to 48px off the viewport edge
     * vs prod's 32px (QA sheet row 29 = Dan's D6). */
    padding-inline: 0;
  }

  .elementor:has(.cinefi-disclosure-table) > .e-con-full:has(.cinefi-disclosure-table) {
    padding-bottom: 32px;
  }

  /* Heading blocks scale down via .cinefi-display-md's own mobile override
   * (sets --display-font-size: 24px at <=576px in display-typography.css).
   * No explicit override needed here unless a widget-specific size differs. */

  .cinefi-prose-page .cinefi-prose-page__body {
    font-size: 16px;
    line-height: 22.72px; /* 1.42 × 16 */
  }

  /* CTA card mobile — prod: padding 32/16, heading 28px, stacked and
   * left-aligned (probed + screenshot-verified 2026-06-11) */
  .cinefi-prose-page .cinefi-prose-page__cta-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 16px;
  }

  .cinefi-prose-page .cinefi-prose-page__cta-card-heading {
    font-size: 28px;
  }

  .cinefi-prose-page .cinefi-prose-page__definition-term {
    font-size: 18px;
  }

  .cinefi-prose-page .cinefi-prose-page__definition-desc {
    font-size: 16px;
    line-height: 22.72px;
  }

  /* Privacy-policy mobile parity: the migrated page replaces legacy
   * Elementor text widgets with ProsePage + DisclosureTable. Scope the
   * larger policy rhythm by widget presence instead of brittle page ids. */
  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page .cinefi-prose-page__heading {
    --display-font-size: 28px;
    --display-line-height: 36.4px;

    font-size: 28px;
    line-height: 36.4px;
  }

  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page__blocks > .cinefi-prose-page__heading:first-child {
    --display-font-size: 24px;
    --display-line-height: 31.2px;

    margin-bottom: 54px;
    font-size: 24px;
    line-height: 31.2px;
  }

  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page__blocks > .cinefi-prose-page__heading:nth-child(4) {
    --display-line-height: 28px;

    line-height: 28px;
  }

  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page__blocks > .cinefi-prose-page__heading:nth-child(5),
  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page__blocks > .cinefi-prose-page__heading:nth-child(11) {
    --display-line-height: 28px;

    line-height: 28px;
  }

  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page .cinefi-prose-page__body,
  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page .cinefi-prose-page__definition-term,
  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page .cinefi-prose-page__definition-desc {
    font-size: 18px;
    line-height: 28.8px;
    color: rgb(245 255 254);
  }

  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page .cinefi-prose-page__body {
    padding-bottom: 18px;
  }

  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page .cinefi-prose-page__body p,
  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page .cinefi-prose-page__body ul,
  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page .cinefi-prose-page__body ol {
    margin-bottom: 24px;
  }

  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page .cinefi-prose-page__body ul:last-child,
  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page .cinefi-prose-page__body ol:last-child {
    margin-bottom: 0;
  }

  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page__blocks > .cinefi-prose-page__body:nth-child(3) p:last-child {
    margin-bottom: 0;
  }

  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page .cinefi-prose-page__definition {
    display: block;
    margin-bottom: 24px;
  }

  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page .cinefi-prose-page__definition-term,
  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page .cinefi-prose-page__definition-desc {
    display: inline;
  }

  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page__blocks > .cinefi-prose-page__definition:nth-child(4) .cinefi-prose-page__definition-desc {
    display: block;
  }

  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page__blocks > .cinefi-prose-page__definition:last-child .cinefi-prose-page__definition-desc {
    display: block;
  }

  /* stylelint-disable-next-line no-descending-specificity -- definition-desc p
   * and body p are independent DOM contexts. */
  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page .cinefi-prose-page__definition-desc p {
    display: inline;
    margin: 0;
  }

  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page__blocks > .cinefi-prose-page__definition:nth-child(6),
  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page__blocks > .cinefi-prose-page__definition:nth-child(7) {
    margin-bottom: 52.8px;
  }

  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page__blocks > .cinefi-prose-page__definition:nth-child(8) {
    margin-bottom: -4.8px;
  }

  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page__blocks > .cinefi-prose-page__body:nth-child(9) {
    padding-bottom: 8px;
  }

  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page__blocks > .cinefi-prose-page__divider:first-child {
    display: none;
  }

  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page .cinefi-prose-page__cta-card {
    gap: 50px;
    min-height: 213px;
    margin-bottom: 64px;
    padding: 42px 26px 32px;
  }

  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page .cinefi-prose-page__cta-card-heading,
  .elementor:has(.cinefi-disclosure-table) .cinefi-prose-page .cinefi-prose-page__cta-card-body {
    flex: 0 0 auto;
    width: 100%;
  }
}
/* cinefi-product-intro-grid widget — dark-background, centered intro
 * section used as §0.1 on /checking/ and /savings/.
 *
 * Rebuilt 2026-06-01 to match prod §0.1 (was a light-bg 2-column layout):
 *   Centered header (heading + subhead + rate callout) above a horizontal
 *   4-up row of gradient-bordered "borde-fresa" cards (icon on top + bold
 *   line + body line), with a centered footer CTA below.
 *
 * Card chrome REUSES `.cinefi-gradient-card`
 * (src/css/components/gradient-card.css) — the exact conic-gradient border
 * (`from 211deg at 79.85% 57.72%`, same 5 stops) + `#07131d` inner fill that
 * prod's `.borde-fresa` rule uses (verified byte-for-byte against
 * post-4428.css 2026-06-01). The card `<li>` carries both
 * `.cinefi-product-intro-grid__card` AND `.cinefi-gradient-card`; this file
 * only adds geometry (padding, radius, content layout) on top of the shared
 * chrome — it does NOT redefine the gradient.
 *
 * Kit breakpoints: 576 / 768 / 992. The card-row responsive ladder matches
 * prod's Elementor grid (4-up ≥992 → 2×2 below 992, including mobile).
 *
 * Values from prod probe (cinefi.com/checking/ + post-4428.css) 2026-06-01:
 *  - Section bg:       #07131d  (kit --e-global-color-primary)
 *  - Heading:          42px / 900 / 1.3lh / -0.0125em, centered, #f5fffe
 *  - Subhead (body):   24px / 400, centered, #f5fffe
 *  - Rate callout:     18px / 700, centered, #f5fffe
 *  - Card padding:     8px (prod borde-fresa --padding 08px)
 *  - Card radius:      20px (--cinefi-gradient-card-border-radius default)
 *  - Card text:        18px / 400 / -0.02em, centered, #f5fffe
 *  - Content width:    1310px (prod content-width)
 *  - CTA button:       .cinefi-btn-fill (purple→teal gradient, 300px wide)
 *
 * Parent-class qualifier (0,2,0) on rules that need to beat the kit
 * baseline specificity — same pattern as NumberedStepsCta.css.
 */
/* === SECTION WRAPPER === */
.cinefi-product-intro-grid {
  display: block;
  width: 100%;
  background-color: #07131d;
}
.cinefi-product-intro-grid__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
  max-width: 1310px;
  margin-inline: auto;
  padding-block: 96px;
  padding-inline: 24px;
  box-sizing: border-box;
}
/* === CENTERED HEADER (heading + subhead + rate callout) === */
/* Header content box. Widened to the full content width (1310px) on
 * 2026-06-01 so the intro subhead sits on ONE line like prod (at 720/920/1180
 * it wrapped to 2 lines). The heading is constrained separately below to
 * preserve its prod 2-line wrap — decoupling the two so each matches prod
 * independently (prod: heading 2 lines / subhead 1 line). */
.cinefi-product-intro-grid__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
  max-width: 1310px;
  margin-inline: auto;
  text-align: center;
}
/* Section heading — 42px/900/1.3lh/-0.0125em, centered, on-dark text.
 * Matches prod heading widget (c8bc4c2/bb33f3f) typography. Parent
 * qualifier (0,2,0) for specificity parity vs the kit's `h2` rule.
 *
 * max-width 594px (round 2, 2026-06-01) matches prod's measured heading box
 * (prod renders w=594, no cap, balanced 2-line wrap: "Digital checking account
 * for" / "filmmakers & creatives."). Round-1's 860px was too wide and produced
 * an unbalanced wrap with an orphan "creatives." alone on line 2. 594px
 * reproduces prod's balanced break. The subhead has no cap so it fills the
 * wider header and stays on one line. */
.cinefi-product-intro-grid .cinefi-product-intro-grid__heading {
  max-width: 594px;
  margin: 0 auto;
  font-family: var(--font-inter, Inter, sans-serif);
  font-size: 42px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.0125em;
  color: #f5fffe;
}
/* Savings needs a wider desktop measure than checking: its shorter heading
 * should sit on one line at desktop while still wrapping naturally on mobile. */
.cinefi-product-intro-grid--savings .cinefi-product-intro-grid__heading {
  max-width: none;
}
/* Subhead (intro body) — matches Prod's compact text-editor treatment. */
.cinefi-product-intro-grid__body {
  font-family: var(--font-inter, Inter, sans-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 25.56px;
  letter-spacing: -0.36px;
  color: rgb(245 255 254 / 90%);
}
.cinefi-product-intro-grid__body p {
  margin: 0;
}
/* Rate callout — 18px/700, centered, on-dark text. Wraps the live
 * Pods rate token + ¹/³ footnotes (rendered via do_shortcode +
 * wp_kses_post in render()). */
.cinefi-product-intro-grid__rate-callout {
  font-family: var(--font-inter, Inter, sans-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -0.02em;
  color: #f5fffe;
}
.cinefi-product-intro-grid__rate-callout p {
  margin: 0;
}
/* === 4-UP BORDE-FRESA CARD ROW === */
/* 4 equal columns at desktop. `role="list"` re-asserts list semantics
 * that `list-style:none` may strip in Safari/VoiceOver. */
.cinefi-product-intro-grid__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Each card: gradient-bordered chrome from `.cinefi-gradient-card`
 * (applied alongside this class in the markup) + inner content layout.
 * 8px padding + 20px radius match prod's borde-fresa cards. Content is
 * a centered vertical stack: icon → bold line → body line. */
/* Card padding bumped 24/16 → 40/24 on 2026-06-01 to match prod's
 * taller cards (prod §0.1 card-row is 413px tall vs our prior 224px;
 * the larger icon + roomier padding closes the gap). */
.cinefi-product-intro-grid__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 24px;
  border-radius: 20px;
  text-align: center;
}
/* Icon — sits on top of each card, inside a FIXED 120px square box.
 *
 * Round 2 (2026-06-01): prod renders these icons at their intrinsic SVG/PNG
 * sizes — cards 1-3 are 167/166/150px but card 4 (savings-g-4.svg lock) is a
 * tall 62×75 native, so prod's icons aren't actually uniform. The round-1
 * 96px width-only-effective cap let the lock's tall aspect ratio render 96×116
 * (taller → "too big" + inconsistent across cards). Fix: constrain BOTH width
 * AND height to a fixed 120px box + object-fit:contain, so EVERY icon —
 * regardless of native aspect ratio — renders inside an identical 120px square
 * (the lock fits letterboxed, the square icons fill it). 120px is larger than
 * round-1's 96px (Brandon: prod icons are bigger than 96) and sits comfortably
 * inside the ~290px card. Consistent icon box across all 4 cards is the
 * requirement; object-fit:contain prevents any aspect ratio from overflowing.
 *
 * Parent-class qualifier (0,2,0) is REQUIRED for the fixed height to hold:
 * Elementor's kit rule `.elementor img { height: auto }` (0,1,1) otherwise
 * beats a bare `.cinefi-product-intro-grid__card-icon` (0,1,0), which let the
 * tall lock SVG (62×75 native) compute height from width×aspect = 120×75/62 =
 * 145px (taller than the 120px square). The qualified selector wins the
 * cascade so `height: 120px` actually applies and all 4 icons render in an
 * identical 120px box. Same cascade-bypass pattern used on the heading rule. */
.cinefi-product-intro-grid .cinefi-product-intro-grid__card-icon {
  display: block;
  width: 120px;
  height: 120px;
  -o-object-fit: contain;
     object-fit: contain;
  flex-shrink: 0;
}
/* Card bold line — 18px base at weight 400; the WYSIWYG `<strong>`
 * segments carry the emphasis. Prod (QA rows 47/50, probed 2026-06-11)
 * renders these lines as text-editor widgets at 400 with inline
 * <strong> at 700: only the lead phrase is bold, the rest regular.
 * The previous container-level 700 made plain text bold AND pushed
 * the UA's `strong { font-weight: bolder }` to 900 — both wrong vs
 * live. `<sup>/<sub>` for footnote markers (e.g. APY¹). */
.cinefi-product-intro-grid__card-bold {
  font-family: var(--font-inter, Inter, sans-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #f5fffe;
}
.cinefi-product-intro-grid__card-bold p {
  margin: 0;
}
/* Card body line — 18px/400/-0.02em, centered, on-dark. Matches prod
 * card text widget (4cbf601). */
.cinefi-product-intro-grid__card-body {
  font-family: var(--font-inter, Inter, sans-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: -0.02em;
  color: #f5fffe;
}
.cinefi-product-intro-grid__card-body p {
  margin: 0;
}
/* === FOOTER CTA ROW === */
/* Centered microcopy above a centered "Get Started" button. */
.cinefi-product-intro-grid__footer-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.cinefi-product-intro-grid__cta-microcopy {
  font-family: var(--font-inter, Inter, sans-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: -0.02em;
  color: #f5fffe;
}
.cinefi-product-intro-grid__cta-microcopy p {
  margin: 0;
}
/* CTA button — consumes `.cinefi-btn-fill` CSS custom properties.
 * Prod button matches the utility defaults (92deg purple→teal, 300px wide,
 * 20px/500 font). Parent qualifier (0,2,0) for specificity parity. */
.cinefi-product-intro-grid .cinefi-product-intro-grid__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  min-width: 300px;
  min-height: 48px;
  padding-block: 12px;
  padding-inline: 24px;
  border: var(--btn-border, 0);
  border-radius: var(--btn-border-radius, 5px);
  background-image: var(--btn-bg-image);
  font-family: var(--font-inter, Inter, sans-serif);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  color: var(--btn-color);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    opacity 0.25s ease,
    box-shadow 0.25s ease;
}
.cinefi-product-intro-grid .cinefi-product-intro-grid__cta:hover,
.cinefi-product-intro-grid .cinefi-product-intro-grid__cta:focus-visible {
  opacity: 0.85;
  box-shadow: 0 2px 20px rgb(0 0 0 / 20%);
}
@media (width > 991px) {
  .cinefi-product-intro-grid .cinefi-product-intro-grid__inner {
    gap: 18px;
    padding-inline: 0;
  }

  .cinefi-product-intro-grid .cinefi-product-intro-grid__cards {
    gap: 15px;
    padding-block: 54px;
  }

  .cinefi-product-intro-grid .cinefi-product-intro-grid__card {
    height: 305px;
    min-height: 0;
    gap: 15px;
    justify-content: flex-start;
    padding: 0 55px 20px;
  }

  .cinefi-product-intro-grid .cinefi-product-intro-grid__card:nth-child(2) {
    gap: 24px;
    -webkit-padding-before: 9px;
            padding-block-start: 9px;
    padding-inline: 35px;
  }

  .cinefi-product-intro-grid .cinefi-product-intro-grid__card:nth-child(3) {
    -webkit-padding-before: 16px;
            padding-block-start: 16px;
    padding-inline: 54px;
  }

  .cinefi-product-intro-grid .cinefi-product-intro-grid__card:nth-child(4) {
    gap: 57px;
    -webkit-padding-before: 52px;
            padding-block-start: 52px;
    padding-inline: 52px;
  }

  .cinefi-product-intro-grid .cinefi-product-intro-grid__card:nth-child(1) .cinefi-product-intro-grid__card-icon {
    width: 167px;
    height: 167px;
  }

  .cinefi-product-intro-grid .cinefi-product-intro-grid__card:nth-child(2) .cinefi-product-intro-grid__card-icon {
    width: 166px;
    height: 166px;
  }

  .cinefi-product-intro-grid .cinefi-product-intro-grid__card:nth-child(3) .cinefi-product-intro-grid__card-icon {
    width: 150px;
    height: 150px;
  }

  .cinefi-product-intro-grid .cinefi-product-intro-grid__card:nth-child(4) .cinefi-product-intro-grid__card-icon {
    width: 62px;
    height: 75px;
  }

  .cinefi-product-intro-grid .cinefi-product-intro-grid__card-bold {
    line-height: 25.56px;
  }

  .cinefi-product-intro-grid .cinefi-product-intro-grid__card:nth-child(1) .cinefi-product-intro-grid__card-bold {
    width: 204px;
  }

  .cinefi-product-intro-grid .cinefi-product-intro-grid__card:nth-child(2) .cinefi-product-intro-grid__card-bold {
    width: 244px;
  }

  .cinefi-product-intro-grid .cinefi-product-intro-grid__card:nth-child(3) .cinefi-product-intro-grid__card-bold {
    width: 206px;
  }

  .cinefi-product-intro-grid .cinefi-product-intro-grid__card:nth-child(4) .cinefi-product-intro-grid__card-bold {
    width: 210px;
  }
}
/* =====================================================================
 * RESPONSIVE — ≤991px (tablet): card row becomes 2×2 (matches prod)
 * ===================================================================== */
@media (width <= 991px) {
  .cinefi-product-intro-grid__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* =====================================================================
 * RESPONSIVE — ≤768px (narrow tablet): card row stays 2×2, tighten padding
 * ===================================================================== */
@media (width <= 768px) {
  .cinefi-product-intro-grid__inner {
    padding-block: 72px;
    padding-inline: 20px;
  }

  .cinefi-product-intro-grid .cinefi-product-intro-grid__heading {
    font-size: 36px;
  }
}
/* =====================================================================
 * RESPONSIVE — ≤576px (mobile): prod keeps the 2×2 card grid
 * ===================================================================== */
@media (width <= 576px) {
  .cinefi-product-intro-grid {
    -webkit-margin-before: 65px;
            margin-block-start: 65px;
  }

  .cinefi-product-intro-grid__inner {
    padding-block: 72px;
    padding-inline: 18px;
    gap: 15px;
  }

  .cinefi-product-intro-grid__header {
    gap: 15px;
  }

  .cinefi-product-intro-grid .cinefi-product-intro-grid__heading {
    font-size: 24px;
  }

  .cinefi-product-intro-grid__body,
  .cinefi-product-intro-grid__card-bold,
  .cinefi-product-intro-grid__card-body {
    font-size: 14px;
    line-height: 25.56px;
  }

  .cinefi-product-intro-grid:not(.cinefi-product-intro-grid--savings)
    .cinefi-product-intro-grid__cta-microcopy {
    font-size: 16px;
    line-height: 25.56px;
    letter-spacing: -0.32px;
    word-spacing: -0.32px;
  }

  .cinefi-product-intro-grid__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    -webkit-padding-before: 54px;
            padding-block-start: 54px;
  }

  .cinefi-product-intro-grid__card {
    min-height: 301px;
    padding: 8px;
    gap: 15px;
    justify-content: space-evenly;
  }

  .cinefi-product-intro-grid__footer-cta {
    -webkit-margin-before: 64px;
            margin-block-start: 64px;
  }

  .cinefi-product-intro-grid .cinefi-product-intro-grid__card-icon {
    width: auto;
    max-width: 100%;
    height: auto;
    -o-object-fit: initial;
       object-fit: initial;
  }

  /* CTA button: full-width on mobile. */
  .cinefi-product-intro-grid .cinefi-product-intro-grid__cta {
    min-width: 0;
    width: 100%;
  }

  .cinefi-product-intro-grid--savings {
    -webkit-margin-before: 85px;
            margin-block-start: 85px;
  }

  .cinefi-product-intro-grid--savings .cinefi-product-intro-grid__inner {
    -webkit-padding-before: 144px;
            padding-block-start: 144px;
  }

  .cinefi-product-intro-grid--savings .cinefi-product-intro-grid__heading {
    line-height: 24px;
  }

  .cinefi-product-intro-grid--savings .cinefi-product-intro-grid__cards {
    -webkit-padding-before: 0;
            padding-block-start: 0;
  }

  .cinefi-product-intro-grid--savings .cinefi-product-intro-grid__card {
    min-height: 0;
    height: 277px;
  }

  .cinefi-product-intro-grid--savings .cinefi-product-intro-grid__footer-cta {
    gap: 15px;
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }

  .cinefi-product-intro-grid--savings .cinefi-product-intro-grid__cta {
    width: 300px;
    min-width: 300px;
    height: 48px;
    min-height: 48px;
    padding-block: 12px;
  }

  .cinefi-product-intro-grid:not(.cinefi-product-intro-grid--savings)
    .cinefi-product-intro-grid__footer-cta {
    gap: 15px;
  }

  .cinefi-product-intro-grid:not(.cinefi-product-intro-grid--savings)
    .cinefi-product-intro-grid__cta {
    width: 300px;
    min-width: 300px;
    height: 48px;
    min-height: 48px;
    padding-block: 12px;
    padding-inline: 24px;
  }
}
@media (width <= 390px) {
  .cinefi-product-intro-grid__card {
    min-height: 324px;
  }
}
/* Layout for the cinefi-disclosure-table widget. Renders the FFIEC-mandated
 * GLBA Privacy Notice "Reasons we share" 3-column disclosure grid as a
 * semantic <table>. Used on /privacy-policy/ §0.2.8.
 *
 * Phase H — privacy-policy page migration.
 * See disclosure-table-brief.md for architecture decisions.
 *
 * Visual treatment: prod-matched utility-document styling (verified via
 * computed-style probe of cinefi.com/privacy-policy/ 2026-06-01).
 * All rows transparent bg. No row dividers. 18px/400 uniform typography.
 * ~60/20/20 column split. Left-aligned all columns (matching prod's
 * text-align:start on all cells). Row padding 10px (matching prod's
 * per-row-container padding). At ≤390px reason column drops to 16px.
 *
 * PROD-DIVERGENCE note (2026-06-01) PARTIALLY RETRACTED 2026-06-11 (QA
 * sheet D9/D14): the 2026-06-01 probe missed that prod DOES render
 *   (a) hairline row dividers — 1px solid rgb(245 255 254 / 10%),
 *   (b) bold lead phrases in every reason cell (<strong>…</strong><br />),
 *   (c) bold column headers — Inter 24px/900 desktop, 18px/900 mobile,
 *       line-height 1 (prod renders them as h2 elements).
 * All three are now replicated. Still correct from the original note:
 * no header-row bg, no alternating row bgs, data cells 18px/400.
 *
 * Responsive (reworked 2026-06-11, QA sheet D9 + row 57): the table FITS
 * at every viewport, matching prod — at 390px prod wraps the two flag-column
 * headers and keeps all three columns visible. The previous min-width: 600px
 * + horizontal scroll hid the Yes/No columns off-viewport at mobile, which
 * users (and QA) read as missing compliance content. min-width now drops at
 * the kit mobile breakpoint. tabindex="0" on the scroll-wrapper is kept for
 * the residual sub-390 overflow case.
 *
 * Class naming: BEM with `cinefi-disclosure-table` block prefix.
 */
.cinefi-disclosure-table {
  /* Typography — prod-matched 2026-06-01, headers re-probed 2026-06-11 */
  --disc-table-font-family: inter, sans-serif;
  --disc-table-font-size: 18px; /* prod: 18px at desktop/tablet/tablet-narrow */
  --disc-table-font-size-mobile: 16px; /* prod: reason column 16px at ≤390px; flag cols stay 18px */
  --disc-table-line-height: 1.42; /* prod: 25.56px / 18px ≈ 1.42 */
  --disc-table-color: rgb(245 255 254); /* prod: rgb(245, 255, 254) — all cells uniform */
  --disc-table-font-weight: 400; /* prod: 400 — data rows */

  /* Column headers — prod renders them as h2: Inter 900, 24px desktop /
   * 18px mobile, line-height 1 (probed 2026-06-11, QA sheet D9 follow-up) */
  --disc-table-header-font-size: 24px;
  --disc-table-header-font-size-mobile: 18px;
  --disc-table-header-font-weight: 900;
  --disc-table-header-line-height: 1;

  /* Rows — no background; hairline top dividers (prod-matched 2026-06-11) */
  --disc-table-row-bg: transparent;
  --disc-table-row-divider: 1px solid rgb(245 255 254 / 10%); /* prod: rgba(245,255,254,.1) */

  /* Prod stacks rows as flex children: 10px row padding + 15px flex gap
   * (measured 2026-06-11) = 35px text-to-text with the hairline centered.
   * Our <table> collapses that into cell padding: 17.5px × 2 = 35px. */
  --disc-table-cell-padding-block: 17.5px;
  --disc-table-cell-padding-inline: 8px; /* small inline gap for readability within table */

  /* Column widths — reason column takes majority of space (~60/20/20) */
  --disc-table-reason-width: 60%;
  --disc-table-flag-width: 20%;

  /* Scroll wrapper focus ring */
  --disc-table-focus-outline: 2px solid rgb(0 201 201 / 70%);
  --disc-table-focus-outline-offset: 2px;

  /* Caption */
  --disc-table-caption-font-size: 13px;
  --disc-table-caption-color: rgb(245 255 254 / 70%);
  --disc-table-caption-margin-block-end: 0.5rem;

  width: 100%;
  font-family: var(--disc-table-font-family);
}
/* Optional caption — presentational <p> above the scroll-wrapper.
 * NOT a native <caption> element; does not affect AT table announcement. */
.cinefi-disclosure-table .cinefi-disclosure-table__caption {
  margin: 0 0 var(--disc-table-caption-margin-block-end);
  font-family: var(--disc-table-font-family);
  font-size: var(--disc-table-caption-font-size);
  color: var(--disc-table-caption-color);
}
/* Scroll wrapper — horizontal scroll at narrow viewports.
 * tabindex="0" always (N1 fix) so keyboard users can scroll when overflow
 * is active. The tab stop is cosmetic-only at wide viewports (no visible
 * action when no overflow) — accepted deviation per brief. */
.cinefi-disclosure-table__scroll-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cinefi-disclosure-table__scroll-wrapper:focus {
  outline: var(--disc-table-focus-outline);
  outline-offset: var(--disc-table-focus-outline-offset);
}
.cinefi-disclosure-table__scroll-wrapper:focus:not(:focus-visible) {
  outline: none;
}
/* Table — min-width prevents collapse below readable width at ≤390px.
 * No aria-label (B2 fix) — first <th scope="col"> carries context. */
.cinefi-disclosure-table__table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-family: var(--disc-table-font-family);
  font-size: var(--disc-table-font-size);
  line-height: var(--disc-table-line-height);
  color: var(--disc-table-color);
}
/* Column headers — thead row. Prod-matched 2026-06-11: no distinct bg,
 * bold heading typography (prod renders these as h2 — Inter 900,
 * 24px desktop / 18px mobile, line-height 1), left-aligned. */
.cinefi-disclosure-table .cinefi-disclosure-table__col-header {
  padding-block: var(--disc-table-cell-padding-block);
  padding-inline: var(--disc-table-cell-padding-inline);
  background-color: transparent;
  color: var(--disc-table-color);
  font-size: var(--disc-table-header-font-size);
  font-weight: var(--disc-table-header-font-weight);
  line-height: var(--disc-table-header-line-height);
  text-align: left;
  vertical-align: middle;
}
/* Column width distribution (~60/20/20) */
.cinefi-disclosure-table .cinefi-disclosure-table__col-header--reason {
  width: var(--disc-table-reason-width);
}
/* Flag column headers — same ~20% width */
.cinefi-disclosure-table .cinefi-disclosure-table__col-header--share,
.cinefi-disclosure-table .cinefi-disclosure-table__col-header--limit {
  width: var(--disc-table-flag-width);
}
/* Data rows — transparent bg + hairline divider above each row
 * (prod-matched 2026-06-11: 1px rgba(245,255,254,.1); the first row's
 * border-top doubles as the header/body separator prod shows).
 * Per Gotcha #17: scope :last-child to tbody to avoid stripping
 * header row's bottom border. */
.cinefi-disclosure-table .cinefi-disclosure-table__row {
  background-color: transparent;
  border-top: var(--disc-table-row-divider);
}
/* Row header — reason label cell (<th scope="row">).
 * Prod-matched: 18px/400/left-aligned/rgb(245,255,254). */
.cinefi-disclosure-table .cinefi-disclosure-table__row-header {
  padding-block: var(--disc-table-cell-padding-block);
  padding-inline: var(--disc-table-cell-padding-inline);
  font-weight: var(--disc-table-font-weight);
  font-size: var(--disc-table-font-size);
  text-align: left;
  vertical-align: middle;
  color: var(--disc-table-color);
}
/* Data cells — flag columns (Yes / No / We don't share).
 * Prod-matched: 18px/400/left-aligned (text-align:start on prod).
 * All uniform rgb(245,255,254) — prod shows no per-token color
 * differentiation. */
.cinefi-disclosure-table .cinefi-disclosure-table__cell {
  padding-block: var(--disc-table-cell-padding-block);
  padding-inline: var(--disc-table-cell-padding-inline);
  text-align: left;
  vertical-align: middle;
  font-weight: var(--disc-table-font-weight);
  font-size: var(--disc-table-font-size);
  color: var(--disc-table-color);
}
/* Token modifier classes — kept for semantic markup but no visual
 * differentiation on prod. All cells are uniform rgb(245,255,254). */
.cinefi-disclosure-table .cinefi-disclosure-table__cell--yes,
.cinefi-disclosure-table .cinefi-disclosure-table__cell--no,
.cinefi-disclosure-table .cinefi-disclosure-table__cell--we-dont-share {
  color: var(--disc-table-color);
}
/* Mobile — table FITS the viewport like prod (QA sheet D9 + row 57,
 * 2026-06-11): drop the min-width so all three columns stay visible;
 * prod wraps the flag-column headers at 390px. Reason column drops to
 * 16px (prod-verified); flag columns (Yes/No/We don't share) remain 18px.
 * Using ≤576px breakpoint to match Elementor kit's mobile breakpoint. */
@media (width <= 576px) {
  .cinefi-disclosure-table {
    padding-bottom: 72px;
  }

  .cinefi-disclosure-table__table {
    display: block;
    min-width: 0;
  }

  .cinefi-disclosure-table__table thead,
  .cinefi-disclosure-table__table tbody {
    display: block;
  }

  .cinefi-disclosure-table__table tr {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
  }

  .cinefi-disclosure-table__table thead tr {
    padding-bottom: 12px;
  }

  .cinefi-disclosure-table__table tbody tr {
    padding-bottom: 34px;
  }

  .cinefi-disclosure-table__table tbody tr:last-child {
    margin-bottom: 0;
  }

  .cinefi-disclosure-table .cinefi-disclosure-table__col-header,
  .cinefi-disclosure-table .cinefi-disclosure-table__row-header,
  .cinefi-disclosure-table .cinefi-disclosure-table__cell {
    display: block;
    padding: 0;
  }

  .cinefi-disclosure-table .cinefi-disclosure-table__col-header--reason,
  .cinefi-disclosure-table .cinefi-disclosure-table__row-header {
    flex: 0 0 var(--disc-table-reason-width);
    width: var(--disc-table-reason-width);
  }

  .cinefi-disclosure-table .cinefi-disclosure-table__col-header--share,
  .cinefi-disclosure-table .cinefi-disclosure-table__col-header--limit,
  .cinefi-disclosure-table .cinefi-disclosure-table__cell {
    flex: 0 0 var(--disc-table-flag-width);
    width: var(--disc-table-flag-width);
  }

  .cinefi-disclosure-table .cinefi-disclosure-table__row-header {
    font-size: var(--disc-table-font-size-mobile);
    line-height: 25.56px;
  }

  .cinefi-disclosure-table .cinefi-disclosure-table__col-header {
    font-size: var(--disc-table-header-font-size-mobile);
  }
}
/* Layout for the cinefi-feature-with-media widget — dark-background
 * 2-column section: left column = video-backed iPhone mockup, right
 * column = heading + lede + icon-list bullets + CTA.
 *
 * Used as §0.2 on /checking/ (post 4428) and /savings/ (post 4384).
 * Both instances share section ID 50209eb.
 *
 * Typography primitives (prod-measured values, probe 2026-06-01):
 *   - Heading: .cinefi-display-xl utility class, but prod renders 52px/900
 *     not 60px. Widget-scoped override sets --display-font-size: 52px and
 *     --display-letter-spacing: -0.65px to match prod (same pattern as
 *     SectionDividerHeading prod-override 2026-06-01; design-system class
 *     retained). Bullet labels probe-confirmed 22px/700/-0.44px on prod.
 *   - Lede / bullet-body: 18/400/25.56px/-0.36px, color
 *     rgba(245,255,254,0.9) — standard cinefi body, matching
 *     decorative-bg-feature-card + gradient-feature-promo.
 *   - Bullet label: bold (700), color #F5FFFE.
 *   - CTA: .cinefi-btn-gradient-outline utility (outline style — dark
 *     charcoal fill + silver gradient border). Distinct from the
 *     .cinefi-btn-fill used on sibling widgets.
 *
 * Layout values (based on established pattern; probe-confirm during QA):
 *   - Desktop 2-col: grid-template-columns 1fr 1fr at >=1025px.
 *   - Column gap: 24px (peer to decorative-bg-feature-card's 15px gap
 *     + wider content breathing room needed by the bullets stack).
 *   - Stacks to 1-col at <=1024px (Elementor tablet threshold — matches
 *     decorative-bg-feature-card pattern).
 *   - Media column goes below content at mobile (order: 2).
 *   - Section padding-block: 80px desktop / 48px mobile.
 *
 * B3 fix — prefers-reduced-motion: reduce hides the autoplay video.
 * The `poster` attribute on the <video> element provides the fallback
 * still image when motion is reduced (CSS display:none stops the video
 * from rendering entirely — more reliable than animation:none for video).
 *
 * Phase H — see feature-with-media-brief.md.
 */
/* ---------- Section shell ---------- */
.cinefi-feature-with-media {
  width: 100%;
  padding-block: 80px;
  background-color: #07131d;
  color: rgb(245 255 254 / 90%);
}
/* ---------- Centered header block (heading + lede) ----------
 * 2026-06-01: prod §0.2 renders the heading + subline as a SEPARATE
 * full-width CENTERED block ABOVE the media+bullets row (prior build
 * inlined them into the right content column, left-aligned). This block
 * holds them centered on top; the 2-col layout below holds media + bullets. */
.cinefi-feature-with-media__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
  max-width: 1310px;
  margin-inline: auto;
  margin-bottom: 48px;
  padding-inline: 24px;
  text-align: center;
}
/* ---------- 2-col grid ---------- */
.cinefi-feature-with-media__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  width: 100%;
  max-width: 1310px;
  margin-inline: auto;
  padding-inline: 24px;
}
/* Desktop: 2-col — media left, content right. >=1025px matches
 * Elementor's tablet breakpoint (same flip point as
 * decorative-bg-feature-card). */
@media (width >= 1025px) {
  .cinefi-feature-with-media__layout {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding-inline: 0;
  }
}
/* ---------- Media column ---------- */
/* Round 2 (2026-06-01): fixed 700px height to match prod's media column
 * (prod renders the phone video at 633×700 via object-fit:cover — it CROPS
 * the 1920×1080 source into a tall portrait frame). Round-1 left the video at
 * object-fit:contain which letterboxed the 16:9 source to only ~353px tall,
 * making §0.2 read as much smaller than prod. The fixed height + cover (below)
 * reproduces prod's tall phone. Height relaxes at mobile where the column
 * stacks. */
.cinefi-feature-with-media__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 700px;
  overflow: hidden;
}
@media (width <= 1024px) {
  .cinefi-feature-with-media__media {
    height: auto;
  }
}
/* Mobile: media column stacks BELOW content column (order: 2 pushes it
 * after the content stack without reordering the DOM). Content stays
 * order: 1 (default). Matches prod checking.md §0.2 description. */
@media (width <= 1024px) {
  .cinefi-feature-with-media__media {
    order: 2;
  }
}
/* Video fills the 700px-tall media column. Round 2 (2026-06-01):
 * object-fit:cover (prod parity — prod crops the 16:9 source into its tall
 * 633×700 portrait frame) replaces the prior contain (which letterboxed the
 * source to ~353px). height:100% fills the fixed-height column. The iPhone
 * bezel + UI are baked into the .mp4 asset. At mobile the column height is
 * auto, so the video falls back to its natural ratio via height:auto below. */
.cinefi-feature-with-media__video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (width <= 1024px) {
  .cinefi-feature-with-media__video {
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
  }
}
/* B3: prefers-reduced-motion — hide the autoplay video when the user
 * has requested reduced motion. The poster attribute on the <video>
 * tag provides the still fallback frame when the video is hidden. */
@media (prefers-reduced-motion: reduce) {
  .cinefi-feature-with-media__video {
    display: none;
  }
}
/* Static image (bg_type === 'image') — same sizing contract as the video. */
.cinefi-feature-with-media__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
/* ---------- Content column ---------- */
/* Now holds only the bullets + CTA (heading + lede moved to the centered
 * header above). Vertically center the bullets stack against the tall phone
 * media column. */
.cinefi-feature-with-media__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
}
/* ---------- Heading ---------- */
/* (0,2,0) specificity to beat Elementor kit h2 reset — same cascade-
 * bypass pattern as decorative-bg-feature-card + media-card-cta.
 *
 * Prod-divergence (2026-06-01): prod renders 52px/900/-0.65px, not
 * cinefi-display-xl's 60px/-2.4px. Override --display-* custom props
 * here so the utility class is retained for taxonomy but the actual
 * rendered values match prod. Same pattern used on SectionDividerHeading. */
.cinefi-feature-with-media .cinefi-feature-with-media__heading {
  --display-font-size: 52px;
  --display-font-weight: 900;
  --display-line-height: 1;
  --display-letter-spacing: -0.65px;

  margin: 0;
  font-size: var(--display-font-size);
  font-weight: var(--display-font-weight);
  line-height: var(--display-line-height);
  letter-spacing: var(--display-letter-spacing);
  color: #ebfffe;
}
/* Mobile: 36px (cinefi-display-xl default at <=576px already provides
 * this via the utility class; the widget rule re-declares it here to
 * be explicit and to allow per-widget deviation if probe shows otherwise.) */
@media (width <= 576px) {
  .cinefi-feature-with-media .cinefi-feature-with-media__heading {
    --display-font-size: 36px;

    font-size: 36px;
  }
}
/* ---------- Lede ---------- */
/* (0,2,0) specificity on the lede container to beat kit baseline.
 * Same body typography as decorative-bg-feature-card (probe-confirmed
 * 18/400/25.56px/-0.36px pattern). */
.cinefi-feature-with-media .cinefi-feature-with-media__lede {
  font-size: 18px;
  font-weight: 400;
  line-height: 25.56px;
  letter-spacing: -0.36px;
  color: rgb(245 255 254 / 90%);
}
.cinefi-feature-with-media .cinefi-feature-with-media__lede p {
  margin: 0 0 1em;
}
.cinefi-feature-with-media .cinefi-feature-with-media__lede p:last-child {
  margin-bottom: 0;
}
/* ---------- Bullets list ---------- */
/* Round 2 (2026-06-01): row-gap 16px → 32px. Prod's §0.2 bullet list is much
 * roomier — its 4 items span the full ~700px media-column height with ~105px
 * between item tops (label + description + generous gap). Ours was cramped at
 * 16px. 32px gives the matching airy vertical rhythm against the now-700px
 * media column. */
.cinefi-feature-with-media__bullets {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}
/* ---------- Bullet row ---------- */
.cinefi-feature-with-media__bullet {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}
/* Icon container — fixed 24px square, centered vertically with the label. */
.cinefi-feature-with-media__bullet-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 2px; /* Optical alignment with the label baseline */
}
.cinefi-feature-with-media__bullet-icon svg {
  width: 100%;
  height: 100%;
}
.cinefi-feature-with-media__bullet-icon img {
  display: block;
  width: 100%;
  height: auto;
}
/* ---------- Bullet text stack ---------- */
.cinefi-feature-with-media__bullet-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
/* Bullet label — bold, light color.
 * Prod-measured 2026-06-01: 22px/700/-0.44px, color rgb(245,255,254).
 * Updated from initial 16px estimate to match prod icon-list widget. */
.cinefi-feature-with-media__bullet-label {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.44px;
  color: #f5fffe;
}
/* Bullet body — same weight/size as lede but slightly smaller; uses
 * the semi-transparent body color. Round 2 (2026-06-01): font 15→16px,
 * line-height 1.5→1.6 for the roomier, more readable body copy prod shows
 * under each label. */
.cinefi-feature-with-media .cinefi-feature-with-media__bullet-body {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.2px;
  color: rgb(245 255 254 / 80%);
}
/* ---------- CTA button ---------- */
/* Reuses .cinefi-btn-gradient-outline utility. Widget-scoped rule
 * applies display and layout concerns and consumes the utility's
 * --btn-* custom properties via var(). */
.cinefi-feature-with-media .cinefi-feature-with-media__cta {
  --btn-border: 1px solid #f5fffe;
  --btn-padding-block: 20px;
  --btn-padding-inline: 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  max-width: 300px;
  padding-block: var(--btn-padding-block);
  padding-inline: var(--btn-padding-inline);
  border: var(--btn-border);
  border-radius: var(--btn-border-radius);
  background-color: #6e00ba;
  background-clip: var(--btn-bg-clip);
  background-image: var(--btn-bg-image);
  background-origin: var(--btn-bg-origin);
  font-family: Inter, sans-serif;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  color: var(--btn-color);
  text-align: center;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    box-shadow 0.25s ease;
}
.cinefi-feature-with-media .cinefi-feature-with-media__cta:hover,
.cinefi-feature-with-media .cinefi-feature-with-media__cta:focus-visible {
  opacity: 0.75;
  box-shadow: 0 2px 30px rgb(0 0 0 / 20%);
}
/* ---------- Mobile (<=768px) ---------- */
@media (width <= 768px) {
  .cinefi-feature-with-media {
    padding-block: 48px;
  }

  .cinefi-feature-with-media__layout {
    padding-inline: 20px;
  }
}
@media (width <= 576px) {
  .cinefi-feature-with-media {
    -webkit-margin-before: 65px;
            margin-block-start: 65px;
    padding-block: 72px;
  }

  .cinefi-feature-with-media__header {
    gap: 15px;
    margin-bottom: 25px;
    padding-inline: 18px;
  }

  .cinefi-feature-with-media__layout {
    gap: 25px;
    padding-inline: 18px;
  }

  .cinefi-feature-with-media .cinefi-feature-with-media__heading {
    letter-spacing: -0.45px;
  }

  .cinefi-feature-with-media .cinefi-feature-with-media__lede {
    font-size: 14px;
    line-height: 25.56px;
    letter-spacing: -0.28px;
  }

  .cinefi-feature-with-media__bullets {
    gap: 15px;
    padding-inline: 10px;
  }

  .cinefi-feature-with-media__bullet {
    gap: 15px;
  }

  .cinefi-feature-with-media__bullet-text {
    gap: 15px;
  }

  .cinefi-feature-with-media__bullet-label {
    font-size: 20px;
    font-weight: 700;
    line-height: 25.56px;
    letter-spacing: -0.4px;
  }

  .cinefi-feature-with-media .cinefi-feature-with-media__bullet-body {
    font-size: 14px;
    line-height: 25.56px;
    letter-spacing: -0.28px;
  }

  .cinefi-feature-with-media .cinefi-feature-with-media__cta {
    align-self: center;
    width: 300px;
    max-width: 300px;
    min-height: 58px;
    padding-block: 20px;
    padding-inline: 20px;
    border: 1px solid #f5fffe;
  }

  .cinefi-feature-with-media__media {
    height: 517px;
    min-height: 517px;
  }

  .cinefi-feature-with-media__video {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .cinefi-feature-with-media--savings {
    -webkit-margin-before: 18px;
            margin-block-start: 18px;
    padding-block: 0;
  }

  .cinefi-feature-with-media--savings .cinefi-feature-with-media__header {
    margin-bottom: 39px;
    padding-inline: 0;
  }

  .cinefi-feature-with-media--savings .cinefi-feature-with-media__heading {
    width: 100%;
    max-width: none;
  }

  .cinefi-feature-with-media--savings .cinefi-feature-with-media__layout {
    padding-inline: 0;
  }

  .cinefi-feature-with-media--savings .cinefi-feature-with-media__content {
    gap: 39px;
    padding: 10px;
  }

  .cinefi-feature-with-media--savings .cinefi-feature-with-media__bullets {
    gap: 39px;
    padding-inline: 0;
  }

  .cinefi-feature-with-media--savings .cinefi-feature-with-media__bullet {
    gap: 10px;
  }

  .cinefi-feature-with-media--savings .cinefi-feature-with-media__bullet-text {
    padding-left: 5px;
  }

  .cinefi-feature-with-media--savings .cinefi-feature-with-media__media {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
}
/* cinefi-section-divider-heading widget — centered large-display heading
 * used as a visual punctuation mark between dense product sections on
 * /checking/ (§0.3 "Your money, in motion.") and /savings/ (§0.3
 * "Goals met faster.").
 *
 * No bg, no body, no decorative chrome — the section has exactly
 * 2 descendants: <section> + <h2> (or h3/h4 via heading_tag control).
 *
 * Typography via the `cinefi-display-{size}` utility class. Default
 * tier is `lg`, but this widget overrides the lg custom properties to
 * match prod computed values — prod probe 2026-06-01 confirmed:
 *   desktop/tablet/tablet-narrow: 52px / 900 / 1.0 / -0.65px
 *   mobile (<=576px): 36px / 900 / 36px / -0.45px
 *
 * PROD DIVERGENCE SURFACED (contract rule #7): display-typography.css
 * comment said "lg (38px)" for this widget. Prod probe shows 52px/900.
 * We match prod (52px/900) by overriding --display-font-size and
 * --display-font-weight in widget scope. Decision logged in brief
 * "Build decisions" section and AGENTS-LOG 2026-06-01.
 *
 * Padding-block: prod section container uses 10px Elementor default
 * padding (top+bottom); vertical breathing room comes from page-level
 * row-gap, not widget padding. Widget carries 10px to match legacy.
 *
 * CRITICAL — padding double-stacking: migration script must zero out
 * the d46518a Elementor container's own padding so rhythm comes
 * entirely from this CSS + the page row-gap system.
 *
 * SectionDividerHeading.css
 */
/* Widget-scoped override of cinefi-display-lg custom properties.
 * Keeps design-system class on element; matches prod's 52px/900.
 * Specificity (0,2,0) beats utility class at (0,1,0). */
.cinefi-section-divider-heading .cinefi-display-lg {
  --display-font-size: 52px;
  --display-font-weight: 900;
  --display-line-height: 1;
  --display-letter-spacing: -0.65px;
}
@media (width <= 576px) {
  .cinefi-section-divider-heading .cinefi-display-lg {
    --display-font-size: 36px;
    --display-letter-spacing: -0.45px;
  }

}
.cinefi-section-divider-heading {
  /* Outer section — inherits page section bg (#07131D dark).
   * No background set here; Elementor container provides dark bg.
   * Padding-block 10px matches prod container's Elementor default.
   * Primary vertical breathing room from page-level row-gap. */
  display: block;
  padding-block: 10px;
  padding-inline: 0;
  background: transparent;
  text-align: center;

  /* Desktop inset — prod constrains the divider heading to 1180px
   * centered (130px off each viewport edge at 1440, probed 2026-06-11,
   * QA row 40); ours ran edge-to-edge. Mobile is genuinely full-bleed
   * on prod (heading spans 390 at 390) — max-width only bites at
   * viewports wider than 1180. */
  max-width: 1180px;
  margin-inline: auto;
}
@media (width <= 576px) {
  .cinefi-section-divider-heading {
    -webkit-padding-after: 46px;
            padding-block-end: 46px;
    -webkit-margin-after: 45px;
            margin-block-end: 45px;
  }

  .cinefi-section-divider-heading--goals-met-faster {
    padding-inline: 10px;
    -webkit-padding-after: 0;
            padding-block-end: 0;
    -webkit-margin-after: 0;
            margin-block-end: 0;
  }

  .elementor-widget-cinefi-feature-with-media + .elementor-widget-cinefi-section-divider-heading
    .cinefi-section-divider-heading:not(.cinefi-section-divider-heading--goals-met-faster) {
    margin-block: 65px;
  }
}
/* Heading — consumes cinefi-display-{size} custom properties set by the
 * utility class on the same element. (0,2,0) specificity beats kit
 * `.elementor-kit-6 h2` at (0,1,1) — same cascade-bypass pattern as
 * cinefi-prose-hero and cinefi-simple-cta-band heading rules.
 *
 * letter-spacing and word-spacing: var(--display-letter-spacing)
 * resolves to -0.65px at desktop, matching prod exactly.
 *
 * color: #F5FFFE confirmed rgb(245, 255, 254) on both prod instances
 * at all 4 viewports (probe 2026-06-01). */
.cinefi-section-divider-heading .cinefi-section-divider-heading__title {
  margin: 0;
  font-family: var(--font-inter, Inter, sans-serif);
  font-size: var(--display-font-size);
  font-weight: var(--display-font-weight);
  line-height: var(--display-line-height);
  letter-spacing: var(--display-letter-spacing);
  word-spacing: var(--display-letter-spacing); /* prod: word-spacing == letter-spacing */
  color: #f5fffe; /* confirmed: rgb(245, 255, 254) both prod instances */
  text-align: center;
}
/*
 * cinefi-faq-search-and-list — Self-contained FAQ knowledge-base
 * widget. Server-rendered search input + count + 8 grouped
 * accordions + 54 questions, with a vanilla-TS runtime for filter,
 * sort, and highlight that replaces prod's 9.9 KB inline mark.js
 * blob.
 *
 * Class contract — kit-controlled (preserved alongside our BEM
 * classes per AGENTS-LOG Gotcha #2):
 *   .faqContainer    .faqInput   .faqReset   .faqSearch
 *   .faqs-group      .accordion-faqs   .count-message
 *
 * Layout:
 *  - Widget root is a vertical flex column with consistent
 *    row-gap so the search → count → 8 category groups stack
 *    with predictable rhythm.
 *  - Question list `<ul>` is `display: flex` so the runtime's
 *    `style.order` rewrite reorders items by match-score on
 *    filter without DOM mutation.
 *
 * Dual chevron icons (B5):
 *  - `__summary-icon--opened`  → magenta #D464FF minus glyph
 *  - `__summary-icon--closed`  → cyan #00C9C9 plus glyph
 *  - CSS toggles via `details[open] .__summary-icon--closed
 *    { display: none }` + the symmetric rule for the open glyph.
 *
 * Highlight (`<mark class="cinefi-faq-mark">`):
 *  - Magenta accent at low alpha so the `<mark>` reads as a
 *    highlight rather than a background block. Contrast against
 *    the dark page bg passes WCAG AA for highlight text.
 *
 * Print (S7):
 *  - Hide search controls.
 *  - Force every `<details>` open so the printed page carries
 *    the full Q+A list, not just opened ones.
 *  - Strip `<mark>` background so highlights don't print as
 *    illegible washes.
 */
/* stylelint-disable selector-class-pattern -- kit-controlled classes
 * (faqContainer, faqInput, faqReset, faqSearch, accordion-faqs,
 * count-message, faqs-group) MUST stay verbatim per AGENTS-LOG #2. */
/* ---------- Widget root ---------- */
/* max-width boxes the FAQ content to match prod (~1240px centered) + the
 * faqs hero card (boxed_width 1245). Without it the widget spans the full
 * viewport edge-to-edge (Brandon flagged 2026-06-01: cards rendered at
 * width 1280/left 0 vs prod's 1220/left 30 — the "missing container").
 * The page's top-level container is full-bleed (padding-inline:0), so the
 * boxing has to live on the widget itself. */
.cinefi-faq-search-and-list {
  display: flex;
  flex-direction: column;
  row-gap: 32px;
  width: 100%;
  max-width: 1245px;
  margin-inline: auto;
  -webkit-padding-after: 30px;
          padding-block-end: 30px;
  scroll-margin-top: 96px;
}
/* Empty-state when no categories saved. */
.cinefi-faq-search-and-list--empty {
  padding: 24px;
}
.cinefi-faq-search-and-list__empty-state {
  margin: 0;
  color: rgb(245 255 254 / 70%);
  font-size: 16px;
}
/* ---------- Search input chrome ----------
 * Prod parity (probed cinefi.com/faqs 2026-06-01): full-width bar,
 * 10px radius, translucent-grey input field, and a solid purple→teal
 * gradient square BUTTON (60px) flush on the trailing edge carrying
 * the white magnifier. No left-side icon. */
.cinefi-faq-search-and-list__search.faqContainer {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 60px;
  border-radius: 10px;
  background: transparent;
}
.cinefi-faq-search-and-list__search-input.faqInput {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 60px;
  padding-block: 0;
  padding-inline: 16px;
  border: 0;
  border-radius: 10px 0 0 10px;
  background: rgb(210 210 210 / 30%);
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.36px;
  outline: none;
  transition: background 0.2s ease;
}
.cinefi-faq-search-and-list__search.faqContainer:focus-within
  .cinefi-faq-search-and-list__search-input.faqInput {
  background: rgb(210 210 210 / 40%);
}
.cinefi-faq-search-and-list__search-input.faqInput::-moz-placeholder {
  color: rgb(255 255 255 / 60%);
  opacity: 1;
}
.cinefi-faq-search-and-list__search-input.faqInput::placeholder {
  color: rgb(255 255 255 / 60%);
  opacity: 1;
}
/* Defensive: hide the native clear glyph for any future build
 * that flips back to `<input type="search">`. */
.cinefi-faq-search-and-list__search-input.faqInput::-webkit-search-cancel-button {
  -webkit-appearance: none;
          appearance: none;
}
/* Solid purple→teal gradient search button on the trailing edge. */
.cinefi-faq-search-and-list__search-icon.faqSearch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 0 10px 10px 0;
  background-image: linear-gradient(92deg, #026d8b -138.25%, #6e00ba 77.17%);
  color: #f5fffe;
}
.cinefi-faq-search-and-list__search-icon.faqSearch svg {
  width: 22px;
  height: 22px;
  fill: currentcolor;
}
/* Reset button sits just inside the gradient button, over the input. */
.cinefi-faq-search-and-list__search-reset.faqReset {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 76px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(0 0 0 / 25%);
  color: #f5fffe;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  transition:
    opacity 0.2s ease,
    background 0.2s ease;
  transform: translateY(-50%);
}
.cinefi-faq-search-and-list__search-reset.faqReset:hover,
.cinefi-faq-search-and-list__search-reset.faqReset:focus-visible {
  background: rgb(0 0 0 / 40%);
  opacity: 1;
}
.cinefi-faq-search-and-list__search-reset.faqReset[hidden] {
  display: none;
}
/* ---------- Count message ---------- */
.cinefi-faq-search-and-list__count.count-message {
  margin: 0;
  color: rgb(245 255 254 / 80%);
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}
/* ---------- Results container ---------- */
/* row-gap targets prod's uniform 230px visual gap between category
 * groups at every width (probed 2026-06-12: ours composed to ~106 via
 * 48 row-gap + header + group gap; prod measures 230/230/230 at
 * 1440/768/390 — the dominant term of the faqs page-height shortfall
 * alongside the mobile summary padding below). */
.cinefi-faq-search-and-list__results {
  display: flex;
  flex-direction: column;
  row-gap: 172px;
}
/* ---------- Category group ---------- */
.cinefi-faq-search-and-list__group.faqs-group {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}
/* Group header row — title left, "Back to top" link right (prod
 * renders an Elementor button top-right of each category section). */
.cinefi-faq-search-and-list__group-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.cinefi-faq-search-and-list .cinefi-faq-search-and-list__group-title {
  --display-font-size: 32px;
  --display-font-weight: 700;
  --display-line-height: 32px;
  --display-letter-spacing: -0.32px;

  margin: 0;
  color: #f5fffe;
  font-family: Inter, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.32px;
  scroll-margin-top: 96px;
}
/* ---------- Back-to-top link ----------
 * Scoped under the widget root so the rest-state white beats the
 * global theme anchor colour (cyan #00c9c9), matching prod's white
 * "Back to top" button text. */
.cinefi-faq-search-and-list .cinefi-faq-search-and-list__back-to-top {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  -webkit-padding-after: 4px;
          padding-block-end: 4px;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.cinefi-faq-search-and-list .cinefi-faq-search-and-list__back-to-top:hover,
.cinefi-faq-search-and-list .cinefi-faq-search-and-list__back-to-top:focus-visible {
  color: #00c9c9;
}
.cinefi-faq-search-and-list__back-to-top-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* ---------- Questions list ---------- */
.cinefi-faq-search-and-list__questions.accordion-faqs {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cinefi-faq-search-and-list__question-wrap {
  list-style: none;
}
/* ---------- Per-question card `<details>` ----------
 * Prod parity (probed cinefi.com/faqs 2026-06-01):
 *  - bordered, 10px-radius card; 1px cyan #00c9c9 border closed
 *  - flat #07131d fill closed
 *  - OPEN: 1px teal #026d8b border + a 93deg teal→dark gradient fill */
.cinefi-faq-search-and-list__question {
  border: 1px solid #00c9c9;
  border-radius: 10px;
  background: #07131d;
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.cinefi-faq-search-and-list__question[open] {
  border-color: #026d8b;
  background-image: linear-gradient(93deg, #026d8b 2.54%, #07131d 36.94%);
}
.cinefi-faq-search-and-list__summary {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding: 32px;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.66px;
  cursor: pointer;
  list-style: none;
}
/* WebKit drops the default disclosure triangle when `list-style: none`
 * is set on `<summary>`, but Firefox needs the explicit marker rule. */
.cinefi-faq-search-and-list__summary::-webkit-details-marker {
  display: none;
}
.cinefi-faq-search-and-list__summary::marker {
  content: '';
}
.cinefi-faq-search-and-list__summary:focus-visible {
  outline: 2px solid var(--cinefi-color-primary, #026d8b);
  outline-offset: 2px;
}
.cinefi-faq-search-and-list__summary-text {
  flex: 1 1 auto;
}
/* ---------- Dual circled +/- icons (B5) ----------
 * Prod renders a 36×36 outlined circle (cyan plus closed / magenta
 * minus open). The SVGs carry their own circle + stroke; the wrap
 * just reserves the 36px box. */
.cinefi-faq-search-and-list__summary-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}
.cinefi-faq-search-and-list__summary-icon--opened,
.cinefi-faq-search-and-list__summary-icon--closed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
/* stylelint-disable no-descending-specificity */
.cinefi-faq-search-and-list__summary-icon--opened svg,
.cinefi-faq-search-and-list__summary-icon--closed svg {
  width: 100%;
  height: 100%;
}
/* stylelint-enable no-descending-specificity */
/* Show the OPEN (minus, magenta) glyph only when the interactive
 * summary state is expanded. The runtime keeps `aria-expanded` in
 * sync immediately, even while the `<details>` height is animating. */
.cinefi-faq-search-and-list__summary[aria-expanded='false']
  .cinefi-faq-search-and-list__summary-icon--opened {
  display: none;
}
/* Show the CLOSED (plus, cyan) glyph only when details are collapsed. */
.cinefi-faq-search-and-list__summary[aria-expanded='true']
  .cinefi-faq-search-and-list__summary-icon--closed {
  display: none;
}
/* ---------- Answer body ----------
 * Sits inside the open card below the 32px-padded summary; the
 * summary already supplies the top gap, so the answer only needs
 * side + bottom padding to align with prod's card inset. */
.cinefi-faq-search-and-list__answer {
  padding-block: 0 32px;
  padding-inline: 32px;
  color: rgb(255 255 255 / 90%);
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.36px;
}
.cinefi-faq-search-and-list__answer p {
  margin-block: 0 12px;
}
.cinefi-faq-search-and-list__answer p:last-child {
  -webkit-margin-after: 0;
          margin-block-end: 0;
}
.cinefi-faq-search-and-list .cinefi-faq-search-and-list__answer a {
  color: #00c9c9;
  text-decoration: none;
}
.cinefi-faq-search-and-list .cinefi-faq-search-and-list__answer a:hover,
.cinefi-faq-search-and-list .cinefi-faq-search-and-list__answer a:focus-visible {
  color: #d464ff;
  text-decoration: none;
}
.cinefi-faq-search-and-list__answer ul,
.cinefi-faq-search-and-list__answer ol {
  margin-block: 0 12px;
  -webkit-padding-start: 20px;
          padding-inline-start: 20px;
}
/* ---------- Highlight `<mark>` ---------- */
mark.cinefi-faq-mark {
  padding: 0 2px;
  border-radius: 2px;
  background: rgb(212 100 255 / 35%);
  color: inherit;
}
/* ---------- Editor preview notice (B10) ---------- */
.cinefi-faq-search-and-list--editor-preview .cinefi-faq-search-and-list__editor-notice {
  margin: 0;
  padding: 16px;
  border-radius: 8px;
  background: rgb(245 255 254 / 5%);
  color: rgb(245 255 254 / 70%);
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}
/* ---------- Group + question `[hidden]` state ---------- */
.cinefi-faq-search-and-list__group[hidden],
.cinefi-faq-search-and-list__question[hidden] {
  display: none;
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cinefi-faq-search-and-list__question,
  .cinefi-faq-search-and-list__search.faqContainer,
  .cinefi-faq-search-and-list__search-reset.faqReset {
    transition: none;
  }
}
/* ---------- Responsive ---------- */
@media (width <= 768px) {
  .cinefi-faq-search-and-list {
    row-gap: 24px;
  }

  .cinefi-faq-search-and-list__results {
    row-gap: 176px;
  }

  .cinefi-faq-search-and-list__group.faqs-group {
    row-gap: 16px;
  }

  /* No summary overrides at mobile — prod keeps the question chrome at
   * desktop values at EVERY width: 32px padding, 36px icon, and the
   * 22px/700 question font (prod puts 22px on an inner title-text div;
   * its summary wrapper computes 18px, which misled an earlier probe —
   * verified 2026-06-12 by walking the descendant chain at 390). The
   * earlier 20px-padding/28px-icon/18px-font overrides made all 54
   * items shorter and wrap one line fewer than prod. */

  .cinefi-faq-search-and-list__answer {
    padding-block: 0 20px;
    padding-inline: 20px;
    font-size: 16px;
  }
}
@media (width <= 576px) {
  /* The group header wraps taller at phone widths, so the same 176px
   * row-gap overshoots prod's uniform 230px group seam (268 measured
   * at 390); tighten to land 230. */
  .cinefi-faq-search-and-list__results {
    row-gap: 138px;
  }
}
@media (width <= 576px) {
  /* Mobile content inset — prod insets the search/list content ~20px
   * from the viewport (page container provides 10px; the widget adds
   * the rest). Probed 2026-06-11, QA sheet row 9: prod search row at
   * x=20, ours sat at the page padding edge (x=10). */
  .cinefi-faq-search-and-list {
    row-gap: 40px;
    padding-inline: 10px;
    -webkit-margin-before: 10px;
            margin-block-start: 10px;
  }

  .cinefi-faq-search-and-list__search.faqContainer {
    height: 60px;
  }

  .cinefi-faq-search-and-list__search-input.faqInput {
    height: 60px;
    padding-block: 8px;
    padding-inline: 12px;
    font-size: 16px;
    line-height: 25.56px;
    letter-spacing: normal;
  }

  .cinefi-faq-search-and-list__search-icon.faqSearch {
    width: 60px;
    height: 60px;
  }

  .cinefi-faq-search-and-list__search-reset.faqReset {
    inset-inline-end: 72px;
  }

  .cinefi-faq-search-and-list__count.count-message {
    -webkit-margin-before: 43px;
            margin-block-start: 43px;
    color: #f5fffe;
    font-size: 18px;
    line-height: 25.56px;
  }

  .cinefi-faq-search-and-list__group.faqs-group {
    row-gap: 12px;
  }

  .cinefi-faq-search-and-list__group-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .cinefi-faq-search-and-list .cinefi-faq-search-and-list__group-title {
    width: 100%;
  }

  .cinefi-faq-search-and-list__questions.accordion-faqs {
    padding-inline: 10px;
  }

  .cinefi-faq-search-and-list .cinefi-faq-search-and-list__back-to-top {
    justify-content: flex-end;
    width: 100%;
    -webkit-padding-after: 0;
            padding-block-end: 0;
    -webkit-padding-end: 27px;
            padding-inline-end: 27px;
    font-size: 16px;
  }

  .cinefi-faq-search-and-list__answer {
    -webkit-padding-after: 12px;
            padding-block-end: 12px;
    padding-inline: 12px;
    font-size: 16px;
    line-height: 25.56px;
    letter-spacing: -0.32px;
  }

  .cinefi-faq-search-and-list__answer ul,
  .cinefi-faq-search-and-list__answer ol {
    -webkit-padding-start: 40px;
            padding-inline-start: 40px;
    list-style-type: disc;
  }
}
/* ---------- Print (S7) ---------- */
@media print {
  .cinefi-faq-search-and-list__search,
  .cinefi-faq-search-and-list__count,
  .cinefi-faq-search-and-list__back-to-top {
    display: none;
  }

  /* Strip the carded gradient/border so the printed page is legible
   * dark-on-white rather than a teal wash. */
  .cinefi-faq-search-and-list__question,
  .cinefi-faq-search-and-list__question[open] {
    border-color: rgb(0 0 0 / 30%) !important;
    background: none !important;
  }

  /* Force every `<details>` open so the printed page carries the
   * full answer text. Setting `display: block` on the answer
   * wrapper is the cross-browser equivalent of `[open]` since the
   * `open` attribute can't be mutated from CSS. */
  .cinefi-faq-search-and-list__question > *:not(summary) {
    display: block !important;
  }

  .cinefi-faq-search-and-list__summary-icon {
    display: none;
  }

  mark.cinefi-faq-mark {
    background: transparent !important;
    color: inherit !important;
  }
}
.screen-reader-text,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: var(--cinefi-z-overlay);
  padding: 0.5rem 1rem;
  background: var(--cinefi-color-primary);
  color: var(--cinefi-color-text);
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}
:focus-visible {
  outline: 2px solid var(--cinefi-color-primary);
  outline-offset: 2px;
}
/* Display-typography utility classes — visual heading size, decoupled
 * from semantic heading tag (h1-h4). Widgets pair a `heading_tag`
 * control (semantic) with a `heading_size` control (visual) so editors
 * can pick both independently — e.g., an h2 element rendered at md
 * size for a subsection that should still appear in the document
 * outline as a section, or an h3 element rendered at xl size for
 * visual emphasis without disrupting the heading hierarchy.
 *
 * Scale chosen to match values measured across the cinefi.com legacy:
 *
 *   xl (60/900/-2.4)  — primary section heading. Used on home §1, §3,
 *                       §5, §7, §2 across the site.
 *   lg (38/800)       — kit h2; used on smaller section headings like
 *                       the section-divider on checking/savings §0.3.
 *   md (32/900/-0.4)  — feature-card subsection heading. Used on
 *                       checking/savings §0.4–§0.7 (8 instances of
 *                       the borde-fresa cards). Distinct weight (900,
 *                       not 700) and letter-spacing (-0.4px, not -0.9)
 *                       from the kit h3 default — this is the legacy's
 *                       per-widget custom typography.
 *   sm (22/400)       — kit Lead; used on sub-headings, lede text.
 *
 * IMPLEMENTATION — these classes set CSS custom properties; widgets
 * consume them via `var(--display-font-size)` etc. in their own
 * widget-scoped heading rule. This pattern is required because
 * Elementor's kit emits `.elementor h2 { font-size: 38px }` at
 * specificity (0,1,1), which beats a plain `.cinefi-display-xl`
 * (0,1,0). Custom properties are just values — they cascade into the
 * widget rule's `var()` call regardless of selector specificity.
 *
 * Mobile-responsive scaling stays per-widget. The xl→mobile mapping
 * isn't uniform — home §1 goes 60→38, home §5 goes 60→24 — so each
 * widget overrides at its own mobile breakpoint by setting
 * `--display-font-size` (and any other vars it wants) inside its own
 * mobile media query.
 *
 * Widget pattern:
 *
 *   .cinefi-foo .cinefi-foo__heading {
 *     font-size: var(--display-font-size);
 *     font-weight: var(--display-font-weight);
 *     line-height: var(--display-line-height);
 *     letter-spacing: var(--display-letter-spacing);
 *     color: var(--heading-color);
 *   }
 *
 *   @media (width <= 576px) {
 *     .cinefi-foo .cinefi-foo__heading {
 *       --display-font-size: 36px;  / * mobile override per widget * /
 *     }
 *   }
 */
.cinefi-display-xl {
  --display-font-size: 60px;
  --display-font-weight: 900;
  --display-line-height: 1;
  --display-letter-spacing: -2.4px;
}
.cinefi-display-lg {
  --display-font-size: 38px;
  --display-font-weight: 800;
  --display-line-height: 1;
  --display-letter-spacing: -1.14px;
}
.cinefi-display-md {
  --display-font-size: 32px;
  --display-font-weight: 900;
  --display-line-height: 1;

  /* `-0.0125em` resolves to -0.4px at 32px (desktop) and -0.3px at
   * 24px (mobile), matching the legacy borde-fresa heading widget
   * which uses em-based letter-spacing. The other display classes
   * use fixed px because their legacy widgets do — only md scales. */
  --display-letter-spacing: -0.0125em;
}
.cinefi-display-sm {
  --display-font-size: 22px;
  --display-font-weight: 400;
  --display-line-height: 1.42;
  --display-letter-spacing: -0.66px;
}
/* Mobile-responsive scaling per display class. Widgets that need
 * non-standard mobile scaling can still override
 * `--display-font-size` in their own widget CSS at the same
 * breakpoint — those overrides win because widget rules carry higher
 * specificity (e.g., `.cinefi-foo .cinefi-foo__heading` is 0,2,0 vs
 * `.cinefi-display-xl` at 0,1,0). */
@media (width <= 576px) {
  .cinefi-display-xl {
    --display-font-size: 36px;
  }

  .cinefi-display-lg {
    --display-font-size: 28px;
  }

  .cinefi-display-md {
    --display-font-size: 24px;
  }

  .cinefi-display-sm {
    --display-font-size: 18px;
  }
}
/* Button-style utility classes — visual button treatment, decoupled
 * from widget-specific layout. Widgets pair their own button class
 * (e.g., `.cinefi-flat-cta__button`) with one of the
 * `.cinefi-btn-{style}` utility classes to pick the visual style.
 *
 * Two main styles cover ~27 of the 46 buttons across the site:
 *
 *   fill              — kit default: teal→purple gradient fill, no
 *                       border, white text. Used for primary CTAs:
 *                       "Get Started", "Download CineFi App",
 *                       "Learn More", "Join CineFi Today". Appears
 *                       across home, checking, savings, about,
 *                       roll-sound, faqs (10 instances).
 *
 *   gradient-outline  — legacy `.gradient-button` class: dark
 *                       charcoal interior + silver-gradient border.
 *                       Used for secondary CTAs on product pages —
 *                       "Open a Cash Account", "Open a Savings
 *                       Account", "Get Started Today!", etc. (17
 *                       instances on checking + savings).
 *
 * IMPLEMENTATION — utility classes set CSS custom properties
 * (`--btn-*`); widget-scoped button rules consume them via `var()`.
 * Same cascade-bypass pattern as display-typography: kit-emitted
 * `.elementor-button` rules (specificity 0,1,1) outrank a flat
 * `.cinefi-btn-fill` rule (0,1,0), but custom properties cascade by
 * value through the widget rule's `var()` regardless of selector
 * specificity.
 *
 * Mobile-responsive scaling (font 18 / 20 → 16) is baked into each
 * utility class so widgets don't have to repeat the override.
 *
 * Widget pattern:
 *
 *   .cinefi-foo .cinefi-foo__button {
 *     padding-block: var(--btn-padding-block);
 *     padding-inline: var(--btn-padding-inline);
 *     border: var(--btn-border);
 *     border-radius: var(--btn-border-radius);
 *     background-image: var(--btn-bg-image);
 *     background-clip: var(--btn-bg-clip);
 *     background-origin: var(--btn-bg-origin);
 *     font-size: var(--btn-font-size);
 *     font-weight: var(--btn-font-weight);
 *     letter-spacing: var(--btn-letter-spacing);
 *     line-height: var(--btn-line-height);
 *     color: var(--btn-color);
 *   }
 */
/* ---------- Primary fill ---------- */
.cinefi-btn-fill {
  --btn-font-size: 20px;
  --btn-font-weight: 500;
  --btn-letter-spacing: -0.54px;
  --btn-line-height: 20px;
  --btn-color: #fff;
  --btn-padding-block: 18px;
  --btn-padding-inline: 32px;
  --btn-border-radius: 5px;
  --btn-border: 0;
  --btn-bg-image: linear-gradient(92deg, rgb(2 109 139) -138.25%, rgb(110 0 186) 77.17%);
  --btn-bg-clip: padding-box;
  --btn-bg-origin: padding-box;
}
@media (width <= 576px) {
  .cinefi-btn-fill {
    --btn-font-size: 16px;
    --btn-line-height: 16px;
  }
}
/* ---------- Secondary gradient-outline ----------
 * Replicates the legacy `.gradient-button` rendering exactly: 2-layer
 * background with charcoal fill clipped to padding-box and silver
 * gradient clipped to border-box. The visible "border" is the silver
 * gradient covering a transparent 1px border. */
.cinefi-btn-gradient-outline {
  --btn-font-size: 18px;
  --btn-font-weight: 500;
  --btn-letter-spacing: -0.54px;
  --btn-line-height: 18px;
  --btn-color: #fff;
  --btn-padding-block: 20px;
  --btn-padding-inline: 30px;
  --btn-border-radius: 5px;

  /* 3px transparent border — the visible "frame" is the silver
   * gradient on `border-box`, which fills the border area. The
   * legacy `.gradient-button` rule uses 3px (not 1px) so the visible
   * frame is thicker; match that to avoid a 4px height/width drift
   * vs the legacy. Color doesn't matter (covered by bg). */
  --btn-border: 3px solid transparent;
  --btn-bg-image:
    linear-gradient(96deg, #1e2a33 18.64%, #07131d 64.56%),
    linear-gradient(90deg, #d2d2d2 0%, #6c6c6c 100%);
  --btn-bg-clip: padding-box, border-box;
  --btn-bg-origin: padding-box, border-box;
}
@media (width <= 576px) {
  .cinefi-btn-gradient-outline {
    --btn-font-size: 16px;
    --btn-line-height: 16px;
  }
}