:root {
  --clipo-heading-xl: 157px;
  --clipo-heading-l: 91px;
  --clipo-heading-m: 53px;
  --clipo-body-large: 31px;
  --clipo-body-regular: 15px;
  --clipo-heading-s: 31px;
  --clipo-heading-xl-mask-box: 1.16em;
  --clipo-heading-xl-mask-offset: -0.12em;
  --clipo-heading-xl-mask-inset: 0.16em;
  --clipo-heading-l-mask-box: 1.16em;
  --clipo-heading-l-mask-offset: -0.12em;
  --clipo-heading-l-mask-inset: 0.12em;
  --clipo-heading-s-mask-box: 1.16em;
  --clipo-heading-s-copy-mask-box: 2.32em;
  --clipo-workflow-counter-digit-width: 1ch;
  --clipo-workflow-counter-optical-start: 0.32em;
}

html[data-instatic-layout-id="mobile"] {
  --clipo-heading-xl: 32px;
  --clipo-heading-l: 26px;
  --clipo-heading-m: 21px;
  --clipo-heading-s: 17px;
}

/* Desktop lead copy */
html[data-instatic-layout-id="desktop"] .clipo-workflow-v2__intro-copy,
html[data-instatic-layout-id="desktop"] .clipo-panel-stack__copy,
html[data-instatic-layout-id="desktop"] .clipo-ecosystem__copy,
html[data-instatic-layout-id="desktop"] .clipo-pricing__features,
html[data-instatic-layout-id="desktop"] .clipo-features__eyebrow {
  font-size: var(--clipo-body-large);
}

/* Shared regular body and UI copy */
.clipo-hero__download,
.clipo-hero__step,
.clipo-workflow__caption-index,
.clipo-workflow__caption-copy,
.clipo-pricing__notes,
.clipo-pricing__download,
.clipo-features__description,
.clipo-features__index,
.clipo-faq__card p,
.clipo-footer__manifesto,
.clipo-footer__download,
.clipo-footer__copyright,
.clipo-footer__nav a,
.clipo-footer__products a {
  font-size: var(--clipo-body-regular);
}

/* Workflow card's small labels use Heading S without changing their layout or animation. */
.clipo-workflow-v2__counter-total,
.clipo-workflow-v2__caption-index,
.clipo-workflow-v2__caption-copy,
html[data-instatic-layout-id="mobile"] .clipo-mobile-workflow__counter small,
html[data-instatic-layout-id="mobile"] .clipo-mobile-workflow__caption-index,
html[data-instatic-layout-id="mobile"] .clipo-mobile-workflow__caption-copy p {
  font-size: var(--clipo-heading-s);
  line-height: 1.03;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* Keep the desktop Workflow flip masks aligned to the Heading S line box. */
.clipo-workflow-v2__caption {
  width: 983px;
  grid-template-columns: 593px minmax(0, 1fr);
}

.clipo-workflow-v2__caption-title,
html[data-instatic-layout-id="mobile"] .clipo-mobile-workflow__caption-copy h3 {
  font-family: var(--font-clipo-font-poster, PhonkSansHeavy, Impact, sans-serif);
  font-size: var(--clipo-heading-xl);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.clipo-workflow-v2__caption-title {
  --workflow-flip-depth: var(--clipo-heading-xl-mask-box);
  --workflow-flip-half-depth: 0.58em;
  --workflow-flip-negative-half-depth: -0.58em;
  top: var(--clipo-heading-xl-mask-offset);
  height: var(--clipo-heading-xl-mask-box);
}

.clipo-workflow-v2__caption-title .clipo-workflow-flip__face {
  box-sizing: border-box;
  padding-top: var(--clipo-heading-xl-mask-inset);
  line-height: 0.84;
  white-space: nowrap;
}

.clipo-workflow-v2__counter-current,
html[data-instatic-layout-id="mobile"] .clipo-mobile-workflow__counter span {
  font-family: var(--font-clipo-font-poster, PhonkSansHeavy, Impact, sans-serif);
  font-size: var(--clipo-heading-l);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.clipo-workflow-v2__counter-current {
  box-sizing: content-box;
  padding-left: var(--clipo-workflow-counter-optical-start);
}

.clipo-workflow-v2__counter-current,
.clipo-workflow-v2__counter-static,
.clipo-workflow-v2__counter-digit {
  height: var(--clipo-heading-l-mask-box);
}

.clipo-workflow-v2__counter-digit {
  --workflow-flip-depth: var(--clipo-heading-l-mask-box);
  --workflow-flip-half-depth: 0.58em;
  --workflow-flip-negative-half-depth: -0.58em;
  top: var(--clipo-heading-l-mask-offset);
  width: var(--clipo-workflow-counter-digit-width);
}

.clipo-workflow-v2__counter-digit .clipo-workflow-flip__face {
  box-sizing: border-box;
  padding-top: var(--clipo-heading-l-mask-inset);
}

.clipo-workflow-v2__caption-index {
  display: none;
}

.clipo-workflow-v2__caption-copy {
  --workflow-flip-depth: var(--clipo-heading-s-copy-mask-box);
  --workflow-flip-half-depth: 1.16em;
  --workflow-flip-negative-half-depth: -1.16em;
  height: var(--clipo-heading-s-copy-mask-box);
  white-space: pre;
}

.clipo-workflow-v2 .clipo-workflow-flip__rotor {
  transform: translateZ(var(--workflow-flip-negative-half-depth)) rotateX(0deg);
}

.clipo-workflow-v2 .clipo-workflow-flip__face--front {
  transform: rotateX(0deg) translateZ(var(--workflow-flip-half-depth));
}

.clipo-workflow-v2 .clipo-workflow-flip__face--top {
  transform: rotateX(90deg) translateZ(var(--workflow-flip-half-depth));
}

.clipo-workflow-v2 .clipo-workflow-flip__face--back {
  transform: rotateX(180deg) translateZ(var(--workflow-flip-half-depth));
}

.clipo-workflow-v2 .clipo-workflow-flip__face--bottom {
  transform: rotateX(270deg) translateZ(var(--workflow-flip-half-depth));
}

.clipo-workflow-v2__caption-copy .clipo-workflow-flip__face {
  white-space: pre;
}

.clipo-workflow-v2__counter-total {
  white-space: nowrap;
}

/* Mobile body copy uses the same 15px token instead of separate 14/17/18px sizes. */
html[data-instatic-layout-id="mobile"] .clipo-mobile-workflow__intro-copy,
html[data-instatic-layout-id="mobile"] .clipo-mobile-panel-stack__copy,
html[data-instatic-layout-id="mobile"] .clipo-ecosystem__copy,
html[data-instatic-layout-id="mobile"] .clipo-pricing__notes,
html[data-instatic-layout-id="mobile"] .clipo-pricing__features,
html[data-instatic-layout-id="mobile"] .clipo-pricing__download,
html[data-instatic-layout-id="mobile"] .clipo-features__eyebrow,
html[data-instatic-layout-id="mobile"] .clipo-features__item .clipo-features__index,
html[data-instatic-layout-id="mobile"] .clipo-features__item .clipo-features__description,
html[data-instatic-layout-id="mobile"] .clipo-features__item--four .clipo-features__description,
html[data-instatic-layout-id="mobile"] .clipo-faq-mobile__bubble p,
html[data-instatic-layout-id="mobile"] .clipo-faq-mobile__load,
html[data-instatic-layout-id="mobile"] .clipo-footer-mobile__manifesto,
html[data-instatic-layout-id="mobile"] .clipo-footer-mobile__copyright,
html[data-instatic-layout-id="mobile"] .clipo-footer-mobile__download,
html[data-instatic-layout-id="mobile"] .clipo-footer-mobile__nav a,
html[data-instatic-layout-id="mobile"] .clipo-footer-mobile__products a {
  font-size: var(--clipo-body-regular);
}