/* Grizzly Beam — /free-website-audit/ (spec: specs/free-website-audit-build-spec.md)
   The form reuses the .wpa__* classes; .pill--ink lives in core.css (brand book rev2). */

/* ---------- 1 · Hero ---------- */
.aud-hero { display: flex; align-items: center; justify-content: center; }
/* ---------- 2 · What you get ---------- */
.aud-get { background: var(--paper); color: var(--ink); padding-block: 9rem 5rem; }
.aud-get__head { text-align: center; }
.aud-get__eyebrow { color: var(--tx-g); }
.aud-get__title {
  font-size: 3.2rem; line-height: 1.05; letter-spacing: -0.005em; font-weight: var(--w-h2);   /* brand: H2 */
  margin-top: 1.5rem;
}
.aud-get__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.6rem 3.2rem; margin-top: 4.4rem; align-items: stretch; grid-auto-rows: 1fr;   /* all items as tall as the tallest, so the bars are the same length */ }
.aud-card {
  position: relative;
  padding-top: 1.6rem; padding-left: 1.4rem;
  will-change: transform, opacity;
}
.aud-card::before {
  content: ""; position: absolute; left: 0; top: 1.6rem; width: 3px;
  height: calc(100% - 1.6rem);
  background: var(--accent);
}
.aud-card__title { font-size: 2.1rem; line-height: 1.25; font-weight: var(--w-h3); }   /* brand: H3 */
.aud-card__desc { color: var(--tx-g); margin-top: 1rem; max-width: 30rem; }

/* ---------- 3 · Form ---------- */
.aud-form { background: linear-gradient(0deg, var(--stone2) 0%, var(--paper) 100%); color: var(--ink); padding-block: 5rem 9rem; }
.aud-form__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 6rem; align-items: start; }
.aud-form__title { font-size: 3.2rem; line-height: 1.05; letter-spacing: -0.005em; font-weight: var(--w-h2); }
.aud-form__form { margin-top: 0; width: 100%; max-width: 46rem; }
.aud-check { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; cursor: pointer; }
.aud-check input { width: 1.3rem; height: 1.3rem; accent-color: var(--accent);   /* §07: form control, amber state */ }
.aud-check .body { color: var(--tx-g); }
.aud-submit { margin-top: 2.4rem; }

/* ---------- 4 · Why trust the read (ink) ---------- */
/* Backdrop: the same beam field as "Our services" on the home page. Markup is
   components/BeamField.astro, styles (.hs__bg/.hsbg*) live in core.css, so nothing is
   duplicated here — the section only has to become the positioning context and clip
   the beams, exactly like .hs does in home.css.

   No wrapper needed: .aud-why is a single ink block between .aud-form (light) above and
   .aud-strip (light) below, so the field's hard bottom edge lands where the dark ends. */
.aud-why { position: relative; overflow: clip; background: var(--ink); color: var(--tx-l); padding-block: 9rem; }
.aud-why__ctr { position: relative; z-index: 1; }
.aud-why__eyebrow { color: rgba(236, 232, 225, 0.65); }
.aud-why__body {
  font-family: var(--f-body);
  font-size: 2.53rem; line-height: 1.35; letter-spacing: -0.005em; font-weight: var(--w-h2);   /* statement scale */
  color: var(--tx-l); max-width: 56rem; margin-top: 2rem;
}
.aud-why__cta { margin-top: 3rem; }

/* ---------- 5 · Reassurance strip ---------- */
.aud-strip { background: var(--paper); color: var(--ink); padding-block: 3rem; border-top: 1px solid rgba(22, 24, 28, 0.1); }
.aud-strip__row { display: flex; justify-content: center; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.aud-strip__row .micro { color: var(--tx-g); }
.aud-strip__dot { color: var(--tx-g); }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .aud-get__grid { grid-template-columns: 1fr; gap: 3.4rem; }
  .aud-form__grid { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 767px) {
  .aud-get { padding-block: 6rem 3rem; }
  .aud-get__title, .aud-form__title { font-size: 2.6rem; }
  .aud-form { padding-block: 3rem 6rem; }
  .aud-why { padding-block: 6rem; }
  .aud-why__body { font-size: 2rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .aud-card { opacity: 1 !important; transform: none !important; }
  .aud-card::before { transition: none; }
}