/* TrakCorp service pages — extends blog.css with pricing tiers, FAQ and
   proof blocks. No new colours; design-system tokens only. */

/* ---- Tier grid ------------------------------------------------------ */
.tiers {
  margin: 44px 0 0; display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.tier {
  display: flex; flex-direction: column;
  padding: 30px 28px; border-radius: 16px;
  border: 1px solid hsl(0 0% 100% / 0.08);
  background: hsl(0 0% 100% / 0.02);
}
.tier.featured {
  border-color: hsl(142 76% 36% / 0.38);
  background: linear-gradient(160deg, hsl(142 76% 36% / 0.08), hsl(0 0% 100% / 0.02) 65%);
}
.tier .t-name {
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: #8A9088;
}
.tier .t-price {
  margin-top: 14px; font-family: var(--font-display);
  font-size: 34px; font-weight: 400; letter-spacing: -0.03em; color: #F5F5F0;
}
.tier .t-desc {
  margin: 14px 0 0; font-size: 14.5px; line-height: 1.65;
  font-weight: 300; color: hsl(0 0% 100% / 0.64);
}
.tier ul {
  margin: 20px 0 0; padding: 0; list-style: none;
  border-top: 1px solid hsl(0 0% 100% / 0.07);
}
.tier ul li {
  position: relative; padding: 10px 0 10px 20px;
  font-size: 14px; line-height: 1.55; font-weight: 300;
  color: hsl(0 0% 100% / 0.7);
  border-bottom: 1px solid hsl(0 0% 100% / 0.05);
}
.tier ul li::before {
  content: ""; position: absolute; left: 0; top: 18px;
  width: 6px; height: 1px; background: var(--accent-green);
}
.tier .t-cta { margin-top: 22px; }
.tier .t-cta a {
  display: inline-flex; align-items: center; height: 2.5rem;
  padding: 0 18px; border-radius: 9px; font-size: 13.5px; font-weight: 500;
  border: 1px solid hsl(142 76% 36% / 0.45);
  background: hsl(142 76% 36% / 0.08); color: #34D399;
}
.tier .t-cta a:hover { background: hsl(142 76% 36% / 0.18); }

/* ---- Stat row ------------------------------------------------------- */
.stats {
  margin: 44px 0 0; display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid hsl(0 0% 100% / 0.08);
  border-bottom: 1px solid hsl(0 0% 100% / 0.08);
}
.stats div { padding: 24px 4px; }
.stats .s-num {
  font-family: var(--font-display); font-size: 28px;
  font-weight: 400; letter-spacing: -0.02em; color: #F5F5F0;
}
.stats .s-lbl {
  margin-top: 8px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: #8A9088;
}

/* ---- FAQ ------------------------------------------------------------ */
.faq { margin: 34px 0 0; border-top: 1px solid hsl(0 0% 100% / 0.08); }
.faq details {
  border-bottom: 1px solid hsl(0 0% 100% / 0.08);
}
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 0;
  font-size: 16px; font-weight: 500; color: hsl(0 0% 100% / 0.92);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: #34D399; font-size: 18px; font-weight: 300; line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details p {
  margin: 0 0 22px; font-size: 15.5px; line-height: 1.7;
  font-weight: 300; color: hsl(0 0% 100% / 0.7);
}

/* ---- Proof / area lists -------------------------------------------- */
.areas {
  margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0; list-style: none;
}
.areas li {
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid hsl(0 0% 100% / 0.1);
  font-size: 13px; font-weight: 300; color: hsl(0 0% 100% / 0.66);
}
.proof {
  margin: 40px 0 0; padding: 28px; border-radius: 16px;
  border: 1px solid hsl(0 0% 100% / 0.09);
  background: hsl(0 0% 100% / 0.02);
}
.proof .kicker {
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: #8A9088;
}
.proof blockquote {
  margin: 16px 0 0; font-size: 18px; line-height: 1.6;
  font-weight: 300; color: hsl(0 0% 100% / 0.9);
}
.proof cite {
  display: block; margin-top: 16px; font-style: normal;
  font-size: 12.5px; color: #8A9088;
}
.proof img {
  margin-top: 22px; width: 100%; height: auto; display: block;
  border-radius: 12px; border: 1px solid hsl(0 0% 100% / 0.08);
}

/* ---- Breadcrumb ----------------------------------------------------- */
.crumb {
  margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 12.5px; color: #8A9088;
}
.crumb a { color: hsl(0 0% 100% / 0.62); }