@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/barlow-medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/barlow-semibold.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/barlow-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/barlow-condensed-extrabold.woff2') format('woff2');
}

.showcase-welcome .c { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; }
.showcase-welcome .b { font-family: 'Barlow', sans-serif; }

[data-welcome-preview][data-layout="showcase"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}
[data-welcome-preview][data-layout="showcase"] > [data-standard-preview] { display: none; }
[data-welcome-preview][data-layout="showcase"] > [data-showcase-preview]:not([hidden]) {
  position: absolute;
  inset: 0;
  display: block;
}
.showcase-steps[hidden], .showcase-button-mark[hidden] { display: none !important; }
.showcase-welcome svg[hidden], .showcase-welcome i[hidden] { display: none !important; }

.showcase-welcome {
  --showcase-scale: 1;
  position: absolute !important;
  inset: 0 !important;
  display: none !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  color: var(--totem-text);
}
.showcase-welcome.is-active { display: flex !important; }
.showcase-welcome::after { display: none !important; }
.showcase-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.showcase-canvas {
  --showcase-button-bg: linear-gradient(90deg, var(--totem-button, #be185d), #db2777 50%, #e11d74);
  --showcase-copy-muted: #c7d2fe;
  --showcase-card-border: color-mix(in srgb, var(--totem-panel-border, #ffffff) 16%, transparent);
  --showcase-card-fill: rgb(255 255 255 / .06);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: 1080px;
  padding: 52px 96px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 30px;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--showcase-scale, 1));
  transform-origin: center;
  background: radial-gradient(ellipse at 82% 35%, var(--totem-bg-soft, #27348f) 0, var(--totem-panel, #0a1030) 38%, var(--totem-bg, #04060f) 75%);
  color: var(--totem-text, #fff);
  text-align: left;
  line-height: normal;
}
.showcase-header { height: 56px; display: flex; align-items: center; justify-content: space-between; flex: 0 0 56px; }
.showcase-brand { display: flex; align-items: center; gap: 16px; }
.showcase-camera { flex: 0 0 auto; }
.showcase-brand-logo { font-size: 40px; letter-spacing: 3px; white-space: nowrap; }
.showcase-accent { color: var(--totem-accent, #22d3ee); }
.showcase-brand-label { padding-left: 16px; border-left: 2px solid #34437a; color: var(--totem-muted-text, #8ea0d6); font-size: 22px; font-weight: 600; letter-spacing: 2px; white-space: nowrap; }
.showcase-payments { display: flex; align-items: center; gap: 14px; color: #fff; }
.showcase-payments-label { margin-right: 8px; color: var(--totem-muted-text, #8ea0d6); font-size: 22px; font-weight: 600; letter-spacing: 2px; text-transform: none; }
.showcase-payment-pill { padding: 6px 24px; border: 2px solid rgb(255 255 255 / .5); border-radius: 999px; font-size: 30px; letter-spacing: 1px; }

.showcase-main { flex: 1; display: flex; align-items: center; min-height: 0; }
.showcase-copy { flex: 1; display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.showcase-eyebrow { display: flex; align-items: center; gap: 16px; color: var(--totem-accent, #22d3ee); font-size: 26px; letter-spacing: 6px; white-space: nowrap; }
.showcase-eyebrow-line { width: 56px; height: 3px; flex: 0 0 56px; background: var(--totem-accent, #22d3ee); }
.showcase-headings { color: var(--totem-text, #fff); line-height: .9; font-size: 124px; white-space: nowrap; }
.showcase-headings > div:first-child { font-size: 124px; }
.showcase-headline-highlight { font-size: 150px; background: linear-gradient(90deg, var(--totem-accent, #22d3ee), #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.showcase-description { color: var(--showcase-copy-muted, #c7d2fe); font-size: 38px; font-weight: 500; white-space: nowrap; }

.showcase-gallery { position: relative; width: 700px; height: 560px; flex: 0 0 700px; }
.showcase-halo { position: absolute; left: 60px; top: 40px; width: 560px; height: 480px; background: radial-gradient(circle, rgb(34 211 238 / .35), transparent 65%); }
.showcase-photo { position: absolute; width: 300px; height: 380px; box-sizing: border-box; padding: 14px 14px 58px; border-radius: 4px; background: #fff; box-shadow: 0 30px var(--totem-panel-glow-blur, 60px) color-mix(in srgb, var(--totem-panel-glow-color, #000000) var(--totem-panel-glow-strength, 55%), transparent); }
.showcase-photo img { display: block; width: 272px; height: 308px; }
.showcase-photo-sunset { left: 10px; top: 110px; transform: rotate(-10deg); }
.showcase-photo-friends { left: 390px; top: 80px; transform: rotate(9deg); }
.showcase-photo-mountains { left: 200px; top: 50px; transform: rotate(-2deg); }

.showcase-price { display: flex; align-items: center; gap: 40px; align-self: flex-start; margin-top: 6px; padding: 22px 44px; border: 1px solid var(--showcase-card-border, rgb(255 255 255 / .16)); border-radius: 28px; background: var(--showcase-card-fill, rgb(255 255 255 / .06)); }
.showcase-price small { display: block; color: var(--totem-accent, #22d3ee); font-family: 'Barlow Condensed', sans-serif; font-size: 26px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; }
.showcase-price strong { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 96px; font-weight: 800; line-height: 1; white-space: nowrap; }
.showcase-price-product { min-width: 2px; height: 90px; display: flex; flex-direction: column; justify-content: center; flex: 0 0 auto; padding-left: 40px; border-left: 2px solid rgb(255 255 255 / .18); color: #e0e7ff; font-family: 'Barlow', sans-serif; font-size: 30px; font-weight: 600; line-height: 1.35; white-space: nowrap; }
.showcase-price-product span { display: block; }

.showcase-cta-wrap { width: 100%; flex: 0 0 140px; }
.showcase-cta { width: 100%; height: 140px; display: flex; align-items: center; justify-content: center; gap: 32px; border: 0; border-radius: 36px; background: var(--showcase-button-bg, linear-gradient(90deg, #be185d, #db2777 50%, #e11d74)); color: var(--totem-button-text, #fff); cursor: pointer; font-family: 'Barlow Condensed', sans-serif; font-size: 76px; font-weight: 800; letter-spacing: 3px; line-height: 1; text-transform: uppercase; animation: showcase-pulse 2.4s ease-in-out infinite; }
.showcase-cta:disabled { opacity: .58; animation: none; cursor: not-allowed; }
.showcase-button-mark { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 72px; }
.showcase-button-mark svg { width: 72px; height: 72px; fill: #fff; }
.showcase-button-mark i { font-size: 64px; }
.showcase-notice { margin-top: 16px; color: #e0e7ff; font-family: 'Barlow', sans-serif; font-size: 24px; text-align: center; }
@keyframes showcase-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(236 72 153 / .55), 0 18px 50px rgb(219 39 119 / .4); } 50% { box-shadow: 0 0 0 22px rgb(236 72 153 / 0), 0 18px 50px rgb(219 39 119 / .4); } }

.showcase-steps { height: 112px; flex: 0 0 112px; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; box-sizing: border-box; border: 1px solid var(--showcase-card-border, rgb(255 255 255 / .16)); border-radius: 30px; background: var(--showcase-card-fill, rgb(255 255 255 / .06)); }
.showcase-step { display: flex; align-items: center; gap: 20px; color: var(--totem-text, #fff); font-size: 32px; font-weight: 700; white-space: nowrap; }
.showcase-step-mark { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 56px; color: var(--totem-accent, #22d3ee); }
.showcase-step-mark svg { width: 56px; height: 56px; fill: none; stroke: var(--totem-accent, #22d3ee); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.showcase-step-mark i { font-size: 48px; }
.showcase-step-arrow { width: 14px; height: 14px; flex: 0 0 14px; border-top: 3px solid #475a8a; border-right: 3px solid #475a8a; transform: rotate(45deg); }

.showcase-welcome[data-welcome-panel-border="off"] .showcase-price,
.showcase-welcome[data-welcome-panel-border="off"] .showcase-steps { border-color: transparent; }
.showcase-welcome[data-welcome-panel-glow="off"] .showcase-photo { box-shadow: none; }
.showcase-welcome[data-welcome-panel-glow="off"] .showcase-cta { animation: none; box-shadow: none; }

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

/* The merchant editor uses the same 1920 x 1080 canvas at a smaller scale. */
[data-showcase-preview] { width: 100%; height: 100%; overflow: hidden; background: #04060f; }