/* ==========================================================================
   impact.html — Impact Beyond Recoil Reduction

   Started as dist/css/impact.css and tidied rather than kept byte-identical
   (.scratch/impact-beyond-page/spec.md): the signature slot and the image
   placeholders went with the export's TODOs, and the three inline `style`
   attributes the export's markup carried are rules here — `.impact-ruled` and
   the thank-you block's `.impact-prose__body`.
   ========================================================================== */

.impact-hero {
  padding: 150px 0 130px;
  text-align: center;
  border-bottom: 1px solid var(--color-divider);
}
.impact-hero__title {
  font-size: 112px;
  line-height: 0.95;
  letter-spacing: 0.01em;
}
.impact-hero__title-small { font-size: 0.8em; display: block; }
.impact-hero__title-accent { color: var(--color-accent); display: block; }
.impact-hero__lede {
  font-size: 22px;
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 32px auto 0;
}

/* Summary */
.impact-summary__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}
.impact-counter {
  min-width: 280px;
  padding: var(--space-5) var(--space-6);
  text-align: center;
}
.impact-counter p { margin: 0; }
.impact-counter__label,
.impact-counter__meta {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.impact-counter__total {
  font-family: var(--font-heading);
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
  margin: var(--space-3) 0 !important;
}
.impact-summary__title { font-size: 56px; line-height: 1; }
.impact-summary__sub {
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 16px 0 0;
}
.impact-summary__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.impact-cell { padding: 36px 32px; border-color: rgba(244, 241, 228, 0.18); }
.impact-cell__amount {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 64px;
  line-height: 1;
  color: var(--color-accent);
}
.impact-cell__title { font-size: 24px; margin: 18px 0 10px; }
.impact-cell__text { font-size: 16px; line-height: 1.6; color: var(--color-text-muted); margin: 0; }

/* Prose blocks */
.impact-prose { max-width: 720px; margin: 0 auto; }
.impact-prose__body { display: flex; flex-direction: column; gap: 22px; margin-top: 28px; }
.impact-prose__body p { font-size: 19px; line-height: 1.7; color: #e4e3d8; margin: 0; }

/* $5 bands */
.impact-band { border-top: 1px solid var(--color-divider); }
.impact-band__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
}
.impact-band__text { grid-column: 1 / span 7; }
.impact-band__figure {
  grid-column: 9 / span 4;
  align-self: start;
  margin: 76px 0 0;
  aspect-ratio: 4 / 5;
  border-color: rgba(244, 241, 228, 0.18);
}
.impact-band--reverse .impact-band__text { grid-column: 6 / span 7; text-align: right; }
.impact-band--reverse .impact-band__figure { grid-column: 1 / span 4; grid-row: 1; }
.impact-band__title { font-size: 48px; line-height: 1; margin: 0 0 28px; }
.impact-band__body { display: flex; flex-direction: column; gap: 20px; }
.impact-band__body p { font-size: 17px; line-height: 1.7; color: var(--color-text-muted); margin: 0; }
.impact-band__body .impact-band__closer { font-size: 20px; line-height: 1.6; color: var(--color-text); margin-top: 8px; }

/* Images */
.impact-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* A surface section ruled off from the one above it */
.impact-ruled { border-top: 1px solid var(--color-divider); }

/* More than products */
.impact-more__title { grid-column: 1 / span 5; font-size: 48px; line-height: 1; }
.impact-more__body { grid-column: 6 / span 7; display: flex; flex-direction: column; gap: 28px; }
.impact-more__body p { font-size: 17px; line-height: 1.7; color: var(--color-text-muted); margin: 0; }
.impact-more__list {
  margin: 0;
  padding: 0 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 17px;
  line-height: 1.6;
}

/* Thank you */
.impact-thanks { padding: 120px 0; border-top: 1px solid var(--color-divider); }
.impact-thanks__title { font-size: 56px; line-height: 1; margin: 0 0 32px; }
.impact-thanks .impact-prose__body { margin-top: 0; }
.impact-thanks__quote { margin: 64px 0 0; padding: 0; }
.impact-thanks__quote p {
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 44px;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
  text-align: center;
  color: var(--color-accent);
}
.impact-signoff { display: flex; align-items: center; gap: 32px; margin-top: 56px; }
.impact-signoff__portrait { width: 140px; height: 170px; flex: none; margin: 0; border-color: rgba(244, 241, 228, 0.18); }
.impact-signoff__meta { display: flex; flex-direction: column; gap: 10px; }
.impact-signoff__name { font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; font-size: 24px; }
.impact-signoff__role { font-size: 15px; line-height: 1.5; color: var(--color-text-muted); }

@media (max-width: 960px) {
  .impact-hero__title { font-size: 84px; }
  .impact-summary__grid { grid-template-columns: 1fr; }
  .impact-summary__head { grid-template-columns: 1fr; }
  .impact-counter { min-width: 0; }
  .impact-band__text,
  .impact-band--reverse .impact-band__text,
  .impact-more__title,
  .impact-more__body { grid-column: 1 / -1; text-align: left; }
  /* Not the export's, which recut the band figures to a wide 16 / 10 here and so
     cropped a portrait photo at its middle — taking the head off a photo of a
     person. The frame keeps its desktop 4 / 5 instead, capped and centered so a
     tablet is not handed a screen-high image. */
  .impact-band__figure,
  .impact-band--reverse .impact-band__figure { grid-column: 1 / -1; grid-row: auto; max-width: 420px; margin: 0 auto; }
  /* The one truly portrait photo is a touch taller than the 4 / 5 frame, so cover
     still shaves it top and bottom; keep the top, where the head is. */
  .impact-figure--top img { object-position: center top; }
  .impact-thanks__quote p { white-space: normal; }
}

@media (max-width: 760px) {
  .impact-hero { padding: 90px 0 80px; }
  .impact-hero__title { font-size: 56px; }
  .impact-hero__lede { font-size: 18px; }
  .impact-summary__title,
  .impact-thanks__title { font-size: 40px; }
  .impact-band__title,
  .impact-more__title { font-size: 36px; }
  .impact-thanks { padding: 72px 0; }
  .impact-thanks__quote p { font-size: 32px; }
  .impact-signoff { flex-direction: column; align-items: flex-start; }
}