/* ================================================================
  FREE TRIAL V4 — Google Ads free-trial variation (free-trial-v4.html)
  Everything is scoped under main.ft4. Colours come from the semantic
  --color-* tokens of whichever data-bundle-color scope an element sits
  in; the page-level aliases below are resolved once in the onyx scope
  of <main> and inherit as computed values into nested bundles.
  Layout patterns follow Jumpseller's own 2026 pages: split hero with
  storefront columns (home hero), asymmetric .js-cards grid (home
  features), full-bleed green final band, split sticky FAQ include.
================================================================ */
.ft4 {
  --ft4-go: var(--color-accent);          /* brand green */
  --ft4-ink: var(--color-background);     /* onyx */
  --ft4-snow: var(--color-main);          /* bright snow */
  --ft4-shadow: 0 30px 80px -30px var(--color-background-op9);
  --ft4-shadow-soft: 0 24px 60px -28px var(--color-background-op5);
  --ft4-ease: cubic-bezier(.22, 1, .36, 1);
  --ft4-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ft4-r-lg: var(--js-radius-xl);   /* 16px — largest surface radius */
  --ft4-r-md: var(--js-radius-lg);   /* 12px */
  --ft4-r-sm: var(--js-radius-md);   /* 8px */
  --ft4-r-pill: 999px;
  --ft4-r-device: 24px;              /* phone frames */
  --ft4-tint: color-mix(in srgb, var(--color-accent) 14%, transparent);   /* decorative green: tints only */
  --ft4-elev-1: 0 10px 28px -18px var(--color-background-op6);
  --ft4-fs-h1: clamp(52px, 5vw, 72px);
  --ft4-fs-h2: calc(var(--font-base-size) * 3);        /* 48px */
  --ft4-fs-h3: calc(var(--font-base-size) * 1.375);    /* 22px */
  /* card fields + editor palettes. Secondary brand colours (and pure white /
     carbon outside their own bundles) only exist as --js-* primitives, so they
     are aliased once here instead of being used directly in components. */
  --ft4-white: var(--js-color-white);
  --ft4-carbon: var(--js-color-carbon-black);
  --ft4-purple: var(--js-color-purple-light);
  --ft4-purple-dark: var(--js-color-purple-dark);
  --ft4-blue: var(--js-color-blue-light);
  --ft4-teal: var(--js-color-teal-dark);
  --ft4-teal-light: var(--js-color-teal-light);
  --ft4-field-teal: var(--js-gradient-teal-reversed);
  --ft4-field-blue: var(--js-gradient-blue);
  --ft4-field-purple: var(--js-gradient-purple-reversed);
  overflow-x: hidden;
  overflow-x: clip;
}

.ft4 :is(p, ul, dl, dd, figure, blockquote) {
  margin: 0;
}

.ft4 ul {
  padding: 0;
  list-style: none;
}

/* width/height attributes are for aspect-ratio only; CSS sets the size */
.ft4 img {
  height: auto;
}

.ft4 .ft4-icon {
  display: inline-block;
  flex-shrink: 0;
}

.ft4 i {
  font-style: normal;
}

/* Shared type ---------------------------------------------------- */
.ft4 .ft4-h2 {
  font-family: var(--font-main);
  font-weight: 600;
  font-size: var(--ft4-fs-h2);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}

.ft4 .ft4-lede {
  font-size: calc(var(--font-base-size) * 1.125);
  line-height: 1.55;
  text-wrap: pretty;
}

.ft4 .ft4-eyebrow,
.ft4 .js-partners .js-section__subtitle {
  font-family: var(--font-main);
  font-weight: 600;
  font-size: calc(var(--font-base-size) * 0.8125);
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 1;
  text-wrap: balance;
}

.ft4 .ft4-eyebrow {
  color: var(--eyebrow-color);
}

.ft4 .js-partners .js-section__subtitle {
  color: var(--color-secondary-op7);
}

/* Accent word in the hero headline: green text on onyx (no fill) */
.ft4 .ft4-hero__accent {
  color: var(--ft4-go);
}

/* Scroll reveal (gated on .ft4-js so no-JS visitors see everything) */
.ft4-js [data-ft4-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ft4-ease), transform 0.8s var(--ft4-ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.ft4-js [data-ft4-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ================================================================
  FORM — base .js-section__form pill (colours come from base.css and
  the surrounding bundle); only sizing is tuned here.
================================================================ */
.ft4 .ft4-form {
  max-width: 540px;
  margin: 0;
}

.ft4 .ft4-form .js-section__form-input {
  height: 52px;
  padding: 0 14px;
  font-size: 16px;
}

.ft4 .ft4-form .js-section__form-input::placeholder {
  color: var(--color-main-op6);
}

.ft4 .ft4-form .ft4-form__button {
  height: 52px;
  padding: 0 22px;
  gap: 10px;
  font-size: 17px;
}

.ft4 .ft4-form .ft4-form__button .ft4-icon {
  transition: transform 0.25s var(--ft4-ease);
}

.ft4 .ft4-form .ft4-form__button:hover .ft4-icon {
  transform: translateX(4px);
}

.ft4 .ft4-form .ft4-form__button:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

/* On green the base translucent field disappears: use a solid snow field
   with a crisp border, and an onyx focus ring (the base green ring is invisible) */
.ft4 [data-bundle-color="green"] .ft4-form {
  background: var(--color-accent-contrast);
  border-color: var(--color-main-op3);
}

.ft4 [data-bundle-color="green"] .ft4-form:hover {
  border-color: var(--color-main-op5);
}

.ft4 [data-bundle-color="green"] .ft4-form:focus-within {
  background: var(--color-accent-contrast);
  border-color: var(--color-main);
  box-shadow: 0 0 0 3px var(--color-main-op2);
}

/* on dark: an outline that reads at rest (≥3:1), brighter on hover, green on focus */
.ft4 [data-bundle-color="onyx"] .ft4-form {
  border-color: var(--color-main-op4);
}

.ft4 [data-bundle-color="onyx"] .ft4-form:hover {
  border-color: var(--color-main-op6);
}

.ft4 [data-bundle-color="onyx"] .ft4-form:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--ft4-tint);
}

/* shown after a blocked Start Trial with a malformed email */
.ft4 .ft4-form__hint {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-main);
}

.ft4 .ft4-form__hint[hidden] {
  display: none;
}

.ft4 .ft4-assure {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-secondary-op7);
}

.ft4 .ft4-assure li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ft4 .ft4-assure .ft4-icon {
  color: var(--color-accent);
}

/* ================================================================
  HERO — split copy / storefront panel
================================================================ */
.ft4 .ft4-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: clamp(680px, 100svh, 900px);
  padding-top: calc(var(--header-height-desktop) + 24px);
  padding-bottom: calc(var(--js-padding) * 5);
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}

.ft4 .ft4-hero > .js-container__content {
  position: relative;
  z-index: 2;
  width: 100%;
}

.ft4 .ft4-hero__row {
  row-gap: calc(var(--js-padding) * 4);
}

.ft4 .ft4-hero__copy {
  max-width: 620px;
}

.ft4 .ft4-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 14px;
  border-radius: var(--ft4-r-pill);
  box-shadow: inset 0 0 0 1px var(--color-main-op2);
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-main);
}

.ft4 .ft4-hero__dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ft4-go);
}

.ft4 .ft4-hero__title {
  margin: 18px 0 16px;
  font-family: var(--font-main);
  font-weight: 600;
  font-size: var(--ft4-fs-h1);
  line-height: 1.02;
  letter-spacing: -0.032em;
  color: var(--color-main);
  text-wrap: balance;
}

.ft4 .ft4-hero__sub {
  max-width: 500px;
  margin-bottom: 28px;
  font-size: 19px;
  line-height: 1.5;
  text-wrap: balance;
}

.ft4 .ft4-hero__visual {
  position: relative;
}

/* Storefront panel: three untilted columns drifting at different speeds */
.ft4 .ft4-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr) minmax(0, 0.8fr);
  gap: 14px;
  height: clamp(520px, 70svh, 640px);
  padding: 0 14px;
  border-radius: var(--ft4-r-lg);
  background: var(--color-background);
  box-shadow: 0 0 0 1px var(--color-border), var(--ft4-shadow);
  overflow: hidden;
  contain: layout paint;
}

.ft4 .ft4-panel__col {
  min-width: 0;
  overflow: hidden;
}

.ft4 .ft4-panel__track {
  display: flex;
  flex-direction: column;
  animation: ft4-drift var(--ft4-dur, 60s) linear infinite;
  animation-delay: var(--ft4-delay, 0s);
  animation-play-state: paused;
  will-change: transform;
}

.ft4 .ft4-panel__col--a .ft4-panel__track { --ft4-dur: 62s; --ft4-delay: -8s; }
.ft4 .ft4-panel__col--b .ft4-panel__track { --ft4-dur: 84s; --ft4-delay: -30s; animation-direction: reverse; }
.ft4 .ft4-panel__col--c .ft4-panel__track { --ft4-dur: 54s; --ft4-delay: -20s; }

.ft4 .ft4-panel.is-live .ft4-panel__track {
  animation-play-state: running;
}

.ft4 .ft4-panel__set {
  display: flex;
  flex-direction: column;
}

@keyframes ft4-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -50%, 0); }
}

/* --ft4-lqip: the crop's blurred preview (inline, from _data/free_trial_v4_lqip.yml),
   shown until the crop arrives so a tile is never an empty box */
.ft4 .ft4-tile {
  margin: 0 0 14px;
  aspect-ratio: 360 / 624;
  border-radius: var(--ft4-r-sm);
  overflow: hidden;
  background: var(--color-main-op05);
  background-image: var(--ft4-lqip, none);
  background-position: top;
  background-size: cover;
  box-shadow: 0 0 0 1px var(--color-main-op1);
}

.ft4 .ft4-tile--wide {
  aspect-ratio: 4 / 3;
}

.ft4 .ft4-tile picture {
  display: contents;
}

.ft4 .ft4-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Commerce chips (hero panel, cards, final band) */
.ft4 .ft4-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: var(--ft4-r-md);
  background: var(--color-background);
  color: var(--color-secondary);
  box-shadow: 0 0 0 1px var(--color-border), var(--ft4-shadow-soft);
}

.ft4 .ft4-chip__icon {
  position: relative;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-main-op1);
  color: var(--color-main);
  font-size: 19px;
}

.ft4 .ft4-chip__title {
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ft4 .ft4-chip__meta {
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-secondary-op7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ft4 .ft4-hero__phone {
  display: none;
}

/* ================================================================
  PARTNERS STRIP (reused include)
================================================================ */
.ft4 .js-partners.js-section {
  padding-top: calc(var(--js-padding) * 2.5);
  padding-bottom: calc(var(--js-padding) * 2.5);
}

.ft4 .js-partners .js-section__content {
  gap: calc(var(--js-padding) * 1.5);
}

.ft4 .js-partners {
  --js-partners-gap: 64px;
  --js-partners-duration: 28s;
}

.ft4 .js-partners .js-partners__wrapper.is-ready .js-partners__group {
  animation-play-state: paused;
}

.ft4 .js-partners.is-live .js-partners__wrapper.is-ready .js-partners__group {
  animation-play-state: running;
}

/* ================================================================
  FEATURES — asymmetric .js-cards grid
================================================================ */
.ft4 .ft4-bento.js-section {
  padding-top: calc(var(--js-padding) * 8);
  padding-bottom: calc(var(--js-padding) * 8);
}

.ft4 .ft4-cards {
  padding-top: calc(var(--js-padding) * 3.5);
}

.ft4 .ft4-cards__gallery {
  position: relative;
  flex: 1 0 auto;
  height: auto;
  min-height: 380px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-background);   /* each card paints its own field below */
  color: var(--color-secondary);
  contain: layout paint;
}

/* light card body: white surface + hairline, no hover (the cards are not links) */
.ft4 .ft4-cards__wrapper,
.ft4 .ft4-cards__wrapper:hover {
  background: var(--color-background);
  border-color: var(--color-border);
  backdrop-filter: none;
}

.ft4 .ft4-cards .js-cards__content {
  padding: 22px 24px 24px;
  gap: 8px;
}

.ft4 .ft4-cards__title {
  margin: 0;
  font-family: var(--font-main);
  font-weight: 600;
  font-size: var(--ft4-fs-h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-main);
  text-wrap: balance;
}

.ft4 .ft4-cards .js-cards__text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-secondary-op7);
  opacity: 1;
}

/* wider than the base 720px head so translated headings (up to ~940px at
   48px) and ledes (~790px) stay on one line like the English ones */
.ft4 .ft4-head {
  max-width: 960px;
  margin-bottom: calc(var(--js-padding) * 1);
}

.ft4 .ft4-head .ft4-lede {
  max-width: 820px;
  margin: 0 auto;
  text-wrap: balance;
}

.ft4 .ft4-phrase {
  display: inline-block;
}

/* Card 2 — AI chat: on a blue field ----------------------------------- */
.ft4 .ft4-cards__gallery.ft4-v-ai {
  background:
    radial-gradient(60% 55% at 100% 0%, color-mix(in srgb, var(--ft4-purple) 75%, transparent), transparent 70%),
    radial-gradient(55% 50% at 0% 100%, color-mix(in srgb, var(--ft4-teal-light) 40%, transparent), transparent 70%),
    var(--ft4-field-blue);
}
.ft4 .ft4-chat {
  position: absolute;
  top: calc(50% - 16px);
  left: 50%;
  width: 86%;
  max-width: 440px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ft4 .ft4-chat__msg--user {
  align-self: flex-end;
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  background: var(--color-main);
  color: var(--color-background);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
}

.ft4 .ft4-chat__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ft4 .ft4-chat__avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-main);
}

.ft4 .ft4-chat__avatar img {
  width: 15px;
  height: auto;
}

.ft4 .ft4-chat__bubble {
  position: relative;
  flex: 1;
  min-width: 0;
}

.ft4 .ft4-chat__typing {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 4px 16px 16px 16px;
  background: var(--color-main-op1);
  opacity: 0;
}

.ft4 .ft4-chat__typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-main);
  animation: ft4-dot 1s ease-in-out 2;
}

.ft4 .ft4-chat__typing i:nth-child(2) { animation-delay: 0.15s; }
.ft4 .ft4-chat__typing i:nth-child(3) { animation-delay: 0.3s; }

.ft4 .ft4-chat__typing i {
  animation-play-state: paused;
}

.ft4 :is(.ft4-v-ai, .ft4-assist).is-live.is-play .ft4-chat__typing i {
  animation-play-state: running;
}

@keyframes ft4-dot {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-3px); opacity: 1; }
}

.ft4 .ft4-chat__reply {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 12px;
  border-radius: 4px 16px 16px 16px;
  background: var(--color-main-op1);
  box-shadow: inset 0 0 0 1px var(--color-main-op1);
  transform-origin: 0 0;
}

.ft4 .ft4-chat__done {
  text-wrap: balance;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-main);
}

.ft4 .ft4-chat__products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 88px));
  gap: 8px;
}

.ft4 .ft4-chat__products figure {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ft4 .ft4-chat__products img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  object-fit: cover;
}

.ft4 .ft4-chat__products figcaption {
  font-size: 11px;
  line-height: 1.2;
  color: var(--color-main-op8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* aligned with the chat column above it (same width, centred) */
.ft4 .ft4-v-ai__foot {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: min(86%, 440px);
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 12px;
  color: var(--color-main-op7);
}

.ft4 .ft4-v-ai__brand {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--ft4-r-pill);
  box-shadow: inset 0 0 0 1px var(--color-main-op2);
  font-weight: 600;
  color: var(--color-main);
}

/* tags on dark mock UIs: ghost style instead of the light-only tag colours */
.ft4 .ft4-cards__gallery .js-tag {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--color-main-op2);
  color: var(--color-main);
}

/* sequence (default = final state; .is-play replays it) */
.ft4 :is(.ft4-v-ai, .ft4-assist).is-play .ft4-chat__msg--user { animation: ft4-rise 0.45s var(--ft4-ease) 0.05s backwards; }
.ft4 :is(.ft4-v-ai, .ft4-assist).is-play .ft4-chat__typing { animation: ft4-typing 1.35s linear 0.4s backwards; }
.ft4 :is(.ft4-v-ai, .ft4-assist).is-play .ft4-chat__reply { animation: ft4-pop 0.5s var(--ft4-spring) 1.6s backwards; }
.ft4 :is(.ft4-v-ai, .ft4-assist).is-play .ft4-chat__products figure:nth-child(1) { animation: ft4-pop 0.45s var(--ft4-spring) 1.85s backwards; }
.ft4 :is(.ft4-v-ai, .ft4-assist).is-play .ft4-chat__products figure:nth-child(2) { animation: ft4-pop 0.45s var(--ft4-spring) 1.97s backwards; }
.ft4 :is(.ft4-v-ai, .ft4-assist).is-play .ft4-chat__products figure:nth-child(3) { animation: ft4-pop 0.45s var(--ft4-spring) 2.09s backwards; }
.ft4 :is(.ft4-v-ai, .ft4-assist).is-play .ft4-chat__reply > .js-tag { animation: ft4-rise 0.4s var(--ft4-ease) 2.3s backwards; }

@keyframes ft4-rise {
  from { opacity: 0; transform: translateY(8px); }
}

@keyframes ft4-pop {
  from { opacity: 0; transform: scale(0.9); }
}

@keyframes ft4-typing {
  0% { opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}

/* Card 3 — sales channels: a shoppable post on a social-purple field --------
   The post (with a fanned deck behind it) is sized from the gallery's height,
   so it clears the dock on short desktop rows. Its channel badge, the order
   toast and the dock step together on data-step (5 channels); the active
   channel shows its own app icon (images/free-trial-v4/channels/*.svg). */
.ft4 .ft4-cards__gallery.ft4-v-channels {
  background:
    radial-gradient(70% 55% at 85% 8%, color-mix(in srgb, var(--ft4-blue) 70%, transparent), transparent 70%),
    radial-gradient(60% 50% at 10% 95%, color-mix(in srgb, var(--ft4-teal-light) 28%, transparent), transparent 70%),
    var(--ft4-field-purple);
}

/* top padding leaves room for the toast above the post, bottom for the dock */
.ft4 .ft4-social {
  position: absolute;
  inset: 0;
  container: ft4-social / size;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0 66px;
}

/* the post's own box: the deck and the toast are placed from it. 100cqh is the
   content box (padding excluded); the post is about its width + 77px tall */
.ft4 .ft4-social__stage {
  position: relative;
  width: clamp(128px, calc(100cqh - 85px), 196px);
  max-width: 56cqw;
}

.ft4 .ft4-post,
.ft4 .ft4-social__ghost {
  width: 100%;
  border-radius: var(--ft4-r-md);
  background: var(--color-background);
  box-shadow: var(--ft4-shadow);
}

.ft4 .ft4-social__ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 8px;
  opacity: 0.55;
}

.ft4 .ft4-social__ghost img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--ft4-r-sm);
  object-fit: cover;
}

.ft4 .ft4-social__ghost--l { transform: translate(-96%, -56%) rotate(-10deg) scale(0.84); }
.ft4 .ft4-social__ghost--r { transform: translate(-4%, -50%) rotate(9deg) scale(0.84); }

.ft4 .ft4-post {
  position: relative;
  z-index: 2;
  padding: 10px;
  color: var(--color-main);
  transform: rotate(-2deg);
}

.ft4 .ft4-post__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* where the post is published: the active channel's app icon, before the store name */
.ft4 .ft4-post__channel {
  display: inline-grid;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.ft4 .ft4-post__channel img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  border-radius: 26%;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.ft4 .ft4-post__channel img.is-active {
  opacity: 1;
  transition-delay: 0.18s;
}

.ft4 .ft4-post__handle {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ft4 .ft4-post__media {
  position: relative;
}

.ft4 .ft4-post__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--ft4-r-sm);
  object-fit: cover;
}

/* shoppable product tag pinned on the photo */
.ft4 .ft4-post__tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 16px);
  padding: 5px 9px;
  border-radius: var(--ft4-r-pill);
  background: var(--color-main);
  color: var(--color-background);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ft4 .ft4-post__tag i {
  color: var(--color-accent);
}

/* channel-neutral action: the store's own Buy button, no feed-specific icons */
.ft4 .ft4-post__buy {
  display: block;
  margin-top: 9px;
  padding: 7px 0;
  border-radius: var(--ft4-r-pill);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

/* order toast: pinned to the post's top-right corner, clear of the channel badge */
.ft4 .ft4-toast {
  position: absolute;
  z-index: 3;
  top: -16px;
  right: -44px;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 170px;
  padding: 8px 12px 8px 8px;
  border-radius: var(--ft4-r-md);
  background: var(--color-background);
  color: var(--color-main);
  box-shadow: var(--ft4-shadow-soft);
  animation: ft4-bob 5s ease-in-out 6;   /* about 30s, like the cycles, then it rests */
  animation-play-state: paused;
}

.ft4 .ft4-v-channels.is-live .ft4-toast {
  animation-play-state: running;
}

@keyframes ft4-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.ft4 .ft4-toast__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--ft4-r-sm);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-size: 15px;
}

.ft4 .ft4-toast__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.ft4 .ft4-toast__title {
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ft4 .ft4-toast__meta {
  font-size: 11px;
  color: var(--color-secondary-op7);
  white-space: nowrap;
}

/* channel dock: idle channels are white glyphs; the active one shows its app icon */
.ft4 .ft4-dock {
  position: absolute;
  left: 50%;
  bottom: 16px;
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: var(--ft4-r-pill);
  background: var(--color-main-op1);
  box-shadow: inset 0 0 0 1px var(--color-main-op2);
  backdrop-filter: blur(8px);
  transform: translateX(-50%);
}

.ft4 .ft4-dock__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-main);
  font-size: 17px;
}

.ft4 .ft4-dock__item i {
  transition: opacity 0.2s ease;
}

/* same app-icon shape as the post badge (Facebook's mark is round in its own file) */
.ft4 .ft4-dock__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 26%;
  filter: drop-shadow(0 4px 8px var(--color-background-op5));
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.35s var(--ft4-spring);
}

.ft4 .ft4-dock__item.is-active i {
  opacity: 0;
}

.ft4 .ft4-dock__item.is-active img {
  opacity: 1;
  transform: none;
}

/* short galleries (992-1199 rows and phones; cqh is the content box, so this
   covers galleries up to ~425px tall): a compact post, and the toast drops its
   icon to stay clear of the store name */
@container ft4-social (max-height: 335px) {
  .ft4 .ft4-social__stage {
    width: clamp(128px, calc(100cqh - 75px), 196px);
  }

  .ft4 .ft4-post {
    padding: 8px;
  }

  .ft4 .ft4-post__head {
    margin-bottom: 6px;
  }

  .ft4 .ft4-post__buy {
    margin-top: 7px;
    padding: 5px 0;
  }

  .ft4 .ft4-toast {
    gap: 0;
    max-width: 104px;
    padding: 7px 10px;
  }

  .ft4 .ft4-toast__icon {
    display: none;
  }

  /* longer translations ("Nova encomenda") wrap instead of truncating */
  .ft4 .ft4-toast__title {
    white-space: normal;
  }

  .ft4 .ft4-post__tag {
    left: 6px;
    bottom: 6px;
    max-width: calc(100% - 12px);
    padding: 4px 8px;
    font-size: 10px;
  }
}

/* Card — visual editor: one store in the theme customiser, on a teal field --
   The whole mock (frame, sidebar, storefront) is sized from the gallery's own
   width, so it keeps its proportions at every breakpoint and never clips:
   --u is one design pixel of an 811px-wide gallery (440px on phones, where the
   gallery is square), and the storefront uses cqw of its own canvas. The
   palette rows, the cursor and the store colours step together on data-step. */
.ft4 .ft4-cards__gallery.ft4-v-editor {
  flex: 0 0 auto;
  min-height: 0;
  aspect-ratio: 854 / 460;
  container: ft4-ed / inline-size;
  background:
    radial-gradient(55% 60% at 100% 0%, color-mix(in srgb, var(--ft4-blue) 70%, transparent), transparent 70%),
    radial-gradient(50% 55% at 0% 100%, color-mix(in srgb, var(--ft4-go) 26%, transparent), transparent 70%),
    var(--ft4-field-teal);
}

.ft4 .ft4-browser {
  --u: calc(100cqw / 811);
  position: absolute;
  top: 9%;
  left: 7%;
  right: 7%;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(var(--u) * 12) calc(var(--u) * 12) 0 0;
  background: var(--color-background);
  box-shadow: 0 0 0 1px var(--color-main-op2), var(--ft4-shadow);
}

.ft4 .ft4-browser__bar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: calc(var(--u) * 12);
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 12);
  border-bottom: 1px solid var(--color-main-op1);
}

.ft4 .ft4-browser__dots {
  display: inline-flex;
  gap: calc(var(--u) * 5);
}

.ft4 .ft4-browser__dots i {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
  background: var(--color-main-op2);
}

.ft4 .ft4-browser__url {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 5);
  margin: 0 auto;
  padding: calc(var(--u) * 3) calc(var(--u) * 12);
  border-radius: var(--ft4-r-pill);
  background: var(--color-main-op1);
  color: var(--color-main-op7);
  font-size: calc(var(--u) * 11);
  line-height: 1.3;
  white-space: nowrap;
}

.ft4 .ft4-editor {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 27% 1fr;
  grid-template-rows: minmax(0, 1fr);
}

/* sidebar: the theme customiser's colour step, as in the product */
.ft4 .ft4-editor__side {
  --row: calc(var(--u) * 30);
  --row-gap: calc(var(--u) * 8);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: calc(var(--u) * 16) calc(var(--u) * 14) calc(var(--u) * 14);
  border-right: 1px solid var(--color-main-op1);
  font-size: calc(var(--u) * 11);
  line-height: 1.3;
}

/* step progress: the colour step is the first of four */
.ft4 .ft4-editor__steps {
  display: flex;
  gap: calc(var(--u) * 4);
  margin-bottom: calc(var(--u) * 12);
}

.ft4 .ft4-editor__steps i {
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 4);
  border-radius: var(--ft4-r-pill);
  background: var(--color-main-op2);
}

.ft4 .ft4-editor__steps i:first-child {
  background: var(--ft4-go);
}

.ft4 .ft4-editor__title {
  margin-bottom: calc(var(--u) * 8);
  font-family: var(--font-main);
  font-size: calc(var(--u) * 13);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-main);
}

/* placeholder description lines */
.ft4 .ft4-editor__lines {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 5);
  margin-bottom: calc(var(--u) * 14);
}

.ft4 .ft4-editor__lines i {
  height: calc(var(--u) * 5);
  border-radius: var(--ft4-r-pill);
  background: var(--color-main-op1);
}

.ft4 .ft4-editor__lines i:last-child {
  width: 68%;
}

.ft4 .ft4-editor__palettes {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
}

/* each palette sits on a lighter well, so dark swatches never melt into the sidebar;
   the pick lands just after the cursor arrives */
.ft4 .ft4-pal {
  display: flex;
  gap: calc(var(--u) * 2);
  height: var(--row);
  padding: calc(var(--u) * 3);
  border-radius: calc(var(--u) * 6);
  background: var(--color-main-op1);
  transition: box-shadow 0.3s ease 0.45s;
}

.ft4 .ft4-pal i {
  flex: 1;
  border-radius: calc(var(--u) * 2);
  box-shadow: inset 0 0 0 1px var(--color-main-op1);
}

.ft4 .ft4-pal i:nth-child(1) { background: var(--p-bg); }
.ft4 .ft4-pal i:nth-child(2) { background: var(--p-surface); }
.ft4 .ft4-pal i:nth-child(3) { background: var(--p-tint); }
.ft4 .ft4-pal i:nth-child(4) { background: var(--p-accent); }
.ft4 .ft4-pal i:nth-child(5) { background: var(--p-ink); }

.ft4 .ft4-pal.is-active {
  box-shadow: 0 0 0 calc(var(--u) * 2) var(--color-main);
}

.ft4 .ft4-editor__cursor {
  position: absolute;
  top: 0;
  left: 58%;
  z-index: 2;
  font-size: calc(var(--u) * 22);
  line-height: 1;
  color: var(--color-main);
  filter: drop-shadow(0 0 1px var(--color-background)) drop-shadow(0 3px 5px var(--color-background-op9));
  transform: translateY(calc(var(--row) / 2));
  transition: transform 0.6s var(--ft4-ease);
}

.ft4 .ft4-v-editor[data-step="1"] .ft4-editor__cursor { transform: translateY(calc(var(--row) * 1.5 + var(--row-gap))); }
.ft4 .ft4-v-editor[data-step="2"] .ft4-editor__cursor { transform: translateY(calc(var(--row) * 2.5 + var(--row-gap) * 2)); }
.ft4 .ft4-v-editor[data-step="3"] .ft4-editor__cursor { transform: translateY(calc(var(--row) * 3.5 + var(--row-gap) * 3)); }

.ft4 .ft4-editor__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 5);
  height: calc(var(--u) * 24);
  margin-top: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 5);
  background: var(--color-main-op05);
  color: var(--color-main-op7);
  font-size: calc(var(--u) * 9.5);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ft4 .ft4-editor__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 8);
  margin-top: auto;
  padding-top: calc(var(--u) * 10);
  border-top: 1px solid var(--color-main-op1);
}

.ft4 .ft4-editor__back {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 4);
  min-width: 0;
  color: var(--color-main-op7);
  white-space: nowrap;
}

.ft4 .ft4-editor__next {
  padding: calc(var(--u) * 6) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 6);
  background: var(--ft4-go);
  color: var(--ft4-ink);
  font-size: calc(var(--u) * 11.5);
  font-weight: 700;
  white-space: nowrap;
}

/* palettes: token colours only. The same variables paint the sidebar swatches
   and, for the active step, the storefront canvas:
   bg = page, surface = nav + product cards, tint = product band,
   accent = bar, button and prices, ink = text, photo = hero brightness. */
.ft4 .ft4-pal--0,
.ft4 .ft4-v-editor .ft4-editor__canvas {
  --p-bg: var(--ft4-snow);
  --p-surface: var(--ft4-white);
  --p-tint: color-mix(in srgb, var(--ft4-carbon) 9%, var(--ft4-snow));
  --p-accent: var(--ft4-carbon);
  --p-on-accent: var(--ft4-snow);
  --p-ink: var(--ft4-carbon);
  --p-photo: 1;
}

.ft4 .ft4-pal--1,
.ft4 .ft4-v-editor[data-step="1"] .ft4-editor__canvas {
  --p-bg: color-mix(in srgb, var(--ft4-purple) 12%, var(--ft4-white));
  --p-surface: color-mix(in srgb, var(--ft4-purple) 5%, var(--ft4-white));
  --p-tint: color-mix(in srgb, var(--ft4-purple) 24%, var(--ft4-white));
  --p-accent: var(--ft4-purple);
  --p-on-accent: var(--ft4-white);
  --p-ink: var(--ft4-purple-dark);
  --p-photo: 1;
}

.ft4 .ft4-pal--2,
.ft4 .ft4-v-editor[data-step="2"] .ft4-editor__canvas {
  --p-bg: color-mix(in srgb, var(--ft4-teal-light) 16%, var(--ft4-white));
  --p-surface: color-mix(in srgb, var(--ft4-teal-light) 6%, var(--ft4-white));
  --p-tint: color-mix(in srgb, var(--ft4-teal-light) 32%, var(--ft4-white));
  --p-accent: var(--ft4-teal);
  --p-on-accent: var(--ft4-white);
  --p-ink: color-mix(in srgb, var(--ft4-teal) 40%, var(--ft4-ink));
  --p-photo: 1;
}

.ft4 .ft4-pal--3,
.ft4 .ft4-v-editor[data-step="3"] .ft4-editor__canvas {
  --p-bg: var(--ft4-ink);
  --p-surface: var(--ft4-carbon);
  --p-tint: color-mix(in srgb, var(--ft4-snow) 10%, var(--ft4-ink));
  --p-accent: var(--ft4-go);
  --p-on-accent: var(--ft4-ink);
  --p-ink: var(--ft4-snow);
  --p-photo: 0.62;
}

/* storefront: every size is in cqw of the canvas, so it scales as one piece */
.ft4 .ft4-editor__canvas {
  position: relative;
  overflow: hidden;
  container: ft4-canvas / inline-size;
  background: var(--p-bg);
}

.ft4 .ft4-shop {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  font-family: var(--font-main);
  line-height: 1.3;
  color: var(--p-ink);
}

.ft4 .ft4-editor__canvas,
.ft4 .ft4-shop,
.ft4 .ft4-shop__bar,
.ft4 .ft4-shop__nav,
.ft4 .ft4-shop__veil,
.ft4 .ft4-shop__cta,
.ft4 .ft4-shop__grid,
.ft4 .ft4-shop__item,
.ft4 .ft4-shop__price {
  transition: background-color 0.5s ease 0.45s, color 0.5s ease 0.45s;
}

.ft4 .ft4-shop__bar {
  overflow: hidden;
  padding: 1cqw 0;
  background: var(--p-accent);
  color: var(--p-on-accent);
  font-size: 1.45cqw;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.ft4 .ft4-shop__nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.5cqw 3.2cqw;
  background: var(--p-surface);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--p-ink) 10%, transparent);
}

.ft4 .ft4-shop__menu {
  display: none;
}

.ft4 .ft4-shop__brand {
  font-size: 2.5cqw;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.24em;
}

.ft4 .ft4-shop__links {
  display: flex;
  gap: 2.6cqw;
  font-size: 1.7cqw;
  white-space: nowrap;
}

.ft4 .ft4-shop__icons {
  display: flex;
  justify-content: flex-end;
  gap: 1.8cqw;
  font-size: 2.2cqw;
}

.ft4 .ft4-shop__hero {
  position: relative;
  flex-shrink: 0;
  aspect-ratio: 940 / 339;
  overflow: hidden;
}

.ft4 .ft4-shop__hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  filter: brightness(var(--p-photo));
  transition: filter 0.5s ease 0.45s;
}

/* the palette's page colour washes over the empty wall behind the copy */
.ft4 .ft4-shop__veil {
  position: absolute;
  inset: 0;
  background: var(--p-bg);
  opacity: 0.92;
  -webkit-mask: linear-gradient(90deg, currentColor 26%, transparent 64%);
  mask: linear-gradient(90deg, currentColor 26%, transparent 64%);
}

.ft4 .ft4-shop__copy {
  position: absolute;
  top: 50%;
  left: 4.4cqw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.2cqw;
  width: 40cqw;
  transform: translateY(-50%);
}

.ft4 .ft4-shop__title {
  font-size: 4.2cqw;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.ft4 .ft4-shop__cta {
  padding: 1.2cqw 2.6cqw;
  border-radius: 0.8cqw;
  background: var(--p-accent);
  color: var(--p-on-accent);
  font-size: 1.6cqw;
  font-weight: 700;
  white-space: nowrap;
}

/* product band: fills the rest of the canvas */
.ft4 .ft4-shop__grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  gap: 1.8cqw;
  padding: 2.2cqw 3.2cqw;
  background: var(--p-tint);
}

.ft4 .ft4-shop__item {
  display: flex;
  flex-direction: column;
  gap: 0.7cqw;
  min-width: 0;
  padding: 0.8cqw;
  border-radius: 1.2cqw;
  background: var(--p-surface);
}

.ft4 .ft4-shop__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0.8cqw;
  object-fit: cover;
}

.ft4 .ft4-shop__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1cqw;
  font-size: 1.6cqw;
}

.ft4 .ft4-shop__name {
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ft4 .ft4-shop__price {
  flex-shrink: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--p-accent);
}

/* Card 4 — checkout: white checkout card on the same teal field as the editor (mirrored) */
.ft4 .ft4-cards__gallery.ft4-v-checkout {
  background:
    radial-gradient(55% 60% at 0% 0%, color-mix(in srgb, var(--ft4-blue) 70%, transparent), transparent 70%),
    radial-gradient(50% 55% at 100% 100%, color-mix(in srgb, var(--ft4-go) 26%, transparent), transparent 70%),
    var(--ft4-field-teal);
}

.ft4 .ft4-v-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 20px;
}

.ft4 .ft4-checkout {
  width: min(340px, 100%);
  flex-shrink: 0;
  padding: 14px 16px 16px;
  border-radius: var(--ft4-r-lg);
  background: var(--color-background);
  color: var(--color-secondary);
  box-shadow: var(--ft4-shadow);
}

.ft4 .ft4-checkout__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.ft4 .ft4-checkout__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-main);
}

.ft4 .ft4-checkout__lang {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--color-main-op05);
  box-shadow: inset 0 0 0 1px var(--color-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-main);
}

.ft4 .ft4-checkout__langs {
  display: grid;
}

.ft4 .ft4-checkout__langs span,
.ft4 .ft4-swap > span {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.ft4 .ft4-checkout__langs span.is-active,
.ft4 .ft4-swap > span.is-active {
  opacity: 1;
  transition-delay: 0.18s;
}

.ft4 .ft4-swap {
  display: inline-grid;
}

.ft4 .ft4-checkout__label {
  margin: 8px 0 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary-op7);
}

.ft4 .ft4-checkout__list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ft4 .ft4-checkout__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 32px;
  padding: 0 12px;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px var(--color-border);
  transition: box-shadow 0.25s ease, background 0.25s ease;
}

/* wide enough for long local wordmarks (e.g. Tres Guerras, Correos de Chile) */
.ft4 .ft4-logo {
  display: inline-flex;
  width: 84px;
  height: 20px;
}

.ft4 .ft4-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.ft4 .ft4-radio {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--color-main-op3);
  transition: box-shadow 0.25s ease;
}

.ft4 .ft4-radio::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--color-main);
  transform: scale(0);
  transition: transform 0.3s var(--ft4-spring);
}

/* selected method: light tint + hairline border + filled radio (not a heavy outline) */
.ft4 .ft4-v-checkout:not([data-step]) .ft4-checkout__list--pay .ft4-checkout__opt:nth-child(1),
.ft4 .ft4-v-checkout:not([data-step]) .ft4-checkout__list--ship .ft4-checkout__opt:nth-child(1),
.ft4 .ft4-v-checkout[data-step="0"] .ft4-checkout__list--pay .ft4-checkout__opt:nth-child(1),
.ft4 .ft4-v-checkout[data-step="1"] .ft4-checkout__list--pay .ft4-checkout__opt:nth-child(2),
.ft4 .ft4-v-checkout[data-step="2"] .ft4-checkout__list--pay .ft4-checkout__opt:nth-child(3),
.ft4 .ft4-v-checkout[data-step="0"] .ft4-checkout__list--ship .ft4-checkout__opt:nth-child(1),
.ft4 .ft4-v-checkout[data-step="1"] .ft4-checkout__list--ship .ft4-checkout__opt:nth-child(2),
.ft4 .ft4-v-checkout[data-step="2"] .ft4-checkout__list--ship .ft4-checkout__opt:nth-child(1) {
  background: var(--ft4-tint);
  box-shadow: inset 0 0 0 1px var(--color-main-op3);
}

.ft4 .ft4-v-checkout:not([data-step]) .ft4-checkout__list--pay .ft4-checkout__opt:nth-child(1) .ft4-radio,
.ft4 .ft4-v-checkout:not([data-step]) .ft4-checkout__list--ship .ft4-checkout__opt:nth-child(1) .ft4-radio,
.ft4 .ft4-v-checkout[data-step="0"] .ft4-checkout__list--pay .ft4-checkout__opt:nth-child(1) .ft4-radio,
.ft4 .ft4-v-checkout[data-step="1"] .ft4-checkout__list--pay .ft4-checkout__opt:nth-child(2) .ft4-radio,
.ft4 .ft4-v-checkout[data-step="2"] .ft4-checkout__list--pay .ft4-checkout__opt:nth-child(3) .ft4-radio,
.ft4 .ft4-v-checkout[data-step="0"] .ft4-checkout__list--ship .ft4-checkout__opt:nth-child(1) .ft4-radio,
.ft4 .ft4-v-checkout[data-step="1"] .ft4-checkout__list--ship .ft4-checkout__opt:nth-child(2) .ft4-radio,
.ft4 .ft4-v-checkout[data-step="2"] .ft4-checkout__list--ship .ft4-checkout__opt:nth-child(1) .ft4-radio {
  box-shadow: inset 0 0 0 1.5px var(--color-main);
}

.ft4 .ft4-v-checkout:not([data-step]) .ft4-checkout__list--pay .ft4-checkout__opt:nth-child(1) .ft4-radio::after,
.ft4 .ft4-v-checkout:not([data-step]) .ft4-checkout__list--ship .ft4-checkout__opt:nth-child(1) .ft4-radio::after,
.ft4 .ft4-v-checkout[data-step="0"] .ft4-checkout__list--pay .ft4-checkout__opt:nth-child(1) .ft4-radio::after,
.ft4 .ft4-v-checkout[data-step="1"] .ft4-checkout__list--pay .ft4-checkout__opt:nth-child(2) .ft4-radio::after,
.ft4 .ft4-v-checkout[data-step="2"] .ft4-checkout__list--pay .ft4-checkout__opt:nth-child(3) .ft4-radio::after,
.ft4 .ft4-v-checkout[data-step="0"] .ft4-checkout__list--ship .ft4-checkout__opt:nth-child(1) .ft4-radio::after,
.ft4 .ft4-v-checkout[data-step="1"] .ft4-checkout__list--ship .ft4-checkout__opt:nth-child(2) .ft4-radio::after,
.ft4 .ft4-v-checkout[data-step="2"] .ft4-checkout__list--ship .ft4-checkout__opt:nth-child(1) .ft4-radio::after {
  transform: scale(1);
}

/* carrier / gateway names vary in length per country: the chip title may wrap */
.ft4 .ft4-v-checkout__side .ft4-chip__title {
  white-space: normal;
}

.ft4 .ft4-v-checkout__side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 230px;
}

/* below 1200px the side chips don't fit, and only two payment rows show,
   so the third step re-selects the first payment row */
@media (max-width: 1199px) {
  .ft4 .ft4-checkout__list--pay .ft4-checkout__opt:nth-child(3) {
    display: none;
  }

  .ft4 .ft4-v-checkout[data-step="2"] .ft4-checkout__list--pay .ft4-checkout__opt:nth-child(1) {
    background: var(--ft4-tint);
    box-shadow: inset 0 0 0 1px var(--color-main-op3);
  }

  .ft4 .ft4-v-checkout[data-step="2"] .ft4-checkout__list--pay .ft4-checkout__opt:nth-child(1) .ft4-radio {
    box-shadow: inset 0 0 0 1.5px var(--color-main);
  }

  .ft4 .ft4-v-checkout[data-step="2"] .ft4-checkout__list--pay .ft4-checkout__opt:nth-child(1) .ft4-radio::after {
    transform: scale(1);
  }

  .ft4 .ft4-v-checkout__side {
    display: none;
  }
}
.ft4 .ft4-receipt {
  padding: 30px 28px 26px;
  border-radius: var(--ft4-r-md);
  background: var(--color-background);
  color: var(--color-secondary);
  box-shadow: var(--ft4-shadow);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  -webkit-mask: radial-gradient(circle 7px at 50% 0, transparent 97%, currentColor) 50% 0 / 20px 100%;
  mask: radial-gradient(circle 7px at 50% 0, transparent 97%, currentColor) 50% 0 / 20px 100%;
}

.ft4 .ft4-receipt__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  color: var(--color-secondary);
}

.ft4 .ft4-receipt__row--item img {
  width: 42px;
  height: 42px;
  border-radius: 10px;
}

.ft4 .ft4-receipt__row--item > span:first-of-type {
  flex: 1;
}

.ft4 .ft4-receipt__row--fee {
  margin-top: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--color-background);
  color: var(--color-main);
  font-weight: 600;
}

.ft4 .ft4-receipt__row--fee .ft4-receipt__amt {
  font-family: var(--font-main);
  font-size: 20px;
  font-weight: 700;
}

.ft4 .ft4-receipt__amt {
  white-space: nowrap;
}

/* ================================================================
  PROOF — real stores gallery
================================================================ */
.ft4 .ft4-proof.js-section {
  padding-top: calc(var(--js-padding) * 8);
  padding-bottom: calc(var(--js-padding) * 8);
}


.ft4 .ft4-stores {
  margin-top: calc(var(--js-padding) * 3);
}

.ft4 .ft4-stores__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.ft4 .ft4-store__shot {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--ft4-r-sm);
  background: var(--color-main-op05);
  box-shadow: 0 0 0 1px var(--color-border);
  transition: transform 0.4s var(--ft4-ease), box-shadow 0.4s var(--ft4-ease);
}

.ft4 .ft4-store:hover .ft4-store__shot {
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px var(--color-border), var(--ft4-shadow-soft);
}

.ft4 .ft4-store__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.ft4 .ft4-store figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
  min-width: 0;
}

.ft4 .ft4-store figcaption strong {
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-main);
}

.ft4 .ft4-store figcaption span {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-secondary-op7);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ================================================================
  FINAL CTA — full-bleed green band (split copy / store-is-live visual)
================================================================ */
.ft4 .ft4-final.js-section {
  position: relative;
  padding-top: calc(var(--js-padding) * 8);
  padding-bottom: calc(var(--js-padding) * 8);
  overflow: hidden;
  isolation: isolate;
}

/* readable copy: a lighter green panel between the text and the pattern */
.ft4 .ft4-final__copy {
  padding: calc(var(--js-padding) * 3.5);
  border-radius: var(--ft4-r-lg);
  background: color-mix(in srgb, var(--color-background) 84%, var(--color-accent-contrast));
  box-shadow: 0 0 0 1px var(--color-main-op1), 0 30px 60px -40px var(--color-main-op5);
}

.ft4 .ft4-final__row {
  row-gap: calc(var(--js-padding) * 4);
}

.ft4 .ft4-final__title {
  max-width: 14ch;
  margin-top: 14px;
  color: var(--color-main);
}

.ft4 .ft4-final__sub {
  max-width: 460px;
  margin: 16px 0 28px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--color-main-op8);
}

.ft4 .ft4-final .ft4-assure {
  color: var(--color-main-op8);
}

.ft4 .ft4-final .ft4-assure .ft4-icon {
  color: var(--color-main);
}

.ft4 .ft4-final__visual {
  position: relative;
  height: 470px;
  max-width: 560px;
  margin: 0 auto;
}

.ft4 .ft4-phone {
  margin: 0;
  aspect-ratio: 360 / 624;
  border: 6px solid var(--ft4-ink);
  border-radius: 26px;
  overflow: hidden;
  background: var(--ft4-ink);
  box-shadow: 0 30px 70px -30px var(--color-main-op6);
}

.ft4 .ft4-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.ft4 .ft4-final__phone {
  position: absolute;
  top: 70px;
  left: 8%;
  width: 224px;
}

.ft4 .ft4-final__live {
  position: absolute;
  top: 12px;
  left: 0;
  z-index: 2;
  min-width: 190px;
}

.ft4 .ft4-feed {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 280px;
  transform: translateY(-40%);
}

.ft4 .ft4-feed__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--ft4-r-md);
  background: var(--color-background);
  color: var(--color-secondary);
  box-shadow: 0 0 0 1px var(--color-border), 0 12px 30px -22px var(--color-main-op6);
  transform: scale(0.96);
  transform-origin: 100% 50%;
  transition: opacity 0.35s ease, transform 0.45s var(--ft4-spring), box-shadow 0.35s ease;
}

.ft4 .ft4-feed__item.is-active {
  opacity: 1;
  transform: none;
  box-shadow: 0 0 0 2px var(--ft4-ink), 0 20px 44px -18px var(--color-main-op6);
}

.ft4 .ft4-feed__thumb,
.ft4 .ft4-feed__badge {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.ft4 .ft4-feed__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-main);
  color: var(--ft4-go);
  font-size: 19px;
}

.ft4 .ft4-feed__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--color-secondary-op7);
  white-space: nowrap;
}

.ft4 .ft4-feed__text strong {
  overflow: hidden;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-main);
  text-overflow: ellipsis;
}

/* ================================================================
  FAQ (reused include)
================================================================ */
.ft4 #ft4-faq.js-section {
  padding-top: calc(var(--js-padding) * 8);
  padding-bottom: calc(var(--js-padding) * 8);
}

.ft4 #ft4-faq .js-faq-split__title {
  font-size: var(--ft4-fs-h2);
  line-height: 1.04;
}

.ft4 #ft4-faq .js-faq-split__q {
  min-height: 64px;
}

.ft4 #ft4-faq .js-faq-split__q:hover {
  opacity: 1;
}

.ft4 #ft4-faq .js-faq-split__q:hover .js-faq-split__icon {
  background: var(--color-main-op2);
}

.ft4 #ft4-faq .js-faq-split__a-inner {
  color: var(--color-main-op7);
}

.ft4 #ft4-faq .js-faq-split__lede {
  margin-bottom: 24px;
}

.ft4 #ft4-faq .js-faq-split__cta {
  height: 52px;
  margin-top: 0;
  padding: 0 22px;
  gap: 10px;
  font-size: 17px;
}

/* the footer sits on the same colour field as the page */
main.ft4 ~ .footer {
  position: relative;
  z-index: 1;
  border-top: 0;
  background: transparent;
}

/* ================================================================
  COLOUR FIELD — one drifting aurora behind the whole page.
  Dark sections are transparent over it, and every light band fades in
  and out at its edges (--ft4-seam), so the page reads as one surface.
  main[data-scene] (set by the page script from the section crossing the
  middle of the screen) swaps the aurora hues; --ft4-c is registered so
  the hues morph instead of jumping. It is non-inherited, so only the three
  aurora layers restyle while it animates.
  Secondary brand colours only exist as --js-* primitives (no semantic
  alias yet), hence their use here.
================================================================ */
@property --ft4-c {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

.ft4 {
  --ft4-seam: 96px;
}

.ft4 .ft4-aura {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ft4 .ft4-aura span {
  position: absolute;
  width: 72vmax;
  height: 72vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--ft4-c), transparent);
  transition: --ft4-c 1.6s ease;
  will-change: transform;
  animation: ft4-aura-1 42s ease-in-out infinite alternate;
}

.ft4 .ft4-aura span:nth-child(1) {
  --ft4-c: color-mix(in srgb, var(--ft4-go) 30%, transparent);
  top: -30vmax;
  right: -22vmax;
}

.ft4 .ft4-aura span:nth-child(2) {
  --ft4-c: color-mix(in srgb, var(--js-color-teal-light) 30%, transparent);
  bottom: -34vmax;
  left: -26vmax;
  animation-name: ft4-aura-2;
  animation-duration: 52s;
}

.ft4 .ft4-aura span:nth-child(3) {
  --ft4-c: color-mix(in srgb, var(--js-color-blue-dark) 55%, transparent);
  top: 28%;
  left: 36%;
  width: 54vmax;
  height: 54vmax;
  animation-name: ft4-aura-3;
  animation-duration: 60s;
}

/* per-scene hues: 1 = top right, 2 = bottom left, 3 = centre */
.ft4[data-scene="benefits"] .ft4-aura span:nth-child(1) { --ft4-c: color-mix(in srgb, var(--js-color-teal-dark) 45%, transparent); }
.ft4[data-scene="benefits"] .ft4-aura span:nth-child(2) { --ft4-c: color-mix(in srgb, var(--js-color-blue-light) 42%, transparent); }
.ft4[data-scene="benefits"] .ft4-aura span:nth-child(3) { --ft4-c: color-mix(in srgb, var(--ft4-go) 20%, transparent); }

.ft4[data-scene="features"] .ft4-aura span:nth-child(1),
.ft4[data-scene="stores"] .ft4-aura span:nth-child(1) { --ft4-c: color-mix(in srgb, var(--js-color-purple-light) 42%, transparent); }
.ft4[data-scene="features"] .ft4-aura span:nth-child(2),
.ft4[data-scene="stores"] .ft4-aura span:nth-child(2) { --ft4-c: color-mix(in srgb, var(--js-color-teal-light) 30%, transparent); }
.ft4[data-scene="features"] .ft4-aura span:nth-child(3),
.ft4[data-scene="stores"] .ft4-aura span:nth-child(3) { --ft4-c: color-mix(in srgb, var(--js-color-blue-dark) 50%, transparent); }

.ft4[data-scene="final"] .ft4-aura span:nth-child(1),
.ft4[data-scene="faq"] .ft4-aura span:nth-child(1) { --ft4-c: color-mix(in srgb, var(--ft4-go) 32%, transparent); }
.ft4[data-scene="final"] .ft4-aura span:nth-child(2),
.ft4[data-scene="faq"] .ft4-aura span:nth-child(2) { --ft4-c: color-mix(in srgb, var(--js-color-teal-light) 32%, transparent); }
.ft4[data-scene="final"] .ft4-aura span:nth-child(3),
.ft4[data-scene="faq"] .ft4-aura span:nth-child(3) { --ft4-c: color-mix(in srgb, var(--js-color-blue-dark) 45%, transparent); }

@keyframes ft4-aura-1 {
  to { transform: translate3d(-18vmax, 16vmax, 0) scale(1.15); }
}

@keyframes ft4-aura-2 {
  to { transform: translate3d(20vmax, -14vmax, 0) scale(1.1); }
}

@keyframes ft4-aura-3 {
  to { transform: translate3d(-22vmax, -10vmax, 0) scale(0.9); }
}

/* every section paints above the field; dark ones let it through */
.ft4 > .js-section {
  position: relative;
  z-index: 1;
}

.ft4 > .js-section[data-bundle-color="onyx"] {
  background: transparent;
}

@media (max-width: 767px) {
  .ft4 {
    --ft4-seam: 48px;
  }
}

/* ================================================================
  BENEFITS — no transaction fees / custom domain / AI assistant
================================================================ */
.ft4 .ft4-benefits.js-section {
  padding-top: calc(var(--js-padding) * 8);
  padding-bottom: calc(var(--js-padding) * 8);
}

.ft4 .ft4-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: calc(var(--js-padding) * 3.5);
}

.ft4 .ft4-benefit {
  display: flex;
  flex-direction: column;
  padding: 16px 16px 26px;
  border-radius: var(--ft4-r-lg);
  background: color-mix(in srgb, var(--color-background) 84%, transparent);
  box-shadow: 0 0 0 1px var(--color-border);
  color: var(--color-secondary);
}

.ft4 .ft4-benefit__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 210px;
  margin-bottom: 22px;
  overflow: hidden;
  border-radius: var(--ft4-r-md);
  background: var(--color-main-op05);
}

.ft4 .ft4-benefit__title {
  margin: 0 8px 8px;
  font-family: var(--font-main);
  font-weight: 600;
  font-size: var(--ft4-fs-h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-main);
}

.ft4 .ft4-benefit__text {
  margin: 0 8px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-secondary-op7);
}

/* mini receipt */
.ft4 .ft4-receipt--mini {
  width: min(340px, 92%);
  padding: 20px 16px 16px;
  font-size: 14px;
}

.ft4 .ft4-receipt--mini .ft4-receipt__row {
  padding: 8px 0;
}

.ft4 .ft4-receipt--mini .ft4-receipt__row--fee {
  margin-top: 6px;
  padding: 12px 14px;
}

/* domain mock */
.ft4 .ft4-domain {
  width: min(320px, 90%);
  overflow: hidden;
  border-radius: var(--ft4-r-md);
  background: var(--color-background);
  box-shadow: var(--ft4-shadow);
}

.ft4 .ft4-domain__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 12px;
  background: var(--color-main-op05);
  border-bottom: 1px solid var(--color-border);
}

.ft4 .ft4-domain__dots {
  display: inline-flex;
  flex-shrink: 0;
  gap: 5px;
}

.ft4 .ft4-domain__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-main-op2);
}

.ft4 .ft4-domain__url {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 28px;
  padding: 0 12px;
  overflow: hidden;
  border-radius: var(--ft4-r-pill);
  background: var(--color-background);
  box-shadow: inset 0 0 0 1px var(--color-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-main);
  white-space: nowrap;
}

.ft4 .ft4-domain__url > i {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--color-main-op6);
}

.ft4 .ft4-domain__status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 16px 20px;
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-main);
}

.ft4 .ft4-domain__status > i {
  font-size: 18px;
  color: color-mix(in srgb, var(--ft4-go) 70%, var(--color-main));
}

/* AI assistant mock (shares the chat pieces of the features AI card) */
.ft4 .ft4-assist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(320px, 92%);
}

.ft4 .ft4-assist .ft4-chat__msg--user {
  max-width: 88%;
  font-size: 13px;
}

.ft4 .ft4-assist__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--color-main-op8);
}

.ft4 .ft4-assist__list li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ft4 .ft4-assist__list .ft4-icon {
  color: var(--ft4-go);
}

.ft4 :is(.ft4-v-ai, .ft4-assist).is-play .ft4-assist__list { animation: ft4-rise 0.4s var(--ft4-ease) 2s backwards; }

@media (max-width: 991px) {
  .ft4 .ft4-benefits__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

/* tablets: visual beside the text, so the three tiles stay compact
   (below 680 the text column gets too narrow, so tiles stay stacked) */
@media (min-width: 680px) and (max-width: 991px) {
  .ft4 .ft4-benefit {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 24px;
    align-items: start;
    padding: 16px;
  }

  .ft4 .ft4-benefit__visual {
    grid-row: 1 / span 3;
    margin-bottom: 0;
  }

  .ft4 .ft4-benefit__title {
    margin-top: 12px;
  }
}

@media (max-width: 767px) {
  .ft4 .ft4-benefits.js-section {
    padding-top: calc(var(--js-padding) * 5);
    padding-bottom: calc(var(--js-padding) * 5);
  }

  .ft4 .ft4-final__copy {
    padding: 24px 20px;
  }
}

@media (max-width: 1059px) {
  .ft4 .ft4-benefit__visual {
    height: 224px;
  }
}

/* the mocks size to their tile, not the viewport */
.ft4 .ft4-benefit__visual {
  container-type: inline-size;
}

.ft4 .ft4-domain__url .ft4-swap {
  min-width: 0;
}

.ft4 .ft4-domain__url .ft4-swap > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ft4 .ft4-domain__status .ft4-swap > span {
  white-space: nowrap;
}

@container (max-width: 304px) {
  .ft4 .ft4-domain {
    width: 94%;
  }

  .ft4 .ft4-domain__dots {
    display: none;
  }

  .ft4 .ft4-assist {
    gap: 6px;
    width: 94%;
  }

  .ft4 .ft4-assist .ft4-chat__done {
    font-size: 13px;
  }
}

@container (max-width: 250px) {
  .ft4 .ft4-domain__url {
    padding: 0 10px;
    font-size: 12px;
  }

  .ft4 .ft4-domain__status {
    padding: 16px 14px 18px;
    font-size: 14px;
  }

  .ft4 .ft4-assist .ft4-chat__msg--user {
    max-width: 94%;
    font-size: 12px;
  }

  .ft4 .ft4-assist__list {
    gap: 2px;
    font-size: 12px;
  }

  .ft4 .ft4-receipt--mini {
    padding: 16px 14px 14px;
    font-size: 13px;
  }

  .ft4 .ft4-receipt--mini .ft4-receipt__row--item img {
    width: 34px;
    height: 34px;
  }

  .ft4 .ft4-receipt--mini .ft4-receipt__row--fee {
    padding: 10px 12px;
  }

  .ft4 .ft4-receipt--mini .ft4-receipt__row--fee .ft4-receipt__amt {
    font-size: 18px;
  }
}

/* ================================================================
  RESPONSIVE
================================================================ */
@media (max-width: 1199px) {
  .ft4 {
    --ft4-fs-h2: calc(var(--font-base-size) * 2.75);   /* 44px */
  }

  .ft4 .ft4-final__phone {
    left: 4%;
    width: 196px;
  }

  .ft4 .ft4-feed {
    width: 252px;
  }
}
@media (min-width: 992px) {
  .ft4 .ft4-cards__gallery.ft4-v-channels {
    min-height: 0;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .ft4 .ft4-cards__gallery {
    min-height: 340px;
  }

  .ft4 .ft4-cards > .col-lg-8 {
    flex: 0 0 auto;
    width: 58.333%;
  }

  .ft4 .ft4-cards > .col-lg-4 {
    flex: 0 0 auto;
    width: 41.667%;
  }

  .ft4 .ft4-final__visual {
    height: 420px;
  }
}
/* tablets: cards stack one per row; stacked visuals align with the copy */
@media (max-width: 991px) {
  .ft4 .ft4-hero {
    display: block;
    min-height: 0;
    padding-top: calc(var(--header-height-desktop) + 16px);
    padding-bottom: calc(var(--js-padding) * 7);
  }

  .ft4 .ft4-hero__copy {
    max-width: 640px;
  }

  .ft4 .ft4-panel {
    height: 420px;
  }

  .ft4 .ft4-cards__gallery {
    min-height: 340px;
  }

  .ft4 .ft4-final__visual {
    height: 420px;
    margin: 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .ft4 .ft4-final__copy {
    max-width: 640px;
    margin-inline: auto;
  }

  .ft4 .ft4-final__visual {
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  .ft4 {
    --ft4-fs-h3: calc(var(--font-base-size) * 1.25);    /* 20px */
  }

  /* Hero: copy + form first, then one storefront in a phone */
  .ft4 .ft4-hero {
    padding-top: calc(var(--header-height-mobile) + 14px);
    padding-bottom: calc(var(--js-padding) * 3);
  }

  .ft4 .ft4-hero__row {
    row-gap: calc(var(--js-padding) * 3);
  }

  /* centred like the home hero on phones: one axis with the logo, the
     section heads and the phone below */
  .ft4 .ft4-hero__copy {
    margin-inline: auto;
    text-align: center;
  }

  /* grows instead of spilling if a long translation wraps; the 16px
     radius still draws a full pill at one line */
  .ft4 .ft4-hero__tag {
    height: auto;
    min-height: 28px;
    padding: 4px 12px;
    border-radius: var(--ft4-r-lg);
    font-size: 12px;
    line-height: 1.3;
    text-wrap: balance;
  }

  .ft4 .ft4-hero__title {
    margin: 14px 0 12px;
    font-size: clamp(32px, 9.6vw, 40px);
    line-height: 1.05;
    text-wrap: pretty;
  }

  .ft4 .ft4-hero__sub {
    margin: 0 auto 20px;
    font-size: 16px;
    line-height: 1.45;
  }

  .ft4 .ft4-hero__form {
    margin-inline: auto;
  }

  .ft4 .ft4-assure {
    margin-top: 12px;
    font-size: 13px;
  }

  .ft4 .ft4-hero__assure {
    justify-content: center;
  }

  .ft4 .ft4-hero__visual {
    min-height: 318px;
  }

  .ft4 .ft4-panel {
    display: none;
  }

  .ft4 .ft4-hero__visual {
    --ft4-phone-x: calc(50% - var(--ft4-phone-w) / 2);
    --ft4-phone-w: 172px;
  }

  /* --ft4-lqip: the storefront's blurred preview until the crop arrives (see .ft4-tile) */
  .ft4 .ft4-hero__phone {
    position: absolute;
    top: 0;
    left: var(--ft4-phone-x);
    display: block;
    width: var(--ft4-phone-w);
    border-width: 5px;
    border-radius: 22px;
    background-image: var(--ft4-lqip, none);
    background-position: top;
    background-size: cover;
  }

  /* Sections */
  .ft4 .ft4-bento.js-section,
.ft4 .ft4-proof.js-section,
.ft4 .ft4-final.js-section,
.ft4 #ft4-faq.js-section {
    padding-top: calc(var(--js-padding) * 5);
    padding-bottom: calc(var(--js-padding) * 5);
  }

  .ft4 .js-partners.js-section {
    padding-top: calc(var(--js-padding) * 2);
    padding-bottom: calc(var(--js-padding) * 2);
  }

  .ft4 .js-partners {
    --js-partners-gap: 36px;
  }

  .ft4 .js-partners .js-partners__logo {
    min-width: 104px;
  }

  .ft4 .ft4-lede {
    font-size: 16px;
  }

  .ft4 .ft4-cards {
    padding-top: calc(var(--js-padding) * 2);
  }

  .ft4 .ft4-cards__gallery {
    min-height: 300px;
  }

  .ft4 .ft4-cards__gallery.ft4-v-checkout {
    min-height: 300px;
    padding: 16px;
  }

  .ft4 .ft4-cards__gallery.ft4-v-ai {
    min-height: 320px;
  }

  .ft4 .ft4-cards__gallery.ft4-v-channels {
    min-height: 340px;
  }

  /* editor: square gallery and a bigger design unit; the storefront switches to its phone layout */
  .ft4 .ft4-cards__gallery.ft4-v-editor {
    aspect-ratio: 1;
  }

  .ft4 .ft4-browser {
    --u: calc(100cqw / 440);
    top: 11%;
    left: 5%;
    right: 5%;
  }

  .ft4 .ft4-editor {
    grid-template-columns: 34% 1fr;
  }

  .ft4 .ft4-editor__side {
    padding: calc(var(--u) * 14) calc(var(--u) * 12) calc(var(--u) * 12);
  }

  .ft4 .ft4-editor__back span {
    display: none;
  }

  .ft4 .ft4-editor__more {
    letter-spacing: 0.04em;
  }

  .ft4 .ft4-shop__bar {
    padding: 1.5cqw 0;
    font-size: 3.3cqw;
  }

  .ft4 .ft4-shop__nav {
    padding: 2.4cqw 4.5cqw;
  }

  .ft4 .ft4-shop__menu {
    display: block;
    font-size: 5.6cqw;
  }

  .ft4 .ft4-shop__brand {
    justify-self: center;
    font-size: 5cqw;
  }

  .ft4 .ft4-shop__links,
  .ft4 .ft4-shop__icons i:not(:last-child) {
    display: none;
  }

  .ft4 .ft4-shop__icons {
    font-size: 5.6cqw;
  }

  .ft4 .ft4-shop__hero {
    aspect-ratio: 7 / 5;
  }

  .ft4 .ft4-shop__veil {
    -webkit-mask: linear-gradient(90deg, currentColor 30%, transparent 78%);
    mask: linear-gradient(90deg, currentColor 30%, transparent 78%);
  }

  .ft4 .ft4-shop__copy {
    left: 5cqw;
    gap: 3.5cqw;
    width: 58cqw;
  }

  .ft4 .ft4-shop__title {
    font-size: 7.2cqw;
  }

  .ft4 .ft4-shop__cta {
    padding: 2cqw 4.5cqw;
    border-radius: 1.6cqw;
    font-size: 3.6cqw;
  }

  .ft4 .ft4-shop__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.5cqw;
    padding: 4cqw 4.5cqw;
  }

  .ft4 .ft4-shop__item {
    gap: 1.4cqw;
    padding: 1.6cqw;
    border-radius: 2.4cqw;
  }

  .ft4 .ft4-shop__item:nth-child(n + 3) {
    display: none;
  }

  .ft4 .ft4-shop__item img {
    border-radius: 1.6cqw;
  }

  .ft4 .ft4-shop__meta {
    font-size: 3.4cqw;
  }

  .ft4 .ft4-cards .js-cards__content {
    padding: 18px 18px 20px;
  }

  .ft4 .ft4-cards .js-cards__text {
    font-size: 15px;
  }

  .ft4 .ft4-chat {
    width: calc(100% - 28px);
  }

  .ft4 .ft4-v-ai__foot {
    bottom: 12px;
    width: calc(100% - 28px);
  }

  .ft4 .ft4-checkout {
    max-width: 340px;
  }

  .ft4 .ft4-receipt {
    padding: 24px 20px 20px;
  }

  .ft4 .ft4-stores {
    margin-top: calc(var(--js-padding) * 4);
  }

  .ft4 .ft4-stores__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }

  .ft4 .ft4-store figcaption strong {
    font-size: 14px;
  }

  .ft4 .ft4-store figcaption span {
    font-size: 12px;
  }

  .ft4 .ft4-final__sub {
    margin: 14px 0 22px;
    font-size: 16px;
  }

  .ft4 .ft4-final__visual {
    height: 360px;
  }

  .ft4 .ft4-final__phone {
    left: 4%;
    width: 160px;
    border-width: 5px;
    border-radius: 22px;
  }

  .ft4 .ft4-final__live {
    min-width: 0;
    padding: 10px 12px;
  }

  .ft4 .ft4-feed {
    width: 224px;
  }

  .ft4 .ft4-feed__item {
    padding: 10px 12px;
  }

}

/* ≤768 base stacks every .js-section__form */
@media (max-width: 768px) {

  .ft4 .ft4-hero .ft4-form .ft4-form__button,
  .ft4 .ft4-final .ft4-form .ft4-form__button {
    width: 100%;
    justify-content: center;
  }
}
/* tablets: the hero/final columns are wide enough to keep the pill on one row */
@media (min-width: 576px) and (max-width: 768px) {
  .ft4 .ft4-form {
    flex-direction: row;
    padding: 7px;
  }

  .ft4 .ft4-form .js-section__form-input {
    padding: 0 14px;
  }

  .ft4 .ft4-hero .ft4-form .ft4-form__button,
  .ft4 .ft4-final .ft4-form .ft4-form__button {
    width: auto;
    padding: 0 22px;
  }
}
@media (max-width: 575px) {
  .ft4 {
    --ft4-fs-h2: calc(var(--font-base-size) * 2.125);  /* 34px */
  }

  .ft4 .ft4-h2 {
    line-height: 1.08;
  }

  .ft4 .ft4-hero .ft4-form .js-section__form-input,
  .ft4 .ft4-final .ft4-form .js-section__form-input {
    flex: 0 0 auto;
  }

  /* stacked form on green: a solid field above the button, not a tinted panel */
  .ft4 .ft4-final .ft4-form,
  .ft4 .ft4-final .ft4-form:hover,
  .ft4 .ft4-final .ft4-form:focus-within {
    padding: 0;
    gap: 8px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .ft4 .ft4-final .ft4-form .js-section__form-input {
    border: 1px solid var(--color-main-op3);
    border-radius: var(--ft4-r-md);
    background: var(--color-accent-contrast);
  }

  .ft4 .ft4-final .ft4-form .js-section__form-input:focus {
    border-color: var(--color-main);
    box-shadow: 0 0 0 3px var(--color-main-op2);
  }

  /* final band: the live chip + notification feed only (no phone) */
  .ft4 .ft4-final__visual {
    height: auto;
  }

  .ft4 .ft4-final__phone {
    display: none;
  }

  .ft4 .ft4-final__live {
    position: static;
    margin-bottom: 10px;
    padding: 12px 14px;
  }

  .ft4 .ft4-feed {
    position: static;
    width: 100%;
    transform: none;
  }

  .ft4 .ft4-feed__item {
    transform: none;
  }
}
/* base.css forces .js-section__title to 40px !important at ≤418 */
@media (max-width: 418px) {
  .ft4 .ft4-h2 {
    font-size: calc(var(--font-base-size) * 2) !important;
  }

  .ft4 #ft4-faq .js-faq-split__title {
    font-size: calc(var(--font-base-size) * 2);
  }

  /* keeps the longest badge (pt) on one line at 360px */
  .ft4 .ft4-hero__tag {
    font-size: 11.5px;
  }
}
@media (max-width: 359px) {

  .ft4 .ft4-v-ai__foot {
    column-gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .ft4 .ft4-receipt {
    padding: 22px 16px 18px;
  }

  .ft4 .ft4-receipt__row--fee {
    padding: 12px;
  }

  .ft4 .ft4-hero__visual {
    --ft4-phone-w: 150px;
  }

  /* the badge text gets the dot's room; pt still wraps here, centred */
  .ft4 .ft4-hero__dot {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ft4 *,
  .ft4 *::before,
  .ft4 *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .ft4-js [data-ft4-reveal] {
    opacity: 1;
    transform: none;
  }

  .ft4 .ft4-panel__set + .ft4-panel__set {
    display: none;
  }
}