/* ===================================================================
   components.css — CTA button, product strip, reviews, FAQ accordion
   Spec: lander-build-prompt_v1.md §3 (7,8,9,10)
   =================================================================== */

/* ---- CTA button ---- */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  font-size: var(--fs-cta);
  font-weight: 600;
  text-decoration: none;
  padding: 16px 32px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background .18s ease;
}
.cta:hover, .cta:focus-visible { background: var(--navy-hover); }
.cta:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.cta--lg { padding: 18px 44px; font-size: 17px; }
.cta--block { display: flex; width: 100%; }

/* ---- product strip ---- */
.product-lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0 0 24px;
}
.product {
  background: #fff;
  border: 1px solid var(--vet-border);
  border-radius: 16px;
  padding: 28px;
}
.product-photo {
  width: 100%;
  max-width: 320px;
  margin: 0 auto 20px;
}
.product-name {
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 16px;
}
.product-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.product-bullets li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 10px;
}
.product-bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--navy);
}
.product-note {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 18px;
  line-height: 1.55;
}
.product-price {
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 24px;
  line-height: 1.6;
}
.product-bullets li strong { font-weight: 600; }

/* ---- reviews (paragraph form, no stars) ---- */
.reviews { display: flex; flex-direction: column; gap: 16px; }
.review {
  background: var(--owner-bubble);
  border-radius: var(--radius-bubble);
  border-top-right-radius: 4px;
  padding: 18px 22px;
}
.review-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.review-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
}
.review-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-avatar.is-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.review-meta { display: flex; flex-direction: column; line-height: 1.3; }
.review-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.review-date { font-size: 12px; font-weight: 500; color: var(--muted); }

.review-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

/* optional attached cat photo on a review */
.review-photo { margin: 14px 0 0; max-width: 240px; }
.review-photo img { width: 100%; border-radius: var(--radius-photo); display: block; }
.review-photo-ph {
  width: 240px;
  max-width: 100%;
  min-height: 150px;
  border-radius: var(--radius-photo);
  background: repeating-linear-gradient(45deg, #EFEDE8, #EFEDE8 10px, #E7E4DE 10px, #E7E4DE 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  color: var(--muted);
}
.review-photo-ph .ph-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--vet-border);
  border-radius: 4px;
  padding: 2px 8px;
}

/* ---- urgency close ---- */
.close-cta { text-align: center; margin-top: 32px; }

/* ---- FAQ accordion ---- */
.faq { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item:first-child { border-top: 1px solid var(--rule); }
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 20px 36px 20px 0;
  position: relative;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}
.faq-q::after {
  content: "+";
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--muted);
  transition: transform .2s ease;
}
.faq-item.is-open .faq-q::after {
  content: "\2013"; /* en-dash */
}
.faq-q:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height .28s ease;
}
.faq-a-inner {
  padding: 0 0 20px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}
.faq-item.is-open .faq-a { max-height: 600px; }