@font-face {
  font-family: "FC Archivo";
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.woff2) format("woff2");
}

/* Stand-in for CF's button styling. Mirrors CF's structure:
   div.elBTN > a.elButton > span.elButtonMain > span.elButtonMainText */

.fc-preview .elBTN,
.fc-modal-hero .elBTN {
  display: block;
  width: 100%;
  text-align: center;
  /* CF publishes its theme button colour under this name, above the button, so
     effects that read it behave here the way they will on a real page */
  --button-primary-background-color: var(--fc-btn, var(--red));
}

/* The showcase button. The checkout replica is excluded by name: its submit
   is an .elButton too, and the brand ramp below was painting over the color the
   panel had just been told to use — the preview contradicted its own control. */
.fc-preview .elButton:not(.fc-c1prev .elButton),
.fc-modal-hero .elButton:not(.fc-c1prev .elButton) {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 20px 42px;
  border-radius: 7px;
  background-color: var(--fc-btn, var(--red));
  /* the showcase button wears the brand ramp. An effect that paints its own
     background is injected after this file and still wins. */
  background-image: var(--ramp);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.fc-modal-hero .elButton { padding: 28px 62px; }

/* Icon panels, showcase only — the effect must never set a button height. Its
   panel is a square sized from the label's font, so on a button taller than the
   square (which the roomy showcase button is) it sits centred with the button's
   color showing above and below. On a real page that's correct: the height is
   the customer's to set. Here it just looks unfinished, so the showcase button
   is given exactly the square's height and the panel fills it edge to edge.

   Vertical padding goes to zero because the height is now fixed — left in, it
   would squeeze the label's box instead. Horizontal padding is untouched.
   Values are the effect's 2.4em resolved against each surface's label size:
   20px label -> 48px, 28px label -> 67px. */
/* Card tiles keep the same button height as every other button in the row
   (20px label + 20px padding top and bottom = 64px), and the panel is grown to
   match instead. Overriding --fc-panel-max is what makes that safe: it sets the
   panel width AND the label's clearance, so both move together. The glyph is
   scaled by the same factor to hold the effect's proportions. */
.fc-preview .elBTN:is(
  [id="fc-button-panel"], [id="fc-button-message"], [id="fc-button-download"],
  [id="fc-button-phone"], [id="fc-button-arrowpanel"], [id="fc-button-chevrons"],
  [id="fc-button-lock"], [id="fc-button-calendar"], [id="fc-button-star"]
) {
  --fc-panel-max: 64px;
  --fc-panel-icon: 30px;
}

.fc-preview .elBTN:is(
  [id="fc-button-panel"], [id="fc-button-message"], [id="fc-button-download"],
  [id="fc-button-phone"], [id="fc-button-arrowpanel"], [id="fc-button-chevrons"],
  [id="fc-button-lock"], [id="fc-button-calendar"], [id="fc-button-star"]
) .elButton {
  height: 64px;
  padding-top: 0;
  padding-bottom: 0;
}

.fc-modal-hero .elBTN:is(
  [id="fc-button-panel"], [id="fc-button-message"], [id="fc-button-download"],
  [id="fc-button-phone"], [id="fc-button-arrowpanel"], [id="fc-button-chevrons"],
  [id="fc-button-lock"], [id="fc-button-calendar"], [id="fc-button-star"]
) .elButton {
  height: 67px;
  padding-top: 0;
  padding-bottom: 0;
}

.fc-preview .elButtonMain,
.fc-modal-hero .elButtonMain {
  display: block;
}

.fc-preview .elButtonMainText,
.fc-modal-hero .elButtonMainText {
  display: inline;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.fc-modal-hero .elButtonMainText { font-size: 28px; }

.fc-preview .elButtonSpinner,
.fc-modal-hero .elButtonSpinner { display: none; }

.fc-preview .elButtonSub:empty,
.fc-modal-hero .elButtonSub:empty { display: none; }

/* Images */
.fc-img {
  width: 100%;
  max-width: 250px;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
}

.fc-modal-hero .fc-img { max-width: 340px; }

/* On the homepage tile an image effect fills the whole card rather than sitting
   on a surface: what a customer is judging is the photo, and a pane around it
   only makes it smaller. Shape keeps its surface — a cut-out has to be seen
   against something or the cut does not read. */
.fc-card .fc-preview:has(.fc-img):not(:has([id^="fc-image-shape"], [id^="fc-image-polaroid"])) {
  padding: 0;
  border-radius: 0;
}

.fc-card .fc-preview:has(.fc-img):not(:has([id^="fc-image-shape"], [id^="fc-image-polaroid"])) .fc-img {
  max-width: none;
  height: 100%;
  border-radius: 0;
}

.fc-card .fc-preview:has(.fc-img):not(:has([id^="fc-image-shape"], [id^="fc-image-polaroid"])) .fc-img img {
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

/* the swap builds its own pair of photos, so it is a different element */
.fc-card .fc-preview:has(.fc-swap) { padding: 0; border-radius: 0; }
.fc-card .fc-preview .fc-swap,
.fc-card .fc-preview .fc-swap .col-inner { width: 100%; height: 100%; max-width: none; }

/* View Larger shows it bigger than the modal does */
.fc-modal.is-zoom .fc-modal-hero .fc-img { max-width: min(720px, 100%); }
.fc-modal.is-zoom .fc-modal-hero .fc-img img { aspect-ratio: 16 / 10; }

.fc-img img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  /* the two photos are portraits and the tiles are landscape — cropping keeps
     the row the height it was, and top-biased keeps the face in frame */
  aspect-ratio: 400 / 260;
  object-fit: cover;
  object-position: top;
}

/* Text */
.fc-txt {
  width: 100%;
  text-align: center;
}

.fc-txt .elHeadline {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.16;
  color: #fff;
}

/* Demo-only. Flicker sets no letter color — the customer's CF color shows
   through — so the preview picks one, or it's white on white light. Must beat
   the .elHeadline rule above, which sets color on the headline itself and so
   is never reached by inheriting from the id. Site-only: not in the copied code.
   Sits above the .is-light rules on purpose, so the light surface still wins. */
:is(.fc-preview, .fc-modal-hero) [id="fc-text-flicker"] .elHeadline { color: #ffcc00; }

/* inline-block keeps both lines in one box, or gradient and shimmer restart
   on each line */
.fc-txt .elHeadline b {
  display: inline-block;
  font-weight: 900;
}

.fc-modal-hero .fc-txt .elHeadline { font-size: 54px; }

/* headline + the bold reminder stack vertically in the modal */
.fc-txt-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.fc-txt-hint {
  margin: 20px 0 0;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .62);
}

/* ---- light-background preview for text effects ---- */
.fc-preview.is-light .fc-txt .elHeadline,
.fc-modal-hero.is-light .fc-txt .elHeadline { color: var(--ink); }

.fc-modal-hero.is-light .fc-txt-hint { color: #7c808a; }

.fc-preview.is-light .fc-txt,
.fc-modal-hero.is-light .fc-txt {
  --fc-neon-text: var(--fc-neon, #ff2d38) ;
}

/* ---- light surface, for the modal's Dark/Light switch ----
   Light text would vanish on white, so give these page ink instead. */
.fc-preview.is-light .fc-list:not(.fc-stack),
.fc-modal-hero.is-light .fc-list:not(.fc-stack) { color: #1c1c22; }

.fc-preview.is-light .fc-list:not(.fc-stack) .fa_icon,
.fc-modal-hero.is-light .fc-list:not(.fc-stack) .fa_icon { color: var(--red); }

/* the wordmark, in the site's own two faces */
/* the tile's own copy: centred, and off the edges. It shares nothing with the
   panel accordion now, which is where its old class came from. */
.fc-preview .fc-sec-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 18px;
}

.fc-preview .fc-sec-copy .fc-sec-h { text-wrap: balance; }

.fc-sec-logo {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  white-space: nowrap;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: .92em;
  letter-spacing: -.03em;
  line-height: 1;
  color: #ffffff;
}

.fc-sec-logo b { font-weight: 700; color: #ffffff; }

/* the sidebar wordmark: white "Funnel", the pink-to-red "Charm" */
.fc-sec-logo i {
  margin-left: .024em;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.19em;
  letter-spacing: .02em;
  color: #e8446a;
  background: linear-gradient(100deg, #e8446a 0%, var(--red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fc-modal-hero .fc-sec-logo { top: 30px; font-size: 1.4em; }

/* On the homepage tile the wordmark drops out of the corner and sits in the
   flow, right above the headline with a hairline between the two. Everywhere
   else it stays pinned to the top of the section. */
.fc-preview .fc-sec-logo { position: static; transform: none; }

.fc-sec-rule { display: none; }

.fc-preview .fc-sec-rule {
  display: block;
  width: 46px;
  height: 1px;
  margin: 3px 0 5px;
  background: rgba(255, 255, 255, .38);
}

.fc-preview.is-light .fc-sec-rule { background: rgba(28, 28, 34, .22); }

/* the tile is a third of the width the modal is, so the same headline reads as
   shouting there */
.fc-preview .fc-sec-h { font-size: 1.28em; }

/* Angled and Wave: the shape IS the effect, and a headline sitting over it
   competes with the one thing the card is there to show. Wordmark only, and a
   pale surface behind rather than the red — a dark section cut over a light
   page is what a customer is actually going to build. */
.fc-preview.is-section.is-divider { background: #eef0f5; }
.fc-preview.is-divider .fc-sec-h,
.fc-preview.is-divider .fc-sec-rule { display: none; }

.fc-preview.is-light .fc-sec-h,
.fc-modal-hero.is-light .fc-sec-h { color: #1c1c22; }

.fc-preview.is-light .fc-sec-logo b,
.fc-modal-hero.is-light .fc-sec-logo b { color: #1c1c22; }

/* Testimonials — stand-in for a CF row of testimonial columns. Mirrors CF's
   own defaults so an effect written against real CF markup lands the same here. */
.fc-testi {
  display: flex;
  gap: 14px;
  width: 100%;
  max-width: 210px;
  font-family: Inter, sans-serif;
}

.fc-modal-hero .fc-testi { max-width: 340px; gap: 20px; }

/* View Larger: two cards side by side, at the sizes the effect actually ships */
.fc-modal.is-zoom .fc-modal-hero .fc-testi { max-width: 820px; gap: 26px; }

.fc-modal.is-zoom .fc-modal-hero:has([id="fc-testi-split"]) .fc-testi { max-width: 900px; }

/* Compact is a three-sentence review in a small card — it needs the width */
.fc-modal.is-zoom .fc-modal-hero:has([id="fc-testi-compact"]) .fc-testi { max-width: 940px; }

.fc-modal.is-zoom /* Byline ships larger type for a real page column; the modal card is narrower,
   so it shows the copy at the size the showcase was designed around. */
.fc-modal-hero [id="fc-testi-byline"] {
  --fc-size-blurb: 23px  !important;
  --fc-size-quote: 15px  !important;
  --fc-size-name: 16px  !important;
}

.fc-modal-hero [id="fc-testi-split"] {
  --fc-photo: 150px ;
}

/* Split lays out sideways, so 340px leaves nothing for the quote — it needs
   the width and a smaller photo to read at showcase size. */
.fc-modal-hero:has([id="fc-testi-split"]) .fc-testi { max-width: 420px; }

.fc-modal-hero:has([id="fc-testi-paper"]) .fc-testi,
.fc-modal-hero:has([id="fc-testi-compact"]) .fc-testi { max-width: 400px; }

.fc-modal-hero [id="fc-testi-split"] {
  --fc-photo: 118px ;
  --fc-card-pad: 22px 22px 20px ;
  --fc-rule-gap: 16px ;
  --fc-name-gap: 16px ;
}

/* Card tiles only. The effect ships an avatar and padding scaled for a real
   page, which stacks up taller than the 200px tile — the card overflowed its
   frame. Overriding the effect's own variables shortens it and widens the
   column, so it reads as a horizontal card that fits. Showcase only: none of
   this is in the copied code, and the modal keeps the shipped proportions. */
/* Testimonial cards are tall — a photo, four lines and a rating — so the tile
   gets 30% more height than the rest of the gallery. Card tiles only: the
   modal has its own size and a real page is unaffected. */
.fc-preview:has(.fc-testi) { height: 260px; }

/* the cards are white, so the standard light surface leaves them edgeless —
   a step darker gives them something to sit on */
.fc-preview.is-light.is-live:has(.fc-testi),
.fc-modal-hero.is-light.is-live:has(.fc-testi) {
  background: linear-gradient(180deg, #f2eee8, #e8e2da);
}

.fc-preview .fc-testi { max-width: 300px; }

.fc-preview [id="fc-testi-modern"] {
  /* the photo pokes above the card, so the card needs room at the top */
  margin-top: 10px;
  --fc-avatar: 60px;
  --fc-avatar-gap: 13px;
  --fc-pad-top: 0px;
  --fc-pad-x: 16px;
  --fc-pad-bottom: 13px;
  --fc-card-radius: 10px;
  --fc-quote-size: 2.4em;
  --fc-quote-left: 10px;
  --fc-quote-top: 4px;
  --fc-star-size: .85em;
  --fc-star-gap: 9px;
  --fc-name-gap: 9px;
  --fc-card-lift: 5px;
}

/* The other testimonial designs, scaled for the showcase the same way — the
   shipped values are sized for a real page and overflow a 200px tile. Card
   tiles only; the modal keeps the shipped proportions. */
.fc-preview [id="fc-testi-bubble"] {
  --fc-card-pad: 26px 16px 16px;
  --fc-card-radius: 14px;
  /* the mark is an em of the QUOTE, and the tile drops the quote to 10px — at
     the shipped 7em it came out a third of the size the modal shows */
  --fc-mark-size: 8.2em;
  --fc-star-size: .72em;
  --fc-star-gap: 2px;
  /* the tile scales the quote and blurb but the name kept its full size */
  --fc-size-name: 10.5px;
  --fc-role-gap: 1px;
  /* the shipped gap is tuned for 19px type, not the tile's 10px */
  --fc-blurb-gap: 10px;
  --fc-name-gap: 10px;
  --fc-tail-size: 16px;
}

.fc-preview [id="fc-testi-compact"] {
  --fc-card-pad: 12px 13px 13px;
  --fc-stars-w: 74px;
  --fc-star-gap: 9px;
  --fc-name-gap: 10px;
}

.fc-preview [id="fc-testi-split"] {
  /* the stars are an em of the card's own 16px, so they never shrank with the
     tile's type the way everything else did */
  --fc-star-size: .62em;
  --fc-star-gap: 8px;
  --fc-card-pad: 16px 16px 14px;
  --fc-photo: 92px;
  --fc-rule-gap: 12px;
  --fc-name-gap: 12px;
}

.fc-preview [id="fc-testi-paper"] {
  /* the stars are an em of the card's own 16px, so they never shrank with the
     tile's type the way everything else did */
  --fc-star-size: .62em;
  --fc-star-gap: 2px;
  --fc-card-pad: 14px 16px 16px;
  --fc-rule-step: 16px;
  --fc-margin-x: 30px;
  --fc-mark-size: 1.6em;
  --fc-mark-top: 7px;
  --fc-name-gap: 14px;
}

.fc-preview [id="fc-testi-glass"] {
  --fc-pad-top: 24px;
  --fc-pad-x: 14px;
  --fc-pad-bottom: 12px;
  --fc-foot-h: 52px;
  --fc-card-radius: 12px;
  --fc-mark-size: 3.6em;
  --fc-avatar: 28px;
  --fc-avatar-gap: 8px;
}

.fc-preview [id="fc-testi-byline"] {
  --fc-card-pad: 12px 13px 12px;
  --fc-avatar: 34px;
  --fc-avatar-right: 12px;
  /* the photo's centre has to land on the rule: bottom padding, stars, role,
     name and the rule gap stack to ~60px, less half the 34px photo */
  --fc-avatar-bottom: 43px;
  --fc-mark-size: 2em;
  --fc-mark-indent: 26px;
  --fc-mark-top: 8px;
  --fc-mark-left: 11px;
  --fc-rule-gap: 9px;
  --fc-name-gap: 10px;
  /* .95em of the card's 16px is huge beside 9px role text on a tile */
  --fc-star-size: .62em;
  --fc-star-gap: 2px;
  --fc-size-name: 10.5px;
  --fc-size-role: 8.5px;
  --fc-role-gap: 1px;
  --fc-blurb-gap: 7px;
}

.fc-preview [id="fc-testi-reveal"] {
  --fc-card-h: 218px;
  /* the tile is a third the height, so the panel needs to start higher or
     the blurb sits off the dark */
  --fc-veil-top: 20%;
  --fc-card-pad: 12px;
  --fc-card-radius: 10px;
}

.fc-testi [data-page-element="ColContainer/V1"] { flex: 1 1 0; min-width: 0; }

.fc-testi .col-inner { text-align: center; }

/* :where() so a design that sizes its own photo always wins; only Modern,
   which leaves the size to CF, still needs this */
/* size only — the gap under the photo and its alignment belong to the effect,
   or the showcase quietly adds spacing a real page will not have */
.fc-testi :where(.elImage) {
  width: 38px;
  aspect-ratio: 1 / 1;
  height: auto;
  display: block;
  object-fit: cover;
}

.fc-modal-hero .fc-testi :where(.elImage) { width: 62px; }


.fc-testi .fa_icon { font-style: normal; color: #c9ccd6; }

.fc-testi .elParagraph { margin: 0; }

/* Color is set on the WRAPPER, not the inner tag: a color on .elParagraph
   beats one inherited from the card, so a design that owns its text color
   (Glass, Reveal) would come out dark on dark. --fc-ink is how those two say
   so; everything else falls back to the showcase greys. */
.fc-testi .col-inner > :nth-last-child(4),
.fc-testi .col-inner > :nth-last-child(3) { color: var(--fc-ink, #5a5c66); }

.fc-testi .col-inner > :nth-last-child(2),
.fc-testi .col-inner > :nth-last-child(1) { color: var(--fc-ink, var(--ink)); }

/* The type now comes from each effect's own variables, so the modal shows the
   real thing. Card tiles are a third the size, so they scale those variables
   down — same relationship, small enough to fit a 200px frame. */
.fc-preview .fc-testi {
  --fc-size-blurb: 15px;
  --fc-size-quote: 10px;
  --fc-size-name: 11.5px;
  --fc-size-role: 9px;
}

.fc-preview [id="fc-testi-paper"] { --fc-size-name: 13px; }
.fc-preview [id="fc-testi-split"] { --fc-size-quote: 10px; }

/* Scaling Dot and Pulse preview their description twin, which stacks a title
   and a description per item — smaller type and a tighter indent keep two of
   those inside the tile. */
.fc-preview .fc-list:is([id="fc-bullet-dot-desc"], [id="fc-bullet-pulse-desc"]) {
  font-size: 21px;
  /* fill the tile instead of sitting in a 300px column — that column was what
     left the text short of the right edge, not the left padding */
  max-width: 100%;
  padding: 0 18px;
}

.fc-preview .fc-list:is([id="fc-bullet-dot-desc"], [id="fc-bullet-pulse-desc"]) li {
  padding-left: .95em;
}

/* the expanded value stack gets the width, so the rows can run wider than the
   narrow modal column allows */
.fc-modal.is-zoom .fc-modal-hero .fc-stack {
  max-width: 720px;
  font-size: 22px;
}

/* Cards runs its own smaller type — widen it without blowing the type up */
.fc-modal.is-zoom .fc-modal-hero .fc-list:is([id="fc-stack-card"], [id^="fc-stack-card-"]) {
  max-width: 860px;
  font-size: 17px;
}

/* Bullet list */
.fc-list {
  width: 100%;
  max-width: 300px;
  color: rgba(255, 255, 255, .92);
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 500;
}

.fc-modal-hero .fc-list { max-width: 400px; font-size: 26px; }

/* nudge plain bullet lists right — their short text otherwise hugs the left
   edge, leaving blank space on the right (stacks run full-width, so exempt) */
.fc-preview .fc-list:not(.fc-stack) { padding-left: 20px; }
.fc-modal-hero .fc-list:not(.fc-stack) { padding-left: 30px; }

/* pill previews a touch smaller in the card so the pills fit */
.fc-preview .fc-list:is([id="fc-bullet-pill"], [id^="fc-bullet-pill-"]) { font-size: 18px; }

/* value stacks run wider (item on the left, value on the right). They preview
   on a white surface (most pages are light), so the text stands dark. */
.fc-list.fc-stack { max-width: 460px; color: #1c1c22; }
.fc-modal-hero .fc-list.fc-stack { max-width: 560px; font-size: 22px; }

/* the dotted leader needs the row to fit on one line — five rows at 22px push
   the panel past its height */
.fc-modal-hero .fc-list:is([id="fc-stack-dot"], [id^="fc-stack-dot-"]) { font-size: 17px; }
.fc-preview .fc-list.fc-stack { font-size: 13px; }

/* Scaling Dot inherits CF's icon color, so set one here to stand in for what
   a user would pick in the editor. */
.fc-list:not(.fc-stack) .fa_icon {
  color: var(--red);
}

/* stand-in bullet icon: a grey checkmark (live pages use CF's own icon) */
.fc-list.fc-stack .fa_icon::before {
  content: "\2713";
  color: var(--muted-2);
  font-weight: 800;
  font-style: normal;
}

/* Animated Icon keeps CF's own icon; the preview has no Font Awesome, so draw a
   representative checkmark inside the circle */
.fc-list:is([id="fc-bullet-icon"], [id^="fc-bullet-icon-"]) .fa_icon::before,
.fc-list:is([id="fc-bullet-pill"], [id^="fc-bullet-pill-"]) .fa_icon::before {
  content: "\2713";
  font-style: normal;
  font-weight: 800;
}

/* staging for the dotted style: red value, everything else dark.
   (On a live page these follow CF's own text and bold color settings.)
   The accent sits on the VALUE, not the wrapper — on the wrapper it also tinted
   the description text and the leader, which is drawn in currentColor. */
.fc-list:is([id="fc-stack-dot"], [id^="fc-stack-dot-"]) .elBulletListTextWrapper :is(i, em) { color: var(--red); }

/* the Cards style reads better with room to breathe, so it previews wider */
.fc-list:is([id="fc-stack-card"], [id^="fc-stack-card-"]) { max-width: 540px; }
.fc-modal-hero .fc-list:is([id="fc-stack-card"], [id^="fc-stack-card-"]) { max-width: 680px; font-size: 17px; }
/* it now carries a description, so the grid card runs smaller */
.fc-preview .fc-list:is([id="fc-stack-card"], [id^="fc-stack-card-"]) { font-size: 10px; }

/* boxed carries a description, so it runs smaller in the modal */
.fc-modal-hero .fc-list:is([id="fc-stack-box"], [id^="fc-stack-box-"]) { font-size: 17px; }
/* and smaller still in the grid card, where it shows title + description + value */
.fc-preview .fc-list:is([id="fc-stack-box"], [id^="fc-stack-box-"]) { font-size: 10px; }

/* taller layouts (circles / connected nodes) run smaller so they don't crop */
/* Steps + Timeline draw a connector that runs past the last item, so the bullets
   sit high in the centred panel — a little top padding balances top and bottom. */
.fc-preview .fc-list:is([id="fc-bullet-steps"], [id^="fc-bullet-steps-"]),
.fc-preview .fc-list:is([id="fc-bullet-stepsplain"], [id^="fc-bullet-stepsplain-"]),
.fc-preview .fc-list:is([id="fc-bullet-time"], [id^="fc-bullet-time-"]) {
  font-size: 16px;
  padding-top: 22px;
}

.fc-modal-hero .fc-list:is([id="fc-bullet-steps"], [id^="fc-bullet-steps-"]),
.fc-modal-hero .fc-list:is([id="fc-bullet-stepsplain"], [id^="fc-bullet-stepsplain-"]),
.fc-modal-hero .fc-list:is([id="fc-bullet-time"], [id^="fc-bullet-time-"]) {
  padding-top: 34px;   /* no font-size override — all no-description use 26px */
}

/* Description mode is detected by a bolded title (same id as plain), so this
   keys off :has(b). Stacks also use <b>, so they're excluded. */
.fc-modal-hero .fc-list:not(.fc-stack):has(:is(b, strong)) {
  font-size: 22px;
  padding-left: 15px;    /* further left than the plain lists */
  padding-top: 30px;     /* nudge down when the description is on */
}
.fc-preview .fc-list:not(.fc-stack):has(:is(b, strong)) { font-size: 13px; }

.fc-list ul {
  margin: 0;
  padding: 0;
}

.fc-list li {
  line-height: 1.5;
}

/* Video — stand-in for CF's Video element. The script overlays a click-catcher
   with a "Tap for sound" badge; this mirrors that look for the preview. */
.fc-video {
  position: relative;
  width: 100%;
  max-width: 240px;          /* 20% smaller in the card so the laptop base fits */
  line-height: 0;
}

.fc-modal-hero .fc-video {
  max-width: 460px;
  /* grows with the panel rather than snapping once it has finished moving */
  transition: max-width .38s cubic-bezier(.22, 1, .36, 1);
}

/* View Larger: the panel roughly doubles, so the cap has to rise or the frame
   sits small in the middle of it. 70% up on the normal modal size. */
.fc-modal.is-zoom .fc-modal-hero .fc-video { max-width: 780px; }

/* a card that asked for the bigger pane fills it */
.fc-modal.is-bigpreview .fc-modal-hero .fc-video { max-width: 720px; }

@media (prefers-reduced-motion: reduce) {
  .fc-modal-hero .fc-video { transition: none; }
}

/* The frames inherit their corner radius from the CF wrapper; the showcase
   previews them square on purpose. */
.fc-video[id="fc-video-silver"] { border-radius: 0; }
.fc-video[id="fc-video-gold"]   { border-radius: 0; }
.fc-video[id="fc-video-glow"]   { border-radius: 0; }

/* video previews sit on a light grey, so the silver laptop reads against it */
.fc-preview.is-light:has(.elVideoWrapper),
.fc-modal-hero.is-light:has(.elVideoWrapper) {
  background: linear-gradient(180deg, #f1ece5, #e4ded5);
}

/* mirror CF's fluid-width video box: a padding-top ratio holds the 16:9 shape
   and the screen fills it absolutely */
.fc-video .fluid-width-video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.fc-video .fc-video-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* a video-thumbnail stand-in with a play button. Blue-grey rather than black,
   so it reads as a screen against the dark laptop bezel. */
.fc-video-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, #8a93a2 0%, #626b78 52%, #49505c 100%);
}

.fc-video-play {
  position: relative;
  width: 20%;
  max-width: 54px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .12);
  font-size: 20px;                 /* sizes the play triangle below */
}

.fc-modal-hero .fc-video-play { font-size: 22px; }

/* View Larger: the frame goes 460px -> 780px, so the cap and the triangle rise
   by the same 1.7 or the button shrinks against the frame around it. */
.fc-modal.is-zoom .fc-modal-hero .fc-video-play {
  max-width: 92px;
  font-size: 37px;
}

.fc-modal.is-zoom .fc-modal-hero .fc-video:not(.fc-smart) .fc-video-badge { font-size: 27px; }

.fc-video-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: .42em 0 .42em .66em;
  border-color: transparent transparent transparent #fff;
}

/* ---- Smart Autoplay, mirrored ----
   The effect is a script, and a script does not run in the gallery. These rules
   are the same ones it injects, keyed off the same variables, so the Customize
   panel changes the preview exactly as the settings change a real page. Any
   change here belongs in effects/videosmart.js as well. */
.fc-video.fc-smart {
  container-type: inline-size;
  --fc-words: "Your Video is Playing";
  --fc-line2: "Click to Unmute";
  --fc-btn: "Unmute";
  --fc-style: play;
  --fc-accent: #FFC53D;
  --fc-veil: transparent;
  --fc-veil-wash: color-mix(in srgb, var(--fc-accent) 72%, transparent);
  --fc-size-veil: var(--fc-veil-wash);
  --fc-small-veil: rgba(0, 0, 0, .25);
  --fc-small-panel-bg: color-mix(in srgb, var(--fc-accent) 84%, transparent);
  --fc-small-aspect: 1;
  --fc-small-w: 36cqw;
  --fc-small-max: none;
  --fc-small-pad: 1.2em 1em;
  --fc-y: center;
  --fc-x: center;
  --fc-panel-w: auto;
  --fc-panel-max: none;
  --fc-panel-pad: 0px;
  --fc-panel-gap: 1.25em;
  --fc-panel-hover-edge: none;
  --fc-panel-bg: none;
  --fc-panel-radius: 0px;
  --fc-panel-blur: none;
  --fc-panel-ink: #ffffff;
  --fc-words-shadow:0 2px 10px rgba(0, 0, 0, .65);
  --fc-panel-aspect: auto;
  --fc-icon: none;
  --fc-icon-size: max(56px, 16cqw);
  --fc-pill: none;
  --fc-ring: grid;
  --fc-words-weight: 700;
  --fc-words-lead: 1;
  --fc-line2-lead: 1;
  --fc-logo-show: none;
  --fc-ring-size: max(54px, 13cqw);
  --fc-words-size: max(18px, 4.29cqw);
  --fc-pill-size: max(13px, 2.1cqw);
  --fc-pill-weight: 700;
  --fc-pill-track: .02em;
  --fc-pill-case: none;
  --fc-pill-ink: #ffffff;
  --fc-ring-bg: rgba(255, 255, 255, .22);
  --fc-ring-border: 2px solid rgba(255, 255, 255, .85);
  --fc-ring-shadow: 0 .5em 1.6em rgba(0, 0, 0, .3);
  --fc-ring-ink: #ffffff;
  --fc-ring-glyph: 46%;
  --fc-ring-pulse: block;
  --fc-pulse-speed: 1.5s;
  --fc-pulse-offset: .22s;
  --fc-pulse-2: none;
  --fc-pulse-ink: color-mix(in srgb, var(--fc-accent) 70%, transparent);
  --fc-ring-motion: fcVidBreathe 2.6s ease-in-out infinite;
  --fc-mark-tri: none;
  --fc-mark-mute: block;
  --fc-words-face: "FC Archivo", Archivo, Inter, system-ui, sans-serif;
  --fc-line2-size: .5em;
  --fc-line2-weight: 800;
  --fc-line2-case: uppercase;
  --fc-line2-track: .16em;
  --fc-line2-ink: var(--fc-accent);
  --fc-line2-shadow: 0 1px 2px rgba(0, 0, 0, .92), 0 0 14px rgba(0, 0, 0, .65);
  --fc-line2-bg: transparent;
  --fc-line2-pad: 0px;
  --fc-line2-radius: 999px;
  --fc-line2-gap: .7em;
  --fc-line2-border: 0 solid transparent;
  --fc-line2-hover-bg: transparent;
  --fc-line2-hover-ink: var(--fc-line2-ink);
  --fc-line2-hover-edge: 0 solid transparent;
  --fc-line2-display: inline-block;
  --fc-strip: none;
  --fc-strip-h: 22%;
  --fc-hint: none;
  --fc-call: none;
  --fc-corner-y: 4.5%;
  --fc-corner-x: 3%;
  --fc-hint-text: "Enable sound";
  --fc-hint-size: max(9px, 1.65cqw);
  --fc-hint-weight: 1.05;
  --fc-call-size: max(9px, 1.7cqw);
  --fc-call-ico: max(24px, 4.6cqw);
  --fc-call-radius: 12px;
  --fc-call-ico-radius: 9px;
  --fc-call-bg: rgba(0, 0, 0, .38);
  --fc-call-edge: rgba(255, 255, 255, .22);
  --fc-call-track: .203em;
  --fc-call-2-size: .82em;
  --fc-bar: none;
  --fc-bar-bg: linear-gradient(to top, rgba(12, 12, 14, .97) 0%, rgba(12, 12, 14, .88) 18%, rgba(12, 12, 14, .45) 52%, rgba(12, 12, 14, 0) 100%);
  --fc-bar-top: auto;
  --fc-bar-bottom: 0;
  --fc-bar-pad: 1.55em 1.7em 1.45em;
  --fc-bar-gap: 1em;
  --fc-bar-1-size: max(13px, 2.6cqw);
  --fc-bar-1-weight: 800;
  --fc-bar-1-ink: #ffffff;
  --fc-bar-2-text: "Sound is off by default.";
  --fc-bar-2-size: max(10px, 1.85cqw);
  --fc-bar-2-weight: 400;
  --fc-bar-2-ink: rgba(255, 255, 255, .62);
  --fc-bar-btn-size: max(11px, 2.1cqw);
  --fc-bar-btn-weight: 700;
  --fc-bar-btn-ink: #14141a;
  --fc-bar-btn-radius: 999px;
  --fc-eq-h: max(19px, 3.5cqw);
  --fc-eq-w: max(4px, .62cqw);
  --fc-eq-gap: max(3px, .42cqw);
  --fc-under: block;
  --fc-wave: fcVidWave 1.9s ease-in-out infinite;
  --fc-logo: url("https://funnelcharm.com/img/brand/logo-youtube.png");
  --fc-logo-w: 16%;
  --fc-logo-top: 2%;
  --fc-logo-right: auto;
  --fc-logo-bottom: auto;
  --fc-logo-left: 2%;
}

/* A stand-in logo, so the corner control has something to move. It lives here
   rather than in the effect: the shipped code has no logo until the customer
   puts their own address into --fc-logo. */
.fc-modal-hero .fc-smart { --fc-logo: url("img/logo/rivetly.png"); }

/* the real embed, when the modal shows one */
.fc-video-live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* a video element letterboxes by default; the demo should fill its frame the
     way a customer's embed does */
  object-fit: cover;
  background: #0B0D11;
}

.fc-video-cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  font: inherit;
  text-align: center;
}

.fc-smart .fc-video-cover {
  align-items: var(--fc-y);
  justify-content: var(--fc-x);
  background: var(--fc-veil);
}

/* on a tile the click opens the card, so the pointer is right; in the modal
   there is nothing left to click and the arrow would be a lie */
.fc-modal-hero .fc-video-cover { cursor: default; }

.fc-video-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fc-panel-gap);
  width: var(--fc-panel-w);
  max-width: var(--fc-panel-max);
  padding: var(--fc-panel-pad);
  border-radius: var(--fc-panel-radius);
  aspect-ratio: var(--fc-panel-aspect);
  justify-content: center;
  background: var(--fc-panel-bg);
  backdrop-filter: var(--fc-panel-blur);
  box-sizing: border-box;
  color: var(--fc-panel-ink);
  /* the em the padding and the gap are measured in — relative to the video, so
     the spacing grows with the frame instead of staying at one pixel size */
  font: 700 max(14px, 2.4cqw)/1.25 Inter, system-ui, sans-serif;
}

.fc-video-icon {
  display: var(--fc-icon);
  width: var(--fc-icon-size);
  height: var(--fc-icon-size);
  color: #fff;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .4));
  animation: fcVidBreathe 2.6s ease-in-out infinite;
}

/* the three arcs light up in turn */
.fc-video-icon .fc-wave { animation: var(--fc-wave); }
.fc-video-icon .fc-wave-2 { animation-delay: .22s; }
.fc-video-icon .fc-wave-3 { animation-delay: .44s; }

@keyframes fcVidWave {
  0%, 100% { opacity: .12; }
  18%, 62% { opacity: 1; }
}

.fc-video-ring {
  position: relative;
  display: var(--fc-ring);
  place-items: center;
  width: var(--fc-ring-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--fc-ring-bg);
  border: var(--fc-ring-border);
  box-shadow: var(--fc-ring-shadow);
  color: var(--fc-ring-ink);
  box-sizing: border-box;
  animation: var(--fc-ring-motion);
}

.fc-video-ring::before,
.fc-video-ring::after {
  content: "";
  display: var(--fc-ring-pulse);
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 3px solid var(--fc-pulse-ink);
  pointer-events: none;
  animation: fcVidPulse var(--fc-pulse-speed) ease-out infinite;
}

.fc-video-ring::after { animation-delay: var(--fc-pulse-offset); display: var(--fc-pulse-2); }

.fc-ring-tri { display: var(--fc-mark-tri); margin-left: 8%; }
.fc-ring-mute { display: var(--fc-mark-mute); }
.fc-video-ring svg {
  width: var(--fc-ring-glyph);
  height: var(--fc-ring-glyph);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .5));
}


/* the top strip and its two corners — a darkening band rather than a solid bar,
   so it reads over a bright frame and disappears over a dark one */
.fc-video-strip {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: var(--fc-strip); height: var(--fc-strip-h); pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
}

.fc-video-hint {
  position: absolute; z-index: 7;
  top: var(--fc-corner-y); left: var(--fc-corner-x);
  display: var(--fc-hint); align-items: center; gap: .5em; color: #fff;
  font: 400 var(--fc-hint-size)/1 Inter, system-ui, sans-serif; letter-spacing: .01em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6); pointer-events: none;
}
.fc-video-hint > span::after { content: var(--fc-hint-text); }
.fc-video-hint svg { width: 1.15em; height: 1.15em; flex: none; }
.fc-video-hint svg path { stroke: currentColor; stroke-width: var(--fc-hint-weight);
  stroke-linejoin: round; stroke-linecap: round; }

.fc-video-call {
  position: absolute; z-index: 7;
  top: var(--fc-corner-y); right: var(--fc-corner-x);
  display: var(--fc-call); align-items: center; gap: .62em;
  padding: .5em .85em .5em .5em; border-radius: var(--fc-call-radius);
  background: var(--fc-call-bg); border: 1px solid var(--fc-call-edge);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff;
  box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .4); pointer-events: none;
}
.fc-video-call-ico {
  display: grid; place-items: center;
  width: var(--fc-call-ico); aspect-ratio: 1; border-radius: var(--fc-call-ico-radius);
  background: var(--fc-accent); color: #fff; flex: none;
}
.fc-video-call-ico svg { width: 58%; height: 58%; }
.fc-video-call > span:last-child {
  display: block; text-align: left;
  font: 700 var(--fc-call-size)/1.15 Archivo, Inter, system-ui, sans-serif;
}
.fc-video-call > span:last-child::before { content: var(--fc-words); display: block; }
.fc-video-call > span:last-child::after { content: var(--fc-line2); display: block;
  font-weight: 600; text-transform: uppercase; font-size: var(--fc-call-2-size);
  letter-spacing: var(--fc-call-track); }


/* the bottom bar — the strip under the video with the wave, the message and
   the button in a row */
.fc-video-bar {
  position: absolute; left: 0; right: 0; z-index: 7;
  top: var(--fc-bar-top); bottom: var(--fc-bar-bottom);
  display: var(--fc-bar); align-items: center; gap: var(--fc-bar-gap);
  padding: var(--fc-bar-pad); background: var(--fc-bar-bg);
  font-family: var(--fc-words-face); text-align: left; pointer-events: none;
  box-sizing: border-box;
}
.fc-video-eq { display: flex; align-items: flex-end; flex: none; gap: var(--fc-eq-gap); height: var(--fc-eq-h); }
.fc-video-eq i {
  display: block; width: var(--fc-eq-w); height: 40%; transform-origin: bottom;
  background: var(--fc-accent); border-radius: 2px;
  animation: fcVidEq 1.1s ease-in-out infinite;
}
.fc-video-eq i:nth-child(2) { animation-delay: .22s; height: 70%; }
.fc-video-eq i:nth-child(3) { animation-delay: .44s; height: 100%; }
.fc-video-eq i:nth-child(4) { animation-delay: .66s; height: 55%; }
.fc-video-bar-words { display: block; line-height: 1.3; }
.fc-video-bar-words::before { content: var(--fc-words); display: block;
  font-size: var(--fc-bar-1-size); font-weight: var(--fc-bar-1-weight); color: var(--fc-bar-1-ink); }
.fc-video-bar-words::after { content: var(--fc-bar-2-text); display: block;
  font-size: var(--fc-bar-2-size); font-weight: var(--fc-bar-2-weight); color: var(--fc-bar-2-ink); }
.fc-video-bar-btn {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: .5em;
  padding: .72em 1.15em; border-radius: var(--fc-bar-btn-radius);
  background: var(--fc-accent); color: var(--fc-bar-btn-ink);
  font-size: var(--fc-bar-btn-size); font-weight: var(--fc-bar-btn-weight); white-space: nowrap;
}
.fc-video-bar-btn svg { width: 1.2em; height: 1.2em; flex: none; }
.fc-video-bar-btn > span::after { content: var(--fc-line2); }
@keyframes fcVidEq { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }

.fc-video-words {
  display: var(--fc-under);
  font: var(--fc-words-weight) var(--fc-words-size)/0 var(--fc-words-face);
  text-shadow: var(--fc-words-shadow);
}

.fc-video-words::before { content: var(--fc-words); display: block; line-height: var(--fc-words-lead); }
.fc-video-words::after { content: var(--fc-line2); display: var(--fc-line2-display);
  font-size: var(--fc-line2-size); font-weight: var(--fc-line2-weight); line-height: var(--fc-line2-lead);
  text-transform: var(--fc-line2-case); letter-spacing: var(--fc-line2-track);
  color: var(--fc-line2-ink); text-shadow: var(--fc-line2-shadow);
  background: var(--fc-line2-bg); padding: var(--fc-line2-pad); border-radius: var(--fc-line2-radius);
  border: var(--fc-line2-border); margin-top: var(--fc-line2-gap);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.fc-video-cover:hover .fc-video-words::after {
  background: var(--fc-line2-hover-bg); color: var(--fc-line2-hover-ink);
  border: var(--fc-line2-hover-edge); }
.fc-video-panel { transition: box-shadow .2s ease; }
.fc-video-cover:hover .fc-video-panel { box-shadow: var(--fc-panel-hover-edge); }
.fc-smart .fc-video-badge span::after { content: var(--fc-btn); }

.fc-video-logo {
  position: absolute;
  z-index: 6;
  display: var(--fc-logo-show);
  top: var(--fc-logo-top);
  right: var(--fc-logo-right);
  bottom: var(--fc-logo-bottom);
  left: var(--fc-logo-left);
  width: var(--fc-logo-w);
  max-width: 170px;
  aspect-ratio: 3 / 1;
  background: var(--fc-logo) center / contain no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .45));
}

.fc-video-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .75em 1.3em;
  border-radius: 999px;
  background: var(--fc-video-accent, var(--red));
  color: #fff;
  font: 700 13px/1 Inter, system-ui, sans-serif;
  letter-spacing: var(--fc-pill-track);
  color: var(--fc-pill-ink);
  white-space: nowrap;
  border: 2px solid rgba(255, 255, 255, .95);
  box-shadow: 0 .5em 1.4em rgba(0, 0, 0, .45), 0 0 1.6em rgba(255, 255, 255, .32);
  animation: fcVidBreathe 2.6s ease-in-out infinite;
}

.fc-smart .fc-video-badge {
  display: var(--fc-pill);
  background: var(--fc-accent);
  font-size: var(--fc-pill-size);
  /* the rest of the word's treatment, which the plain video card above does
     not have — weight, case and tracking all come from the style */
  font-family: var(--fc-words-face);
  font-weight: var(--fc-pill-weight);
  text-transform: var(--fc-pill-case);
  letter-spacing: var(--fc-pill-track);
}

.fc-video-badge::before,
.fc-video-badge::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  border: 2px solid var(--fc-pulse-ink);
  pointer-events: none;
  animation: fcVidPulse var(--fc-pulse-speed) ease-out infinite;
}

.fc-video-badge::after { animation-delay: var(--fc-pulse-offset); display: var(--fc-pulse-2); }

@keyframes fcVidBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

@keyframes fcVidPulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Smart Autoplay sizes its own badge from the style, so it is left alone */
.fc-modal-hero .fc-video:not(.fc-smart) .fc-video-badge { font-size: 16px; padding: .85em 1.5em; }

/* Countdown — stand-in for CF's Countdown/V1. The base color drives the
   labels; the effect sets the number color itself. */
.fc-preview .elCountdown,
.fc-modal-hero .elCountdown {
  width: 100%;
  color: #fff;
  font-family: Inter, sans-serif;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.fc-preview.is-light .elCountdown,
.fc-modal-hero.is-light .elCountdown {
  color: #1c1c22;
}

.fc-preview .elCountdown .elCountdownAmount { font-size: 20px; }
.fc-preview .elCountdown .elCountdownPeriod { font-size: 9px; font-weight: 700; }
.fc-modal-hero .elCountdown .elCountdownAmount { font-size: 40px; }
.fc-modal-hero .elCountdown .elCountdownPeriod { font-size: 13px; font-weight: 700; }

/* FAQ / accordion — stands in for CF's own accordion styles. These previews
   sit on the light surface, so the base text is dark. */
.fc-faq {
  width: 100%;
  max-width: 300px;
  color: #1c1c22;
  font-family: Inter, sans-serif;
  font-size: 13px;
}

.fc-modal-hero .fc-faq { max-width: 520px; font-size: 16px; }

/* top-aligned, so opening an answer only reveals downward — the question rows
   above never slide up to re-centre */
.fc-preview:has(.fc-faq) {
  align-items: flex-start;
  padding-top: 18px;
  overflow: hidden;
}

.fc-modal-hero:has(.fc-faq) {
  align-items: flex-start;
  padding-top: 124px;
  overflow: auto;
}

.fc-faq .elAccordionItemHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  padding: .85em 1em;
  font-weight: 700;
  cursor: pointer;
}

.fc-faq .elAccordionItemBody {
  padding: 0 1em .9em;
  line-height: 1.5;
  color: rgba(28, 28, 36, .72);
}

.fc-faq .elAccordionItemBody p { margin: 0; }

/* CF hides closed bodies with its own JS; the preview mimics that */
.fc-faq [data-page-element="AccordionItem"]:not(.elAccordionItemOpen) .elAccordionItemBody {
  display: none;
}

/* preview-only stand-in for CF's native slide-open (effects with their own
   body animation override this) */
.fc-faq .elAccordionItemOpen .elAccordionItemBody {
  animation: fcFaqPreviewOpen .3s ease;
}

@keyframes fcFaqPreviewOpen {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

/* stand-in chevron. inline-block on the i itself, or the rotate transforms are
   silently ignored (transforms don't apply to inline elements). */
.fc-faq .elAccordionItemHeaderAfterIcon i {
  display: inline-block;
  transition: transform .3s ease;
}

/* Stand-in for CF's own icon open-behaviour (effects leave the icon native).
   CF turns the WRAPPER, not the glyph — measured 2026-08-03 — so the preview
   turns the same thing, or anything drawn on the wrapper stays put here. */
.fc-faq .elAccordionItemHeaderAfterIcon {
  transition: transform .3s ease;
}

.fc-faq .elAccordionItemOpen .elAccordionItemHeaderAfterIcon {
  transform: rotate(90deg);
}

.fc-faq .elAccordionItemHeaderAfterIcon i::before {
  content: "\203A";
  font-style: normal;
  font-weight: 800;
  font-size: 1.2em;
  display: inline-block;
}

/* Sections. Treatments overlay the dark gradient panel; dividers (Angled,
   Wave) stack a red section behind a dark one. */

/* only divider panels go red behind the dark section (and drop the panel grid,
   since the dark divider section carries its own) */
.fc-preview.is-section.is-divider,
.fc-modal-hero.is-section.is-divider {
  background: var(--red);
}

.fc-preview.is-section.is-divider::before,
.fc-modal-hero.is-section.is-divider::before {
  display: none;
}

/* scoped with the panel class so it beats an effect setting position:relative
   on the section (e.g. Noise), which would shrink it to the label */
.fc-preview .fc-sec,
.fc-modal-hero .fc-sec {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--fc-bg, transparent);
  font-family: Inter, sans-serif;
}

/* divider section: dark gradient block over the top ~75%, carved by the effect */
.is-divider .fc-sec {
  bottom: auto;
  height: 75%;
  background:
    radial-gradient(120% 85% at 12% 0%, rgba(224, 27, 34, .22), transparent 58%),
    radial-gradient(110% 80% at 88% 100%, rgba(96, 84, 255, .20), transparent 55%),
    linear-gradient(160deg, #33333f, #0f0f15);
}

.is-divider .fc-sec::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 120% at 0% 0%, #000 0%, rgba(0, 0, 0, .5) 42%, transparent 68%);
  mask-image: radial-gradient(120% 120% at 0% 0%, #000 0%, rgba(0, 0, 0, .5) 42%, transparent 68%);
}

/* stand-in section content — a headline the treatment has to stay readable
   behind, plus a button and a line of copy at modal size */
.fc-sec-body {
  /* NOT position: relative — that made it the containing block for the
     wordmark inside it, which then pinned to the headline instead of to the
     section. A flex item takes z-index without being positioned. */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 84%;
  text-align: center;
}

.is-divider .fc-sec-body { margin-bottom: 20%; }

.fc-sec-h {
  color: #ffffff;
  font-size: 1.5em;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.fc-sec-cta {
  margin-top: 6px;
  padding: 11px 24px;
  border-radius: 7px;
  background: var(--red);
  color: #ffffff;
  font-size: .8em;
  font-weight: 800;
  letter-spacing: .02em;
}

.fc-modal-hero .fc-sec-body { gap: 14px; max-width: 620px; }
.fc-modal-hero .fc-sec-h { font-size: 2.1em; }
.fc-modal-hero .fc-sec-cta { font-size: .95em; padding: 15px 34px; }


/* ---- Logo marquee ----
   Stand-in logos as wordmarks: real logo files would make the gallery depend
   on assets, and the effect only ever touches size, filter and motion. */
.fc-marquee { width: 100%; }

.fc-marquee .fc-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 4px;
}

/* the logos are wordmarks on transparent PNGs — height decides the size, and
   width follows so none of them is stretched */
/* sized on the IMAGE: a fixed height on the tile is spent on the Boxed
   padding first, which left the logo a few pixels tall */
.fc-marquee .fc-logo .elImage {
  height: 34px;
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
}

.fc-modal-hero .fc-marquee .fc-logo .elImage { height: 46px; }



/* the text marquee tile: a smaller wordmark strip above the phrases, running
   the other way. Showcase only — none of this is in the copied code. */
.fc-marquee-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.fc-preview [id="fc-marquee-text"] { --fc-size: 21px; }

.fc-brandrow {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.fc-brandtrack {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: 26px;
  animation: fc-brandroll 120s linear infinite reverse;
}

@keyframes fc-brandroll {
  to { transform: translateX(calc(-50% - 13px)); }
}

.fc-brand {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: 13px;
  letter-spacing: -.03em;
  line-height: 1;
}

.fc-brand b { font-weight: 700; color: #14141b; }

.fc-brand i {
  margin-left: .024em;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.19em;
  letter-spacing: .02em;
  color: #e8446a;
  background: linear-gradient(100deg, #e8446a 0%, var(--red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .fc-brandtrack { animation: none; }
}

/* ---- Image gallery ----
   Just a column of images: the effect arranges them, so the stand-in supplies
   nothing but the photos and a width to work in. */
.fc-gallery { width: 100%; max-width: 300px; }

/* Scoped with .fc-preview so it beats the effect: a bare class ties with the
   effect's [id="…"] rule, and the effect stylesheet is injected after this one,
   so a tie goes to the effect and the override is silently ignored. */
.fc-preview .fc-gallery[id^="fc-gallery-collage"] {
  /* the shipped 10px edge is sized for a real page; this is the tile-scale
     equivalent */
  --fc-frame: 5px;
  /* the shipped 14px lap is proportional to a full-width wall; at tile scale it
     buries too much of each print */
  --fc-overlap: 5px;
  /* a touch of room around the wall, so the prints sit smaller in the tile */
  max-width: 264px;
}

/* One square crop per photo, so a wall reads as a set rather than a ragged
   mix. Not the mosaic, which exists to show photos at their own shapes.
   Showcase only — on a real page the customer's own photos decide.

   The selector matters: this rule lost its own first line when Masonry was
   deleted by filtering out every line mentioning it, which left the
   declarations orphaned and a stray brace behind. A stylesheet error here is
   silent — the browser simply discards what follows, which took every rule
   after it out of play. */
.fc-gallery:not([id^="fc-gallery-mosaic"]) .elImage {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Same as the spotlight: the row takes the pane and the columns divide it.
   Nothing clever here — the reason this looked small for an afternoon was a
   stylesheet error further up that stopped these rules loading at all, not
   anything about the width. */
.fc-modal-hero .fc-gallery[id^="fc-gallery-collage"] {
  max-width: 100%;
  --fc-frame: 6px !important;
}

/* View Larger keeps the chosen column count — pinning it here would fight the
   pills, which is the one thing the expanded view must not do. */
.fc-modal.is-zoom .fc-modal-hero .fc-gallery[id^="fc-gallery-collage"] {
  max-width: min(100%, calc(var(--fc-cols) * 165px));
  --fc-frame: 6px !important;
}

/* the product gallery: the stand-in supplies the two CF columns the effect
   expects; everything visible comes from the effect itself */
.fc-prodgal { width: 100%; max-width: 300px; }

/* same specificity note as the collage tile above */
.fc-preview .fc-prodgal:not(.fc-filmstrip) {
  --fc-thumb-w: 40px;
  --fc-gap: 4px;
  /* landscape in the tile: a square pane leaves the photo tiny beside the strip */
  --fc-ratio: 4 / 3;
}

/* the wall fills the tile the way the collage does: fixed photo sizes left a
   3 x 2 grid stranded in the middle of the frame */
.fc-preview .fc-gallery[id^="fc-gallery-spotlight"] { max-width: 264px; --fc-gap: 6px; }

/* A fixed height rather than a ratio: the tile is 200px tall, so the pane has
   to be told what to be, not derived from whatever width is left. */
.fc-preview .fc-prodgal:not(.fc-filmstrip) [data-page-element="ColContainer/V1"]:last-child .col-inner {
  aspect-ratio: auto;
  height: 170px;
}

.fc-modal-hero .fc-prodgal:not(.fc-filmstrip) { max-width: 520px; }

/* View Larger. !important because the Customize panel writes each slider value
   as an INLINE style on this element and inline beats any stylesheet rule; safe
   here only because the panel is off screen while expanded. */
.fc-modal.is-zoom .fc-modal-hero .fc-prodgal:not(.fc-filmstrip) {
  /* 500 x 4/3 pane + strip + gap: the row is sized to the pane, or the pane
     stretches to fill the row and the ratio is lost */
  max-width: 752px;
  --fc-thumb-w: 77px !important;
  --fc-gap: 8px !important;
}

.fc-modal.is-zoom .fc-modal-hero .fc-prodgal:not(.fc-filmstrip) [data-page-element="ColContainer/V1"]:last-child .col-inner {
  height: 500px;
  width: auto;
  aspect-ratio: 4 / 3;
}

/* the six thumbnails divide the pane's height between them, so both columns end
   level — sized by division, not by a per-thumbnail height that has to be
   recalculated whenever the pane or the gap changes */
.fc-modal.is-zoom .fc-modal-hero .fc-prodgal:not(.fc-filmstrip) [data-page-element="ColContainer/V1"]:first-child .col-inner {
  display: flex;
  flex-direction: column;
  gap: var(--fc-gap);
  height: 500px;
}

.fc-modal.is-zoom .fc-modal-hero .fc-prodgal:not(.fc-filmstrip) [data-page-element="ColContainer/V1"]:first-child .col-inner > * {
  flex: 1 1 0;
  /* a flex item will not shrink below its content without this */
  min-height: 0;
  aspect-ratio: auto;
}

.fc-modal.is-zoom .fc-modal-hero .fc-prodgal:not(.fc-filmstrip) [data-page-element="ColContainer/V1"]:first-child .elImage {
  height: 100%;
  object-fit: cover;
}

/* ---- Order bump ----
   Mirrors CF's own bump: the container carries the same data attribute the
   effects target, and the checkbox is a real input so the styled-checkbox
   effect is exercised the way it will be on a page. */
.fc-bump { width: 100%; max-width: 380px; }

.fc-modal-hero .fc-bump { max-width: 520px; }

.fc-bump-inner {
  padding: 16px 18px;
  border: 1px solid rgba(20, 22, 34, .14);
  border-radius: 10px;
  background: #fff;
}

.fc-bump-row {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  cursor: pointer;
}

.fc-bump-copy { display: block; font-family: Inter, sans-serif; }

.fc-bump-copy b {
  display: block;
  color: #14141b;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.fc-bump-copy i {
  display: block;
  margin-top: 3px;
  color: #5a5c66;
  font-size: 12.5px;
  font-style: normal;
  line-height: 1.4;
}

.fc-modal-hero .fc-bump-copy b { font-size: 16px; }
.fc-modal-hero .fc-bump-copy i { font-size: 14px; }

/* ---- Badges ----
   The badge hangs off an image, which is where most people put one. */
.fc-badge-host {
  position: relative;
  width: 82%;
  max-width: 320px;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
}

/* One frame for every badge card, whichever way its photo was shot. An upright
   photo makes a tall card that dwarfs the badge and knocks the row out of line,
   so the stand-in is cropped to landscape rather than the pool being limited to
   the four horizontal shots. */
.fc-badge-host .elImage {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

/* the modal has the room, and a badge is judged against the thing it sits on */
.fc-modal-hero .fc-badge-host { width: 94%; max-width: 368px; }

/* A badge standing on its own: the stand-in is the empty row it would go on, so
   it has no look of its own — the width is what the badge measures itself
   against, and the height comes from the effect. */
.fc-badge-solo { width: 78%; max-width: 300px; }

/* The modal has room the tile has not, so the badge is drawn at twice the size
   there. Raising the scale rather than the stand-in's width: the badge is a
   share of that width and the stand-in's height follows from it, so widening
   the stand-in would push its foot past the panel. Preview only — the scale in
   the copied code is untouched. */
.fc-modal-hero .fc-badge-solo { width: 68%; max-width: 300px; --fc-scale: 132; }

/* the seal and pill sit outside the picture edge, so the host can't clip them */
/* the seal and pill sit outside the picture edge, so the host cannot clip them */
.fc-badge-host:not([id="fc-badge-corner"]) { overflow: visible; }

/* ---- Forms ----
   Mirrors CF's Input/V1: the border belongs to .borderHolder, and .elLabel is
   CF's own floating label sitting over the field. */
.fc-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 84%;
  max-width: 380px;
}

.fc-form .elFormItemWrapper {
  position: relative;
  padding: 0;
  border: 0;
  background: #fff;
}

.fc-form .elInput {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #d9dae0;
  border-radius: 8px;
  background: #fff;
  font-family: Inter, sans-serif;
  font-size: 14px;
  color: #14141b;
  outline: none;
}

.fc-form .elInput::placeholder { color: #9aa0a8; }

/* CF hides the label until the field has focus or a value; the preview keeps it
   hidden so the placeholder reads, and effects that restyle it still apply */
.fc-form .elLabel {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
}

.fc-form .elLabel .borderHolder { border-color: transparent; }
.fc-form .elLabel label { display: none; }

/* ---- Filmstrip ----
   Columns the other way round from Product, so it gets its own sizes rather
   than sharing that block's :first-child / :last-child rules. */
.fc-preview .fc-filmstrip {
  --fc-thumb-w: 34px;
  --fc-gap: 5px;
  --fc-arrow: 18px;
  max-width: 210px;
}

.fc-modal-hero .fc-filmstrip { max-width: 430px; --fc-thumb-w: 62px; }

/* View Larger: pane sized from its height so the ratio holds, the strip beneath
   it left as wide as the pane */
.fc-modal.is-zoom .fc-modal-hero .fc-filmstrip {
  max-width: 640px;
  --fc-thumb-w: 92px !important;
  --fc-gap: 12px !important;
  --fc-arrow: 44px !important;
}

.fc-modal.is-zoom .fc-modal-hero .fc-filmstrip > [data-page-element="ColContainer/V1"]:first-child .col-inner {
  height: 420px;
  width: auto;
  margin: 0 auto;
}

/* ---- Masonry ----
   The stand-in photos are all one shape, so the showcase varies them: a wall of
   identical rectangles shows nothing about a wall that takes any shape. Not in
   the copied code — a customer's own photos supply the variety. */



/* No aspect-ratio and no object-fit here on purpose: the event photos are
   already a mix of shapes and sizes, and the whole claim of this effect is that
   it shows them as they are. Cropping them in the showcase would demonstrate
   the opposite of what the code does. */

/* The spotlight wall is dealt in whole rows, so its width follows the column
   count rather than being fixed: at six columns a fixed width would shrink the
   photos to nothing, and at three it would strand them in a wide frame. */
.fc-modal-hero .fc-gallery[id^="fc-gallery-spotlight"] { max-width: 100%; }
.fc-modal.is-zoom .fc-modal-hero .fc-gallery[id^="fc-gallery-spotlight"] { max-width: min(100%, calc(var(--fc-cols) * 165px)); }

/* ---- the four pen-derived walls ----
   Heights only: each effect ships a size meant for a real page, and the tile is
   200px tall. !important where the panel drives the same variable, but only in
   the expanded view, where no control is on screen to fight. */
.fc-preview [id="fc-gallery-mosaic"] { --fc-height: 84px; --fc-gap: 5px; max-width: 268px; }

/* Two rows of three in the tile, with a portrait in each — the card has to show
   that the wall takes any shape, and six landscapes look like the Spotlight
   grid. The widths are set here rather than left to the photos: a flex line
   wraps on the items' BASE widths, so three only stay together when their bases
   fit the card. Showcase only — a real page wraps on the customer's own photos. */
.fc-preview [id="fc-gallery-mosaic"] .col-inner > * { flex-basis: 100px; }
.fc-preview [id="fc-gallery-mosaic"] .col-inner > :nth-child(2),
.fc-preview [id="fc-gallery-mosaic"] .col-inner > :nth-child(4) { flex-basis: 56px; }
/* no --fc-height here: the Customize panel writes the slider value inline and
   inline beats any rule. The shipped default is what the modal shows. */
/* The modal is the tile's layout at a larger size: same six photos, same two
   rows of three, widths forced the same way. 141 + 79 + 141 + two gaps = 377
   against a 379px pane, so three stay on a line and the fourth cannot. */
.fc-modal-hero [id="fc-gallery-mosaic"] { max-width: 430px; }
.fc-modal-hero [id="fc-gallery-mosaic"] .col-inner > * { flex-basis: 141px; }
.fc-modal-hero [id="fc-gallery-mosaic"] .col-inner > :nth-child(2),
.fc-modal-hero [id="fc-gallery-mosaic"] .col-inner > :nth-child(4) { flex-basis: 79px; }

/* Expanded is the modal at a larger size: the same six photos, the same two
   rows of three. 330 + 186 + 330 + two gaps = 862 against the 876 available, so
   three stay on a line and a fourth cannot. */
.fc-modal.is-zoom .fc-modal-hero [id="fc-gallery-mosaic"] .col-inner > * { flex-basis: 330px !important; }
.fc-modal.is-zoom .fc-modal-hero [id="fc-gallery-mosaic"] .col-inner > :nth-child(2),
.fc-modal.is-zoom .fc-modal-hero [id="fc-gallery-mosaic"] .col-inner > :nth-child(4) { flex-basis: 186px !important; }

.fc-modal.is-zoom .fc-modal-hero [id="fc-gallery-mosaic"] { max-width: 900px; --fc-height: 210px !important; }


.fc-preview [id="fc-gallery-accordion"] { --fc-height: 150px; --fc-gap: 4px; max-width: 250px; }
.fc-modal-hero [id="fc-gallery-accordion"] { max-width: 430px; }
.fc-modal.is-zoom .fc-modal-hero [id="fc-gallery-accordion"] { max-width: 900px; --fc-height: 430px !important; }


.fc-preview [id="fc-gallery-slides"] { --fc-height: 178px; --fc-gap: 6px; max-width: 262px; }
.fc-modal-hero [id="fc-gallery-slides"] { max-width: 400px; }
.fc-modal.is-zoom .fc-modal-hero [id="fc-gallery-slides"] { max-width: 760px; --fc-height: 430px !important; }

/* the trust row stand-in: CF supplies the text styling on a real page, so the
   showcase only has to give it a face that matches the rest of the previews */
.fc-trustrow {
  width: 100%;
  max-width: 300px;
  font-family: Inter, sans-serif;
  color: #1c1c22;
}

.fc-modal-hero .fc-trustrow { max-width: 430px; }

.fc-trustrow .elParagraph {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.fc-modal-hero .fc-trustrow .elParagraph { font-size: 14px; }

/* light text on the dark surface, since these previews carry no card of their own */
.fc-preview:not(.is-light) .fc-trustrow,
.fc-modal-hero:not(.is-light) .fc-trustrow { color: #f2f3f5; }

/* the swap stand-in: two product shots in one column, sized for each surface */
.fc-swap { width: 100%; max-width: 210px; }
.fc-modal-hero .fc-swap { max-width: 330px; }
/* View Larger is where the pair is judged, so it takes the width it can get */
.fc-modal.is-zoom .fc-modal-hero .fc-swap { max-width: min(860px, 100%); }

/* ---- Checkout Steps ----
   The effect never sets a font: on a real page the wording is a CF Headline and
   CF's own type settings win. The showcase has to supply one, or the bar renders
   at the browser default and reads nothing like a real page. */
.fc-steps {
  width: 100%;
  max-width: 288px;
  font-family: Inter, sans-serif;
  /* stands in for the size the customer would have set in CF, so switching our
     typography off in the panel still shows something sensible */
  font-size: 14px;
}

/* A real bar is wider than either preview pane, so the bar is shown at full
   size and allowed to run past both edges. The pane centres it, which centres
   the step the page is on; the two either side are cut by the pane and faded
   out at its edges rather than sliced. Overriding the width is enough — a
   negative margin fights the centring and drags the whole bar off to one side.

   The mask stops are in the ROW's own coordinates, and the row is twice the
   pane's width — so the visible part runs 25% to 75%, and a fade at 0% and
   100% happens off-screen where nobody sees it. These land on the two slivers
   either side of the middle step, which is where the fade is wanted. */
:is(.fc-preview, .fc-modal-hero) .fc-steps:not(.fc-steps-t) {
  width: 200%;
  max-width: none;
  flex: 0 0 auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 26%, #000 34%, #000 66%, transparent 74%);
  mask-image: linear-gradient(90deg, transparent 26%, #000 34%, #000 66%, transparent 74%);
}

.fc-preview .fc-steps:not(.fc-steps-t) { --fc-pad: .75em 1em; }

/* Basic is shown whole rather than cut down the middle: the words fit once the
   type is eased in the panel, and the edge fade was hiding them. */
:is(.fc-preview, .fc-modal-hero) .fc-steps-basic:not(.fc-steps-t) {
  width: 100%;
  max-width: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* the step they are on gets the room, since it carries the longest wording */
/* the pane shows the step they are on and nothing else — three steps at this
   width leaves every wording cropped. View Larger shows the whole bar. */
:is(.fc-preview, .fc-modal-hero) .fc-steps-basic > :nth-child(1),
:is(.fc-preview, .fc-modal-hero) .fc-steps-basic > :nth-child(3) { display: none; }

/* the negative margin that laps this step over the one before it would take
   the left notch off the edge of the pane, where the Row clips it */
:is(.fc-preview, .fc-modal-hero) .fc-steps-basic:not(.fc-steps-t) > :nth-child(2) { flex: 1 1 100%; margin-left: 0 !important; }

.fc-modal.is-zoom .fc-modal-hero .fc-steps-basic > :nth-child(1),
.fc-modal.is-zoom .fc-modal-hero .fc-steps-basic > :nth-child(3) { display: block; }

/* View Larger: the whole bar, nothing cut and nothing faded */
.fc-modal.is-zoom .fc-modal-hero .fc-steps:not(.fc-steps-t) {
  width: 100%;
  max-width: 900px;
  -webkit-mask-image: none;
  mask-image: none;
}

.fc-modal.is-zoom .fc-modal-hero .fc-steps-t { width: 100%; }

.fc-steps :is(.elHeadline, .elParagraph) { margin: 0; }

/* the two panes are wider than a card, so the bar can carry more type there */
.fc-modal-hero .fc-steps:not(.fc-steps-t) { font-size: 17px; }
.fc-modal.is-zoom .fc-modal-hero .fc-steps:not(.fc-steps-t) { font-size: 20px; }

/* the track style is taller than the bar and carries its own type scale */
/* the track is shown at full size too, centred on the step the page is on and
   faded where the pane cuts it — a whole track squeezed into a card leaves the
   circles too small to read */
.fc-preview .fc-steps-t {
  width: 210%;
  max-width: none;
  flex: 0 0 auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 24%, #000 33%, #000 67%, transparent 76%);
  mask-image: linear-gradient(90deg, transparent 24%, #000 33%, #000 67%, transparent 76%);
}
.fc-modal-hero .fc-steps-t { max-width: 400px; }
.fc-modal.is-zoom .fc-modal-hero .fc-steps-t { max-width: 720px; }

.fc-steps-t .elHeadline { font-size: 15px; font-weight: 700; }
.fc-modal-hero .fc-steps-t .elHeadline { font-size: 15px; }
.fc-modal.is-zoom .fc-modal-hero .fc-steps-t .elHeadline { font-size: 18px; }

/* ---- the four new step designs ----
   Each is shown at full size and centred, the way Basic and Track are: a whole
   bar squeezed into a 288px card is unreadable at any type size. The stand-in
   supplies the type CF would supply on a real page. */
:is(.fc-preview, .fc-modal-hero) :is(.fc-steps-ticket, .fc-steps-chevron, .fc-steps-pill, .fc-steps-ledger) {
  width: 200%;
  max-width: none;
  flex: 0 0 auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 26%, #000 34%, #000 66%, transparent 74%);
  mask-image: linear-gradient(90deg, transparent 26%, #000 34%, #000 66%, transparent 74%);
}
/* Ticket, Ledger and Pill are shown the way Basic is: the pane carries the one
   step the page is on, at full size. Three of them across a card left every
   wording cropped, and the fade that hid the cut hid words with it. */
:is(.fc-preview, .fc-modal-hero) :is(.fc-steps-ticket, .fc-steps-pill, .fc-steps-ledger):not(.fc-steps-t) {
  width: 100%;
  max-width: none;
  -webkit-mask-image: none;
  mask-image: none;
}

:is(.fc-preview, .fc-modal-hero) :is(.fc-steps-ticket, .fc-steps-pill, .fc-steps-ledger):not(.fc-steps-t) > :nth-child(1),
:is(.fc-preview, .fc-modal-hero) :is(.fc-steps-ticket, .fc-steps-pill, .fc-steps-ledger):not(.fc-steps-t) > :nth-child(3) { display: none; }

/* !important beats the effect's own margin, which laps each step over the one
   before it and would take this one off the edge of the pane */
:is(.fc-preview, .fc-modal-hero) :is(.fc-steps-ticket, .fc-steps-pill, .fc-steps-ledger):not(.fc-steps-t) > :nth-child(2) {
  flex: 1 1 100%;
  margin-left: 0 !important;
}

/* View Larger shows the whole bar */

/* the card sets a minimum height for a real page; at View Larger size that
   same height in em comes out far taller than the content needs */
.fc-modal.is-zoom .fc-modal-hero .fc-steps-ticket .col-inner { min-height: 0; }

/* the pane is shorter than a real page, so the wording sits tighter to the
   step line above it and the pill below */
:is(.fc-preview, .fc-modal-hero) .fc-steps-ticket .col-inner > :nth-child(2) { margin-top: -.15em; margin-bottom: -.2em; }

/* View Larger sets a bigger type size, and the break in the rule is measured
   in ems — left alone it eats most of the line */
.fc-modal.is-zoom .fc-modal-hero .fc-steps-ledger { --fc-here-gap: 5em; }

/* the middle step carries the longest wording, so it takes the room in the
   larger panel too */
.fc-modal.is-zoom .fc-modal-hero .fc-steps-pill:not(.fc-steps-t) > :nth-child(2) { flex: 1.25 1 0 !important; }
.fc-modal.is-zoom .fc-modal-hero .fc-steps-pill:not(.fc-steps-t) > :is(:nth-child(1), :nth-child(3)) { flex: .88 1 0 !important; }

/* the middle step carries the longest wording, so it takes the room */
.fc-modal.is-zoom .fc-modal-hero .fc-steps-ticket:not(.fc-steps-t) > :nth-child(2) { flex: 1.25 1 0 !important; }
.fc-modal.is-zoom .fc-modal-hero .fc-steps-ticket:not(.fc-steps-t) > :is(:nth-child(1), :nth-child(3)) { flex: .88 1 0 !important; }

/* View Larger shows the whole bar, so the one-step layout has to be undone */
.fc-modal.is-zoom .fc-modal-hero :is(.fc-steps-basic, .fc-steps-ticket, .fc-steps-pill, .fc-steps-ledger) > :nth-child(2) {
  flex: 1 1 0;
  margin-left: var(--fc-overlap, 0) !important;
}

.fc-modal.is-zoom .fc-modal-hero :is(.fc-steps-ticket, .fc-steps-pill, .fc-steps-ledger) > :nth-child(1),
.fc-modal.is-zoom .fc-modal-hero :is(.fc-steps-ticket, .fc-steps-pill, .fc-steps-ledger) > :nth-child(3) { display: block; }


.fc-preview .fc-steps :is(.fc-step-lbl, .fc-step-sub) { font-size: .72em; font-weight: 700; letter-spacing: .06em; }
.fc-preview .fc-steps .elHeadline { font-size: 1em; font-weight: 800; }

/* the ledger is a quiet design and reads at a smaller size than the rest */
:is(.fc-preview, .fc-modal-hero) .fc-steps-ledger { width: 160%; }
.fc-steps-ledger .fc-step-sub { font-weight: 500 !important; letter-spacing: 0 !important; }

.fc-modal.is-zoom .fc-modal-hero :is(.fc-steps-ticket, .fc-steps-chevron, .fc-steps-pill, .fc-steps-ledger) {
  width: 100%;
  max-width: 940px;
  -webkit-mask-image: none;
  mask-image: none;
}

.fc-modal.is-zoom .fc-modal-hero .fc-steps-t { -webkit-mask-image: none; mask-image: none; }

/* The modal pane is shorter than a page, so the photo strip is shown at a share
   of whatever height is set — not pinned to one number, or dragging the slider
   jumped it back to full size. */
:is(.fc-preview, .fc-modal-hero) [id^="fc-marquee-photo"] :is([data-page-element="Image/V1"], [data-page-element="Image/V2"]) {
  height: calc(var(--fc-photo-h) * .58);
}

.fc-modal.is-zoom .fc-modal-hero [id^="fc-marquee-photo"] :is([data-page-element="Image/V1"], [data-page-element="Image/V2"]) {
  height: calc(var(--fc-photo-h) * .85);
}

/* the polaroid card: a mounted print fills more of the tile than a bare photo,
   so the whole thing is drawn smaller there. The modal is untouched. */
.fc-card .fc-preview [id^="fc-image-polaroid"] { max-width: 91%; margin-inline: auto; }

/* ============================= PREMIUM PREVIEWS =============================
   Stand-ins for the script effects — a script does not run in the gallery, so
   each look is mirrored here reading the SAME variables the shipped code
   declares. A control that rewrites the code therefore moves the preview too. */

/* a ghost of a page, so the bar and the toast have something to stand on */
.fc-ghost-page {
  width: min(86%, 380px);
  margin: 14px auto 0;
  display: grid;
  gap: 9px;
}

.fc-ghost-page span { height: 16px; width: 62%; border-radius: 5px; background: rgba(127, 127, 140, .35); }
.fc-ghost-page i { height: 9px; border-radius: 4px; background: rgba(127, 127, 140, .22); }
.fc-ghost-page i:nth-of-type(2) { width: 84%; }
.fc-ghost-page b { height: 26px; width: 34%; border-radius: 7px; background: rgba(224, 27, 34, .5); }

/* -------- Social-proof toast -------- */
.fc-toast-frame {
  position: relative;
  width: min(92%, 420px);
  height: 168px;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #ececf0;
  box-shadow: 0 10px 26px rgba(18, 20, 32, .12);
}

.fc-toast-frame .fc-ghost-page { margin-top: 20px; }

.fc-toast-demo {
  position: absolute;
  top: var(--fc-toast-top, auto);
  right: var(--fc-toast-right, auto);
  bottom: var(--fc-toast-bottom, 12px);
  left: var(--fc-toast-left, 12px);
  max-width: 250px;
  overflow: hidden;
  background: var(--fc-toast-bg, #ffffff);
  color: var(--fc-toast-ink, #14141b);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  font: 500 11.5px/1.4 Inter, system-ui, sans-serif;
  /* away for about a second, then back with the next one */
  animation: fcToastCycle 6s cubic-bezier(.22, 1, .36, 1) infinite;
}

/* one markup, three arrangements — the same variables the shipped code reads */
.fc-toast-demo .fc-td-row { display: flex; align-items: center; gap: 9px; }
.fc-toast-demo .fc-td-ava {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--fc-toast-accent, #1d9e75) 16%, var(--fc-toast-bg, #fff));
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  /* a face per turn, so the picture and the name belong to each other */
  animation: fcToastFace 18s steps(1, end) infinite;
  color: var(--fc-toast-accent, #1d9e75);
}
.fc-toast-demo .fc-td-ava svg { display: none; }

/* the mock shows stock faces until they paste their own addresses */
.fc-toast-demo {
  --fc-td-f1: var(--fc-toast-p1, url("img/thumb5.jpg"));
  --fc-td-f2: var(--fc-toast-p2, url("img/thumb12.jpg"));
  --fc-td-f3: var(--fc-toast-p3, url("img/thumb3.jpg"));
}

@container style(--fc-toast-p1: none) { .fc-toast-demo { --fc-td-f1: url("img/thumb5.jpg"); } }
@container style(--fc-toast-p2: none) { .fc-toast-demo { --fc-td-f2: url("img/thumb12.jpg"); } }
@container style(--fc-toast-p3: none) { .fc-toast-demo { --fc-td-f3: url("img/thumb3.jpg"); } }

@keyframes fcToastFace {
  0%, 33.33% { background-image: var(--fc-td-f1); }
  33.34%, 66.66% { background-image: var(--fc-td-f2); }
  66.67%, 100% { background-image: var(--fc-td-f3); }
}

.fc-toast-demo .fc-td-body { min-width: 0; }
.fc-toast-demo .fc-td-quote { display: block; }
/* three testimonials in turn — the two waiting leave the layout, so a short
   one does not sit in a box cut for the longest */
.fc-toast-demo .fc-td-quote i,
.fc-toast-demo .fc-td-who i {
  display: block;
  font-style: inherit;
  font-size: 0;
  line-height: 0;
  animation: fcToastSay 18s steps(1, end) infinite;
}

.fc-toast-demo .fc-td-quote i:nth-child(2),
.fc-toast-demo .fc-td-who i:nth-child(2) { animation-delay: 6s; }

.fc-toast-demo .fc-td-quote i:nth-child(3),
.fc-toast-demo .fc-td-who i:nth-child(3) { animation-delay: 12s; }

.fc-toast-demo .fc-td-quote i:nth-child(1)::after { content: "“" var(--fc-toast-q1, "My page looked designed within an afternoon.") "”"; }
.fc-toast-demo .fc-td-quote i:nth-child(2)::after { content: "“" var(--fc-toast-q2, "I picked it up as a shortcut. My pages convert now.") "”"; }
.fc-toast-demo .fc-td-quote i:nth-child(3)::after { content: "“" var(--fc-toast-q3, "Quoted a designer for months of work. Not any more.") "”"; }

.fc-toast-demo .fc-td-who i:nth-child(1)::after { content: var(--fc-toast-n1, "Alana Reyes") " · " var(--fc-toast-c1, "Orlando, FL"); }
.fc-toast-demo .fc-td-who i:nth-child(2)::after { content: var(--fc-toast-n2, "Elena Marsh") " · " var(--fc-toast-c2, "Lisbon"); }
.fc-toast-demo .fc-td-who i:nth-child(3)::after { content: var(--fc-toast-n3, "Hannah Cole") " · " var(--fc-toast-c3, "Bristol"); }

@keyframes fcToastSay {
  0%, 33.33% { font-size: inherit; line-height: inherit; }
  33.34%, 100% { font-size: 0; line-height: 0; }
}

/* out for a second at the end of each turn, then back */
@keyframes fcToastCycle {
  0%, 6% { transform: translateY(var(--fc-td-from, 140%)); opacity: 0; }
  14%, 83% { transform: translateY(0); opacity: 1; }
  90%, 100% { transform: translateY(var(--fc-td-from, 140%)); opacity: 0; }
}
.fc-toast-demo .fc-td-label::after { content: var(--fc-toast-label, "What buyers say"); }
.fc-toast-demo .fc-td-stars {
  display: block;
  margin-bottom: 1px;
  letter-spacing: 1px;
  font-size: 9.5px;
  color: var(--fc-toast-accent, #1d9e75);
}
.fc-toast-demo .fc-td-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 5px;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--fc-toast-mut, rgba(20, 20, 27, .55));
}

/* the name and the mark each stay whole and wrap as a unit — mid-name is the
   one place a line break reads as a mistake */
.fc-toast-demo .fc-td-who,
.fc-toast-demo .fc-td-meta em { white-space: nowrap; }
.fc-toast-demo .fc-td-who { font-weight: 600; font-style: italic; font-size: 11px; flex: none; }
.fc-toast-demo .fc-td-meta { justify-content: flex-start; }
.fc-toast-demo .fc-td-meta em { flex: none; margin-right: auto; }
.fc-toast-demo .fc-td-meta em {
  font-style: normal;
  font-weight: 600;
  color: var(--fc-toast-accent, #1d9e75);
}
.fc-toast-demo .fc-td-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--fc-toast-mut, rgba(20, 20, 27, .55));
  font: 600 12px/1 Inter, system-ui, sans-serif;
}
.fc-toast-demo .fc-td-x1 { box-shadow: 0 0 0 1.6px var(--fc-toast-accent, #1d9e75); }
.fc-toast-demo .fc-td-bar,
.fc-toast-demo .fc-td-top { display: none; }

/* PILL — no stars: a third line inside a rounded card reads as a box */
.fc-toast-demo { border-radius: 18px; padding: 8px 11px 8px 9px; }
.fc-toast-demo .fc-td-stars { display: none; }

@container style(--fc-toast-style: split) {
  .fc-toast-demo { border-radius: 10px; padding: 0; }
  .fc-toast-demo .fc-td-bar { display: block; height: 3px; background: var(--fc-toast-accent, #1d9e75); }
  .fc-toast-demo .fc-td-row { padding: 8px 10px; align-items: flex-start; }
  .fc-toast-demo .fc-td-ava { align-self: stretch; height: auto; min-height: 44px; width: 34px; border-radius: 7px; }
  .fc-toast-demo .fc-td-stars { display: block; }
  .fc-toast-demo .fc-td-x1 { box-shadow: none; }
  .fc-toast-demo .fc-td-meta em {
    background: color-mix(in srgb, var(--fc-toast-accent, #1d9e75) 16%, var(--fc-toast-bg, #fff));
    padding: 1.5px 5px;
    border-radius: 4px;
    font-size: 8.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
}

@container style(--fc-toast-style: stack) {
  .fc-toast-demo { border-radius: 10px; padding: 0; display: flex; flex-direction: column; }
  .fc-toast-demo .fc-td-top { display: flex; align-items: center; gap: 7px; padding: 7px 10px 0; }
  .fc-toast-demo .fc-td-label::after {
    font: 700 8.5px/1 Inter, system-ui, sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fc-toast-mut, rgba(20, 20, 27, .55));
  }
  .fc-toast-demo .fc-td-rule { flex: 1; height: 1px; background: color-mix(in srgb, var(--fc-toast-ink, #14141b) 14%, transparent); }
  .fc-toast-demo .fc-td-x2 { width: 15px; height: 15px; }
  .fc-toast-demo .fc-td-x1 { display: none; }
  .fc-toast-demo .fc-td-row { padding: 7px 10px 9px; align-items: flex-start; }
  .fc-toast-demo .fc-td-ava { border-radius: 7px; }
  /* the name leads and their words follow */
  .fc-toast-demo .fc-td-body { display: flex; flex-direction: column; }
  .fc-toast-demo .fc-td-meta { order: 1; margin: 0 0 2px; }
  .fc-toast-demo .fc-td-quote { order: 2; }
  .fc-toast-demo .fc-td-stars { order: 3; display: block; margin: 3px 0 0; }
  .fc-toast-demo .fc-td-who { color: var(--fc-toast-mut, #6b6b78); font-weight: 400; font-size: 10.5px; }
  .fc-toast-demo .fc-td-bar { display: block; order: 9; height: 3px; background: var(--fc-toast-accent, #1d9e75); }
}

@container style(--fc-toast-verified: 0) {
  .fc-toast-demo em { display: none !important; }
}

@container style(--fc-toast-stars: 0) {
  .fc-toast-demo .fc-td-stars { display: none !important; }
}

/* a top corner leaves and returns through the top edge instead */
@container style(--fc-toast-top: 18px) {
  .fc-toast-demo { --fc-td-from: -140%; }
}

/* an unticked testimonial hands its turn to one that is on, so no turn is blank */
@container style(--fc-toast-on1: 0) {
  .fc-toast-demo .fc-td-quote i:nth-child(1)::after { content: "“" var(--fc-toast-q2, "") "”"; }
  .fc-toast-demo .fc-td-who i:nth-child(1)::after { content: var(--fc-toast-n2, "") " · " var(--fc-toast-c2, ""); }
}

@container style(--fc-toast-on2: 0) {
  .fc-toast-demo .fc-td-quote i:nth-child(2)::after { content: "“" var(--fc-toast-q1, "") "”"; }
  .fc-toast-demo .fc-td-who i:nth-child(2)::after { content: var(--fc-toast-n1, "") " · " var(--fc-toast-c1, ""); }
}

@container style(--fc-toast-on3: 0) {
  .fc-toast-demo .fc-td-quote i:nth-child(3)::after { content: "“" var(--fc-toast-q1, "") "”"; }
  .fc-toast-demo .fc-td-who i:nth-child(3)::after { content: var(--fc-toast-n1, "") " · " var(--fc-toast-c1, ""); }
}

/* -------- Live scarcity counter / Deadline urgency -------- */
.fc-scarce-wrap { text-align: center; padding: 0 8%; }

.fc-scarce-line {
  margin: 0;
  color: #ffffff;
  font: 800 22px/1.35 Archivo, Inter, system-ui, sans-serif;
}

:is(.fc-preview, .fc-modal-hero).is-light .fc-scarce-line { color: #1c1c22; }

.fc-scarce-sub {
  margin: 12px 0 0;
  color: rgba(127, 127, 140, .9);
  font: 500 12px/1.5 Inter, system-ui, sans-serif;
}

/* the card tile has room for one thing: the sentence that counts. The line
   explaining it belongs in the modal, where there is space to read it. */
.fc-preview .fc-scarce-sub { display: none; }
.fc-preview .fc-scarce-line { font-size: 27px; }

@property --fc-scn {
  syntax: "<integer>";
  inherits: false;
  initial-value: 250;
}

/* The count is drawn by a counter so the drop is real, not a screenshot. Its
   digit steps at each cycle boundary, and the roll is timed to hide the swap
   behind the moment the digit is off the box — the same beat the code uses. */
.fc-scarce {
  position: relative;
  display: inline-block;
  /* wide enough for the three digits it opens on, so the sentence does not
     reflow when the count falls under a hundred */
  min-width: 2.4em;
  padding: .06em .3em;
  border-radius: .18em;
  background: var(--fc-sc-bg, #e01b22);
  color: #ffffff;
  font-weight: 800;
  text-align: center;
  clip-path: inset(0 round .18em);
  counter-reset: fcscn var(--fc-scn);
  /* the count HAS to animate on this element, not on ::after: counter-reset
     reads --fc-scn here, so an animation one level down leaves it frozen */
  animation:
    fcScarceBlink 3s linear infinite,
    fcScarceDrop 729s steps(243, jump-none) infinite;
}

.fc-scarce::after {
  content: counter(fcscn);
  display: inline-block;
  animation: fcScarceRoll 3s cubic-bezier(.22, 1, .36, 1) infinite;
}

/* one drop every 3s, the same beat as the roll below it */
@keyframes fcScarceDrop {
  from { --fc-scn: 250; }
  to { --fc-scn: 7; }
}

/* out through the top, in from below — the digit changes while it is invisible */
@keyframes fcScarceRoll {
  0%, 88% { transform: translateY(0); opacity: 1; }
  95% { transform: translateY(-115%); opacity: 0; }
  95.01% { transform: translateY(115%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes fcScarceBlink {
  0%, 60%, 100% { filter: none; }
  65%, 75%, 85% { filter: brightness(1.85); }
  70%, 80%, 90% { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-toast-demo { animation: none; opacity: 1; transform: none; }
  .fc-scarce, .fc-scarce::after { animation: none; }
}

/* -------- Before / after slider -------- */
.fc-ba { width: min(92%, 430px); }

.fc-ba .fc-ba-host {
  position: relative;
  overflow: hidden;
  border-radius: var(--fc-ba-radius, 12px);
}

.fc-ba .fc-ba-host img { width: 100%; height: auto; display: block; }

/* the BEFORE side is the same photo, washed out */
.fc-ba .fc-ba-under img { filter: grayscale(1) brightness(.92) contrast(.92); }

.fc-ba .fc-ba-top {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--fc-ba-start, 50%));
  animation: fcBaSweep 7s ease-in-out infinite;
}

.fc-ba .fc-ba-top img { height: 100%; object-fit: cover; }

.fc-ba .fc-ba-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  left: var(--fc-ba-start, 50%);
  transform: translateX(-50%);
  background: var(--fc-ba-line, #ffffff);
  box-shadow: 0 0 12px rgba(0, 0, 0, .35);
  animation: fcBaSweepLine 7s ease-in-out infinite;
}

.fc-ba .fc-ba-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--fc-ba-line, #ffffff);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  display: grid;
  place-items: center;
  color: #14141b;
  font: 700 13px/1 Inter, system-ui, sans-serif;
}

.fc-ba .fc-ba-grip::before { content: "\2039\2003\203A"; letter-spacing: -.35em; margin-left: -.35em; }

.fc-ba .fc-ba-host::before,
.fc-ba .fc-ba-host::after {
  position: absolute;
  top: 10px;
  z-index: 2;
  padding: .35em .8em;
  border-radius: 999px;
  background: var(--fc-ba-label-bg, rgba(12, 12, 16, .55));
  color: var(--fc-ba-label-ink, #ffffff);
  font: 700 10.5px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: .08em;
  pointer-events: none;
}

.fc-ba .fc-ba-host::before { content: var(--fc-ba-before, "BEFORE"); left: 10px; }
.fc-ba .fc-ba-host::after { content: var(--fc-ba-after, "AFTER"); right: 10px; }

/* the sweep the drag makes on a real page */
@keyframes fcBaSweep {
  0%, 100% { clip-path: inset(0 0 0 62%); }
  50% { clip-path: inset(0 0 0 30%); }
}

@keyframes fcBaSweepLine {
  0%, 100% { left: 62%; }
  50% { left: 30%; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-ba .fc-ba-top, .fc-ba .fc-ba-line { animation: none; }
}

/* -------- Comparison table -------- */
.fc-cmp {
  width: min(94%, 430px);
  font-size: 11.5px;
  font-family: Inter, system-ui, sans-serif;
}

/* the card tile is small enough that the table reads too heavy at full size */
.fc-preview .fc-cmp { font-size: 10px; }

.fc-modal-hero .fc-cmp { font-size: 13px; width: min(94%, 480px); }
.fc-modal.is-zoom .fc-modal-hero .fc-cmp { font-size: 15px; width: min(94%, 720px); }

.fc-cmp .elParagraph { font-size: 1em; line-height: 1.35; }

/* the preview stands in for Font Awesome, which CF loads and this page doesn't */
.fc-cmp .fa_icon.fa-check::before { content: "\2713"; font-weight: 800; }
.fc-cmp .fa_icon.fa-times::before { content: "\2715"; font-weight: 800; }
.fc-cmp .fa_icon { font-style: normal; }

/* -------- Order summary card -------- */
.fc-osum {
  width: min(92%, 380px);
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
}

.fc-modal-hero .fc-osum { width: min(92%, 430px); font-size: 14px; }

/* the two glyphs CF gets from Font Awesome */
.fc-osum .elOrderSummaryHead .elOrderSummaryRowLeft > i::before { content: "\2261"; font-style: normal; font-weight: 800; }
.fc-osum .elOrderSummaryToggleable::before { content: "\25BE"; font-style: normal; }


/* the sticky header is for a real page — in the gallery it would ride the
   homepage's own scroll and leave its table behind */
:is(.fc-preview, .fc-modal-hero) .fc-cmp > [data-page-element="RowContainer/V1"]:first-of-type { position: static; }


/* Smart Autoplay's tile is the video, corner to corner. The 240px cap above
   exists so the laptop frames' drawn base fits inside 200px; this card has no
   base, and it is the one card whose whole point is a video you can judge. */
.fc-card .fc-preview:has(.fc-video.fc-smart) {
  /* the live surface insets its content by 18px, which would show as a border */
  padding: 0;
  overflow: hidden;
}

.fc-card .fc-preview .fc-video.fc-smart {
  max-width: none;
  /* 16:9 at the pane's full height, so the frame covers it completely — a few
     pixels off the sides rather than a stretched picture. flex:none because a
     flex item shrinks back to the pane width otherwise. */
  flex: none;
  width: max(100%, calc(200px / 9 * 16));
}

/* ================= WHAT AN UNBUILT FEATURE WILL DO =================
   Drawings for cards whose effect is not written yet — CF's default beside
   ours, side by side. Gallery only: nothing here ships to a customer's page,
   and no effect may reference these names. Markup: conceptMarkup() in app.js. */

.fc-cpt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  gap: 14px;
  width: 100%;
  /* the hero is far taller than a drawing, so it centres rather than sitting
     against the title */
  min-height: 100%;
  padding: 20px;
  font-family: Inter, system-ui, sans-serif;
  box-sizing: border-box;
}

.fc-cpt-side { min-width: 0; }

.fc-cpt-tag {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.fc-cpt-tag.is-ours { color: #ff8a8f; }

.is-light .fc-cpt-tag { color: #9aa0a8; }
.is-light .fc-cpt-tag.is-ours { color: var(--red, #e01b22); }

/* the surfaces: a phone, a panel, a page */
.fc-cpt-phone,
.fc-cpt-card {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  overflow: hidden;
}

.is-light .fc-cpt-phone,
.is-light .fc-cpt-card { border-color: #e6e7ea; background: #fff; }

.fc-cpt-phone { position: relative; height: 208px; }
.fc-cpt-card { padding: 10px; }
.fc-cpt-card.is-mid { padding: 14px 12px; }

.fc-cpt-screen {
  padding: 10px;
  transform-origin: 30% 45%;
  transition: transform .4s ease;
}

/* the whole point of the mobile card: a field under 16px makes Safari zoom */
.fc-cpt-screen.is-zoomed { transform: scale(1.5); }

.fc-cpt-lab {
  margin: 0 0 3px;
  font-size: 9px;
  color: rgba(255, 255, 255, .45);
}

.is-light .fc-cpt-lab { color: #9aa0a8; }

.fc-cpt-field {
  margin-bottom: 7px;
  padding: 6px 7px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 5px;
  font-size: 10px;
  color: rgba(255, 255, 255, .72);
}

.is-light .fc-cpt-field { border-color: #e6e7ea; color: #4a4e56; }

.fc-cpt-field.is-focus { border-color: #4b8fe3; }
.fc-cpt-field.is-bad { border-color: #e24b4a; }
.fc-cpt-field.is-ok { border-color: #1d9e75; }

.fc-cpt-cta {
  padding: 8px;
  border-radius: 5px;
  background: #16a34a;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

/* the phone's keyboard strip — which one comes up is the feature */
.fc-cpt-keys {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 7px 6px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .3);
  font-size: 9px;
  letter-spacing: .22em;
  text-align: center;
  color: rgba(255, 255, 255, .6);
}

.is-light .fc-cpt-keys { border-top-color: #e6e7ea; background: #f4f5f7; color: #6b7078; }

.fc-cpt-keys.is-num { letter-spacing: .3em; }

/* the line that stays put while the form scrolls under it */
.fc-cpt-pin {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .34);
  font-size: 9px;
  color: rgba(255, 255, 255, .7);
}

.fc-cpt-pin b { font-size: 11px; color: #fff; }

.is-light .fc-cpt-pin { border-bottom-color: #e6e7ea; background: #f6f7f9; color: #6b7078; }
.is-light .fc-cpt-pin b { color: #14141b; }

/* the failed-payment message: CF's one line, then the three slots it ships */
.fc-cpt-err {
  margin: 0 0 8px;
  font-size: 9px;
  color: #e2706f;
}

.fc-cpt-hint {
  margin: -3px 0 8px;
  font-size: 9px;
  color: #e2706f;
}

.fc-cpt-panel {
  margin-bottom: 8px;
  padding: 8px 9px;
  border-radius: 5px;
  background: rgba(226, 75, 74, .16);
}

.is-light .fc-cpt-panel { background: #fcebeb; }

.fc-cpt-panel-head {
  margin: 0 0 3px;
  font-size: 10px;
  font-weight: 700;
  color: #ffb4b3;
}

.fc-cpt-panel-sub {
  margin: 0 0 3px;
  font-size: 9px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .72);
}

.fc-cpt-panel-calm {
  margin: 0;
  font-size: 9px;
  color: #e2706f;
}

.is-light .fc-cpt-panel-head { color: #501313; }
.is-light .fc-cpt-panel-sub { color: #791f1f; }
.is-light .fc-cpt-panel-calm { color: #a32d2d; }

/* the upsell decision */
.fc-cpt-ask {
  margin: 0 0 10px;
  font-size: 10px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
  text-align: center;
}

.is-light .fc-cpt-ask { color: #4a4e56; }

.fc-cpt-declink {
  margin: 9px 0 0;
  font-size: 8px;
  color: #6f9fe0;
  text-align: center;
  text-decoration: underline;
}

.fc-cpt-decline {
  margin-top: 9px;
  padding: 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .06);
  text-align: center;
}

.is-light .fc-cpt-decline { background: #f4f5f7; }

.fc-cpt-decline span {
  display: block;
  font-size: 10px;
  color: #7ddcb5;
}

.fc-cpt-decline em {
  display: block;
  margin-top: 3px;
  font-size: 9px;
  font-style: normal;
  color: rgba(255, 255, 255, .55);
}

.is-light .fc-cpt-decline span { color: #0f6e56; }
.is-light .fc-cpt-decline em { color: #6b7078; }

/* the multi-step markers */
.fc-cpt-steps {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.fc-cpt-step {
  flex: 1;
  padding: 5px 2px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .07);
  font-size: 9px;
  text-align: center;
  color: rgba(255, 255, 255, .5);
}

.is-light .fc-cpt-step { background: #f1f2f5; color: #9aa0a8; }

.fc-cpt-step b { display: block; font-weight: 700; }

.fc-cpt-step i {
  display: block;
  margin-top: 2px;
  font-size: 8px;
  font-style: normal;
}

.fc-cpt-steps.is-ours .fc-cpt-step.is-done { background: rgba(29, 158, 117, .22); color: #7ddcb5; }
.fc-cpt-steps.is-ours .fc-cpt-step.is-now { background: #16a34a; color: #fff; }

.is-light .fc-cpt-steps.is-ours .fc-cpt-step.is-done { background: #e1f5ee; color: #0f6e56; }

/* the timed popup, over its own page */
.fc-cpt-modal {
  padding: 12px 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
}

.is-light .fc-cpt-modal { border-color: #e6e7ea; background: #fff; }

.fc-cpt-modal.is-plain { border-radius: 2px; }

/* the ghost page behind the scroll bar */
.fc-cpt-page {
  position: relative;
  height: 208px;
  padding: 14px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  overflow: hidden;
}

.is-light .fc-cpt-page { border-color: #e6e7ea; background: #fff; }

.fc-cpt-page span,
.fc-cpt-page i,
.fc-cpt-page b {
  display: block;
  border-radius: 3px;
  background: rgba(255, 255, 255, .16);
}

.is-light .fc-cpt-page span,
.is-light .fc-cpt-page i,
.is-light .fc-cpt-page b { background: #eceef1; }

.fc-cpt-page span { height: 12px; width: 70%; margin-bottom: 12px; }
.fc-cpt-page i { height: 7px; margin-bottom: 8px; }
.fc-cpt-page i:nth-of-type(2) { width: 88%; }
.fc-cpt-page b { height: 26px; width: 58%; margin: 14px 0; background: rgba(22, 163, 74, .5); }

.fc-cpt-page em {
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 62%;
  border-radius: 0;
  background: var(--red, #e01b22);
}

/* Sticky column: the section mid-scroll, summary gone vs summary riding */
.fc-cpt-sect {
  display: grid;
  grid-template-columns: 1fr 82px;
  gap: 10px;
  overflow: hidden;
  align-items: start;
}

.fc-cpt-sum {
  padding: 9px 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  font-size: 9px;
  color: rgba(255, 255, 255, .55);
  text-align: center;
}

.fc-cpt-sum span { display: block; margin-bottom: 3px; }
.fc-cpt-sum b { font-size: 11px; color: #fff; }

.is-light .fc-cpt-sum { border-color: #e6e7ea; background: #f6f7f9; color: #6b7078; }
.is-light .fc-cpt-sum b { color: #14141b; }

/* the line under each drawing that says what you are looking at */
.fc-cpt-say {
  margin: 9px 0 0;
  font-size: 10px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .55);
}

.is-light .fc-cpt-say { color: #6b7078; }

@media (max-width: 560px) {
  .fc-cpt { grid-template-columns: 1fr; }
}


/* THE CHECKOUT REPLICA (Checkout V1's modal preview). CF's own classes carry
   the effect's styling; these rules stand in for ClickFunnels' base sheet and
   are matched to CF's untouched checkout — with every section switched off the
   replica must read as the form CF renders on its own. They must lose every
   fight they can: the effect wins ties by loading later. Scope everything
   under .fc-c1prev. */
.fc-c1prev {
  width: min(680px, 100%);
  align-self: stretch;
  height: auto;
  margin: 26px 0 70px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 14px;
  /* the pale blue CF paints behind its untouched checkout */
  background: #F1F7FF;
  padding: 26px 28px;
  box-shadow: 0 12px 34px rgba(15, 17, 24, .16);
  /* CF's default theme face; Manrope is in the page's font link */
  font-family: Manrope, Inter, sans-serif;
  font-size: 14px;
  color: #23262d;
}

.fc-c1prev * { box-sizing: border-box; }
.fc-c1prev form { margin: 0; }

.fc-c1prev .elCheckoutFormLabelContainer { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.fc-c1prev .elCheckoutFormLabel {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #14161c;
}
.fc-c1prev .elCheckoutFormLabelDivider { flex: 1; border: 0; border-top: 2px solid #23262d; margin: 0; }

/* CF joins a section's fields into one box: hairlines inside, border outside */
.fc-c1prev .fc-c1prev-group { border: 1px solid #cdd5e1; border-radius: 6px; background: #fff; }
.fc-c1prev .fc-c1prev-row { display: flex; }
.fc-c1prev .fc-c1prev-row + .fc-c1prev-row { border-top: 1px solid #cdd5e1; }
.fc-c1prev .fc-c1prev-row > * { flex: 1; min-width: 0; }
.fc-c1prev .fc-c1prev-row > * + * { border-left: 1px solid #cdd5e1; }

/* fields: the box is the group's, the label floats over the value */
.fc-c1prev .elInputWrapper { position: relative; margin: 0; }
.fc-c1prev .elInput {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 15px 14px;
  font-family: inherit;
  font-size: 14.5px;
  color: #23262d;
  outline: none;
}
.fc-c1prev .elLabel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: #5a6478;
  font-size: 14.5px;
  pointer-events: none;
  transition: font-size .15s ease;
}
.fc-c1prev .elLabel .borderHolder { display: contents; }
.fc-c1prev .hasValue .elLabel { align-items: flex-start; padding-top: 5px; font-size: 11px; }
.fc-c1prev .hasValue .elInput { padding: 21px 14px 7px; }

.fc-c1prev .elSelectWrapper { position: relative; }
.fc-c1prev .elSelect {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 15px 34px 15px 14px;
  font-family: inherit;
  font-size: 14.5px;
  color: #5a6478;
  outline: none;
  cursor: pointer;
}
.fc-c1prev .elSelectArrow {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #2c3342;
  pointer-events: none;
}

/* the payment cells stand in for the provider's iframes, which no CSS on the
   page can reach — so they stay plain here on purpose */
.fc-c1prev .fc-c1prev-payfield {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 15px 14px;
  font-size: 14.5px;
  color: #5a6478;
}
.fc-c1prev .fc-c1prev-cardico {
  width: 22px;
  height: 15px;
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  /* the stripe across a bank card */
  background: linear-gradient(180deg, transparent 3px, currentColor 3px, currentColor 5.5px, transparent 5.5px);
}

/* product cards: the fill is painted on a layer behind the card, so negative
   z-index needs isolation to stay inside it */
.fc-c1prev [data-page-element="CheckoutProductCard/V2"],
.fc-c1prev [data-page-element="CheckoutProductCardBump/V2"] { position: relative; isolation: isolate; }
/* CF rounds the bump 5px whatever else is done to it */
.fc-c1prev [data-page-element="CheckoutProductCardBump/V2"] { border-radius: 5px; }
.fc-c1prev .elProductLayoutBackground,
.fc-c1prev .elProductLayoutBorder { position: absolute; inset: 0; border-radius: inherit; }
.fc-c1prev .elProductLayoutBackground { z-index: -2; background: #fff; }
.fc-c1prev .elProductLayoutBorder { z-index: -1; }

.fc-c1prev [data-page-element="CheckoutProductCard/V2"] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  cursor: pointer;
}

/* CF's untouched cards are flat and centred, and the chosen one is a grey
   panel with a dark edge — but only while the product section is OFF. On, the
   effect's outline-and-tint takes over and this must not sit under it. The
   card-select variable is the section's own off-marker. */
@container style(--fc-c1-card-select: auto) {
  .fc-c1prev [data-page-element="CheckoutProductCard/V2"] {
    align-items: center;
    padding: 12px;
    border: 1px solid #c0bfcf;
    border-radius: 5px 5px 0 0;
    background: #fff;
  }

  /* one stacked block: the rows meet on a shared line, and only the outer
     corners are rounded — the same shape CF renders */
  .fc-c1prev [data-page-element="CheckoutProductCard/V2"] + [data-page-element="CheckoutProductCard/V2"] {
    margin-top: -1px;
    border-radius: 0 0 5px 5px;
  }

  /* CF marks the chosen row with the radio alone, not with a panel */
  .fc-c1prev [data-page-element="CheckoutProductCard/V2"]:has(.elRadioInput:checked) {
    background: #fff;
  }
}

@container style(--fc-c1-card-select: none) {
  .fc-c1prev [data-page-element="CheckoutProductCard/V2"] { align-items: flex-start; border: 1px solid #cdd5e1; }
}
@container style(--fc-c1-card-select: none) {
  .fc-c1prev [data-page-element="CheckoutProductCard/V2"] + [data-page-element="CheckoutProductCard/V2"] { margin-top: 12px; }
}

/* CF renders the radio at no size at all — the card is the control (see the
   hero click handler), so only the input survives for :checked to read */
.fc-c1prev .elRadioWrapper { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.fc-c1prev .elRadioInput { position: absolute; opacity: 0; width: 1px; height: 1px; }

.fc-c1prev .elProductCardImage { flex: none; width: 130px; }
.fc-c1prev .elProductCardImage img { display: block; width: 100%; border-radius: 4px; }
.fc-c1prev .elProductCardNameContainer { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fc-c1prev .elProductCardInfoName { font-weight: 700; font-size: 14.5px; }
.fc-c1prev .elProductCardInfoDescription { color: #565e6e; font-size: 13.5px; line-height: 1.5; }
.fc-c1prev .elProductCardHighlight { font-size: 11px; }
.fc-c1prev .elProductCardPriceContainer { font-weight: 400; white-space: nowrap; }

/* the bump: image left, then the arrow, the tick, the name and the price on
   one line with the description under them — CF's own arrangement */
/* alignment and direction belong to the effect's own variables — the row-wrap
   here only matters in the untouched state, where the effect sets them to row */
.fc-c1prev [data-page-element="CheckoutProductCardBump/V2"] .elProductCardInfoContainer {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 6px;
}
.fc-c1prev .elProductCardInputAndTitle { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.fc-c1prev [data-page-element="CheckoutProductCardBump/V2"] .elProductCardDescription {
  flex-basis: 100%;
  color: #565e6e;
  font-size: 13.5px;
  line-height: 1.5;
}
.fc-c1prev [data-page-element="CheckoutProductCardBump/V2"] .elProductCardImage img { border-radius: 0; }

.fc-c1prev .elProductBumpHeadlineArrow {
  margin-right: 8px;
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  flex: none;
  border-radius: 50%;
  /* the arrow is drawn on the circle, and the glyph in the markup is hidden
     behind a zero font size — a triangle character at this size is a smudge */
  background: #0c0f14 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h12'/%3E%3Cpath d='m11 6 6 6-6 6'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
  color: transparent;
  font-size: 0;
  line-height: 1;
}

/* CF hides the native tick behind a drawn box. The drawn box takes its size
   from the effect's own tick variable so the checkbox arrangement can grow it,
   and the check mark is a character — there is no icon font here. */
.fc-c1prev [data-page-element="CheckoutProductCardBump/V2"] .elCheckboxWrapper .elCheckboxInput {
  position: absolute;
  opacity: 0;
}
.fc-c1prev [data-page-element="CheckoutProductCardBump/V2"] .elCheckbox {
  width: var(--fc-c1-bump-tick-size);
  height: var(--fc-c1-bump-tick-size);
  min-width: 18px;
  min-height: 18px;
  border: 1px solid #b9c2d0;
  border-radius: 3px;
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.fc-c1prev .elCheckboxIconCheck { font-style: normal; line-height: 1; visibility: hidden; }
.fc-c1prev .elCheckboxIconCheck::before { content: "\2713"; font-weight: 700; color: var(--fc-c1-bump-tick-ink, inherit); }
.fc-c1prev .elCheckboxInput:checked ~ .elCheckbox .elCheckboxIconCheck { visibility: visible; }
.fc-c1prev .elCheckboxLabel { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.fc-c1prev .elProductBumpHeadline { font-weight: 600; font-size: 14.5px; }

/* the summary ships collapsed and the head is the control — data-open is set
   by the hero click handler and by opening the panel's summary section */
.fc-c1prev .elOrderSummaryWrapper .elCheckoutWrapper { background: #fff; border: 1px solid #cdd5e1; border-radius: 6px; overflow: hidden; }
.fc-c1prev .elOrderSummaryRow { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; }
.fc-c1prev .elOrderSummaryHead { cursor: pointer; user-select: none; }
.fc-c1prev .elOrderSummaryHeadText { font-size: 14.5px; font-weight: 500; }
.fc-c1prev .elOrderSummaryRowLeft,
.fc-c1prev .elOrderSummaryRowRight { display: flex; align-items: center; gap: 9px; }
.fc-c1prev .fc-c1prev-sumprice { font-size: 14.5px; }
.fc-c1prev .fc-c1prev-caret { color: #2c3342; font-size: 12px; transition: transform .18s ease; }
.fc-c1prev .elOrderSummaryWrapper:not([data-open]) .elOrderSummaryBody { display: none; }
.fc-c1prev .elOrderSummaryWrapper[data-open] .fc-c1prev-caret { transform: rotate(180deg); }
.fc-c1prev .elOrderSummaryBody .elOrderSummaryRow { padding: 6px 16px; }
.fc-c1prev .elOrderSummaryBody .elOrderSummaryRow:first-child { padding-top: 10px; }
.fc-c1prev .elOrderSummaryBody .elOrderSummaryRow:last-child { padding-bottom: 12px; }
.fc-c1prev .fc-c1prev-sumbreak { border-top: 1px solid #b9c0cc; margin-top: 5px; padding-top: 11px; }
.fc-c1prev .elOrderSummaryBody .elOrderSummaryRow:last-child { font-weight: 700; }
/* open, the head hands the figure to the total row below */
.fc-c1prev .elOrderSummaryWrapper[data-open] .fc-c1prev-sumprice { display: none; }
.fc-c1prev .elOrderSummaryHead i { width: 18px; height: 18px; flex: none; }
.fc-c1prev .elOrderSummaryHead i::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  margin: 2px auto 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h3l2.6 12.4A2 2 0 0 0 9.6 17H19a2 2 0 0 0 2-1.6L23 7H6'/%3E%3Ccircle cx='10' cy='21' r='1.6'/%3E%3Ccircle cx='18' cy='21' r='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h3l2.6 12.4A2 2 0 0 0 9.6 17H19a2 2 0 0 0 2-1.6L23 7H6'/%3E%3Ccircle cx='10' cy='21' r='1.6'/%3E%3Ccircle cx='18' cy='21' r='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* CF's untouched Submit: black, square-ish, quiet — and only the typography
   section may grow it. The showcase button rules at the top of this file style
   every .elButton in the hero, so the replica's has to take each of those
   properties back explicitly. */
.fc-c1prev .elBTN .elButton {
  display: block;
  flex-direction: row;
  text-align: center;
  background-color: #000000;
  color: #fff;
  border-radius: 6px;
  padding: 10px 25px;
  text-decoration: none;
}
.fc-c1prev .elButtonMain { display: inline-flex; align-items: center; gap: 8px; }
.fc-c1prev .elBTN .elButtonMainText {
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: 0;
}
.fc-c1prev .elButtonSub:empty { display: none; }

.fc-c1prev .elCheckoutTos { text-align: center; margin-top: -10px; }
.fc-c1prev .elCheckoutTos .elCheckboxText p { margin: 0; font-size: 11.5px; color: #3c4454; }

/* stacked modal: the pane is 290px tall, so the frame gives back its slack.
   Lives here, not in styles.css — this sheet loads later and would win the tie
   the wrong way round. */
@media (max-width: 900px) {
  .fc-c1prev { margin: 14px 0 56px; padding: 16px; }
}


/* -------- Mobile order summary -------- */
.fc-msum-frame {
  position: relative;
  width: 250px;
  height: 320px;
  border-radius: 22px;
  overflow: hidden;
  background: #ffffff;
  border: 6px solid #14141b;
  box-shadow: 0 14px 34px rgba(18, 20, 32, .18);
}

.fc-msum-frame .fc-ghost-page { margin-top: 14px; }

.fc-msum-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  background: var(--fc-msum-bg, #ffffff);
  color: var(--fc-msum-ink, #14141b);
  border-top: 1px solid #e6e7ea;
  box-shadow: 0 -4px 14px rgba(10, 12, 18, .08);
  font: 500 var(--fc-msum-size, 13px)/1.3 Inter, system-ui, sans-serif;
  animation: fcMsumIn 5s cubic-bezier(.22, 1, .36, 1) infinite;
}

.fc-msum-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-msum-bar b { font-size: 1.15em; white-space: nowrap; }

@keyframes fcMsumIn {
  0%, 10% { transform: translateY(110%); }
  22%, 88% { transform: translateY(0); }
  96%, 100% { transform: translateY(110%); }
}

/* -------- Declined card recovery -------- */
.fc-dc-frame {
  width: min(92%, 380px);
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #ececf0;
  box-shadow: 0 10px 26px rgba(18, 20, 32, .12);
  padding: 16px;
}

.fc-dc-field {
  padding: 12px 14px;
  border: 1px solid var(--fc-dc-bad, #a32d2d);
  border-radius: 6px;
  margin-bottom: 12px;
  color: #5a6478;
  font: 500 13px/1 "JetBrains Mono", monospace;
  letter-spacing: .06em;
}

/* the message panel itself is painted by the real effect — the mock only has
   to look like CF's slots, which is what the classes are */
.fc-dc-frame [data-page-element="CheckoutSubmitNotification/V1"] {
  font: 400 12.5px/1.5 Inter, system-ui, sans-serif;
  animation: fcDcIn .45s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes fcDcIn {
  from { opacity: 0; transform: translateY(6px); }
}

/* -------- Timed popup -------- */
.fc-pop-frame {
  position: relative;
  width: min(92%, 420px);
  height: 250px;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #ececf0;
  box-shadow: 0 10px 26px rgba(18, 20, 32, .12);
}

.fc-pop-frame .fc-ghost-page { margin-top: 18px; }

.fc-pop-veil {
  position: absolute;
  inset: 0;
  background: var(--fc-pop-dim, #0a0c12);
  opacity: var(--fc-pop-dim-o, 55%);
  animation: fcPopVeil 6s ease infinite;
}

.fc-pop-demo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(76%, calc(var(--fc-pop-w, 560px) * .5));
  padding: 18px 18px 16px;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(10, 12, 18, .35);
  font: 500 12px/1.4 Inter, system-ui, sans-serif;
  color: #14141b;
  animation: fcPopIn 6s cubic-bezier(.22, 1, .36, 1) infinite;
}

.fc-pop-demo-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .08);
  color: #3d4046;
  font: 700 12px/1 Inter, system-ui, sans-serif;
}

.fc-pop-demo-head { display: block; font-weight: 800; font-size: 14px; margin-bottom: 8px; }
.fc-pop-demo-line { display: block; height: 7px; border-radius: 4px; background: #ececf0; margin-bottom: 6px; }
.fc-pop-demo-line.short { width: 62%; }

.fc-pop-demo-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--ramp, #e01b22);
  color: #fff;
  font-weight: 700;
  font-size: 11.5px;
}

/* the strength has to live in the keyframes — an animation outranks the plain
   opacity underneath it, so setting one on the veil alone showed nothing */
@keyframes fcPopVeil {
  0%, 18% { opacity: 0; }
  30%, 88% { opacity: var(--fc-pop-dim-o, 55%); }
  96%, 100% { opacity: 0; }
}

@keyframes fcPopIn {
  0%, 18% { opacity: 0; transform: translate(-50%, -42%); }
  30%, 88% { opacity: 1; transform: translate(-50%, -50%); }
  96%, 100% { opacity: 0; transform: translate(-50%, -42%); }
}

/* -------- Sticky column --------
   The long side is scrolled by an animation rather than by a real scrollbar:
   the pane is 250px tall, so a genuine scrollport would need the visitor to
   scroll it before the effect showed itself at all. */
.fc-scol-frame {
  width: min(94%, 430px);
  height: 250px;
  padding: 12px;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #ececf0;
  box-shadow: 0 10px 26px rgba(18, 20, 32, .12);
  font-family: Inter, sans-serif;
}

.fc-scol-frame .row { display: flex; gap: 14px; align-items: flex-start; }
.fc-scol-frame .col-md-7 { flex: 0 0 58%; }
.fc-scol-frame .col-md-5 { flex: 1; margin-top: var(--fc-scol-top, 24px); }

.fc-scol-frame .fc-scol-long .col-inner {
  animation: fcScolScroll 9s ease-in-out infinite;
}

.fc-scol-frame b {
  display: block;
  margin: 0 0 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8b8b96;
}

.fc-scol-frame .fc-scol-long i {
  display: block;
  height: 17px;
  margin-bottom: 7px;
  border-radius: 4px;
  background: #f1f1f5;
}

.fc-scol-frame .fc-scol-long b:not(:first-child) { margin-top: 13px; }

.fc-scol-cta {
  display: block;
  margin-top: 12px;
  padding: 9px 0;
  border-radius: 6px;
  background: #e01b22;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

.fc-scol-sum {
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid #e6e6ec;
  background: #fbfbfd;
}

.fc-scol-sum-h {
  display: block;
  margin-bottom: 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #8b8b96;
}

.fc-scol-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  font-size: 11px;
  color: #43434f;
}

.fc-scol-row b {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: #16161d;
}

.fc-scol-row.is-total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid #e6e6ec;
  font-weight: 700;
  color: #16161d;
}

@keyframes fcScolScroll {
  0%, 8% { transform: translateY(0); }
  60%, 76% { transform: translateY(-176px); }
  100% { transform: translateY(0); }
}

/* -------- Scroll progress bar -------- */
.fc-sb-frame {
  position: relative;
  width: min(92%, 420px);
  height: 250px;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #ececf0;
  box-shadow: 0 10px 26px rgba(18, 20, 32, .12);
}

.fc-sb-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: calc(var(--fc-bar-h, 30px) * var(--fc-sb-scale, 1));
  background: var(--fc-bar-track, rgba(18, 20, 30, .12));
}

/* the fill, the figure and the page below share one clock, so the bar reads as
   caused by the scrolling rather than as a loading bar filling on its own */
@property --fc-sbp {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}

.fc-sb-bar {
  counter-reset: fcsbp var(--fc-sbp);
  animation: fcSbCount 8s linear infinite;
}

.fc-sb-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 0;
  padding-right: .5em;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  background-color: var(--fc-bar-ink, #e01b22);
  background-image: repeating-linear-gradient(135deg,
    var(--fc-bar-stripe-ink, transparent) 0 10px, transparent 10px 20px);
  color: var(--fc-bar-label, #ffffff);
  font-family: Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: calc(var(--fc-bar-h, 30px) * var(--fc-sb-scale, 1) * .48);
  line-height: 1;
  animation: fcSbFill 8s linear infinite, fcScrollStripe var(--fc-bar-stripe-run, 0s) linear infinite;
}

@keyframes fcScrollStripe {
  to { background-position: 28.29px 0; }
}

.fc-sb-bar i::after { content: var(--fc-bar-show-words, var(--fc-bar-words, "PAGE COMPLETION ")) counter(fcsbp) "%"; }

.fc-sb-page { animation: fcSbScroll 8s linear infinite; }

/* four reads and four pauses: the hold is what stops it looking like loading */
@keyframes fcSbFill {
  0%, 11%   { width: 0%; }
  17%, 32%  { width: 26%; }
  38%, 53%  { width: 52%; }
  59%, 74%  { width: 74%; }
  80%, 100% { width: 100%; }
}

@keyframes fcSbCount {
  0%, 11%   { --fc-sbp: 0; }
  17%, 32%  { --fc-sbp: 26; }
  38%, 53%  { --fc-sbp: 52; }
  59%, 74%  { --fc-sbp: 74; }
  80%, 100% { --fc-sbp: 100; }
}

@keyframes fcSbScroll {
  0%, 11%   { transform: translateY(0); }
  17%, 32%  { transform: translateY(-31px); }
  38%, 53%  { transform: translateY(-62px); }
  59%, 74%  { transform: translateY(-89px); }
  80%, 100% { transform: translateY(-120px); }
}


/* -------- Sticky CTA bar -------- */
.fc-ctab-frame {
  position: relative;
  width: min(92%, 420px);
  height: 250px;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #ececf0;
  box-shadow: 0 10px 26px rgba(18, 20, 32, .12);
}

/* the arrival on a loop: the wait is the feature, so the mock spends time
   showing the page without it before the bar rides in */
.fc-ctab-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--fc-bar-top, auto);
  bottom: var(--fc-bar-bottom, 0);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 12px;
  background: #14141b;
  animation: fcCtabIn 5s cubic-bezier(.22, 1, .36, 1) infinite;
}

.fc-ctab-btn {
  width: 72%;
  padding: 12px 14px;
  border-radius: 7px;
  background: #16a34a;
  color: #fff;
  font: 700 14px/1.2 Inter, system-ui, sans-serif;
  text-align: center;
}

.fc-ctab-x {
  position: absolute;
  top: var(--fc-bar-close-top, auto);
  bottom: var(--fc-bar-close-bottom, 100%);
  right: 12px;
  display: var(--fc-bar-close, flex);
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--fc-bar-close-radius, 9px 9px 0 0);
  /* the bar's own paint, so the tab belongs to it */
  background: inherit;
  box-shadow: 0 -3px 10px rgba(10, 12, 18, .14);
  font: 700 17px/1 Inter, system-ui, sans-serif;
  isolation: isolate;
}

/* white against its own backdrop, light bar or dark */
.fc-ctab-x::before {
  content: "\00d7";
  color: #fff;
  mix-blend-mode: difference;
  line-height: 1;
}

@keyframes fcCtabIn {
  0%, 14% { transform: translateY(var(--fc-bar-from, 120%)); }
  26%, 100% { transform: translateY(0); }
}

/* PREVIEW SIZING, measured 2026-08-08: the conversion mocks were drawn at one
   size and shown in two panes — a 344x200 tile and a 780x702 modal hero. Zoom
   rescales layout and paint together, so one rule per surface sets each mock
   right without touching its internals. */
/* the modal hero has the room — the small mocks take it */
.fc-modal-hero .fc-toast-frame { zoom: 1.5; height: 428px; }
.fc-modal-hero .fc-scarce-wrap { zoom: 1.5; }
.fc-modal-hero .fc-cmp { zoom: 1.35; }
.fc-modal-hero .fc-ba { zoom: 1.45; }
.fc-modal-hero .fc-osum { zoom: 1.45; }
.fc-modal-hero .fc-dc-frame { zoom: 1.45; }
.fc-modal-hero .fc-msum-frame { zoom: 1.35; }
.fc-modal-hero .fc-pop-frame { zoom: 1.5; }
/* the frame is enlarged but the bar keeps its true height — the slider says
   30px and the modal shows 30px, not 30px enlarged */
.fc-modal-hero .fc-sb-frame { zoom: 1.5; --fc-sb-scale: .6667; }
.fc-modal-hero .fc-scol-frame { zoom: 1.5; }
.fc-modal-hero .fc-ctab-frame { zoom: 1.5; }

/* the tile does not — the tall mocks come down to fit its 200px pane */
.fc-preview .fc-msum-frame { zoom: .58; }
.fc-preview .fc-pop-frame { zoom: .74; }
.fc-preview .fc-sb-frame { zoom: .74; }
.fc-preview .fc-scol-frame { zoom: .74; }
.fc-preview .fc-ctab-frame { zoom: .74; }
.fc-preview .fc-dc-frame { zoom: .85; }
.fc-preview .fc-ba { zoom: .8; width: 322px; }

/* PREVIEW ONLY. A native tick box drawn at the size the effect asks for looks
   oversized in the replica, where the whole checkout is shown at a reduced
   width. The shipped code is left alone — this is the pane, not the product. */
.fc-c1prev.fc-c1prev [data-page-element="CheckoutProductCardBump/V2"] .elCheckboxInput {
  width: 17px !important;
  height: 17px !important;
}

/* the drawn box is what is seen — the input behind it is only the control */
/* the label holds the button on the arrangements that have one, so only the
   drawn box is sized here — shrinking the label took the button with it */
.fc-c1prev.fc-c1prev [data-page-element="CheckoutProductCardBump/V2"] .elCheckbox {
  width: 18px !important;
  height: 18px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 4px;
}

.fc-c1prev.fc-c1prev [data-page-element="CheckoutProductCardBump/V2"] .elCheckboxIcon,
.fc-c1prev.fc-c1prev [data-page-element="CheckoutProductCardBump/V2"] .elCheckboxIconCheck {
  font-size: 12px !important;
  line-height: 1 !important;
}