.container {
  width:min(var(--container-max),calc(100% - 2 * var(--page-gutter)));
  margin-inline:auto
}
.section {
  padding-block:var(--space-8);
  border-bottom:1px solid rgb(219 227 236 / .72)
}
.section--soft {
  background:var(--color-bg-soft)
}

.section-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem;
  margin-bottom:2rem
}
.section-head>div {
  max-width:48rem
}
.section-head p {
  color:var(--color-muted);
  margin-top:1rem
}
.section-head .text-link {
  flex-shrink:0
}

.grid {
  display:grid;
  gap:1.5rem
}
.grid--2,.grid--3,.grid--4 {
  grid-template-columns:1fr
}
.split {
  display:grid;
  gap:2.5rem;
  align-items:start
}
.reading {
  max-width:var(--content-max)
}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  align-items:center;
  margin-top:2rem
}

.hero {
  padding-block:3rem 4rem;
  background:var(--color-bg-soft);
  border-bottom:1px solid var(--color-border)
}
.hero .eyebrow {
  margin-bottom:1.25rem
}
.hero h1 {
  max-width:55rem
}
.hero .lead {
  max-width:46rem
}
.breadcrumb {
  font-size:var(--font-size-sm);
  color:var(--color-muted);
  margin-bottom:2rem
}
.breadcrumb a {
  color:inherit
}

.card {
  padding:1.75rem;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  min-width:0;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}
.card:hover {
  transform:translateY(-.2rem);
  box-shadow:var(--shadow-card);
  border-color:#c5d5e6
}
.card p {
  color:var(--color-muted);
  margin-top:1rem
}
.card .number {
  display:block;
  color:var(--color-link);
  font-size:var(--font-size-sm);
  font-weight:700;
  margin-bottom:1.5rem
}
.card--link {
  display:flex;
  flex-direction:column
}
.card--link .text-link {
  margin-top:auto;
  padding-top:1.5rem
}
.card--link p {
  margin-bottom:1rem
}

/* Ready for owner-approved course and training images. */
.media-wall {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem
}
.media-wall__item {
  overflow:hidden;
  border-radius:var(--radius-md);
  background:var(--color-surface-tint);
  box-shadow:var(--shadow-sm)
}
.media-wall__item img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
.media-wall__item--tall {
  grid-row:span 2
}

.band {
  padding:2rem;
  border-radius:var(--radius-lg);
  background:var(--color-primary);
  color:white
}
.band h2,.band h3 {
  color:white
}
.band p {
  color:#dbe3ec;
  margin-top:1rem
}
.band .eyebrow {
  color:#dbe3ec
}
.band .button--primary {
  background:white;
  color:var(--color-primary);
  border-color:white
}
.band .button--secondary {
  border-color:#dbe3ec;
  color:white;
  background:transparent
}
.band a:not(.button) {
  color:white
}

.pill {
  display:inline-block;
  padding:.3rem .8rem;
  border:1px solid var(--color-border);
  border-radius:2rem;
  font-size:var(--font-size-sm);
  color:var(--color-muted)
}
.pill-list {
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top:1.5rem
}
.check-list {
  list-style:none;
  padding:0
}
.check-list li {
  padding-left:1.7rem;
  position:relative
}
.check-list li::before {
  content:'✓';
  position:absolute;
  left:0;
  color:var(--color-link);
  font-weight:700
}

.steps {
  list-style:none;
  padding:0;
  counter-reset:step;
  display:grid;
  gap:0
}
.steps li {
  counter-increment:step;
  display:grid;
  grid-template-columns:2.5rem 1fr;
  gap:1rem;
  padding:1.2rem 0;
  border-bottom:1px solid var(--color-border);
  margin:0
}
.steps li::before {
  content:counter(step,decimal-leading-zero);
  color:var(--color-link);
  font-size:var(--font-size-sm);
  font-weight:700
}
.steps strong {
  display:block
}
.steps p {
  color:var(--color-muted);
  margin-top:.3rem
}

.faq {
  border-top:1px solid var(--color-border)
}
.faq details {
  padding:1.2rem 0;
  border-bottom:1px solid var(--color-border)
}
.faq summary {
  font-weight:700;
  color:var(--color-primary);
  cursor:pointer;
  padding-right:1rem
}
.faq details p {
  color:var(--color-muted);
  padding:1rem 1.4rem 0 0;
  max-width:var(--content-max)
}

.price {
  display:block;
  font-size:clamp(2.5rem,5vw,4rem);
  line-height:1.1;
  font-weight:700;
  letter-spacing:-.04em;
  margin-block:1rem;
  color:var(--color-primary)
}
.price small {
  font-size:1rem;
  font-weight:400;
  letter-spacing:0
}
.band .price {
  color:white
}
.comparison {
  width:100%;
  border-collapse:collapse;
  text-align:left
}
.comparison th,.comparison td {
  padding:1.2rem;
  border-bottom:1px solid var(--color-border);
  vertical-align:top
}
.comparison thead {
  background:var(--color-bg-soft)
}
.table-wrap {
  overflow:auto;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md)
}
.table-wrap table {
  min-width:38rem
}

@media(min-width:768px) {
  .grid--2,.grid--4 {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.grid--3 {
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.split {
  grid-template-columns:1fr 1fr
}
.hero {
  padding-block:4rem 5rem
}
.band {
  padding:3rem
}
  .section {
  padding-block:5rem
}
.media-wall {
  grid-template-columns:1.15fr .85fr .85fr
}

}

@media(min-width:1024px) {
  .grid--4 {
  grid-template-columns:repeat(4,minmax(0,1fr))
}
.split--wide {
  grid-template-columns:1.2fr 1fr
}

}

@media(max-width:767px) {
  .section-head {
  align-items:flex-start;
  flex-direction:column;
  gap:0
}
.section-head .text-link {
  margin-top:1rem
}
.card {
  padding:1.4rem
}
.band {
  padding:1.5rem
}
.actions>.button {
  width:100%
}
.card:hover {
  transform:none
}

}