/* Page UI only. Merchant cards and phone artwork retain their own typography. */
html #fyroot[data-fy="light"] {
  --faint: #626957;
  --ghost: #626957;
  --accent-ink: #506d09;
}

html #fyroot[data-fy="dark"] {
  --faint: #9fa5ae;
  --ghost: #9fa5ae;
}

#fyroot input::placeholder {
  color: var(--faint);
  opacity: 1;
}

#editeur .fdemo-field-label,
#editeur .fdemo-preview-caption {
  display: block;
  font-size: 12px !important;
  line-height: 1.5;
  letter-spacing: 0 !important;
}

#editeur .fdl-ed-controls input[type="text"],
#editeur .fdemo-mail input[type="email"] {
  font-size: 16px !important;
}

#editeur .fdl-ed-controls input[type="color"] + span > span:last-child,
#editeur .fdemo-kicker,
#editeur .fdemo-note,
#top .fhero-controls button[aria-pressed],
#top .fidlify-wallet-ready,
#fidlify-pricing .fpr-per,
#fidlify-pricing .fpr-note,
#fidlify-pricing .fpr-badge,
#fidlify-pricing .fpr-trust,
#fidlify-customer-stories .fcs-category,
#fidlify-customer-stories .fcs-example-note,
#fidlify-customer-stories .fcs-gallery-disclaimer,
#fidlify-footer .ffo-bottom {
  font-size: 12px !important;
  line-height: 1.5;
  letter-spacing: 0 !important;
}

#fyroot #fidlify-dashboard-stats .fds-step-tag {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
}

#cta > div > div > div:last-child {
  font-size: 12px !important;
  line-height: 1.5;
  letter-spacing: 0 !important;
}

#editeur .fdemo-feedback[data-error="true"] {
  color: #ad3028;
}

#editeur .fdemo-color-fields {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
}

@media (max-width: 420px) {
  #editeur .fdemo-segments {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px !important;
  }

  #editeur .fdemo-segments > div {
    padding: 10px 8px !important;
    text-align: center;
  }
}

#fyroot[data-fy="dark"] #editeur .fdemo-feedback[data-error="true"] {
  color: #ffaca5;
}

/* Two contrasting rings stay discernible on lime, white and dark surfaces. */
#fyroot :is(a, button, input, summary, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px #0e1116 !important;
  scroll-margin-block: 100px 24px;
}

@media (forced-colors: active) {
  #fyroot :is(a, button, input, summary, [role="button"], [tabindex]):focus-visible {
    outline: 3px solid Highlight !important;
    box-shadow: none !important;
  }
}