.flex-badge-wrapper {
  display: flex;
}
.flex-badge-wrapper .flex-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3em !important;
  cursor: pointer;
  text-decoration: none;
  text-transform: none;
  line-height: 1.4;
  /* Longhands, not the `font` shorthand (which would wipe line-height).
     font-size carries !important so theme rules targeting generic descendant
     selectors (e.g. `.product__info-container *`) can't force another size;
     --flex-badge-size (the Badge Width control / width prop, see
     BADGE_WIDTH_RATIO) feeds through it, and the merchant's
     use_custom_font_size override still wins via the higher-specificity
     scoped #flex-badge-<id> rule. */
  font-family: var(--flex-font, inherit);
  font-style: inherit;
  font-weight: inherit;
  font-size: var(--flex-badge-size, inherit) !important;
}
/* The keyboard-accessible trigger: an unstyled button that defeats theme
   button rules; the surrounding div handles pointer clicks via delegation. */
.flex-badge-wrapper .flex-badge__open {
  display: inline-flex !important;
  padding: 0 !important;
  margin: 0 !important;
  /* Reset the button box height too: some themes force a tap-target
     min-height (e.g. Blockshop ~45px) on <button>, which — since the reset
     above doesn't touch height — makes this button the tallest flex item and
     top-aligns its text, dropping the pill/info below the text. Collapse it
     back to hug its single text line so align-items:center lines everything up. */
  min-height: 0 !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  color: inherit !important;
  cursor: pointer;
  text-decoration: none;
  text-transform: none;
  line-height: inherit;
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  font-size: inherit !important;
  letter-spacing: inherit;
}
.flex-badge-wrapper .flex-badge__open:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}
.flex-badge-wrapper .flex-badge__text {
  white-space: nowrap;
}
/* The pill's wordmark glyphs are the block's backlink (an SVG-internal
   anchor); the vector is colored here so the dark style can invert it
   without a second copy. */
.flex-badge-wrapper .flex-badge__pill {
  display: block !important;
  visibility: visible !important;
  height: 1.7em !important;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
}
.flex-badge-wrapper .flex-badge__pill-bg {
  fill: var(--flex-accent, #0b0077);
}
.flex-badge-wrapper .flex-badge__pill-mark {
  fill: #fff;
}
.flex-badge-wrapper .flex-badge__info {
  display: block !important;
  visibility: visible !important;
  height: 1em !important;
  width: 1em !important;
  flex: none !important;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}
.flex-badge-wrapper .flex-badge:hover .flex-badge__info {
  opacity: 1;
}
.flex-badge-wrapper .flex-badge:has(:focus-visible) .flex-badge__info {
  opacity: 1;
}
/* Dark style: white text + inverted pill for dark page backgrounds. */
.flex-badge-wrapper .flex-badge--dark {
  color: #fff !important;
}
.flex-badge-wrapper .flex-badge--dark .flex-badge__pill-bg {
  fill: #fff;
}
.flex-badge-wrapper .flex-badge--dark .flex-badge__pill-mark {
  fill: var(--flex-accent, #0b0077);
}

/* Affirm-style overlay: the <dialog> is a transparent, full-viewport SCROLL
   CONTAINER; the .flex-modal card inside always hugs its content and the
   overlay scrolls when the card is taller than the viewport (the card never
   gets an inner scrollbar). Clicking the overlay outside the card closes the
   pop-up (behavior/index.ts light dismiss). */
.flex-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 48px 16px;
  box-sizing: border-box;
  border: none;
  outline: none;
  background: transparent;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  /* Open/close animation (progressive — older browsers just snap). */
  opacity: 0;
  transition:
    opacity 0.2s ease,
    display 0.2s ease allow-discrete,
    overlay 0.2s ease allow-discrete;
}
.flex-dialog[open] {
  opacity: 1;
}
@starting-style {
  .flex-dialog[open] {
    opacity: 0;
  }
}
.flex-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition:
    opacity 0.2s ease,
    display 0.2s ease allow-discrete,
    overlay 0.2s ease allow-discrete;
}
.flex-dialog[open]::backdrop {
  opacity: 1;
}
@starting-style {
  .flex-dialog[open]::backdrop {
    opacity: 0;
  }
}
.flex-dialog__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  color: #aaa;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  outline-offset: 0;
  box-shadow: none;
  z-index: 1;
}
/* Restore a visible focus ring for keyboard users — the bare 'outline: none'
   above only suppresses the default for pointer focus. */
.flex-dialog__close:focus-visible {
  outline: 2px solid #0b0077;
  outline-offset: 2px;
  border-radius: 4px;
}
/* Card per the Figma spec: 432px, radius 20, padding 24, 24px section gaps.
   The pop-up is Flex-owned space — fixed type scale and colors, NOT the
   merchant theme's (only --flex-font/--flex-accent remain as CSS hooks). */
.flex-modal {
  position: relative;
  background: #fff;
  color: #171717;
  border-radius: 20px;
  padding: 24px;
  width: 432px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transform: translateY(8px) scale(0.98);
  transition: transform 0.2s ease;
}
.flex-dialog[open] .flex-modal {
  transform: none;
}
@starting-style {
  .flex-dialog[open] .flex-modal {
    transform: translateY(8px) scale(0.98);
  }
}
/* Inter by default — self-hosted on Shopify via flex-inter-font.css
   (MER-1507), an opt-in import on web — overridable via --flex-font. */
.flex-modal,
.flex-modal * {
  font-family: var(--flex-font, "Inter Variable", sans-serif);
}
.flex-modal__logo-link {
  display: block;
  width: fit-content;
  margin: 0 auto;
  text-decoration: none;
  color: inherit;
}
.flex-modal__logo-link:hover {
  opacity: 0.85;
}
.flex-modal__logo {
  display: block;
  width: 52px !important;
  height: 24px !important;
  max-width: none !important;
  color: #0b0077;
}
.flex-modal__heading {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.flex-modal h2.flex-modal__title {
  font-weight: 600;
  line-height: 24px;
  margin: 0;
  color: #171717;
}
.flex-modal p.flex-modal__subtitle {
  font-weight: 500;
  line-height: 20px;
  margin: 0;
  color: #575757;
}
/* The tabs scope wrapper is layout-transparent so the tab strip + active panel
   become direct flex children of .flex-modal — picking up its 24px gap (without
   this the strip and the first step collapse together). */
.flex-modal__tabbed {
  display: contents;
}
.flex-modal__tabs {
  display: flex;
  gap: 8px;
  background: #f7f7f7;
  border-radius: 8px;
  padding: 4px;
  margin: 0;
}
.flex-modal__tab {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 6px;
  padding: 6px 16px;
  /* Font-size is pinned INLINE (see pinFontSize): inline styles beat even
     an id-scoped important theme rule, which a class selector here cannot.
     Everything else (the pop-up is Flex-owned) stays in this stylesheet. */
  font-weight: 500;
  line-height: 20px;
  color: #adadad;
  cursor: pointer;
}
.flex-modal__tab[aria-selected="true"] {
  background: #fff;
  color: #171717;
  padding: 8px;
  border: 0.5px solid #e0e0e0;
  box-shadow:
    0 1px 3px 0 rgba(23, 23, 23, 0.1),
    0 1px 2px -1px rgba(23, 23, 23, 0.1);
}
.flex-modal__panel[hidden] {
  display: none;
}
.flex-modal__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.flex-modal__step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f7f7f7;
  border-radius: 12px;
  padding: 16px;
}
.flex-modal__step-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.flex-modal .flex-modal__step-number {
  flex: none;
  width: 22px;
  height: 22px;
  background: var(--flex-accent, #0b0077);
  color: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600 !important;
  line-height: 16px !important;
}
.flex-modal p.flex-modal__step-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-weight: 500 !important;
  line-height: 20px !important;
  color: #171717;
}
/* Indented under the step text (22px badge + 16px gap). */
.flex-modal img.flex-modal__illustration {
  display: block !important;
  width: calc(100% - 38px) !important;
  height: auto !important;
  margin: 0 0 0 38px !important;
  border-radius: 0;
}
.flex-modal__footer {
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  color: #adadad;
}
.flex-modal__footer a {
  color: #adadad;
  font-weight: 500;
  line-height: 16px;
  text-decoration: none;
}
/* Terms/Privacy show a hover underline; the Powered-by brand link does not
   (it reads as a logo lockup, not body text). */
.flex-modal__footer a:not(.flex-modal__powered):hover {
  text-decoration: underline;
}
.flex-modal__footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
/* Footer text is 12px throughout, matching the Terms/Privacy links. */
.flex-modal__powered,
.flex-modal .flex-modal__powered {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.flex-modal__powered-mark {
  display: block;
  height: 13px;
  width: auto;
}
.flex-modal__footer-divider {
  width: 1px;
  height: 24px;
  background: #e0e0e0;
}
/* Disclaimer sits a step below the 12px footer links, per Connor. */
.flex-modal p.flex-modal__disclaimer {
  margin: 0;
  font-weight: 500;
  line-height: 16px;
}
.flex-modal__disclaimer a {
  line-height: 16px;
  text-decoration: underline;
  text-decoration-style: dotted;
}

.flex-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 44px 10px 16px;
  /* Inter by default (designer spec: 14/20 medium) — overridable via --flex-font. */
  font-family: var(--flex-font, "Inter Variable", sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  /* App embed blocks inject at the end of <body>; pin the bar to the top.
     The behavior script reserves matching space on <body> so the bar doesn't
     cover the theme header. z-index is overridable so themes can layer it. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--flex-banner-z, 1000);
}
.flex-banner[hidden] {
  display: none;
}
/* Inline placement (section block): flows in-page instead of pinning. */
.flex-banner--inline {
  position: static;
}
/* Color scheme: light = white content for dark banner colors; dark = navy
   content for light banner colors. The wordmark inherits currentColor (the
   dark scheme pins it to the brand accent per the designer spec). */
.flex-banner--light {
  color: #fff;
}
.flex-banner--dark {
  color: #001229;
}
.flex-banner__logo {
  height: 15px;
  width: auto;
  display: inline-block;
  flex: none;
}
.flex-banner--dark .flex-banner__logo {
  color: #0b0077;
}
.flex-banner__divider {
  width: 1px;
  height: 20px;
  background: currentColor;
  opacity: 0.3;
}
.flex-banner__text {
  color: inherit;
}
/* Link chip per the Figma spec (colors come from the merchant's Link Font /
   Link Badge color settings, applied inline). */
.flex-banner__chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  border-radius: 20px;
  border: 0.5px solid #d9d9d9;
  box-shadow: 0 1px 2px 0 rgba(23, 23, 23, 0.05);
  font-size: 10px;
  font-weight: 500;
  line-height: 10px;
  text-decoration: none;
  white-space: nowrap;
}
.flex-banner__chip:hover {
  opacity: 0.9;
}
.flex-banner__dismiss {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  line-height: 0;
}
.flex-banner__dismiss:hover {
  opacity: 1;
}

.flex-faq {
  font-family: var(--flex-font, inherit);
  background: var(--flex-faq-bg);
}
.flex-faq__inner {
  max-width: var(--flex-faq-width);
  margin: 0 auto;
}
.flex-faq__heading {
  text-align: var(--flex-align);
  margin-bottom: 24px;
}
.flex-faq h2.flex-faq__title {
  font-weight: 700;
  margin: 0 0 8px;
  font-size: var(--flex-faq-title-size);
  color: var(--flex-faq-title-color);
}
.flex-faq__group-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #4a5568;
  margin: 24px 0 12px;
}
.flex-faq__group-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e4e4e7;
}
.flex-faq__item {
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  padding: 0 16px;
  margin-bottom: 12px;
  background: var(--flex-faq-card);
}
.flex-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  cursor: pointer;
}
.flex-faq__question-text {
  font-weight: 500;
  text-align: left;
  font-size: var(--flex-faq-question-size);
  color: var(--flex-faq-question-color);
}
.flex-faq__question-text a {
  color: inherit;
  text-decoration: underline;
}
.flex-faq__toggle {
  flex: none;
  display: flex;
  padding: 0;
  background: transparent;
  border: none;
  color: #4a5568;
  cursor: pointer;
}
.flex-faq__icon {
  display: flex;
  transition: transform 0.2s ease;
}
.flex-faq__icon svg {
  width: 16px;
  height: 16px;
  display: block;
}
.flex-faq__toggle[aria-expanded="true"] .flex-faq__icon {
  transform: rotate(180deg);
}
.flex-faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.flex-faq__answer[data-open="true"] {
  grid-template-rows: 1fr;
}
.flex-faq__answer-inner {
  overflow: hidden;
  min-height: 0;
  font-size: var(--flex-faq-answer-size);
  color: var(--flex-faq-answer-color);
}
.flex-faq__answer-inner p,
.flex-faq__answer-inner ol {
  margin: 0 0 14px;
  line-height: 1.6;
}
.flex-faq__answer-inner ol {
  padding-left: 20px;
}
.flex-faq__answer-inner a {
  color: inherit;
  text-decoration: underline;
}

.flex-hero {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  /* Bottom corners only: the hero is designed to sit flush under the header.
     --flex-hero-radius (the Border Radius control / borderRadius prop) is
     always set inline on the root — no fallback, so the settings default
     can't drift into a second copy here. */
  border-radius: 0 0 var(--flex-hero-radius) var(--flex-hero-radius);
  font-family: var(--flex-font, inherit);
}
.flex-hero__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 32px;
}
.flex-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 568px;
}
.flex-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid currentColor;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
.flex-hero__pill--navy {
  color: #0b0077;
}
.flex-hero__pill--black {
  color: #171717;
}
.flex-hero__pill--white {
  color: #ffffff;
}
.flex-hero__pill-mark {
  display: block;
  height: 13px;
  width: auto;
}
.flex-hero h2.flex-hero__title {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.026em;
  line-height: 1.05;
}
/* Title/subtitle sizes are merchant text roles (inline via Text, with a
   9vw cap on the title so large settings can't overflow phones). */
.flex-hero p.flex-hero__subtitle {
  margin: 0;
  line-height: 1.6;
}
.flex-hero--dark .flex-hero__title {
  color: #171717;
}
.flex-hero--dark .flex-hero__subtitle {
  color: #52525c;
}
.flex-hero--light .flex-hero__title {
  color: #ffffff;
}
.flex-hero--light .flex-hero__subtitle {
  color: rgba(255, 255, 255, 0.8);
}
.flex-hero__media {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  min-height: 480px;
}
.flex-hero__media .flex-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 749px) {
  .flex-hero {
    flex-direction: column;
  }
  /* flex:none on BOTH halves — in the column layout each must size itself
     from its content / aspect ratio; a 0 flex-basis inside a theme wrapper
     that constrains height shrinks the text half and clips the copy. */
  .flex-hero__content {
    flex: none;
    min-height: 0;
    padding: 56px 24px;
  }
  .flex-hero__media {
    flex: none;
    min-height: 0;
    aspect-ratio: 5 / 4;
  }
}

.flex-subscription {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;
  /* Padding comes from the padding settings (inline on the root). The font
     inherits the theme's, like the sibling sections — naming "Inter Variable"
     here silently fell through to Helvetica on Shopify, where that font face
     only exists if the badge loaded it. */
  font-family: var(--flex-font, inherit);
}
.flex-subscription__heading {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  max-width: 820px;
}
.flex-subscription__eyebrow {
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--flex-accent);
}
.flex-subscription h2.flex-subscription__title {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.33;
}
.flex-subscription p.flex-subscription__subtitle {
  margin: 0;
  font-weight: 400;
  line-height: 1.5;
}
.flex-subscription__content {
  display: flex;
  align-items: center;
  gap: 50px;
  width: 100%;
  max-width: 1100px;
}
.flex-subscription__media {
  flex: 1 1 0;
  min-width: 0;
  max-width: 611px;
}
.flex-subscription__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  border: 1px solid #d9d9d9;
}
.flex-subscription__steps {
  flex: 1 1 0;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 35px;
}
.flex-subscription__step {
  display: flex;
  align-items: center;
  gap: 20px;
}
.flex-subscription__step-number {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--flex-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.flex-subscription p.flex-subscription__step-text {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.5;
}
.flex-subscription__step-text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
}
@media (max-width: 899px) {
  .flex-subscription__content {
    flex-direction: column;
    gap: 35px;
  }
  /* flex:none + explicit widths — in the column layout a 0 flex-basis plus
     the image's intrinsic 611px width lets it overflow narrow viewports. */
  .flex-subscription__media,
  .flex-subscription__steps {
    flex: none;
    width: 100%;
    max-width: 611px;
  }
}

.flex-walkthrough {
  max-width: 1320px;
  margin: 0 auto;
  font-family: var(--flex-font, inherit);
  color: #001229;
  /* --flex-align/-margin/-accent are always set inline on the root from
     the block settings; no fallbacks (they'd drift from settings defaults). */
  text-align: var(--flex-align);
}
.flex-walkthrough__heading {
  margin-bottom: 32px;
}
.flex-walkthrough__eyebrow {
  display: block;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--flex-accent);
  margin: 0 0 10px;
}
.flex-walkthrough h2.flex-walkthrough__title {
  font-weight: 600;
  margin: 0 0 10px;
}
.flex-walkthrough__subtitle {
  line-height: 1.5;
  max-width: 720px;
  margin: var(--flex-align-margin);
}
/* Steps grid: count-aware columns so cards only ever group as full rows —
   3 cards: 1 or 3 across; 4 cards: 1, 2x2, or 4 across (never 3+1). */
.flex-walkthrough__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  text-align: left;
}
@media (min-width: 760px) {
  .flex-walkthrough__steps--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 640px) {
  .flex-walkthrough__steps--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1080px) {
  .flex-walkthrough__steps--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
.flex-walkthrough__step {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.flex-walkthrough__illustration {
  display: block;
  width: 100%;
  height: auto;
}
/* Step rows pin to the card bottom so they align across unequal cards. */
.flex-walkthrough__step-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f4f4f5;
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: auto;
}
.flex-walkthrough__step-number {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--flex-accent);
  color: #fff;
  font-weight: 600;
}
.flex-walkthrough__step-text {
  margin: 0;
  font-weight: 500;
  line-height: 1.4;
}