/* Buttons sit in the slot. Items align to the top, so a button with a note
   under it doesn't push its neighbours out of line. */
.xN_ptZnlEpWOQkbYs6AP {
  --_gap: 0.75rem;

  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: var(--tt-buttons-justify, flex-start);
  gap: var(--_gap);
  box-sizing: border-box;
}

/* Webflow wraps slot content in one element; display: contents lets each
   button become a flex item of the group. */
.xN_ptZnlEpWOQkbYs6AP ::slotted(*) {
  display: contents;
}

.xN_ptZnlEpWOQkbYs6AP[data-gap="x-small"] { --_gap: 0.25rem; }
.xN_ptZnlEpWOQkbYs6AP[data-gap="small"] { --_gap: 0.5rem; }
.xN_ptZnlEpWOQkbYs6AP[data-gap="large"] { --_gap: 1rem; }
.xN_ptZnlEpWOQkbYs6AP[data-gap="x-large"] { --_gap: 1.5rem; }

/* Space above: same scale as the site's .top-* utilities (scss/base/_globals.scss). */
.xN_ptZnlEpWOQkbYs6AP[data-space-above="xx-small"] { margin-top: 1rem; }
.xN_ptZnlEpWOQkbYs6AP[data-space-above="x-small"] { margin-top: 1.5rem; }
.xN_ptZnlEpWOQkbYs6AP[data-space-above="small"] { margin-top: 2rem; }
.xN_ptZnlEpWOQkbYs6AP[data-space-above="normal"] { margin-top: 3rem; }
.xN_ptZnlEpWOQkbYs6AP[data-space-above="medium"] { margin-top: 4rem; }
.xN_ptZnlEpWOQkbYs6AP[data-space-above="large"] { margin-top: 6rem; }
.xN_ptZnlEpWOQkbYs6AP[data-space-above="x-large"] { margin-top: 8rem; }

/* Without Align (Auto) the group follows the component around it. */
.xN_ptZnlEpWOQkbYs6AP[data-align="left"] { justify-content: flex-start; }
.xN_ptZnlEpWOQkbYs6AP[data-align="center"] { justify-content: center; }
.xN_ptZnlEpWOQkbYs6AP[data-align="right"] { justify-content: flex-end; }

@media (max-width: 479px) {
  .xN_ptZnlEpWOQkbYs6AP[data-space-above="normal"] { margin-top: 2.5rem; }
  .xN_ptZnlEpWOQkbYs6AP[data-space-above="medium"] { margin-top: 3rem; }
  .xN_ptZnlEpWOQkbYs6AP[data-space-above="large"] { margin-top: 5rem; }
  .xN_ptZnlEpWOQkbYs6AP[data-space-above="x-large"] { margin-top: 6rem; }

  .xN_ptZnlEpWOQkbYs6AP[data-stack] {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Live pattern (.tt-heading-content > .tt-heading-group + .text-intro): label
   close to the heading, a muted subline, optional smaller text and buttons.
   Each part sets the --tt- roles for the Webflow elements in its slot.
   Gaps belong to the part below them; the first filled part of a column has
   none (data-first, set by the component). Split: a grid with label, heading
   and buttons on the left and subline + text on the right; below Stack below it
   falls back to the stacked order. */
.sDDgtENvOePQvFTVoHNw {
  --_gap-heading: var(--tt-space-card-xs, 0.5rem);
  --_gap-subline: var(--tt-space-card-sm, clamp(0.75rem, 0.49rem + 0.977vw, 1rem));
  --_gap-text: var(--tt-space-card-md, clamp(1.5rem, 0.98rem + 1.953vw, 2rem));
  --_gap-buttons: var(--tt-space-section-xs, 2rem);
  --_heading: var(--tt-heading-2xl, clamp(2.2rem, 1.368rem + 3.125vw, 3rem));
  --_heading-lh: var(--tt-heading-2xl-lh, 1);
  --_subline: var(--tt-heading-base, clamp(1.2rem, 1.096rem + 0.391vw, 1.3rem));
  --_text: var(--tt-text-sm, 1rem);
  --_para-gap: var(--tt-space-card-sm, clamp(0.75rem, 0.49rem + 0.977vw, 1rem));
  --_column-gap: var(--tt-space-section-rg, clamp(3rem, 1.96rem + 3.906vw, 4rem));
  --_columns: 1fr 1fr;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: var(--_items, center);
  /* Fills its parent's width, so Align decides where the text sits, not the
     parent. Only the width: align-self: stretch would also fill the height in a
     row or grid and override the parent's Vertical align. */
  width: 100%;
  text-align: var(--_text-align, center);
}

.sDDgtENvOePQvFTVoHNw[data-empty] {
  display: none;
}

/* ---------- Size ---------- */
.sDDgtENvOePQvFTVoHNw[data-size="small"] {
  --_heading: var(--tt-heading-lg, clamp(1.7rem, 1.492rem + 0.781vw, 1.9rem));
  --_heading-lh: var(--tt-heading-lg-lh, 1.1);
  --_subline: var(--tt-text-lg, 1.1rem);
}

.sDDgtENvOePQvFTVoHNw[data-size="large"] {
  --_heading: var(--tt-heading-3xl, clamp(2.6rem, 1.56rem + 3.906vw, 3.6rem));
  --_heading-lh: var(--tt-heading-3xl-lh, 0.95);
  --_subline: var(--tt-heading-md, clamp(1.4rem, 1.192rem + 0.781vw, 1.6rem));
}

/* ---------- Spacing ---------- */
.sDDgtENvOePQvFTVoHNw[data-spacing="compact"] {
  --_gap-heading: 0.25rem;
  --_gap-subline: var(--tt-space-card-sm, clamp(0.75rem, 0.49rem + 0.977vw, 1rem));
  --_gap-text: var(--tt-space-card-rg, clamp(1rem, 0.48rem + 1.953vw, 1.5rem));
  --_gap-buttons: var(--tt-space-card-md, clamp(1.5rem, 0.98rem + 1.953vw, 2rem));
}

.sDDgtENvOePQvFTVoHNw[data-spacing="loose"] {
  --_gap-heading: var(--tt-space-card-sm, clamp(0.75rem, 0.49rem + 0.977vw, 1rem));
  --_gap-subline: var(--tt-space-card-md, clamp(1.5rem, 0.98rem + 1.953vw, 2rem));
  --_gap-text: var(--tt-space-section-xs, 2rem);
  --_gap-buttons: var(--tt-space-section-sm, 3rem);
}

/* ---------- Align per breakpoint (Tablet <= 991px, Mobile <= 767px) ---------- */
.sDDgtENvOePQvFTVoHNw[data-align="left"] { --_items: flex-start; --_text-align: start; --_justify: flex-start; }

@media (max-width: 991px) {
  .sDDgtENvOePQvFTVoHNw[data-align-tablet="left"] { --_items: flex-start; --_text-align: start; --_justify: flex-start; }
  .sDDgtENvOePQvFTVoHNw[data-align-tablet="center"] { --_items: center; --_text-align: center; --_justify: center; }
}

@media (max-width: 767px) {
  .sDDgtENvOePQvFTVoHNw[data-align-mobile="left"] { --_items: flex-start; --_text-align: start; --_justify: flex-start; }
  .sDDgtENvOePQvFTVoHNw[data-align-mobile="center"] { --_items: center; --_text-align: center; --_justify: center; }
}

/* ---------- Text size, paragraph gap ---------- */
.sDDgtENvOePQvFTVoHNw[data-text-size="small"] { --_text: var(--tt-text-xs, 0.9rem); }
.sDDgtENvOePQvFTVoHNw[data-text-size="large"] { --_text: var(--tt-text-lg, 1.1rem); }

.sDDgtENvOePQvFTVoHNw[data-paragraph-gap="none"] { --_para-gap: 0rem; }
.sDDgtENvOePQvFTVoHNw[data-paragraph-gap="x-small"] { --_para-gap: var(--tt-space-card-xs, 0.5rem); }
.sDDgtENvOePQvFTVoHNw[data-paragraph-gap="regular"] { --_para-gap: var(--tt-space-card-rg, clamp(1rem, 0.48rem + 1.953vw, 1.5rem)); }
.sDDgtENvOePQvFTVoHNw[data-paragraph-gap="medium"] { --_para-gap: var(--tt-space-card-md, clamp(1.5rem, 0.98rem + 1.953vw, 2rem)); }

/* ---------- Split: ratio, column gap ---------- */
.sDDgtENvOePQvFTVoHNw[data-ratio="3-2"] { --_columns: 3fr 2fr; }
.sDDgtENvOePQvFTVoHNw[data-ratio="2-3"] { --_columns: 2fr 3fr; }
.sDDgtENvOePQvFTVoHNw[data-column-gap="medium"] { --_column-gap: var(--tt-space-section-sm, 3rem); }
.sDDgtENvOePQvFTVoHNw[data-column-gap="x-large"] { --_column-gap: var(--tt-space-section-md, 6rem); }

/* ---------- Parts ---------- */
.sDDgtENvOePQvFTVoHNw .gss9w6vQRZAhUmxCSKxg {
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
}

.sDDgtENvOePQvFTVoHNw .gss9w6vQRZAhUmxCSKxg ::slotted(*) {
  display: contents;
}

/* Higher specificity than the parts' own display (flex), so empty parts always go. */
.sDDgtENvOePQvFTVoHNw .gss9w6vQRZAhUmxCSKxg[data-part][data-empty] {
  display: none;
}

/* Stacked: the right column is no box of its own. */
.sDDgtENvOePQvFTVoHNw .gss9w6vQRZAhUmxCSKxg[data-column="aside"] {
  display: contents;
}

.sDDgtENvOePQvFTVoHNw .gss9w6vQRZAhUmxCSKxg[data-part="heading"] { margin-top: var(--_gap-heading); }
.sDDgtENvOePQvFTVoHNw .gss9w6vQRZAhUmxCSKxg[data-part="subline"] { margin-top: var(--_gap-subline); }
.sDDgtENvOePQvFTVoHNw .gss9w6vQRZAhUmxCSKxg[data-part="text"] { margin-top: var(--_gap-text); }
.sDDgtENvOePQvFTVoHNw .gss9w6vQRZAhUmxCSKxg[data-part="buttons"] { margin-top: var(--_gap-buttons); }
.sDDgtENvOePQvFTVoHNw .gss9w6vQRZAhUmxCSKxg[data-first] { margin-top: 0; }

/* Every heading level gets the group's size; the level stays an editor choice.
   The heading is placed like the text (Align): a heading class with its own
   width or max-width would otherwise sit left inside the centered frame. */
.sDDgtENvOePQvFTVoHNw .gss9w6vQRZAhUmxCSKxg[data-part="heading"] {
  display: flex;
  flex-direction: column;
  align-items: var(--_items, center);
  width: 100%;
  max-width: var(--_w-heading);
  --tt-h1-size: var(--_heading);
  --tt-h2-size: var(--_heading);
  --tt-h3-size: var(--_heading);
  --tt-h4-size: var(--_heading);
  --tt-h5-size: var(--_heading);
  --tt-h6-size: var(--_heading);
  --tt-h1-lh: var(--_heading-lh);
  --tt-h2-lh: var(--_heading-lh);
  --tt-h3-lh: var(--_heading-lh);
  --tt-h4-lh: var(--_heading-lh);
  --tt-h5-lh: var(--_heading-lh);
  --tt-h6-lh: var(--_heading-lh);
}

/* Several paragraphs in one slot: the slot wrapper has display: contents, so
   they are the column's items and get the paragraph gap. Subline is muted
   through opacity, so it works on light and dark sections alike. */
.sDDgtENvOePQvFTVoHNw .gss9w6vQRZAhUmxCSKxg[data-part="subline"],
.sDDgtENvOePQvFTVoHNw .gss9w6vQRZAhUmxCSKxg[data-part="text"] {
  display: flex;
  flex-direction: column;
  align-items: var(--_items, center);
  gap: var(--_para-gap);
  width: 100%;
}

.sDDgtENvOePQvFTVoHNw .gss9w6vQRZAhUmxCSKxg[data-part="subline"] {
  max-width: var(--_w-subline);
  --tt-text-size: var(--_subline);
  opacity: var(--tt-text-muted-opacity, 60%);
}

/* Solid: full text color, no opacity. */
.sDDgtENvOePQvFTVoHNw[data-subline-style="solid"] .gss9w6vQRZAhUmxCSKxg[data-part="subline"] {
  opacity: 1;
}

.sDDgtENvOePQvFTVoHNw .gss9w6vQRZAhUmxCSKxg[data-part="text"] {
  max-width: var(--_w-text);
  --tt-text-size: var(--_text);
}

/* The Button Group inside follows the alignment per breakpoint. */
.sDDgtENvOePQvFTVoHNw .gss9w6vQRZAhUmxCSKxg[data-part="buttons"] {
  --tt-buttons-justify: var(--_justify, center);
}

/* ---------- Split (from 992px, or from 768px with Stack below: Mobile) ----------
   Rows: label, heading, buttons on the left; the right column starts at the
   heading row, so heading and text share a top edge, and the last row takes the
   extra height so the buttons stay under the heading. --_shift-aside /
   --_shift-heading (set by the component) line up their cap heights. */
@media (min-width: 992px) {
  .sDDgtENvOePQvFTVoHNw[data-layout="split"][data-stack-below="tablet"] {
    --_items: flex-start; --_text-align: start; --_justify: flex-start;
    display: grid;
    grid-template-columns: var(--_columns);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--_column-gap);
    align-items: start;
  }
  .sDDgtENvOePQvFTVoHNw[data-layout="split"][data-stack-below="tablet"] .gss9w6vQRZAhUmxCSKxg { grid-column: 1; }
  .sDDgtENvOePQvFTVoHNw[data-layout="split"][data-stack-below="tablet"] .gss9w6vQRZAhUmxCSKxg[data-part="label"] { grid-row: 1; }
  .sDDgtENvOePQvFTVoHNw[data-layout="split"][data-stack-below="tablet"] .gss9w6vQRZAhUmxCSKxg[data-part="heading"] { grid-row: 2; }
  .sDDgtENvOePQvFTVoHNw[data-layout="split"][data-stack-below="tablet"] .gss9w6vQRZAhUmxCSKxg[data-part="buttons"] { grid-row: 3; }
  .sDDgtENvOePQvFTVoHNw[data-layout="split"][data-stack-below="tablet"] .gss9w6vQRZAhUmxCSKxg[data-column="aside"] {
    display: block;
    grid-column: 2;
    grid-row: 2 / -1;
    margin-top: var(--_shift-aside, 0px);
  }
  .sDDgtENvOePQvFTVoHNw[data-layout="split"][data-stack-below="tablet"] .gss9w6vQRZAhUmxCSKxg[data-first-split] { margin-top: 0; }
  .sDDgtENvOePQvFTVoHNw[data-layout="split"][data-stack-below="tablet"] .gss9w6vQRZAhUmxCSKxg[data-part="heading"] {
    margin-top: calc(var(--_gap-heading) + var(--_shift-heading, 0px));
  }
  .sDDgtENvOePQvFTVoHNw[data-layout="split"][data-stack-below="tablet"] .gss9w6vQRZAhUmxCSKxg[data-part="heading"][data-first-split] {
    margin-top: var(--_shift-heading, 0px);
  }
  .sDDgtENvOePQvFTVoHNw[data-layout="split"][data-stack-below="tablet"][data-text-position="center"] .gss9w6vQRZAhUmxCSKxg[data-column="aside"] { align-self: center; }
  .sDDgtENvOePQvFTVoHNw[data-layout="split"][data-stack-below="tablet"][data-text-position="bottom"] .gss9w6vQRZAhUmxCSKxg[data-column="aside"] { align-self: end; }
}

@media (min-width: 768px) {
  .sDDgtENvOePQvFTVoHNw[data-layout="split"][data-stack-below="mobile"] {
    --_items: flex-start; --_text-align: start; --_justify: flex-start;
    display: grid;
    grid-template-columns: var(--_columns);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--_column-gap);
    align-items: start;
  }
  .sDDgtENvOePQvFTVoHNw[data-layout="split"][data-stack-below="mobile"] .gss9w6vQRZAhUmxCSKxg { grid-column: 1; }
  .sDDgtENvOePQvFTVoHNw[data-layout="split"][data-stack-below="mobile"] .gss9w6vQRZAhUmxCSKxg[data-part="label"] { grid-row: 1; }
  .sDDgtENvOePQvFTVoHNw[data-layout="split"][data-stack-below="mobile"] .gss9w6vQRZAhUmxCSKxg[data-part="heading"] { grid-row: 2; }
  .sDDgtENvOePQvFTVoHNw[data-layout="split"][data-stack-below="mobile"] .gss9w6vQRZAhUmxCSKxg[data-part="buttons"] { grid-row: 3; }
  .sDDgtENvOePQvFTVoHNw[data-layout="split"][data-stack-below="mobile"] .gss9w6vQRZAhUmxCSKxg[data-column="aside"] {
    display: block;
    grid-column: 2;
    grid-row: 2 / -1;
    margin-top: var(--_shift-aside, 0px);
  }
  .sDDgtENvOePQvFTVoHNw[data-layout="split"][data-stack-below="mobile"] .gss9w6vQRZAhUmxCSKxg[data-first-split] { margin-top: 0; }
  .sDDgtENvOePQvFTVoHNw[data-layout="split"][data-stack-below="mobile"] .gss9w6vQRZAhUmxCSKxg[data-part="heading"] {
    margin-top: calc(var(--_gap-heading) + var(--_shift-heading, 0px));
  }
  .sDDgtENvOePQvFTVoHNw[data-layout="split"][data-stack-below="mobile"] .gss9w6vQRZAhUmxCSKxg[data-part="heading"][data-first-split] {
    margin-top: var(--_shift-heading, 0px);
  }
  .sDDgtENvOePQvFTVoHNw[data-layout="split"][data-stack-below="mobile"][data-text-position="center"] .gss9w6vQRZAhUmxCSKxg[data-column="aside"] { align-self: center; }
  .sDDgtENvOePQvFTVoHNw[data-layout="split"][data-stack-below="mobile"][data-text-position="bottom"] .gss9w6vQRZAhUmxCSKxg[data-column="aside"] { align-self: end; }
}