/* ------------------------------------------------------------------
   Hero module — ALL style variants live here (Standard + Product /
   Campaign / Campaign with CTAs / Content / Minimal / Showcase + Proof banner). Do not put hero
   layout rules back in theme-overrides / TCS-theme-overrides / _default-modules.
   Type, container, and side padding stay on HubDB + global theme tokens.
   Proof banner uses legacy banner surface classes; brand tokens stay in theme-overrides.
   ------------------------------------------------------------------ */

/* Proof banner — vertical alignment within min-height banner */
.Hero--proof-banner.IRVHeroSection.irv-hero-valign-top { align-items: flex-start; }
.Hero--proof-banner.IRVHeroSection.irv-hero-valign-center { align-items: center; }
.Hero--proof-banner.IRVHeroSection.irv-hero-valign-bottom { align-items: flex-end; }

/* Clear floating TCS header (absolute). Non-standard variants use pt80,
   which alone sits under the nav — bump top padding past the header. */
.TCSHeroSection.Hero--product.pt80,
.TCSHeroSection.Hero--campaign-layout.pt80,
.TCSHeroSection.Hero--campaign-layout.pt80,
.TCSHeroSection.Hero--content.pt80,
.TCSHeroSection.Hero--minimal.pt80,
.TCSHeroSection.Hero--showcase.pt80 {
  padding-top: 180px !important;
}

@media (max-width: 1024px) {
  .TCSHeroSection.Hero--product.pt80,
  .TCSHeroSection.Hero--campaign-layout.pt80,
  .TCSHeroSection.Hero--content.pt80,
  .TCSHeroSection.Hero--minimal.pt80,
  .TCSHeroSection.Hero--showcase.pt80 {
    padding-top: 160px !important;
  }
}

@media (max-width: 1024px) {
  .TCSHeroSection.baseModuleStyle {
    background-position: 80% top !important;
  }
}

@media (max-width: 767px) {
  .TCSHeroSection.Hero--product.pt80,
  .TCSHeroSection.Hero--campaign-layout.pt80,
  .TCSHeroSection.Hero--content.pt80,
  .TCSHeroSection.Hero--minimal.pt80,
  .TCSHeroSection.Hero--showcase.pt80 {
    padding-top: 170px !important;
  }

  .TCSHeroSection.baseModuleStyle {
    background-position: right top !important;
  }
}

/* Campaign landing (Figma 750-20832): logo-only header on the hero photo —
   skip the full-nav pt80 + 180px clearance; nudge copy below the logo only. */
.body-container--campaign-landing .TCSHeroSection.Hero--campaign-layout,
.body-container--campaign-landing .TCSHeroSection.Hero--campaign-layout,
.page-campaign-landing .TCSHeroSection.Hero--campaign-layout,
.page-campaign-landing .TCSHeroSection.Hero--campaign-layout {
  padding-top: 0 !important;
}

/* Figma 750-20832: form card top ~222px; copy eyebrow ~241px (19px below form row). */
.body-container--campaign-landing .TCSHeroSection.Hero--campaign-layout .content-wrapper,
.page-campaign-landing .TCSHeroSection.Hero--campaign-layout .content-wrapper, .page-campaign-landing .TCSHeroSection.Hero--campaign-layout .content-wrapper{
  padding-top: 222px;
}

.body-container--campaign-landing .TCSHeroSection.Hero--campaign-layout:has(.HeroFormCard) .TCSHeroInSec,
.page-campaign-landing .TCSHeroSection.Hero--campaign-layout:has(.HeroFormCard) .TCSHeroInSec, .page-campaign-landing .TCSHeroSection.Hero--campaign-layout:has(.HeroFormCard) .TCSHeroInSec{
  padding-top: 19px;
}

/* Figma 760-7423 (1024 tablet): form ~110px, eyebrow ~237px. */
@media (max-width: 1024px) {
  .body-container--campaign-landing .TCSHeroSection.Hero--campaign-layout .content-wrapper,
  .page-campaign-landing .TCSHeroSection.Hero--campaign-layout .content-wrapper, .page-campaign-landing .TCSHeroSection.Hero--campaign-layout .content-wrapper{
    padding-top: 110px;
  }

  .body-container--campaign-landing .TCSHeroSection.Hero--campaign-layout:has(.HeroFormCard) .TCSHeroInSec,
  .page-campaign-landing .TCSHeroSection.Hero--campaign-layout:has(.HeroFormCard) .TCSHeroInSec, .page-campaign-landing .TCSHeroSection.Hero--campaign-layout:has(.HeroFormCard) .TCSHeroInSec{
    padding-top: 127px;
  }
}

/* Figma 760-7486 (768 small tablet): form ~117px, eyebrow ~210px. */
@media (max-width: 768px) {
  .body-container--campaign-landing .TCSHeroSection.Hero--campaign-layout .content-wrapper,
  .page-campaign-landing .TCSHeroSection.Hero--campaign-layout .content-wrapper, .page-campaign-landing .TCSHeroSection.Hero--campaign-layout .content-wrapper{
    padding-top: 117px;
  }

  .body-container--campaign-landing .TCSHeroSection.Hero--campaign-layout:has(.HeroFormCard) .TCSHeroInSec,
  .page-campaign-landing .TCSHeroSection.Hero--campaign-layout:has(.HeroFormCard) .TCSHeroInSec, .page-campaign-landing .TCSHeroSection.Hero--campaign-layout:has(.HeroFormCard) .TCSHeroInSec{
    padding-top: 93px;
  }
}

/* Figma 760-7540 (375 mobile): stacked copy then form; eyebrow ~143px. */
@media (max-width: 767px) {
  .body-container--campaign-landing .TCSHeroSection.Hero--campaign-layout .content-wrapper,
  .page-campaign-landing .TCSHeroSection.Hero--campaign-layout .content-wrapper, .page-campaign-landing .TCSHeroSection.Hero--campaign-layout .content-wrapper{
    padding-top: 143px;
  }

  .body-container--campaign-landing .TCSHeroSection.Hero--campaign-layout:has(.HeroFormCard) .TCSHeroInSec,
  .page-campaign-landing .TCSHeroSection.Hero--campaign-layout:has(.HeroFormCard) .TCSHeroInSec, .page-campaign-landing .TCSHeroSection.Hero--campaign-layout:has(.HeroFormCard) .TCSHeroInSec{
    padding-top: 0;
  }
}

/* ------------------------------------------------------------------
   Standard layout (moved from theme-overrides + _default-modules)
   Breakpoints (project SoT): 1440 / 1024 / 768 / 375.
   Figma Standard responsive image (layout only):
   - Tablet grid 760:6537 + small tablet 760:6563 → side image stays right
   - Mob grid 760:6587 → image stacks below copy (not full-bleed behind)
   ------------------------------------------------------------------ */

.TCSHeroSection.Hero--standard .TCSHeroInSec {
  max-width: 802px;
  width: 100%;
  position: relative;
  z-index: 3;
}

.TCSHeroSection.Hero--standard .TCSHeroInSec .TCSHeroContent {
  max-width: 770px;
  width: 100%;
}

.TCSHeroSection.Hero--standard .TCSHeroImage {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 630px;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.TCSHeroSection.Hero--standard .TCSHeroImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.TCSHeroSection.Hero--standard:before {
  content: '';
  position: absolute;
  width: 1165px;
  height: 460px;
  top: 0;
  mix-blend-mode: Lighten;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

/* Leave a clear lane for the absolute right image (50% alone still collides). */
@media (max-width: 1440px) {
  .TCSHeroSection.Hero--standard .TCSHeroInSec {
    max-width: min(50%, calc(100% - 660px));
  }
}

@media (max-width: 1280px) {
  .TCSHeroSection.Hero--standard .TCSHeroImage {
    max-width: 480px;
  }

  .TCSHeroSection.Hero--standard .TCSHeroInSec {
    max-width: calc(100% - 504px);
  }
}

/* Desktop CTAs stay in a row. Tablet/mobile stack below — see style guide
   breakpoints: Desktop ≥1024 · Tablet 768–1023 · Mobile ≤767. */
.TCSHeroSection.Hero--standard .TCSHeroCTA {
  flex-wrap: nowrap;
  align-items: stretch;
}

.TCSHeroSection.Hero--standard .TCSHeroCTA .cta-section {
  flex: 0 1 auto;
  min-width: 0;
}

/* Tablet grid (~1024 / style-guide 768–1023): keep side image; narrow lanes. */
@media (max-width: 1023px) {
  .TCSHeroSection.Hero--standard .TCSHeroImage {
    display: block;
    max-width: 40%;
  }

  .TCSHeroSection.Hero--standard .TCSHeroInSec {
    max-width: calc(60% - 20px);
  }

  .TCSHeroSection.Hero--standard .TCSHeroInSec .TCSHeroContent {
    max-width: 100%;
  }

  /* Stack CTAs; width = widest label (not full copy column). */
  .TCSHeroSection.Hero--standard .TCSHeroCTA {
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    width: max-content;
    max-width: 100%;
    gap: 12px;
  }

  .TCSHeroSection.Hero--standard .TCSHeroCTA .cta-section {
    flex: none;
    width: 100%;
    max-width: none;
  }

  .TCSHeroSection.Hero--standard .TCSHeroCTA .cta-section > div,
  .TCSHeroSection.Hero--standard .TCSHeroCTA .cta-section > div > a {
    width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .TCSHeroSection.Hero--standard .TCSHeroCTA .cta-section > div > a {
    padding-left: 24px;
    padding-right: 24px;
    justify-content: center;
    white-space: nowrap;
  }
}

/* Small tablet (~768): still side-by-side media; tighten image; CTAs stay stacked equal-width. */
@media (max-width: 768px) {
  .TCSHeroSection.Hero--standard .TCSHeroImage {
    max-width: 36%;
  }

  .TCSHeroSection.Hero--standard .TCSHeroInSec {
    max-width: calc(64% - 16px);
  }

  .TCSHeroSection.Hero--standard .TCSHeroCTA .cta-section > div > a {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Mobile (~375): image below copy in flow (Figma Mob grid) — not overlay behind text.
   Product uses content-wrapper.gap24 between copy + image; Standard’s image is a
   section sibling, so mirror that 24px with flex gap. */
@media (max-width: 767px) {
  .TCSHeroSection.Hero--standard {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .TCSHeroSection.Hero--standard .baseModuleParent {
    width: 100%;
  }

  .TCSHeroSection.Hero--standard .TCSHeroImage {
    display: block;
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 375 / 280;
    order: 2;
    margin: 0;
  }

  .TCSHeroSection.Hero--standard .TCSHeroImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .TCSHeroSection.Hero--standard .TCSHeroImage:before {
    display: none;
  }

  .TCSHeroSection.Hero--standard .TCSHeroInSec {
    max-width: 100%;
    text-align: center;
  }

  /* Same equal-width stack as tablet; centered under copy. */
  .TCSHeroSection.Hero--standard .TCSHeroCTA {
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    gap: 12px;
  }

  .TCSHeroSection.Hero--standard:before {
    width: 1000px;
    height: 273px;
    background-size: cover;
    background-position: 110px top;
    top: -15px;
  }

  .TCSHeroSection.Hero--standard .TCSHeroCTA .cta-section {
    flex: none;
    width: 100%;
    max-width: none;
  }

  .TCSHeroSection.Hero--standard .TCSHeroCTA .cta-section > div,
  .TCSHeroSection.Hero--standard .TCSHeroCTA .cta-section > div > a {
    width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .TCSHeroSection.Hero--standard .TCSHeroCTA .cta-section > div > a {
    padding-left: 24px;
    padding-right: 24px;
    justify-content: center;
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------------
   Product layout only.
   ------------------------------------------------------------------ */

.Hero--product.TCSHeroSection.baseModuleStyle {
  overflow: hidden;
}

.Hero--product .content-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}

.Hero--product.TCSHeroSection .TCSHeroInSec {
  max-width: none;
  width: 100%;
  min-width: 0;
}

.Hero--product.TCSHeroSection .TCSHeroInSec .TCSHeroContent {
  max-width: none;
}

.Hero--product.TCSHeroSection .TCSHeroImage {
  position: relative;
  top: auto;
  right: auto;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 599 / 489;
  transform: none;
  margin: 0;
  display: block;
  overflow: hidden;
}

.Hero--product .TCSHeroImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1024px) {
  .Hero--product.TCSHeroSection .TCSHeroImage {
    display: block;
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: none;
    height: auto;
  }

  .Hero--product .content-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .Hero--product .content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .Hero--product .TCSHeroCTA {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .Hero--product .TCSHeroCTA .cta-section,
  .Hero--product .TCSHeroCTA .cta-section > div {
    width: 100%;
    max-width: 100%;
  }

  .Hero--product.TCSHeroSection .TCSHeroImage {
    width: 100%;
    max-width: none;
    align-self: stretch;
  }
}

/* ------------------------------------------------------------------
   Color variants — all style layouts
   Figma: Dark 513-2988 | Brand 513-2971 | Tint 513-3004 | Light 513-3020
   Custom uses the editor gradient field (IRV pattern).
   ------------------------------------------------------------------ */

.Hero .baseModuleOverlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.Hero .baseModuleParent {
  position: relative;
  z-index: 5;
}

.Hero.TCSHeroSection .TCSHeroImage {
  z-index: 1;
}

.Hero--color-dark {
  --hero-wash: var(--tertiary-color, #160032);
}

.Hero--color-brand {
  --hero-wash: #31187a;
}

.Hero--color-tint {
  --hero-wash: #e9e3f7;
}

.Hero--color-light {
  --hero-wash: #fff;
}

/* Color wash must win over Style-tab background-color when a preset is selected.
   Photo backgrounds (bgImage) stay; the overlay carries Dark/Brand/Tint/Light. */
.Hero.Hero--color-dark.TCSHeroSection.baseModuleStyle,
.Hero.Hero--color-brand.TCSHeroSection.baseModuleStyle,
.Hero.Hero--color-tint.TCSHeroSection.baseModuleStyle,
.Hero.Hero--color-light.TCSHeroSection.baseModuleStyle {
  background-color: var(--hero-wash);
}


/* Figma overlay runs with the copy (left) and opens up over the photo (right). */
.Hero--color-dark .baseModuleOverlay,
.Hero--color-brand .baseModuleOverlay {
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--hero-wash) 100%, transparent) 0%,
    color-mix(in srgb, var(--hero-wash) 85%, transparent) 33.4%,
    color-mix(in srgb, var(--hero-wash) 15%, transparent) 70%,
    color-mix(in srgb, var(--hero-wash) 45%, transparent) 100%
  );
}

.Hero--color-tint .baseModuleOverlay {
  background: linear-gradient(
    to right,
    rgb(233 227 247 / 90%) 0%,
    rgb(233 227 247 / 85%) 37.1%,
    rgb(233 227 247 / 10%) 73.1%,
    rgb(233 227 247 / 12%) 100%
  );
}

.Hero--color-light .baseModuleOverlay {
  background: linear-gradient(
    to right,
    rgb(255 255 255 / 100%) 0%,
    rgb(255 255 255 / 85%) 40.3%,
    rgb(255 255 255 / 10%) 76.3%,
    rgb(255 255 255 / 12%) 100%
  );
}

.Hero--color-custom .baseModuleOverlay {
  background: none;
}

/* Copy: Apply default colors to Title, Content, Eyebrow, Meta, Caption, Strip ONLY when no UI dropdown color class is selected */
.Hero.Hero--color-dark.TCSHeroSection :is(.TCSHeroTitle, .TCSHeroContent, .HeroBenefit, .HeroMeta, .HeroImageCaption, .HeroStrip):not(:is(.primary_color, .secondary_color, .tertiary_color, .quaternary_color, .quinary_color, .senary_color, .septenary_color, .octonary_color)),
.Hero.Hero--color-dark.TCSHeroSection :is(.TCSHeroTitle, .TCSHeroContent, .HeroBenefit, .HeroMeta, .HeroImageCaption, .HeroStrip):not(:is(.primary_color, .secondary_color, .tertiary_color, .quaternary_color, .quinary_color, .senary_color, .septenary_color, .octonary_color)) :is(h1, h2, h3, h4, h5, h6, p, span, strong, em, li, a),
.Hero.Hero--color-brand.TCSHeroSection :is(.TCSHeroTitle, .TCSHeroContent, .HeroBenefit, .HeroMeta, .HeroImageCaption, .HeroStrip):not(:is(.primary_color, .secondary_color, .tertiary_color, .quaternary_color, .quinary_color, .senary_color, .septenary_color, .octonary_color)),
.Hero.Hero--color-brand.TCSHeroSection :is(.TCSHeroTitle, .TCSHeroContent, .HeroBenefit, .HeroMeta, .HeroImageCaption, .HeroStrip):not(:is(.primary_color, .secondary_color, .tertiary_color, .quaternary_color, .quinary_color, .senary_color, .septenary_color, .octonary_color)) :is(h1, h2, h3, h4, h5, h6, p, span, strong, em, li, a) {
  color: var(--septenary-color, #fff);
}

.Hero.Hero--color-light.TCSHeroSection :is(.TCSHeroTitle, .TCSHeroContent, .HeroBenefit, .HeroMeta, .HeroImageCaption, .HeroStrip):not(:is(.primary_color, .secondary_color, .tertiary_color, .quaternary_color, .quinary_color, .senary_color, .septenary_color, .octonary_color)),
.Hero.Hero--color-light.TCSHeroSection :is(.TCSHeroTitle, .TCSHeroContent, .HeroBenefit, .HeroMeta, .HeroImageCaption, .HeroStrip):not(:is(.primary_color, .secondary_color, .tertiary_color, .quaternary_color, .quinary_color, .senary_color, .septenary_color, .octonary_color)) :is(h1, h2, h3, h4, h5, h6, p, span, strong, em, li, a),
.Hero.Hero--color-tint.TCSHeroSection :is(.TCSHeroTitle, .TCSHeroContent, .HeroBenefit, .HeroMeta, .HeroImageCaption, .HeroStrip):not(:is(.primary_color, .secondary_color, .tertiary_color, .quaternary_color, .quinary_color, .senary_color, .septenary_color, .octonary_color)),
.Hero.Hero--color-tint.TCSHeroSection :is(.TCSHeroTitle, .TCSHeroContent, .HeroBenefit, .HeroMeta, .HeroImageCaption, .HeroStrip):not(:is(.primary_color, .secondary_color, .tertiary_color, .quaternary_color, .quinary_color, .senary_color, .septenary_color, .octonary_color)) :is(h1, h2, h3, h4, h5, h6, p, span, strong, em, li, a) {
  color: var(--tertiary-color, #160032);
}

.Hero.Hero--color-dark.TCSHeroSection .TCSHeroeyebrow:not(:is(.primary_color, .secondary_color, .tertiary_color, .quaternary_color, .quinary_color, .senary_color, .septenary_color, .octonary_color)),
.Hero.Hero--color-dark.TCSHeroSection .TCSHeroeyebrow:not(:is(.primary_color, .secondary_color, .tertiary_color, .quaternary_color, .quinary_color, .senary_color, .septenary_color, .octonary_color)) :is(p, span, strong, em),
.Hero.Hero--color-brand.TCSHeroSection .TCSHeroeyebrow:not(:is(.primary_color, .secondary_color, .tertiary_color, .quaternary_color, .quinary_color, .senary_color, .septenary_color, .octonary_color)),
.Hero.Hero--color-brand.TCSHeroSection .TCSHeroeyebrow:not(:is(.primary_color, .secondary_color, .tertiary_color, .quaternary_color, .quinary_color, .senary_color, .septenary_color, .octonary_color)) :is(p, span, strong, em),
.Hero.Hero--color-light.TCSHeroSection .TCSHeroeyebrow:not(:is(.primary_color, .secondary_color, .tertiary_color, .quaternary_color, .quinary_color, .senary_color, .septenary_color, .octonary_color)),
.Hero.Hero--color-light.TCSHeroSection .TCSHeroeyebrow:not(:is(.primary_color, .secondary_color, .tertiary_color, .quaternary_color, .quinary_color, .senary_color, .septenary_color, .octonary_color)) :is(p, span, strong, em),
.Hero.Hero--color-tint.TCSHeroSection .TCSHeroeyebrow:not(:is(.primary_color, .secondary_color, .tertiary_color, .quaternary_color, .quinary_color, .senary_color, .septenary_color, .octonary_color)),
.Hero.Hero--color-tint.TCSHeroSection .TCSHeroeyebrow:not(:is(.primary_color, .secondary_color, .tertiary_color, .quaternary_color, .quinary_color, .senary_color, .septenary_color, .octonary_color)) :is(p, span, strong, em) {
  color: var(--primary-color);
}

.Hero--color-light .HeroBenefit:not(:first-child),
.Hero--color-tint .HeroBenefit:not(:first-child) {
  border-left-color: color-mix(in srgb, var(--tertiary-color, #160032) 25%, transparent);
}

.Hero--color-light .HeroBenefit:first-child,
.Hero--color-tint .HeroBenefit:first-child {
  border-left-width: 3px;
  border-left-color: var(--quinary-color, #3da86f);
}

.Hero--color-dark .HeroBenefit:not(:first-child),
.Hero--color-brand .HeroBenefit:not(:first-child) {
  border-left-color: rgb(255 255 255 / 55%);
}

.Hero--color-dark .HeroBenefit:first-child,
.Hero--color-brand .HeroBenefit:first-child {
  border-left-width: 3px;
  border-left-color: var(--primary-color, #3DA86F);
}

/* Primary CTA stays brand green + white label on every preset */
.Hero.Hero--color-dark.TCSHeroSection.baseModuleStyle .TCSHeroCTA .button a,
.Hero.Hero--color-brand.TCSHeroSection.baseModuleStyle .TCSHeroCTA .button a,
.Hero.Hero--color-tint.TCSHeroSection.baseModuleStyle .TCSHeroCTA .button a,
.Hero.Hero--color-light.TCSHeroSection.baseModuleStyle .TCSHeroCTA .button a,
.Hero.Hero--color-dark.TCSHeroSection.baseModuleStyle .TCSHeroCTA .button a span,
.Hero.Hero--color-brand.TCSHeroSection.baseModuleStyle .TCSHeroCTA .button a span,
.Hero.Hero--color-tint.TCSHeroSection.baseModuleStyle .TCSHeroCTA .button a span,
.Hero.Hero--color-light.TCSHeroSection.baseModuleStyle .TCSHeroCTA .button a span {
  color: var(--primary-button-text-color, #fff);
  background-color: var(--primary-button-background-color, var(--primary-color));
  border-color: var(--primary-button-border-color, var(--primary-color));
}

/* Secondary CTA: white label + green outline on Dark/Brand; dark label + dark outline on Light/Tint */
.Hero.Hero--color-dark.TCSHeroSection.baseModuleStyle .TCSHeroCTA .secondary_button a,
.Hero.Hero--color-brand.TCSHeroSection.baseModuleStyle .TCSHeroCTA .secondary_button a,
.Hero.Hero--color-dark.TCSHeroSection.baseModuleStyle .TCSHeroCTA a.secondary_button,
.Hero.Hero--color-brand.TCSHeroSection.baseModuleStyle .TCSHeroCTA a.secondary_button {
  background-color: transparent;
  color: var(--septenary-color, #fff);
  border-color: var(--primary-color);
}

.Hero.Hero--color-dark.TCSHeroSection.baseModuleStyle .TCSHeroCTA .secondary_button a span,
.Hero.Hero--color-brand.TCSHeroSection.baseModuleStyle .TCSHeroCTA .secondary_button a span,
.Hero.Hero--color-dark.TCSHeroSection.baseModuleStyle .TCSHeroCTA a.secondary_button span,
.Hero.Hero--color-brand.TCSHeroSection.baseModuleStyle .TCSHeroCTA a.secondary_button span {
  color: var(--septenary-color, #fff);
}

.Hero.Hero--color-light.TCSHeroSection.baseModuleStyle .TCSHeroCTA .secondary_button a,
.Hero.Hero--color-tint.TCSHeroSection.baseModuleStyle .TCSHeroCTA .secondary_button a,
.Hero.Hero--color-light.TCSHeroSection.baseModuleStyle .TCSHeroCTA a.secondary_button,
.Hero.Hero--color-tint.TCSHeroSection.baseModuleStyle .TCSHeroCTA a.secondary_button {
  background-color: transparent;
  color: var(--tertiary-color, #160032);
  border-color: var(--tertiary-color, #160032);
}

.Hero.Hero--color-light.TCSHeroSection.baseModuleStyle .TCSHeroCTA .secondary_button a span,
.Hero.Hero--color-tint.TCSHeroSection.baseModuleStyle .TCSHeroCTA .secondary_button a span,
.Hero.Hero--color-light.TCSHeroSection.baseModuleStyle .TCSHeroCTA a.secondary_button span,
.Hero.Hero--color-tint.TCSHeroSection.baseModuleStyle .TCSHeroCTA a.secondary_button span {
  color: var(--tertiary-color, #160032);
}

.Hero.Hero--color-dark.TCSHeroSection .TCSHeroCTA .secondary_button .CTAArrow svg path,
.Hero.Hero--color-brand.TCSHeroSection .TCSHeroCTA .secondary_button .CTAArrow svg path {
  fill: var(--septenary-color, #fff);
}

.Hero.Hero--color-light.TCSHeroSection .TCSHeroCTA .secondary_button .CTAArrow svg path,
.Hero.Hero--color-tint.TCSHeroSection .TCSHeroCTA .secondary_button .CTAArrow svg path {
  fill: var(--tertiary-color, #160032);
}

.Hero.TCSHeroSection .TCSHeroCTA .CTA_Play_present a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  padding-left: 14px;
  padding-right: 12px;
}

.Hero.TCSHeroSection .TCSHeroCTA .CTA_Play_present a span.CTAPlay {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: -4px;
  margin-bottom: -3px;
  color: inherit;
  line-height: 0;
}

.Hero.TCSHeroSection .TCSHeroCTA .CTA_Play_present a span.CTAPlay svg {
  width: 24px;
  height: 24px;
  display: block;
}

.Hero.TCSHeroSection .TCSHeroCTA .CTAPlay svg rect {
  stroke: currentColor;
  fill: none;
}

.Hero.TCSHeroSection .TCSHeroCTA .CTAPlay svg path {
  fill: currentColor;
  stroke: currentColor;
}

/* ------------------------------------------------------------------
   Campaign layout only.
   Type, container, and side padding stay on the global theme + HubDB.
   Vertical padding uses global pt80/pb80.
   ------------------------------------------------------------------ */

.Hero--campaign-layout.TCSHeroSection.baseModuleStyle, .Hero--campaign-layout.TCSHeroSection.baseModuleStyle{
  overflow: hidden;
}

.Hero--campaign-layout .content-wrapper, .Hero--campaign-layout .content-wrapper{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.Hero--campaign-layout:has(.HeroFormCard) .content-wrapper, .Hero--campaign-layout:has(.HeroFormCard) .content-wrapper{
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  align-items: start;
  column-gap: 80px;
}

.Hero--campaign-layout.TCSHeroSection .TCSHeroInSec, .Hero--campaign-layout.TCSHeroSection .TCSHeroInSec{
  max-width: none;
  width: 100%;
  min-width: 0;
}

/* Campaign — vertical alignment of the copy column against the form card
   (Style > Vertical Alignment, default Top). Desktop/tablet two-column only. */
@media (min-width: 768px) {
  .Hero--campaign.Hero--campaign-valign-top .content-wrapper > .TCSHeroInSec { align-self: start; }
  .Hero--campaign.Hero--campaign-valign-center .content-wrapper > .TCSHeroInSec { align-self: center; }
  .Hero--campaign.Hero--campaign-valign-bottom .content-wrapper > .TCSHeroInSec { align-self: end; }
}

.Hero--campaign-layout.TCSHeroSection .TCSHeroInSec .TCSHeroContent, .Hero--campaign-layout.TCSHeroSection .TCSHeroInSec .TCSHeroContent{
  max-width: none;
}

.HeroBenefitsWrapper {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin-top: 26px;
}

.HeroBenefits {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0 0 6px 0;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.HeroBenefits::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.HeroBenefitsScrollTrack {
  display: block;
  position: relative;
  width: 100%;
  height: 3px;
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  overflow: hidden;
}

.Hero--color-light .HeroBenefitsScrollTrack,
.Hero--color-tint .HeroBenefitsScrollTrack {
  background: rgba(0, 0, 0, 0.15);
}

.HeroBenefitsScrollThumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 35%;
  background: var(--primary-color, #3DA86F);
  border-radius: 3px;
  will-change: transform, width;
}

.HeroBenefit {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 13px 20px;
  min-height: 47px;
  border-left: 1px solid rgb(255 255 255 / 55%);
  white-space: nowrap;
}

/* Figma 513-2927: leading rule is brand green + 3px; later rules stay 1px white/55%. */
.HeroBenefit:first-child {
  border-left-width: 3px;
  border-left-color: var(--quinary-color, #3da86f);
}

/* Classic Campaign only — Campaign with CTAs keeps hero buttons visible with the form. */
.Hero--campaign:has(.HeroFormCard) .TCSHeroCTA {
  display: none;
}

.Hero--campaign-layout.TCSHeroSection .TCSHeroImage, .Hero--campaign-layout.TCSHeroSection .TCSHeroImage{
  display: none;
}

.HeroFormCard {
  position: relative;
  z-index: 10;
  overflow: visible;
  width: 100%;
  max-width: 460px;
  justify-self: end; 
  background: var(--septenary-color, #fff);
  border-radius: 10px;
  padding: 26px 26px 24px;
  box-shadow:
    0 16px 20px -4px rgb(0 0 0 / 10%),
    0 6px 8px -5px rgb(0 0 0 / 10%);
}

.HeroFormCardTitle {
  margin: 0 0 18px;
  color: var(--tertiary-color, #2d2d2d);
}

.Hero--campaign-layout .HeroForm form, .Hero--campaign-layout .HeroForm form{
  margin: 0;
}

.Hero--campaign-layout .HeroForm fieldset, .Hero--campaign-layout .HeroForm fieldset{
  max-width: none;
}

.Hero--campaign-layout .HeroForm .hs-form-field, .Hero--campaign-layout .HeroForm .hs-form-field{
  padding: 0;
  margin-bottom: 12px;
}

.Hero--campaign-layout .HeroForm label,
.Hero--campaign-layout .HeroForm .hs-form-field > label, .Hero--campaign-layout .HeroForm .hs-form-field > label{
  font-family: var(--secondary-font-family);
  font-size: var(--body-sm-font-size);
  font-weight: 400;
  line-height: 1.4;
  color: #4d4d4d;
}

.Hero--campaign-layout .HeroForm .input, .Hero--campaign-layout .HeroForm .input{
  margin-right: 0 !important;
}

.Hero--campaign-layout .HeroForm .hs-input,
.Hero--campaign-layout .HeroForm input.hs-input,
.Hero--campaign-layout .HeroForm select.hs-input,
.Hero--campaign-layout .HeroForm textarea.hs-input, .Hero--campaign-layout .HeroForm textarea.hs-input{
  width: 100%;
  max-width: 100%;
  min-height: 34px;
  padding: 6px 12px;
  background: rgba(242, 242, 242, 0.95);
  border: 1px solid rgba(45, 45, 45, 0.25);
  border-radius: 5px;
  font-family: var(--secondary-font-family);
  font-size: var(--body-sm-font-size);
  color: #2d2d2d;
}

.Hero--campaign-layout .HeroForm fieldset.form-columns-2, .Hero--campaign-layout .HeroForm fieldset.form-columns-2{
  display: flex;
  column-gap: 12px;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding-bottom: 0;
  border-bottom: 0;
}

.Hero--campaign-layout .HeroForm fieldset.form-columns-2 .hs-form-field, .Hero--campaign-layout .HeroForm fieldset.form-columns-2 .hs-form-field{
  width: calc(50% - 6px);
  float: none;
}

.Hero--campaign-layout .HeroForm .actions, .Hero--campaign-layout .HeroForm .actions{
  text-align: left;
  padding-top: 8px;
  margin: 0;
}

.Hero--campaign-layout .HeroForm input[type="submit"],
.Hero--campaign-layout .HeroForm .hs-button,
.Hero--campaign-layout .HeroFormEmbed .hsfc-Button, .Hero--campaign-layout .HeroFormEmbed .hsfc-Button{
  width: 100% !important;
  min-height: 39px;
  padding: 8px 16px !important;
  background-image: none !important;
  background-color: var(--primary-button-background-color, var(--primary-color)) !important;
  border: 0 !important;
  border-radius: 6px !important;
  font-family: var(--primary-font-family);
  font-size: var(--button-font-size);
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  color: var(--primary-button-text-color, #fff) !important;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 1024px) {
  .Hero--campaign-layout:has(.HeroFormCard) .content-wrapper, .Hero--campaign-layout:has(.HeroFormCard) .content-wrapper{
    grid-template-columns: minmax(0, 1fr) minmax(0, 452px);
    column-gap: 24px;
  }

  .HeroFormCard {
    max-width: none;
    justify-self: stretch;
  }
}

@media (max-width: 768px) {
  .Hero--campaign-layout:has(.HeroFormCard) .content-wrapper, .Hero--campaign-layout:has(.HeroFormCard) .content-wrapper{
    grid-template-columns: minmax(0, 1fr) minmax(0, 345px);
    column-gap: 16px;
  }
}

@media (max-width: 767px) {
  .Hero--campaign-layout .content-wrapper,
  .Hero--campaign-layout:has(.HeroFormCard) .content-wrapper, .Hero--campaign-layout:has(.HeroFormCard) .content-wrapper{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .body-container--campaign-landing .TCSHeroSection.Hero--campaign-layout .content-wrapper,
  .page-campaign-landing .TCSHeroSection.Hero--campaign-layout .content-wrapper, .page-campaign-landing .TCSHeroSection.Hero--campaign-layout .content-wrapper{
    gap: 0;
  }

  .HeroBenefitsWrapper {
    width: 100%;
    max-width: 100%;
    margin-top: 24px;
  }

  .HeroBenefits {
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .HeroBenefits::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .HeroBenefit {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .Hero--campaign-layout .TCSHeroCTA, .Hero--campaign-layout .TCSHeroCTA{
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .Hero--campaign-layout .TCSHeroCTA .cta-section,
  .Hero--campaign-layout .TCSHeroCTA .cta-section > div, .Hero--campaign-layout .TCSHeroCTA .cta-section > div{
    width: 100%;
    max-width: 100%;
  }

  .HeroFormCard {
    max-width: 100%;
    margin-top: 84px;
    justify-self: stretch;
  }

  .Hero--campaign-layout .HeroForm fieldset.form-columns-2, .Hero--campaign-layout .HeroForm fieldset.form-columns-2{
    flex-wrap: wrap;
  }

  .Hero--campaign-layout .HeroForm fieldset.form-columns-2 .hs-form-field, .Hero--campaign-layout .HeroForm fieldset.form-columns-2 .hs-form-field{
    width: 100%;
  }
}

/* Campaign hero card — dynamic hsfc (scoped; does not affect 17-Form-Block on same page).
   Fixed TCS campaign palette: IRV HubDB quaternary/senary/tertiary differ and break contrast on white card. */
.Hero--campaign-layout .HeroFormCard .HeroFormEmbed, .Hero--campaign-layout .HeroFormCard .HeroFormEmbed{
  --form-field-bg: rgba(242, 242, 242, 0.95);
  --form-field-border: rgba(45, 45, 45, 0.25);
  --form-field-text: #2d2d2d;
  --form-label-color: #4d4d4d;
  --form-field-radius: 5px;
  --form-field-min-height: 34px;
  --form-field-pad-y: 6px;
  --form-field-pad-x: 12px;
  --form-row-gap-y: 12px;
  --form-row-gap-x: 12px;
  --form-label-gap: 4px;
}

.Hero--campaign-layout .HeroFormCard .HeroFormEmbed .hsfc-FieldLabel,
.Hero--campaign-layout .HeroFormCard .HeroFormEmbed .hsfc-FieldLabel *,
.Hero--campaign-layout .HeroFormCard .HeroFormEmbed .hsfc-FieldDescription,
.Hero--campaign-layout .HeroFormCard .HeroFormEmbed .hsfc-FieldDescription *, .Hero--campaign-layout .HeroFormCard .HeroFormEmbed .hsfc-FieldDescription *{
  color: #4d4d4d !important;
}

.Hero--campaign-layout .HeroFormCard .HeroFormEmbed .hsfc-TextInput,
.Hero--campaign-layout .HeroFormCard .HeroFormEmbed .hsfc-SelectInput,
.Hero--campaign-layout .HeroFormCard .HeroFormEmbed .hsfc-TextareaInput,
.Hero--campaign-layout .HeroFormCard .HeroFormEmbed .hsfc-PhoneInput input, .Hero--campaign-layout .HeroFormCard .HeroFormEmbed .hsfc-PhoneInput input{
  color: var(--form-field-text) !important;
  -webkit-text-fill-color: var(--form-field-text);
}

.Hero--campaign-layout .HeroFormCard .HeroFormEmbed .hsfc-TextInput::placeholder,
.Hero--campaign-layout .HeroFormCard .HeroFormEmbed .hsfc-PhoneInput input::placeholder, .Hero--campaign-layout .HeroFormCard .HeroFormEmbed .hsfc-PhoneInput input::placeholder{
  color: rgba(45, 45, 45, 0.45) !important;
  opacity: 1;
}

.Hero--campaign-layout .HeroFormEmbed .hsfc-Renderer,
.Hero--campaign-layout .HeroFormEmbed .hsfc-FormWrapper,
.Hero--campaign-layout .HeroFormEmbed .hsfc-Form,
.Hero--campaign-layout .HeroFormEmbed .hsfc-Step,
.Hero--campaign-layout .HeroFormEmbed .hs-form-html, .Hero--campaign-layout .HeroFormEmbed .hs-form-html{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.Hero--campaign-layout .HeroFormEmbed .hsfc-Step, .Hero--campaign-layout .HeroFormEmbed .hsfc-Step{
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}

.Hero--campaign-layout .HeroFormEmbed .hsfc-Step__Content, .Hero--campaign-layout .HeroFormEmbed .hsfc-Step__Content{
  padding: 0 !important;
  margin: 0 !important;
}

/* Fallback row grid before lv-hsfc-form-layout runs; shared _hsfc-form-layout.css owns .lv-hsfc-grid */
.Hero--campaign-layout .HeroFormEmbed .hsfc-Step__Content:not(.lv-hsfc-grid) > .hsfc-Row, .Hero--campaign-layout .HeroFormEmbed .hsfc-Step__Content:not(.lv-hsfc-grid) > .hsfc-Row{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--form-row-gap-x) !important;
  row-gap: var(--form-row-gap-y) !important;
  width: 100% !important;
  margin: 0 0 var(--form-row-gap-y) !important;
  padding: 0 !important;
}

.Hero--campaign-layout .HeroFormEmbed .hsfc-Step__Content:not(.lv-hsfc-grid) > .hsfc-Row > *, .Hero--campaign-layout .HeroFormEmbed .hsfc-Step__Content:not(.lv-hsfc-grid) > .hsfc-Row > *{
  min-width: 0 !important;
  width: 100% !important;
}

.Hero--campaign-layout .HeroFormEmbed .hsfc-Step__Content:not(.lv-hsfc-grid) > .hsfc-Row > :only-child,
.Hero--campaign-layout .HeroFormEmbed .hsfc-Step__Content:not(.lv-hsfc-grid) > .hsfc-Row:has(.hsfc-TextareaField, .Hero--campaign-layout .HeroFormEmbed .hsfc-Step__Content:not(.lv-hsfc-grid) > .hsfc-Row:has(.hsfc-TextareaField, .hsfc-CheckboxFieldGroup, .hsfc-RadioFieldGroup){
  grid-template-columns: minmax(0, 1fr) !important;
}

.Hero--campaign-layout .HeroFormEmbed .hsfc-Step__Content:not(.lv-hsfc-grid) .hsfc-Row:has(.hsfc-PhoneField), .Hero--campaign-layout .HeroFormEmbed .hsfc-Step__Content:not(.lv-hsfc-grid) .hsfc-Row:has(.hsfc-PhoneField){
  grid-template-columns: minmax(0, 1fr) !important;
}

.Hero--campaign-layout .HeroFormCard .HeroFormEmbed .hsfc-FieldLabel, .Hero--campaign-layout .HeroFormCard .HeroFormEmbed .hsfc-FieldLabel{
  display: block;
  margin: 0 0 var(--form-label-gap) !important;
  font-family: var(--secondary-font-family);
  font-size: var(--body-sm-font-size);
  font-weight: 400;
  line-height: 1.4;
  color: #4d4d4d !important;
}

.Hero--campaign-layout .HeroFormEmbed .hsfc-CheckboxFieldGroup__Options .hsfc-FieldLabel,
.Hero--campaign-layout .HeroFormEmbed .hsfc-RadioFieldGroup__Options .hsfc-FieldLabel, .Hero--campaign-layout .HeroFormEmbed .hsfc-RadioFieldGroup__Options .hsfc-FieldLabel{
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px !important;
}

.Hero--campaign-layout .HeroFormEmbed .hsfc-CheckboxFieldGroup__Options .hsfc-FieldLabel > span,
.Hero--campaign-layout .HeroFormEmbed .hsfc-RadioFieldGroup__Options .hsfc-FieldLabel > span, .Hero--campaign-layout .HeroFormEmbed .hsfc-RadioFieldGroup__Options .hsfc-FieldLabel > span{
  margin: 0;
  padding: 0;
  line-height: 1.4;
}

.Hero--campaign-layout .HeroFormEmbed .hsfc-CheckboxFieldGroup__Options .hsfc-CheckboxInput,
.Hero--campaign-layout .HeroFormEmbed .hsfc-RadioFieldGroup__Options input[type="radio"], .Hero--campaign-layout .HeroFormEmbed .hsfc-RadioFieldGroup__Options input[type="radio"]{
  flex-shrink: 0;
  margin: 0;
  align-self: center;
}

.Hero--campaign-layout .HeroFormCard .HeroFormEmbed .hsfc-TextInput:not(.hsfc-TextInput--button),
.Hero--campaign-layout .HeroFormCard .HeroFormEmbed .hsfc-SelectInput,
.Hero--campaign-layout .HeroFormCard .HeroFormEmbed .hsfc-TextareaInput, .Hero--campaign-layout .HeroFormCard .HeroFormEmbed .hsfc-TextareaInput{
  background: rgba(242, 242, 242, 0.95) !important;
  border: 1px solid rgba(45, 45, 45, 0.25) !important;
  border-radius: var(--form-field-radius) !important;
  min-height: var(--form-field-min-height) !important;
  padding: var(--form-field-pad-y) var(--form-field-pad-x) !important;
  width: 100% !important;
  color: #2d2d2d !important;
  font-family: var(--secondary-font-family);
  font-size: var(--body-sm-font-size);
  box-shadow: none !important;
}

.Hero--campaign-layout .HeroFormEmbed,
.Hero--campaign-layout .HeroFormEmbed .hsfc-Renderer,
.Hero--campaign-layout .HeroFormEmbed .hsfc-Form,
.Hero--campaign-layout .HeroFormEmbed .hsfc-Step__Content,
.Hero--campaign-layout .HeroFormEmbed .hsfc-Row,
.Hero--campaign-layout .HeroFormEmbed .hsfc-Field, .Hero--campaign-layout .HeroFormEmbed .hsfc-Field{
  overflow: visible;
}

.Hero--campaign-layout .HeroFormEmbed .hsfc-DropdownInput, .Hero--campaign-layout .HeroFormEmbed .hsfc-DropdownInput{
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--form-field-min-height);
  border: 1px solid var(--form-field-border);
  border-radius: var(--form-field-radius);
  background: var(--form-field-bg);
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

.Hero--campaign-layout .HeroFormEmbed .hsfc-Field:has(.hsfc-DropdownInput [aria-expanded="true"]), .Hero--campaign-layout .HeroFormEmbed .hsfc-Field:has(.hsfc-DropdownInput [aria-expanded="true"]){
  position: relative;
  z-index: 50;
}

.Hero--campaign-layout .HeroFormEmbed .hsfc-DropdownOptions, .Hero--campaign-layout .HeroFormEmbed .hsfc-DropdownOptions{
  z-index: 10001 !important;
}

.Hero--campaign-layout .HeroFormEmbed .hsfc-DropdownInput .hsfc-TextInput,
.Hero--campaign-layout .HeroFormEmbed .hsfc-DropdownInput .hsfc-TextInput--button, .Hero--campaign-layout .HeroFormEmbed .hsfc-DropdownInput .hsfc-TextInput--button{
  border: 0 !important;
  background: transparent !important;
  min-height: calc(var(--form-field-min-height) - 2px) !important;
  padding: var(--form-field-pad-y) 28px var(--form-field-pad-y) var(--form-field-pad-x) !important;
  width: 100% !important;
}

.Hero--campaign-layout .HeroFormEmbed .hsfc-PhoneInput, .Hero--campaign-layout .HeroFormEmbed .hsfc-PhoneInput{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100% !important;
  min-height: var(--form-field-min-height);
  border: 1px solid var(--form-field-border);
  border-radius: var(--form-field-radius);
  background: var(--form-field-bg);
  overflow: hidden;
  box-sizing: border-box;
}

.Hero--campaign-layout .HeroFormEmbed .hsfc-PhoneInput input[type="text"],
.Hero--campaign-layout .HeroFormEmbed .hsfc-PhoneInput input[type="tel"], .Hero--campaign-layout .HeroFormEmbed .hsfc-PhoneInput input[type="tel"]{
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  min-height: var(--form-field-min-height) !important;
  padding: var(--form-field-pad-y) var(--form-field-pad-x) !important;
}

.Hero--campaign-layout .HeroFormEmbed .hsfc-NavigationRow, .Hero--campaign-layout .HeroFormEmbed .hsfc-NavigationRow{
  margin-top: 4px !important;
  padding: 0 !important;
}

.Hero--campaign-layout .HeroFormEmbed .hsfc-NavigationRow__Buttons, .Hero--campaign-layout .HeroFormEmbed .hsfc-NavigationRow__Buttons{
  width: 100%;
  text-align: left;
  padding-top: 8px;
}

.Hero--campaign-layout .HeroFormCard:not(.HeroFormCard--submitted) .HeroFormEmbed .hs-form-description,
.Hero--campaign-layout .HeroFormCard:not(.HeroFormCard--submitted) .HeroFormEmbed .form-title,
.Hero--campaign-layout .HeroFormCard:not(.HeroFormCard--submitted) .HeroFormEmbed .hsfc-Step__Content > .hsfc-Row:first-child .hsfc-RichText, .Hero--campaign-layout .HeroFormCard:not(.HeroFormCard--submitted) .HeroFormEmbed .hsfc-Step__Content > .hsfc-Row:first-child .hsfc-RichText{
  display: none !important;
}

.Hero--campaign-layout .HeroFormSuccess[hidden], .Hero--campaign-layout .HeroFormSuccess[hidden]{
  display: none !important;
}

.Hero--campaign-layout .HeroFormCard--submitted .HeroFormCardTitle,
.Hero--campaign-layout .HeroFormCard--submitted .HeroFormEmbed,
.Hero--campaign-layout .HeroFormCard--submitted .HeroFormEmbed .hsfc-Renderer,
.Hero--campaign-layout .HeroFormCard--submitted .HeroFormEmbed .submitted-message,
.Hero--campaign-layout .HeroFormCard--submitted .HeroFormEmbed .hsfc-PostSubmit,
.Hero--campaign-layout .HeroFormCard--submitted .HeroFormEmbed .hsfc-SuccessMessage, .Hero--campaign-layout .HeroFormCard--submitted .HeroFormEmbed .hsfc-SuccessMessage{
  display: none !important;
}

.Hero--campaign-layout .HeroFormCard--submitted .HeroFormSuccess,
.Hero--campaign-layout .HeroFormCard:has(.HeroFormEmbed .submitted-message, .Hero--campaign-layout .HeroFormCard:has(.HeroFormEmbed .submitted-message, .HeroFormEmbed .hsfc-PostSubmit, .HeroFormEmbed .hsfc-SuccessMessage) .HeroFormSuccess[hidden]{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 8px;
  min-height: 220px;
}

.Hero--campaign-layout .HeroFormSuccessIcon, .Hero--campaign-layout .HeroFormSuccessIcon{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--primary-color, #3da86f);
  color: var(--primary-button-text-color, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.Hero--campaign-layout .HeroFormSuccessMessage, .Hero--campaign-layout .HeroFormSuccessMessage{
  margin: 0;
  max-width: 320px;
  font-family: var(--primary-font-family);
  font-size: var(--h4-font-size, 1.25rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--tertiary-color, #2d2d2d);
}

@media (max-width: 991px) {
  .Hero--campaign-layout .HeroFormEmbed .hsfc-Step__Content:not(.lv-hsfc-grid) > .hsfc-Row:not(.hsfc-NavigationRow), .Hero--campaign-layout .HeroFormEmbed .hsfc-Step__Content:not(.lv-hsfc-grid) > .hsfc-Row:not(.hsfc-NavigationRow){
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ------------------------------------------------------------------
   Content layout only. Type, container, and side padding stay on the
   global theme + HubDB tokens. Vertical padding uses global pt80/pb80.
   ------------------------------------------------------------------ */

.Hero--content.Hero--color-dark .baseModuleOverlay,
.Hero--content.Hero--color-brand .baseModuleOverlay,
.Hero--content.Hero--color-tint .baseModuleOverlay,
.Hero--content.Hero--color-light .baseModuleOverlay {
  background: none;
}

.Hero--content .content-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}

.Hero--content.TCSHeroSection .TCSHeroInSec {
  max-width: none;
  width: 100%;
  min-width: 0;
}

/* Content variant: extra top space — desktop 85px, tablet 40px, mobile 20px. */
.Hero--content.TCSHeroSection .content-wrapper {
  padding-top: 85px;
}

@media (max-width: 1024px) {
  .Hero--content.TCSHeroSection .content-wrapper {
    padding-top: 40px;
  }
}

@media (max-width: 767px) {
  .Hero--content.TCSHeroSection .content-wrapper {
    padding-top: 20px;
  }
}

.Hero--content.TCSHeroSection .TCSHeroInSec .TCSHeroContent {
  max-width: none;
}

.HeroMetaRule,
.HeroMetaSep {
  background: currentColor;
  opacity: 0.35;
}

.HeroMetaRule {
  display: block;
  width: 100%;
  max-width: 420px;
  height: 1px;
}

.HeroMetaDetails {
  display: contents;
}

.HeroMetaAvatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--secondary-color);
  color: var(--septenary-color, #fff);
  flex: none;
}

.HeroMetaAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.HeroMetaSep {
  display: inline-block;
  width: 1px;
  height: 1em;
  flex: none;
}

.HeroMetaRead {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.HeroMetaClock {
  display: block;
  flex: none;
  color: var(--primary-color);
}

/* Beat global `.small * { color: var(--senary-color) }` — Figma clock is brand green. */
.HeroMetaClock :is(circle, path) {
  color: var(--primary-color);
  stroke: var(--primary-color);
}

.Hero--content.TCSHeroSection .TCSHeroImage {
  position: relative;
  top: auto;
  right: auto;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 4 / 3;
  transform: none;
  margin: 0;
  display: block;
  overflow: hidden;
}

.Hero--content .TCSHeroImage img.HeroContentImageSrc {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.Hero--content .HeroContentImage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: color-mix(in srgb, var(--hero-wash, #160032) 40%, transparent);
}

.HeroImageCaption {
  position: absolute;
  left: 20px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 64px);
  font-family: var(--secondary-font-family);
  font-size: 13px;
  font-weight: 500;
  line-height: 19.5px;
}

.HeroImageCaptionIcon {
  display: block;
  flex: none;
  width: 28px;
  height: 28px;
}

/* Figma 513-3061: 32×32 expand control (asset includes background + icon). */
.HeroImageZoom {
  position: absolute;
  right: 20px;
  bottom: 24px;
  z-index: 3;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.HeroImageZoom:hover,
.HeroImageZoom:focus-visible {
  opacity: 0.92;
  transform: scale(1.04);
}

.HeroImageZoom:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.HeroImageZoomIcon {
  display: block;
  flex: none;
  width: 32px;
  height: 32px;
}

/* Native dialog lightbox — portaled to body in module.js for full-viewport coverage. */
.HeroImageLightbox:not([open]) {
  display: none;
}

.HeroImageLightbox {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 56px 24px 24px;
  border: 0;
  background: transparent;
  overflow: auto;
}

.HeroImageLightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: HeroImageLightboxIn 0.32s ease;
}

.HeroImageLightbox::backdrop {
  background: rgba(22, 0, 50, 0.65);
  transition: opacity 0.32s ease;
}

.HeroImageLightbox[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .HeroImageLightbox::backdrop {
    opacity: 0;
  }

  .HeroImageLightbox .HeroImageLightboxFigure {
    opacity: 0;
    transform: scale(0.985);
  }
}

.HeroImageLightbox[open] .HeroImageLightboxFigure {
  animation: HeroImageLightboxIn 0.32s ease;
}

@keyframes HeroImageLightboxIn {
  from {
    opacity: 0;
    transform: scale(0.985);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .HeroImageLightbox[open],
  .HeroImageLightbox[open] .HeroImageLightboxFigure,
  .HeroImageLightbox::backdrop {
    animation: none;
    transition: none;
  }
}

.HeroImageLightboxClose {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.HeroImageLightboxClose:hover,
.HeroImageLightboxClose:focus-visible {
  opacity: 0.85;
}

.HeroImageLightboxClose:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.HeroImageLightboxFigure {
  margin: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.HeroImageLightboxFigure img,
.HeroImageLightboxImg {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 120px);
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}

.HeroImageLightboxCaption {
  margin: 0;
  color: #f2e8de;
  text-align: center;
  max-width: min(720px, 100%);
}

body.HeroImageLightboxOpen {
  overflow: hidden;
}

@media (max-width: 1024px) {
  .Hero--content.TCSHeroSection .TCSHeroImage {
    display: block;
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: none;
    height: auto;
  }

  .Hero--content .content-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .Hero--content .content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .HeroMetaRule {
    max-width: none;
  }

  .HeroMetaText {
    flex-direction: column;
    align-items: flex-start;
  }

  .HeroMetaDetails {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .HeroMetaDetails .HeroMetaSep:first-child {
    display: none;
  }

  .HeroImageCaption {
    display: none;
  }
}



/* ------------------------------------------------------------------
   Minimal layout only.
   Type, container, and side padding stay on the global theme + HubDB.
   Vertical padding uses global pt80/pb80.
   ------------------------------------------------------------------ */

.Hero--minimal.TCSHeroSection:before {
  content: none;
  display: none;
}

.Hero--minimal.TCSHeroSection.baseModuleStyle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 692px;
  overflow: hidden;
}

.Hero--minimal .baseModuleParent {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.Hero--minimal.Hero--color-dark .baseModuleOverlay,
.Hero--minimal.Hero--color-brand .baseModuleOverlay {
  background: color-mix(in srgb, var(--hero-wash) 58%, transparent);
}

.Hero--minimal.Hero--color-tint .baseModuleOverlay {
  background: rgb(233 227 247 / 78%);
}

.Hero--minimal.Hero--color-light .baseModuleOverlay {
  background: rgb(255 255 255 / 78%);
}

.Hero--minimal .content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.Hero--minimal.TCSHeroSection .TCSHeroInSec {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 880px;
  width: 100%;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.Hero--minimal .TCSHeroTitle h1,
.Hero--minimal .TCSHeroTitle .h1 {
  text-align: center;
}

.Hero--minimal .TCSHeroContent,
.Hero--minimal .TCSHeroContent p {
  text-align: center;
}

.Hero--minimal .TCSHeroInSec .TCSHeroContent {
  max-width: 640px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.Hero--minimal.TCSHeroSection .TCSHeroImage {
  display: none;
}

@media (max-width: 1024px) {
  .Hero--minimal.TCSHeroSection.baseModuleStyle {
    min-height: 560px;
  }

  .Hero--minimal.TCSHeroSection .TCSHeroInSec {
    max-width: 800px;
  }
}

@media (max-width: 767px) {
  .Hero--minimal.TCSHeroSection.baseModuleStyle {
    min-height: 0;
  }

  .Hero--minimal.TCSHeroSection .TCSHeroInSec {
    max-width: 100%;
  }

  .Hero--minimal .TCSHeroCTA {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .Hero--minimal .TCSHeroCTA .cta-section,
  .Hero--minimal .TCSHeroCTA .cta-section > div {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }
}

/* ------------------------------------------------------------------
   Showcase layout only.
   Type, container, and side padding stay on the global theme + HubDB.
   Vertical padding uses global pt80/pb80.
   ------------------------------------------------------------------ */

.Hero--showcase.TCSHeroSection:before {
  content: none;
  display: none;
}

.Hero--showcase.TCSHeroSection.baseModuleStyle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 692px;
  overflow: hidden;
}

.Hero--showcase .baseModuleParent {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
}

.Hero--showcase .content-wrapper {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}

.Hero--showcase.TCSHeroSection .TCSHeroInSec {
  max-width: 693px;
  width: 100%;
  min-width: 0;
}

.Hero--showcase.TCSHeroSection .TCSHeroInSec .TCSHeroContent {
  max-width: 510px;
}

.Hero--showcase.TCSHeroSection .TCSHeroImage {
  display: none;
}

.HeroStrip {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  width: 100%;
}

.HeroStripItem {
  margin: 0;
}

.Hero.TCSHeroSection .HeroStripIcon,
.Hero.Hero--color-dark.TCSHeroSection .HeroStripIcon,
.Hero.Hero--color-brand.TCSHeroSection .HeroStripIcon,
.Hero.Hero--color-light.TCSHeroSection .HeroStripIcon,
.Hero.Hero--color-tint.TCSHeroSection .HeroStripIcon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--primary-color);
}

.Hero.TCSHeroSection .HeroStripIcon path {
  stroke: currentColor;
}

@media (max-width: 1024px) {
  .Hero--showcase.TCSHeroSection.baseModuleStyle {
    min-height: 560px;
  }

  .Hero--showcase.TCSHeroSection .TCSHeroInSec {
    max-width: 100%;
  }

  .Hero--showcase.TCSHeroSection .TCSHeroInSec .TCSHeroContent {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .Hero--showcase.TCSHeroSection.baseModuleStyle {
    min-height: 0;
  }

  .HeroStrip {
    flex-direction: column;
    align-items: flex-start;
  }
}

/*Blog Banner Changes*/
.TCSHeroeyebrow.eyebrowBox p {  display: inline-block; padding: 5px 18px; width: auto; border-radius: 20px; } 
.webinar-postSec .TCSHeroInSec { display: flex; flex-direction: column; } 
.webinar-postSec .TCSHeroInSec .HeroMeta { order: 1; }