.welcome { max-width: 880px; margin-inline: auto; text-align: center; }
.welcome .rich p { max-width: 64ch; margin-inline: auto; }
.welcome .h2 { margin-bottom: clamp(20px, 2.6vw, 32px); }
.welcome > .lead { margin-bottom: 1em; }
.welcome > .rich:last-child { margin-bottom: 0; }
.ab { display: grid; grid-template-columns: minmax(0, 1.2fr) clamp(72px, 9vw, 124px) minmax(0, 1fr); margin-top: clamp(40px, 6vw, 80px); }
.welcome:empty + .ab { margin-top: 0; }
.ab__card { position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 3.6vw, 56px); border-radius: var(--r-card); }
.ab__card > .rich { margin-bottom: 1em; }
.ab__card > .rich:first-of-type > p:first-child { max-width: 34ch; }
.ab__card--a { background: var(--lilac); }
.ab__card--b { align-self: end; background: linear-gradient(155deg, var(--blush) 8%, var(--peach) 100%); box-shadow: var(--shadow-lg); }
.ab__card--b .btn { margin-top: 12px; }
.ab__glyph {
  position: absolute; z-index: -1; right: clamp(16px, 2.6vw, 40px); top: -.16em;
  font: italic 500 clamp(8rem, 14vw, 13.5rem) / 1 var(--font-d); color: #fff; opacity: .7; user-select: none;
}
.ab__lead { margin: 0 0 20px; color: var(--ink); font: 500 clamp(1.3rem, 2vw, 1.7rem) / 1.3 var(--font-d); }
.ab__lead strong { font-weight: 500; font-style: italic; color: var(--rose-deep); }
.ab__q { margin: 0 0 14px; color: var(--ink); font-weight: 700; }
.chips { display: grid; gap: 10px; }
.chips li {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px;
  border: 1px solid rgb(255 255 255 / .85); border-radius: 20px; background: rgb(255 255 255 / .62);
  color: var(--ink); line-height: 1.45;
}
.chips .ph { flex: none; margin-top: 2px; color: var(--rose-deep); font-size: 1.35rem; }
.ab__path { position: relative; min-height: 96px; color: var(--ink); }
.ab__path svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ab__path path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ab__path circle { fill: currentColor; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ab__path path { animation: draw linear both; animation-timeline: view(); animation-range: entry 35% cover 52%; }
  }
}

@media (max-width: 1023px) {
  .ab { grid-template-columns: 1fr; }
  .ab__path { height: 96px; }
}
@media (max-width: 767px) {
  .welcome { text-align: left; }
  .welcome .rich p { margin-inline: 0; }
}