/* Text roles are defined in typography.css. */
.onboarding-section{background:var(--white);scroll-margin-top:-2px}
.onboarding-heading h2{max-width:none}
.onboarding-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px;
  position:relative;
  list-style:none;
  margin:0;
  padding:0;
}
.onboarding-step{position:relative;min-width:0}
.onboarding-numeral-slot{display:flex;width:136px;height:122px;margin-bottom:22px;align-items:center}
.onboarding-numeral{display:inline-block;background:var(--white);padding:4px 12px 4px 0;color:var(--blue);font-size:72px;font-weight:700;line-height:1;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.onboarding-art{
  width:136px;
  height:122px;
  object-fit:contain;
  object-position:left center;
  margin-bottom:22px;
}
.onboarding-step h3{
  margin:0 0 var(--space-heading-item);
  color:var(--ink);
  
  
}
.onboarding-number{white-space:nowrap}
.onboarding-step p{margin:0;color:var(--muted);}
/* Preserve the original continuous wave with numerals on their column axes. */
@media(width>1100px){
  .onboarding-steps{--onboarding-numeral-width:84px}
  .onboarding-steps::before{
    content:"";
    position:absolute;
    inset:24px 0 auto;
    height:90px;
    background:url('/brand/onboarding-wave.png') center/100% auto no-repeat;
    clip-path:inset(0 calc(25% - 7px) 0 calc(var(--onboarding-numeral-width) + 14px));
    pointer-events:none;
  }
  .onboarding-numeral-slot{position:relative;width:100%;justify-content:flex-start}
  .onboarding-numeral{
    width:var(--onboarding-numeral-width);
    text-align:left;
    padding-right:0;
    box-shadow:0 0 0 14px var(--white);
  }
}
@media(width<=1100px){
  .onboarding-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px}
  .onboarding-art{width:136px;height:112px;margin-bottom:18px}
  .onboarding-numeral-slot{height:112px;margin-bottom:18px}
}
@media(width<=620px){
  .onboarding-steps{grid-template-columns:minmax(0,1fr);gap:32px}
  .onboarding-step{display:grid;grid-template-columns:76px minmax(0,1fr);gap:var(--space-heading-item) 18px;align-items:center}
  .onboarding-art{grid-column:1;grid-row:1;width:76px;height:76px;margin:0}
  .onboarding-numeral-slot{grid-column:1;grid-row:1;width:76px;height:76px;margin:0}
  .onboarding-numeral{font-size:48px;padding:0}
  .onboarding-step h3{grid-column:2;grid-row:1;margin:0;}
  .onboarding-step p{grid-column:1/-1}
}