/* Shared typography for the live page. Device demos retain their own UI scale. */
:root {
  --logo-orange: #fd5b05;
  --fs-section: clamp(40px, 5vw, 72px);
  --type-card: 22px;
  --type-body: 17px;
  --type-secondary: 15px;
  --type-eyebrow: 17px;
  --type-button: 17px;
  --type-heading-leading: 0.95;
  --type-heading-tracking: -0.01em;
  --type-body-leading: 1.6;
  --type-eyebrow-tracking: 0.1em;
  --space-eyebrow-heading: 12px;
  --space-heading-copy: 24px;
  --space-paragraph: 16px;
  --space-copy-action: 24px;
  --reading-width: 62ch;
}

/* The shared H2 rules also override legacy section-specific media queries. */
body
  :is(
    .main-title,
    .main-use-cases__title,
    .solutions-explorer__title,
    .commercial-case__title,
    .section__title__advisory,
    .solution__result-banner__text
  ) {
  font-family: var(--font-heading);
  font-size: var(--fs-section) !important;
  font-weight: 700;
  line-height: var(--type-heading-leading) !important;
  letter-spacing: var(--type-heading-tracking);
  text-transform: uppercase;
  max-width: 100%;
  margin-top: 0;
  margin-bottom: var(--space-heading-copy);
}
body .hero__section_inner {
  container-type: inline-size;
}
body .hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: var(--type-heading-tracking);
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-wrap: normal;
  animation-name: hero-enter;
}
@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
body .hero__title > :is(.hero-line--large, .hero-line--small) {
  /* Conservative no-JS/font-loading fallback; measured sizing takes over. */
  font-size: var(--hero-fit-font-size, min(var(--hero-font-size), 13cqw));
  white-space: nowrap;
}
body .hero__title .matrix-cursor {
  font-size: inherit;
}
body .hero__title > .hero-size-probe {
  position: absolute;
  display: inline-block;
  visibility: hidden;
  pointer-events: none;
  width: max-content;
  max-width: none;
  white-space: nowrap;
  font-size: var(--hero-font-size);
}

/* Section eyebrows use the logo orange, independently of body-copy themes. */
body
  :is(
    .top-label,
    .main-use-cases__eyebrow,
    .solutions-explorer__eyebrow,
    .advisor-eyebrow,
    .solution__result-banner__label,
    .section-label,
    .section__label__patents,
    .solution-detail__category
  ) {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: var(--space-eyebrow-heading);
}
body
  :is(
    .top-label,
    .main-use-cases__eyebrow,
    .solutions-explorer__eyebrow,
    .advisor-eyebrow,
    .section__label__patents
  ) {
  color: var(--logo-orange);
}
/* Deviatiq keeps its magenta product identity, including the section eyebrow. */
body .commercial-case--fraud .top-label {
  color: var(--product-ink);
}
/* Keep white labels on coral backgrounds and product accents in body copy. */
body :is(.solution__result-banner__label, .section-label) {
  color: #fff;
}
body .commercial-case__copy .top-label {
  margin-bottom: var(--space-eyebrow-heading);
}

body
  :is(
    .use-case-card__title,
    .patent-card h3,
    .advisor-card h3,
    .solution-detail__title
  ) {
  font-family: var(--font-body);
  font-size: var(--type-card);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
}
body .milestone-two .use-case-card__title {
  font-size: var(--type-card);
  font-weight: 700;
  line-height: 1.25;
  min-height: 0;
  margin-bottom: 12px;
}
body .advisor-card h3 {
  text-transform: none;
}
body .solution-detail__title {
  margin-top: 0;
  margin-bottom: 0;
}
/* Compact the two-line detail heading without changing other section eyebrows. */
body .solution-detail__category {
  margin-bottom: 4px;
}
body .solution-category__name {
  font-weight: 700;
}

body
  :is(
    .description,
    .description p,
    .main-use-cases__intro,
    .solutions-explorer__intro,
    .commercial-case__copy p,
    .expertise-support,
    .section__lead__patents,
    .patent-card p,
    .advisor-card p,
    .use-case-card__description,
    .solution-detail__summary p,
    .solution-detail__benefits li,
    .solutions-explorer__hint,
    .footer__tagline,
    .footer__links a
  ) {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--type-body-leading);
  letter-spacing: 0;
  text-transform: none;
}
body .milestone-two .use-case-card__description {
  line-height: var(--type-body-leading);
}
body .advisor-card p:first-of-type {
  font-weight: 400;
}
body :is(.description, .commercial-case__copy) strong {
  font-weight: 700;
}
#duoinput .description strong,
#id24 .description strong {
  color: var(--product-ink);
}
body
  :is(
    .description,
    .commercial-case__copy p,
    .main-use-cases__intro,
    .solutions-explorer__intro,
    .section__lead__patents
  ) {
  max-width: min(100%, var(--reading-width));
}
body
  :is(
    .main-use-cases__intro,
    .solutions-explorer__intro,
    .section__lead__patents
  ) {
  margin-top: 0;
}
body .description {
  gap: var(--space-paragraph);
  margin-bottom: var(--space-copy-action);
}
body .description .dark {
  gap: var(--space-paragraph);
}
body .commercial-case__copy p {
  margin-bottom: var(--space-paragraph);
}
body .commercial-case__copy p:last-child {
  margin-bottom: 0;
}
body .commercial-case__copy .top-label {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  margin-bottom: var(--space-eyebrow-heading);
}
body .commercial-case__closing {
  margin-top: var(--space-copy-action);
}
body .patent-card p {
  margin-top: 12px;
}
body .advisor-card p + p {
  margin-top: 0;
  padding-top: var(--space-paragraph);
}
body .use-case-tags li,
body .milestone-two .solution-category__name small {
  font-size: var(--type-body);
}
body .footer__bottom {
  font-size: var(--type-secondary);
  line-height: 1.5;
}

body
  :is(
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-explore,
    .btn-d2group,
    .detail-product-link,
    .use-case-read-more
  ) {
  font-family: var(--font-body);
  font-size: var(--type-button);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body :is(.btn, .btn-primary, .btn-secondary, .btn-explore, .btn-d2group) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  white-space: normal;
  text-align: center;
}
body .detail-product-link {
  margin-top: var(--space-copy-action);
}
body .patent-card > span {
  font-family: var(--font-body);
  font-size: var(--type-secondary);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Offset the frame, not the text: frame border + accent + padding = gutter. */
body :is(#duoinput, #id24) .glass-panel {
  margin-left: calc(0px - var(--container-padding));
}
body :is(#duoinput, #id24) .inner__container {
  margin-left: 0;
  border-left-width: 4px !important;
  padding-left: calc(var(--container-padding) - 5px) !important;
}
body :is(.solution-detail__body h4, .footer__col-title) {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 700;
  line-height: 1.4;
}
body :is(#duoinput, #id24) .main-title {
  max-width: 100%;
}

/* Device controls share the body font rather than an unloaded fallback family. */
.signature-output {
  /* Fit all nine allowed characters inside the keyboard-aligned input. */
  font-size: min(
    clamp(1rem, 3.2vh, 1.8rem),
    calc((5 * var(--key-size) + 4 * var(--key-gap)) / 9)
  );
}
.signature-context-note,
.signature-caption,
.screen-button {
  font-family: var(--font-body);
}

/* Client-requested policy: preserve all normal animation/transition durations
   regardless of the device's reduced-motion preference. */

/* Suspend signature/scan effects during manual input and while the tab is hidden. */
body
  .signature-usecase-animation[data-demo-paused="true"]
  .signature-stroke
  path,
body
  .signature-usecase-animation[data-demo-paused="true"]
  .signature-screen::after {
  animation-play-state: paused !important;
}