/* ============================================================
   CONVERSION RATE AUDIT — rich landing page styles
   Builds on styles-new.css + styles-brand-invesp.css + the
   service-page styles. Scoped under body.audit-page.
   Sections: hero rank-eyebrow, testimonial cards, 6-week
   timeline, "what's included" lists, stats band, FAQ.
   ============================================================ */

/* ---------- Hero ---------- */
.audit-rank {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: hsl(263 82% 84%);
  background: hsl(0 0% 100% / .08);
  border: 1px solid hsl(0 0% 100% / .14);
  padding: 8px 16px; border-radius: 999px; margin-bottom: 24px;
}
.audit-rank .star { color: hsl(45 95% 62%); display: inline-flex; }
.audit-hero-headline .hl { color: hsl(263 82% 80%); }
.audit-principle {
  margin: 30px 0 0; padding-left: 22px;
  border-left: 3px solid hsl(263 75% 58%);
  max-width: 60ch;
}
.audit-principle .big { font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.audit-principle p { font-size: 16px; line-height: 1.6; color: hsl(220 30% 84%); margin: 0; }

/* ---------- Testimonial cards ---------- */
.tcard-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.tcard {
  display: flex; flex-direction: column; gap: 20px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  padding: 30px 28px;
}
.tcard-quote { font-size: 17px; line-height: 1.55; color: hsl(var(--foreground)); margin: 0; flex-grow: 1; letter-spacing: -.005em; }
.tcard-quote .em { color: hsl(263 60% 48%); font-weight: 600; font-style: normal; }
.tcard-by { display: flex; align-items: center; gap: 13px; }
.tcard-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display, inherit); font-weight: 700; font-size: 15px;
  color: #fff; background: hsl(231 48% 30%);
}
.tcard-name { font-weight: 600; font-size: 15px; color: hsl(var(--foreground)); }
.tcard-role { font-size: 13.5px; color: hsl(var(--muted-foreground)); margin-top: 2px; }
@media (max-width: 980px) { .tcard-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .tcard-grid { grid-template-columns: 1fr; } }

/* ---------- 6-week timeline (pill + arrow + card, matches live) ---------- */
.audit-timeline {
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: 40px; row-gap: 48px; margin-top: 8px;
}
.tl-week { display: flex; flex-direction: column; align-items: flex-start; }
.tl-pill {
  display: inline-flex; align-items: center;
  font-family: var(--font-display, inherit); font-weight: 700; font-size: 19px;
  color: #fff; background: hsl(231 52% 32%);
  padding: 12px 26px; border-radius: 999px; margin-left: 24px;
}
.tl-arrow { color: hsl(231 52% 32%); margin: 4px 0 4px 38px; display: inline-flex; }
.tl-card {
  align-self: stretch;
  background: hsl(225 30% 97%);
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  padding: 26px 28px;
}
.tl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.tl-list li {
  display: flex; align-items: flex-start; gap: 13px;
  font-size: 17px; line-height: 1.4; color: hsl(var(--foreground));
}
.tl-list li::before {
  content: ''; flex-shrink: 0; margin-top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  background: no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232f4ba0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E");
}
/* Week 6 — the deliverable — highlighted green */
.tl-week-final .tl-pill { background: hsl(152 58% 45%); }
.tl-week-final .tl-arrow { color: hsl(152 58% 45%); }
.tl-week-final .tl-card { background: hsl(152 52% 95%); border-color: hsl(152 40% 82%); }
.tl-week-final .tl-list li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231f9d5e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E");
}
@media (max-width: 900px) { .audit-timeline { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .audit-timeline { grid-template-columns: 1fr; } }

/* ---------- Two-column prose + included list ---------- */
.audit-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.audit-prose p { font-size: 18px; line-height: 1.65; color: hsl(var(--foreground) / .9); margin: 0 0 16px; }
.audit-prose p:last-child { margin-bottom: 0; }
.audit-prose .lead { font-size: 21px; font-weight: 500; letter-spacing: -.01em; color: hsl(var(--foreground)); }
.incl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.incl-list li {
  display: flex; align-items: flex-start; gap: 14px;
  font-size: 16.5px; line-height: 1.5; color: hsl(var(--foreground) / .9);
  padding: 16px 0; border-bottom: 1px solid hsl(var(--border));
}
.incl-list li:first-child { padding-top: 0; }
.incl-check {
  flex-shrink: 0; margin-top: 2px; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: hsl(263 75% 58% / .12); color: hsl(263 60% 48%);
}
@media (max-width: 880px) { .audit-split { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Stats band (Will it work for you) ---------- */
.audit-stats { display: flex; gap: 56px; flex-wrap: wrap; margin: 6px 0 36px; }
.audit-stat .n { font-family: var(--font-display, inherit); font-size: 46px; font-weight: 700; letter-spacing: -.02em; color: #fff; line-height: 1; }
.audit-stat .l { font-size: 14.5px; color: hsl(220 28% 80%); margin-top: 10px; max-width: 22ch; }

/* ---------- FAQ ---------- */
.audit-faq { max-width: 880px; }
.faq-item { border-bottom: 1px solid hsl(var(--border)); }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0; font-family: var(--font-display, inherit);
  font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: hsl(var(--foreground));
}
.faq-q .faq-ico { flex-shrink: 0; color: hsl(263 60% 50%); transition: transform .25s ease; }
.faq-item[open] .faq-ico { transform: rotate(45deg); }
/* Native <details> FAQ: drive answer visibility off the [open] attribute so it
   overrides the global JS-accordion rule (.faq-a { display:none }) in styles.css. */
.faq-a { display: none; padding: 0 0 26px; font-size: 16.5px; line-height: 1.65; color: hsl(var(--muted-foreground)); max-width: 75ch; }
.faq-item[open] .faq-a { display: block; }
.faq-item summary { list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }