/* Base layer.
   These are the live site's element-level rules, scoped to .aj-root so the
   library never restyles a host page's elements globally. They are NOT
   optional: without `a{text-decoration:none}` every Button renders underlined. */

.aj-root *{box-sizing:border-box;margin:0;padding:0}

.aj-root{
  font-family:var(--ff-body);
  color:var(--tx-on-light);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

:where(.aj-root) a{color:inherit;text-decoration:none}
:where(.aj-root) img{max-width:100%;display:block}
:where(.aj-root) button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
:where(.aj-root) canvas{display:block}
:where(.aj-root) ul,:where(.aj-root) ol{list-style:none}

:where(.aj-root) h1,:where(.aj-root) h2,:where(.aj-root) h3,:where(.aj-root) h4{
  font-family:var(--ff-display);
  font-weight:400;
  letter-spacing:-.022em;
  line-height:1.04;
  margin:0;
}
:where(.aj-root) p{margin:0}

/* Display type scale — the headline voice. */
.aj-display{font-family:var(--ff-display);font-weight:400;letter-spacing:-.022em;line-height:1.04;margin:0}
.aj-display--xl{font-size:clamp(2.4rem,5.2vw,4.2rem)}
.aj-display--lg{font-size:clamp(2rem,4vw,3.2rem)}
.aj-display--md{font-size:clamp(1.5rem,2.6vw,2.2rem)}
.aj-display--sm{font-size:clamp(1.2rem,1.8vw,1.5rem)}