/* The home page: a charcoal hero with a picture of the idea, three plain steps, and one last way in. */
.page.page--home { max-width: none; margin: 0; padding: 0; animation: none; }

.hero { background: var(--charcoal); color: var(--white); overflow: hidden; }
.hero__inner { max-width: 1000px; margin: 0 auto; padding: var(--s6) var(--s3) var(--s6); display: grid; gap: var(--s5); align-items: center; }
.hero h1 { color: var(--white); font-size: 36px; line-height: 44px; margin-bottom: var(--s3); }
.hero__lede { font-size: 18px; line-height: 28px; color: var(--text-2-dark); margin-bottom: var(--s4); max-width: 34em; }
.hero__actions { display: grid; gap: var(--s3); justify-items: start; }
.hero__meta { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-2-dark); }
.hero__art img { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }

.home-section { padding: var(--s6) 0 0; }
.home-section--end { padding-bottom: 0; }
.home-section__inner { max-width: 1000px; margin: 0 auto; padding: 0 var(--s3); }
.home-section h2 { margin-top: 0; }

.how { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s3); }
.how__item { padding: var(--s4); background: var(--white); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-1); }
.how__item h3 { margin: var(--s3) 0 var(--s2); font-size: 20px; line-height: 28px; font-weight: 600; text-wrap: balance; }
.how__item p { margin: 0; color: var(--text-2); }
.how__num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-tile); background: var(--blue-tint); color: var(--charcoal); font-size: 20px; font-weight: 600; }

.home-cta { display: grid; gap: var(--s4); align-items: center; padding-top: var(--s5); padding-bottom: var(--s5); }
.home-cta h2 { margin-bottom: var(--s2); }
.home-cta .muted { margin: 0; }

@media (min-width: 768px) {
  .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); padding: var(--s7) var(--s3); }
  .hero h1 { font-size: 48px; line-height: 56px; }
  .how { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-cta { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Angle support line, the sample estimate, the reasons and how we work. Colours from tokens only. */
.hero__support { margin: 0 0 var(--s4); color: var(--text-2-dark); max-width: 34em; }

.sample { max-width: 640px; margin-top: var(--s4); padding: var(--s4); background: var(--white); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-1); }
.sample__label { display: inline-block; margin: 0 0 var(--s3); padding: var(--s1) var(--s2); font-size: 14px; line-height: 20px; font-weight: 600; background: var(--yellow-tint); border-radius: var(--r-control); }
.sample__rows { margin: 0; }
.sample__rows > div { display: grid; gap: var(--s1); padding: var(--s2) 0; border-bottom: 1px solid var(--border); }
.sample__rows dt { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-2); }
.sample__rows dd { margin: 0; }
.sample__note { margin: var(--s3) 0 0; }

.why { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s3); }
.why__item { display: grid; gap: var(--s1); padding-left: var(--s3); border-left: 4px solid var(--blue); }
.why__item span { color: var(--text-2); }

.steps-list { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s3); }
.steps-list__item { display: flex; gap: var(--s3); align-items: flex-start; }
.steps-list__num { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-control); background: var(--blue-tint); font-weight: 600; }
.steps-list__item p { margin: var(--s1) 0 0; color: var(--text-2); }

@media (min-width: 768px) {
  .why { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
}