.sqld-root {
  --color-ink: #1e211e;
  --color-lime: #effba8;
  --color-white: #ffffff;
  --color-bg: #ffffff;
  --radius-sm: 4px;
  --font-display: "Baskervville", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-body: "Inter", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --body-xl: clamp(18px, 1.25vw, 24px);
  /* Vertical rhythm of the centered stack (Figma: The Starters 3.0, 6483:13721) */
  --gap-logo: clamp(24px, 3.5vh, 32px);
  --gap-status: clamp(40px, 6.5vh, 56px);
  color: var(--color-ink);
  font-family: var(--font-body);
  /* Fixed full-viewport overlay: floats above the page while loading, then
     fades out (autoAlpha 0 + pointer-events none, so it never blocks). */
  inset: 0;
  position: fixed;
  z-index: var(--sqld-z, 100000000);
}

.sqld-root *,
.sqld-root *::before,
.sqld-root *::after {
  box-sizing: border-box;
}

/* Hidden while the Webflow Designer is in design mode; the component sets
   this attribute after reading wf-design-mode off the host document. */
.sqld-root[data-wf-design-mode] {
  display: none;
}

.scene {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.scene--demo-1 {
  background: var(--color-bg);
}

/* Logo + headline + status form one centered cluster, biased slightly above
   the vertical middle (cluster center ~47.5% of viewport in the mock). */
.scene__stack {
  align-items: center;
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: center;
  padding-bottom: 6vh;
  position: absolute;
  z-index: 4;
}

.scene__logo-image {
  display: block;
  filter: brightness(0);
  height: auto;
  width: 13.75rem;
}

.scene__headline {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(84px, 6.2vw, 122px);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.2;
  margin: var(--gap-logo) 0 0;
  white-space: nowrap;
}

.scene__headline em {
  font-style: italic;
  font-weight: 400;
}

.scene__status {
  display: flex;
  justify-content: center;
  margin: var(--gap-status) 0 0;
}

.scene__status-track {
  position: relative;
}

.scene__status-line {
  --status-text: #434b43;
  --status-complete-text: #1e211e;
  display: inline-grid;
  font-family: var(--font-body);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.7;
  margin: 0;
  min-height: 1.2em;
  overflow: visible;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: max-content;
}

.scene__status-line.is-complete {
  --status-text: var(--status-complete-text);
}

.scene__status-check {
  align-items: center;
  color: var(--color-ink);
  display: inline-flex;
  height: 24px;
  justify-content: center;
  /* Positioned 8px right of the rendered status text: the controller measures
     the current step's text and sets --status-text-w on the track. Text is
     always centered in the track, so its right edge is 50% + width/2. */
  left: calc(50% + (var(--status-text-w, 0px) / 2) + 8px);
  /* Hidden state lives in CSS, not only in JS: Webflow prerenders the component
     at publish time and hydrates it client-side, so the markup paints before the
     controller's first gsap.set() runs. Without this the check is visible during
     that window — and with --status-text-w still unset the left calc collapses
     to 50% + 8px, parking it on top of the centered status text. The controller's
     autoAlpha tweens write inline opacity + visibility, which outrank this rule. */
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  visibility: hidden;
  width: 24px;
  will-change: transform, opacity;
}

.scene__status-check-icon {
  display: block;
  height: 100%;
  width: 100%;
}

.scene__status-measure,
.scene__status-stage {
  display: inline-flex;
  grid-area: 1 / 1;
  justify-content: center;
  white-space: nowrap;
}

.scene__status-measure {
  opacity: 0;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
}

.scene__status-stage {
  align-items: flex-start;
  color: var(--status-text);
  inset: 0;
  position: absolute;
  will-change: transform, opacity, filter;
}

.scene__status-stage.is-complete-stage {
  color: var(--status-complete-text);
}

/* ── Dark theme (previous default look) ─────────────────────────── */

.sqld-root[data-theme="dark"] {
  --color-bg: var(--color-ink);
  color: var(--color-white);
}

.sqld-root[data-theme="dark"] .scene__logo-image {
  filter: brightness(0) invert(1);
}

.sqld-root[data-theme="dark"] .scene__headline {
  color: var(--color-lime);
}

.sqld-root[data-theme="dark"] .scene__status-line {
  --status-text: #5c5f5c;
  --status-complete-text: #ffffff;
}

.sqld-root[data-theme="dark"] .scene__status-check {
  color: var(--color-white);
}

.portrait {
  backface-visibility: hidden;
  border-radius: var(--radius-sm);
  display: block;
  margin: 0;
  overflow: hidden;
  position: absolute;
  will-change: transform, opacity;
  z-index: 1;
}

.portrait img {
  display: block;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  will-change: transform, opacity, filter;
  width: 100%;
}

.portrait--slot-p1 {
  aspect-ratio: 10 / 13;
  left: 8%;
  top: 11.5%;
  width: 12.8%;
}

.portrait--slot-p2 {
  aspect-ratio: 10 / 13;
  left: -5.2%;
  top: 44.8%;
  width: 11.6%;
}

.portrait--slot-p3 {
  aspect-ratio: 10 / 13;
  left: 16.8%;
  top: 84.2%;
  width: 8.6%;
}

.portrait--slot-p4 {
  aspect-ratio: 10 / 13;
  left: 28.4%;
  top: 57.2%;
  width: 7.1%;
}

.portrait--slot-p5 {
  aspect-ratio: 43 / 56;
  left: 55.6%;
  top: -6.6%;
  width: 12%;
}

.portrait--slot-p6 {
  aspect-ratio: 42 / 55;
  left: 57.8%;
  top: 54.4%;
  width: 5.3%;
}

.portrait--slot-p7 {
  aspect-ratio: 10 / 13;
  left: 82.7%;
  top: 25.3%;
  width: 10.1%;
}

.portrait--slot-p8 {
  aspect-ratio: 301 / 392;
  left: 67.8%;
  top: 70.2%;
  width: 18.4%;
}

.portrait--slot-p9 {
  aspect-ratio: 72 / 103;
  left: 98.2%;
  top: 49.8%;
  width: 8.1%;
}

.portrait--slot-p1 img {
  object-position: center 22%;
}

.portrait--slot-p2 img {
  object-position: center 12%;
}

.portrait--slot-p3 img {
  object-position: center 14%;
}

.portrait--slot-p4 img {
  object-position: center 28%;
}

.portrait--slot-p5 img {
  object-position: center 10%;
}

.portrait--slot-p6 img {
  object-position: center 28%;
}

.portrait--slot-p7 img {
  object-position: center 18%;
}

.portrait--slot-p8 img {
  object-position: center 12%;
}

.portrait--slot-p9 img {
  object-position: center 16%;
}

@media (max-width: 900px) {
  .scene__headline {
    font-size: clamp(56px, 8.5vw, 84px);
    white-space: normal;
    /* Wide enough for "Curating your" on one line (10ch forced a 3-line wrap) */
    width: min(92vw, 14ch);
    text-align: center;
  }

  .scene__status {
    padding-inline: 20px;
  }

  .scene__status-line {
    font-size: 18px;
    text-wrap: balance;
    white-space: normal;
    width: min(80vw, 24ch);
  }
}

@media (max-width: 640px) {
  .sqld-root {
    /* Tighter mobile rhythm per the Figma phone mock */
    --gap-logo: 20px;
    --gap-status: 36px;
  }

  .scene__logo-image {
    /* ~41vw at 390px wide, per the Figma phone mock (13.75rem reads oversized) */
    width: 10rem;
    max-width: 45vw;
  }

  .scene__headline {
    font-size: clamp(38px, 11.5vw, 56px);
  }
}