/* 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;
}

.fc-preview .elButton,
.fc-modal-hero .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));
  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 */
.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; }

@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-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;
}

.fc-video-cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.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: .02em;
  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-video-badge::before,
.fc-video-badge::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .9);
  pointer-events: none;
  animation: fcVidPulse 2.6s ease-out infinite;
}

.fc-video-badge::after { animation-delay: 1.3s; }

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

@keyframes fcVidPulse {
  0%   { transform: scale(1); opacity: .9; }
  100% { transform: scale(1.8); opacity: 0; }
}

.fc-modal-hero .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;
}

.fc-badge-host .elImage { width: 100%; height: auto; }

/* 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; }

/* 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; }