.introduction-hero {
  padding-block:76px 72px;
  background:var(--paper);
}

.introduction-hero-copy {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  align-items:end;
  gap:60px;
}

.introduction-hero h1 {
  font-size:clamp(42px,4.2vw,64px);
}

.introduction-hero-copy>p {
  font-size:21px;
  line-height:1.75;
}

.introduction-journey {
  list-style:none;
  padding:0;
  margin:0;
}

.introduction-journey>li {
  display:grid;
  grid-template-columns:48px minmax(0,1fr) minmax(0,.96fr);
  align-items:start;
  column-gap:40px;
  position:relative;
  padding-bottom:96px;
}

.introduction-journey>li:last-child {
  padding-bottom:0;
}

.introduction-journey>li:not(:last-child)::before {
  content:"";
  position:absolute;
  width:1px;
  background:var(--line);
  top:60px;
  bottom:12px;
  left:24px;
}

.introduction-step-number {
  position:relative;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1px solid var(--accent-light);
  border-radius:50%;
  background:white;
  color:var(--accent);
  font-size:16px;
  font-weight:700;
}

.introduction-step-copy {
  padding-top:4px;
}

.introduction-step-copy .eyebrow {
  margin-bottom:17px;
}

.introduction-step-copy h2 {
  font-size:clamp(32px,3.1vw,42px);
  margin-bottom:25px;
}

.introduction-step-copy>p:not(.eyebrow) {
  font-size:19px;
  line-height:1.7;
}

.introduction-reassurance {
  margin-top:25px;
  padding-left:17px;
  border-left:2px solid var(--accent-light);
  font-size:17px;
  font-weight:700;
}

.introduction-advantage {
  align-self:center;
  width:100%;
}

.introduction-advantage>.icon-tile {
  margin-bottom:28px;
}

.introduction-advantage h3 {
  line-height:1.25;
}

.introduction-advantage>p:not(.eyebrow) {
  margin-top:18px;
  font-size:17px;
  line-height:1.65;
}

.introduction-faq {
  border-top:1px solid var(--line);
}

@media(max-width:1100px) {
  .introduction-hero-copy { gap:35px; }
  .introduction-journey>li { column-gap:25px; }
  .introduction-advantage { padding:32px; }
}

@media(max-width:900px) {
  .introduction-hero { padding-block:58px; }
  .introduction-hero-copy { grid-template-columns:1fr; gap:25px; }
  .introduction-hero h1 { font-size:clamp(42px,6.3vw,58px); }
  .introduction-hero-copy>p { max-width:660px; font-size:20px; }
  .introduction-journey>li { grid-template-columns:48px minmax(0,1fr); gap:25px 30px; padding-bottom:65px; }
  .introduction-advantage { grid-column:2; max-width:500px; }
  .introduction-step-copy>p:not(.eyebrow) { max-width:660px; }
}

@media(max-width:640px) {
  .introduction-hero { padding-block:44px; }
  .introduction-hero-copy { gap:24px; }
  .introduction-hero h1 { font-size:clamp(36px,9.3vw,48px); }
  .introduction-hero-copy>p { font-size:18px; line-height:1.65; }
  .introduction-journey>li { grid-template-columns:34px minmax(0,1fr); gap:23px 18px; padding-bottom:55px; }
  .introduction-step-number { width:34px; height:34px; font-size:13px; }
  .introduction-journey>li:not(:last-child)::before { left:17px; top:45px; }
  .introduction-step-copy { padding-top:2px; }
  .introduction-step-copy h2 { font-size:31px; margin-bottom:20px; }
  .introduction-step-copy>p:not(.eyebrow) { font-size:17px; line-height:1.65; }
  .introduction-reassurance { font-size:16px; padding-left:13px; }
  .introduction-advantage { padding:24px; }
  .introduction-advantage>.icon-tile { margin-bottom:24px; }
  .introduction-advantage>p:not(.eyebrow) { font-size:16px; }
}
