/* ============================================================================
   Free Website Audit — yellow card, halftone infinity, frosted labels.
   ========================================================================= */

.audit { background: var(--bg); }

.audit__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  gap: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  max-width: 88rem;
  margin: 0 auto;
  padding: clamp(1.75rem, 1rem + 3.5vw, 4.5rem) clamp(1.35rem, 0.75rem + 3.5vw, 4.5rem);
  border-radius: var(--r-2xl);
  background: var(--yellow-300);
}
/* Side by side only from 1100px. At 1024 the visual was ~430px wide and the
   four labels, which cannot shrink below their text, collided in pairs and
   covered a fifth of the photo. Below that the card stacks and the visual
   gets the full width, capped so it does not balloon on a tablet. */
@media (min-width: 1100px) {
  .audit__card { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
}
@media (max-width: 1099px) {
  .audit__visual { width: 100%; max-width: 44rem; margin-inline: auto; }
}

/* --- Copy ----------------------------------------------------------------- */

.audit__copy { min-width: 0; }

/* Two weights in one line, as the design sets it: the offer heavy, the
   audience regular. Sized so the whole line fits the copy column at desktop
   widths; `balance` split it into two even halves ("Free Website / Audit for
   everyone") even where it would fit, so it wraps normally instead. */
.audit__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 1.15rem + 1.2vw, 2.1rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  text-wrap: pretty;
}
.audit__title strong { font-weight: 700; }

.audit__body {
  margin: 0.85rem 0 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-800);
}

.audit__points {
  display: grid;
  justify-items: start;
  gap: 0.6rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}
.audit__point {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: min(20.5rem, 100%);
  max-width: 100%;
  padding: 0.6rem 1.3rem 0.6rem 0.7rem;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: 0 6px 18px -12px rgba(80, 80, 0, .35);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-800);
}
.audit__check { flex: none; color: var(--blue-500); }

.audit__tagline {
  margin: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.audit__cta { margin-top: 1.1rem; }

/* --- Visual --------------------------------------------------------------- */

.audit__visual {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 10.5;
}

/* The loop spans a little past the visual on both sides, as the design lets
   it; the card's own overflow clips it at the card edge. */
.audit__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 116%;
  height: auto;
  translate: -50% -50%;
  pointer-events: none;
}

.audit__photo {
  position: absolute;
  z-index: 1;
  top: 11%;
  bottom: 7%;
  left: 23%;
  right: 23%;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--blue-200) 0%, #fff 55%, var(--yellow-200) 100%);
  box-shadow: 0 26px 50px -26px rgba(60, 60, 0, .45);
}
.audit__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Frosted labels ------------------------------------------------------- */

.audit__chip-pos { position: absolute; z-index: 2; }
.audit__chip-pos--1 { top: 0; left: 5%; }
.audit__chip-pos--2 { top: 20%; right: 0; }
.audit__chip-pos--3 { bottom: 9%; left: 7%; }
.audit__chip-pos--4 { bottom: 0; right: 9%; }

.audit__chip {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: 14rem;
  padding: 0.7rem 0.7rem 0.7rem 1rem;
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .5) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px -18px rgba(60, 60, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .7);
  animation: audit-float 5.5s ease-in-out infinite alternate;
  animation-delay: var(--beat, 0s);
}
.audit__chip-text {
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-900);
}
.audit__chip-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9px;
  background: var(--blue-500);
  color: #fff;
  box-shadow: 0 8px 16px -8px rgba(35, 105, 210, .7);
}
@keyframes audit-float {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -8px, 0); }
}

/* Narrow: a taller stage so four labels and the photo do not collide, with
   the labels scaled down to match. */
@media (max-width: 599px) {
  .audit__visual { aspect-ratio: 4 / 4.6; }
  .audit__ring { width: 150%; }
  .audit__photo { top: 17%; bottom: 17%; left: 16%; right: 16%; }
  .audit__chip-pos--1 { top: 2%; left: 0; }
  .audit__chip-pos--2 { top: 24%; right: 0; }
  /* High enough to clear label 4 below it: both run most of the card's width
     at this size, so they have to separate vertically. */
  .audit__chip-pos--3 { bottom: 28%; left: 0; }
  .audit__chip-pos--4 { bottom: 1%; right: 0; }
  .audit__chip { gap: 0.55rem; max-width: 10.5rem; padding: 0.5rem 0.5rem 0.5rem 0.7rem; }
  .audit__chip-text { font-size: var(--fs-xs); }
  .audit__chip-icon { width: 2.1rem; height: 2.1rem; }
  .audit__chip-icon svg { width: 17px; height: 17px; }
  .audit__point { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .audit__chip { animation: none; }
}