/* /3 borrows /2's palette and typography without changing the original layout. */
.creator-three,
.creator-three-menu {
  --background: 0 0% 100%;
  --foreground: 345 9% 12%;
  --card: 0 0% 100%;
  --card-foreground: 345 9% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 345 9% 12%;
  --primary: 345 85% 45%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 96%;
  --secondary-foreground: 345 9% 12%;
  --muted: 0 0% 96%;
  --muted-foreground: 340 3% 37%;
  --accent: 345 43% 94%;
  --accent-foreground: 345 9% 12%;
  --border: 35 13% 84%;
  --input: 35 13% 84%;
  --ring: 345 85% 45%;
  --content-background: 0 0% 100%;
  font-family: Inter, Arial, sans-serif;
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
}
.creator-three :is(h1, h2, h3),
.creator-three-menu h2 {
  font-family: Inter, Arial, sans-serif;
  font-weight: 500;
  letter-spacing: -0.055em;
}
.creator-three h1 {
  letter-spacing: -0.07em;
}
/* FAQ labels use regular text spacing rather than display-heading tracking. */
.creator-three :is(#faqs, #faq-content, .affiliate-landing-faq, .feature-landing-faq) h3 {
  letter-spacing: normal;
}
.creator-three #faq-content h3[id] {
  font-weight: 700;
}
.creator-three .billing-cycle-switch {
  width: min(24rem, calc(100vw - 3rem));
  overflow: visible;
}
.creator-three .billing-cycle-switch [role="tab"] {
  position: relative;
}
.creator-three .billing-cycle-switch [role="tab"] > span:last-child {
  position: absolute;
  top: -4px;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}
.creator-three .bg-content-background {
  background-color: hsl(0 0% 100%);
}
.creator-three em {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: hsl(345 85% 45%);
  letter-spacing: -0.055em;
}
.creator-three .bg-foreground em {
  color: hsl(343 90% 75%);
}
/* Unify the existing icon badges; preserve their sizes and positions. */
.creator-three [data-slot="card"] [class*="bg-"][class*="-100"] {
  color: hsl(345 85% 45%);
  background-color: hsl(345 43% 94%);
}
.creator-three .dashboard-background {
  --background: 42 33% 97%;
  --card: 42 33% 98%;
  background-color: hsl(42 33% 97%);
  background-image:
    radial-gradient(
      ellipse at 10% 10%,
      hsl(35 27% 88% / 0.55),
      transparent 55%
    ),
    radial-gradient(ellipse at 90% 20%, hsl(345 43% 94% / 0.4), transparent 55%);
}
.creator-three :is(a, button, summary):focus-visible,
.creator-three-menu :is(a, button, summary):focus-visible {
  outline-color: hsl(345 85% 45%);
}

/* Let the sentence parts move apart while the new phrase is revealed. */
.creator-three .rotating-product-headline {
  position: relative;
  display: block;
}
.creator-three .rotating-product-headline-current {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 0.2em;
  white-space: nowrap;
}
.creator-three .rotating-product-headline-current > span {
  flex: none;
}
.creator-three .rotating-product-text {
  display: inline-block;
  flex: none;
  overflow: hidden;
  /* Extend the clip box without adding space between the sentence parts. */
  padding-inline: 0.12em;
  margin-inline: -0.12em;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
  vertical-align: baseline;
  transition: width 450ms cubic-bezier(0.22, 1, 0.36, 1);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.035em;
  text-underline-offset: 0.12em;
}
.creator-three .rotating-product-measure {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: max-content;
  white-space: nowrap;
  visibility: hidden;
  pointer-events: none;
  contain: layout;
}
.creator-three .rotating-product-text > span {
  display: block;
  width: max-content;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 225ms ease;
}
.creator-three .rotating-product-text > span[data-active="true"] {
  opacity: 1;
}
@media (max-width: 639px) {
  .creator-three .rotating-product-headline-current {
    flex-direction: column;
    align-items: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .creator-three .rotating-product-text,
  .creator-three .rotating-product-text > span {
    transition: none;
  }
}

/* Blog reading text uses a consistent double line height. */
.creator-three.blog-page .blog-post-content,
.creator-three.blog-page .blog-post-content :is(p, li, blockquote) {
  line-height: 2;
}