.c-home-control {
  padding: var(--wa-space-l);

  @media (width >= 64rem) {
    padding: var(--wa-space-3xl);
  }
}

.c-home-control__inner {
  width: 100%;
  margin-inline: auto;
}

.c-home-control__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wa-space-l);
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;

  /* Tablet: control panel spans the full width above two side-by-side quotes. */
  @media (width >= 48rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wa-space-xl);
    max-width: none;
  }

  /* Desktop: three equal columns in a single row. */
  @media (width >= 64rem) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--wa-space-xl);
    align-items: stretch;
  }
}

.c-home-control__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Drop the browser default <figure> margin on the quote panels. */
  margin: 0;
}

/* Control column: sits directly on the paper surface like the design. */
.c-home-control__assurance {
  @media (width >= 48rem) and (width < 64rem) {
    grid-column: 1 / -1;
  }
}

.c-home-control__title {
  /* In-page anchor target: keep the heading clear of the fixed site header. */
  scroll-margin-block-start: calc(var(--wr-site-header-height) + var(--wa-space-l));
  width: fit-content;
  margin: 0;
  color: var(--wr-color-text-primary);
  font-size: var(--wa-font-size-xl);
  font-weight: 900;
  line-height: var(--wa-line-height-condensed);
  text-transform: uppercase;
}

.c-home-control__title::after {
  content: "";
  display: block;
  inline-size: 65%;
  block-size: 0.4rem;
  margin-block-start: var(--wa-space-2xs);
  background: var(--wr-color-brand-secondary);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10'%3E%3Cpath d='M3 7C50 3 150 2 197 5' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}

.c-home-control__points {
  display: grid;
  gap: var(--wa-space-l);
  margin: var(--wa-space-xl) 0 0;
  padding: 0;
  list-style: none;
}

.c-home-control__point {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--wa-space-m);
  align-items: start;
  min-width: 0;
}

.c-home-control__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  color: var(--wr-color-text-primary);
  font-size: 1.5rem;
  line-height: 1;
}

.c-home-control__point-copy {
  display: grid;
  gap: var(--wa-space-3xs);
  min-width: 0;
}

.c-home-control__point-title {
  margin: 0;
  color: var(--wr-color-text-primary);
  font-family: var(--wa-font-family-body);
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-bold);
  letter-spacing: 0.04em;
  line-height: var(--wa-line-height-condensed);
  text-transform: uppercase;
}

.c-home-control__point-body {
  margin: 0;
  color: var(--wr-color-text-muted);
  font-size: var(--wa-font-size-s);
  line-height: var(--wa-line-height-normal);
  text-wrap: pretty;
}

.c-home-control__link {
  /* Plain link rendered in the brand secondary (teal) to match the design;
     the paper section's default brand is the primary (olive) tone. */
  --wa-color-brand-on-quiet: var(--wa-color-wr-secondary-30);
  --wa-color-brand-on-normal: var(--wa-color-wr-secondary-20);

  align-self: start;
  margin-block-start: var(--wa-space-l);
}

/* Quote columns: raised cards on the paper surface, as in the design. */
.c-home-control__quote {
  gap: var(--wa-space-s);
  padding: var(--wa-space-l);
  border-radius: var(--wa-border-radius-m);
  background-color: var(--wr-color-surface-raised);
  box-shadow: var(--wa-shadow-s);

  @media (width >= 64rem) {
    padding: var(--wa-space-xl);
  }
}

.c-home-control__quote-mark {
  color: var(--wr-color-brand-secondary);
  font-size: 2.75rem;
  line-height: 1;
}

.c-home-control__quote-text {
  /* Reset WebAwesome's native blockquote rule/indent; the quote mark leads here.
     Grow to push the attribution to the bottom of the card. */
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  border: 0;
}

.c-home-control__quote-text p {
  /* WebAwesome's native blockquote uses a serif; keep the app's body font. */
  margin: 0;
  color: var(--wr-color-text-primary);
  font-family: var(--wa-font-family-body);
  font-size: var(--wa-font-size-m);
  font-style: italic;
  line-height: var(--wa-line-height-normal);
  text-wrap: pretty;
}

/* Blank-line separator between the two parts of a quote. */
.c-home-control__quote-text p + p {
  margin-block-start: var(--wa-space-m);
}

.c-home-control__quote-author {
  display: grid;
  gap: var(--wa-space-3xs);
  margin-block-start: var(--wa-space-l);
}

.c-home-control__quote-name {
  color: var(--wr-color-text-primary);
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-bold);
}

.c-home-control__quote-location {
  color: var(--wr-color-text-muted);
  font-size: var(--wa-font-size-s);
  line-height: var(--wa-line-height-normal);
}