/* Shared typographic patterns */

.eyebrow{font-family:var(--dd-font-ui);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(21,18,15,.45);margin-bottom:20px}
.eyebrow-dark{font-family:var(--dd-font-ui);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,248,244,.45);margin-bottom:20px}
.eyebrow-orange{font-family:var(--dd-font-ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dd-signal-4)}

.h1{font-family:var(--dd-font-display);font-weight:600;font-size:var(--dd-h1);line-height:1;letter-spacing:-.035em;margin:0 0 24px}
.h2{font-family:var(--dd-font-display);font-weight:600;font-size:var(--dd-h2);line-height:1.02;letter-spacing:-.032em;margin:0}
.h3{font-family:var(--dd-font-display);font-weight:600;font-size:var(--dd-h3);letter-spacing:-.02em;margin:0 0 12px}

.lede{font-size:19px;line-height:1.6;color:var(--dd-ink-soft);margin:0}
.lede-dark{font-size:19px;line-height:1.6;color:rgba(251,248,244,.68);margin:0}

.gradient-text{background:var(--dd-gradient-text);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.gradient-text-static{background:linear-gradient(120deg,var(--dd-signal-1),var(--dd-signal-4));-webkit-background-clip:text;background-clip:text;color:transparent}
.gradient-text-anim{background:linear-gradient(115deg,var(--dd-signal-1),var(--dd-signal-2),var(--dd-signal-4),var(--dd-signal-1));background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ddgradient 5s ease-in-out infinite}

/* Careers-page headings that share the exact clamp(38px,4vw,56px) base in the approved
   design are the only h2s that get a distinct, tighter mobile-only size (source rule
   matched that literal value, not every h2) — everything else just rides its own clamp(). */
.h2-compact{font-size:clamp(38px,4vw,56px)}

@media (max-width:560px){
  /* !important: several h1/h2 instances also carry an inline font-size (their normal,
     correct desktop value) which — being inline — would otherwise always beat this rule. */
  .h1{font-size:clamp(34px,9vw,50px)!important}
  .h2-compact{font-size:clamp(26px,7.4vw,40px)!important}
}