/* ==========================================================================
   the template rebuild — sections, part two
   stats · case study · pricing · team · FAQ · blog · contact · footer
   ========================================================================== */

/* ---------- stats band ---------------------------------------------------- */

.stats { padding: 40px 0 104px; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stats__grid .stat__value { font-size: var(--fs-stat); }
.stats__grid p { margin: 14px 0 0; font-size: var(--fs-sm); font-weight: 500; color: var(--c-muted-local); max-width: 170px; }

.stats__notes { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 88px; }
.stats__lead { margin: 0; font-size: var(--fs-lg); font-weight: 500; max-width: 420px; }
.stats__body { display: grid; gap: 18px; }
.stats__body p { margin: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--c-muted-local); }

@media (max-width: 1199px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } .stats__notes { grid-template-columns: 1fr; } }

/* ---------- case study ---------------------------------------------------- */

.case { padding: 0 0 112px; }
.case__card { background: var(--c-white); border-radius: var(--r-lg); padding: 40px; display: grid; gap: 40px; }
.case__head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; }
.case__label { font-size: var(--fs-base); font-weight: 500; color: var(--c-muted-local); margin: 0 0 12px; }
.case__title { margin: 0; font-size: var(--fs-h4); font-weight: 600; letter-spacing: var(--tracking); }
.case__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.metric { border: 1px solid var(--c-rule); border-radius: var(--r-sm); padding: 20px; }
.metric__k { font-size: 12px; font-weight: 600; color: var(--c-muted-local); }
.metric__v { font-size: var(--fs-lg); font-weight: 600; margin: 8px 0 0; letter-spacing: var(--tracking); }
.case__quote { margin: 0; font-size: var(--fs-lg); font-weight: 500; max-width: 620px; }
.case__quote cite { display: block; font-size: var(--fs-sm); font-style: normal; color: var(--c-muted-local); margin-top: 12px; }

@media (max-width: 809px) { .case__card { padding: 24px; } .case__metrics { grid-template-columns: 1fr; } }

/* ---------- pricing (light) ---------------------------------------------- */

.pricing { padding: 96px 40px 112px; }
.pricing__head { display: grid; grid-template-columns: 300px 1fr auto; gap: 40px; align-items: start; }
.pricing__title { margin: 0; font-size: var(--fs-h2); font-weight: 600; letter-spacing: var(--tracking); }
.toggle { display: inline-flex; background: rgba(10,10,10,.06); border-radius: var(--r-xl); padding: 4px; }
.toggle button {
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 600; letter-spacing: var(--tracking);
  padding: 8px 16px; border-radius: var(--r-xl); color: var(--c-ink);
}
.toggle button[aria-pressed="true"] { background: var(--c-ink); color: var(--c-white); }

.plans { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; margin-top: 72px; }
.plan { background: rgba(255,255,255,.06); border-radius: var(--r-md); padding: 30px; display: grid; gap: 26px; align-content: start; }
.plan__note { font-size: var(--fs-base); font-weight: 500; color: var(--c-muted); margin: 0; }
.plan__price { display: flex; align-items: baseline; gap: 6px; }
.plan__price b { font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--tracking); }
.plan__price span { font-size: var(--fs-sm); font-weight: 500; color: var(--c-muted); }
.plan__was { font-size: var(--fs-md); font-weight: 500; color: var(--c-muted); text-decoration: line-through; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan li { font-size: var(--fs-sm); font-weight: 500; display: flex; gap: 10px; }
.plan li::before { content: "→"; color: var(--c-muted); }
.plan__meta { display: flex; justify-content: space-between; font-size: var(--fs-sm); font-weight: 500; border-top: 1px solid var(--c-rule); padding-top: 16px; }

@media (max-width: 1199px) { .plans, .pricing__head { grid-template-columns: 1fr; } }

/* ---------- team ---------------------------------------------------------- */

.team { padding: 88px 40px 96px; }
.team__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.team__title { margin: 0; font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--tracking); max-width: 520px; }
.team__aside p { margin: 0 0 16px; font-size: var(--fs-sm); font-weight: 500; color: var(--c-muted-local); max-width: 360px; }
.team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 72px; }
.member { display: grid; gap: 14px; }
.member__photo { aspect-ratio: 1/1.2; border-radius: var(--r-md); overflow: hidden; background: #141414; }
.member__photo img { width: 100%; height: 100%; object-fit: cover; }
.member__role { font-size: 12px; font-weight: 600; color: var(--c-muted-local); }
.member__name { font-size: var(--fs-md); font-weight: 600; margin: 2px 0 6px; }
.member__bio  { font-size: 12px; font-weight: 500; color: var(--c-muted-local); margin: 0; }

@media (max-width: 1199px) { .team__grid { grid-template-columns: repeat(2, 1fr); } .team__head { grid-template-columns: 1fr; } }
@media (max-width: 809px)  { .team__grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ----------------------------------------------------------- */

.faq { padding: 104px 0 112px; }
.faq__head { display: grid; grid-template-columns: 300px 1fr; gap: 40px; }
.faq__title { margin: 0; font-size: var(--fs-h2); font-weight: 600; letter-spacing: var(--tracking); }
.faq__lede { font-size: var(--fs-sm); font-weight: 500; color: var(--c-muted-local); max-width: 380px; margin: 18px 0 0; }
.faq__list { margin-top: 72px; border-top: 1px solid var(--c-rule); }
.faq__item { border-bottom: 1px solid var(--c-rule); }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 26px 0;
  display: flex; justify-content: space-between; gap: 24px; align-items: center;
  font-size: var(--fs-lg); font-weight: 500; letter-spacing: var(--tracking);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: var(--fs-lg); color: var(--c-muted-local); transition: transform .3s ease; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { margin: 0 0 26px; font-size: var(--fs-sm); font-weight: 500; color: var(--c-muted-local); max-width: 640px; }

@media (max-width: 1199px) { .faq__head { grid-template-columns: 1fr; } }

/* ---------- blog ---------------------------------------------------------- */

.blog { padding: 0 0 120px; }
.blog__head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: 48px; }
.blog__title { margin: 0; font-size: var(--fs-h4); font-weight: 600; letter-spacing: var(--tracking); max-width: 520px; }
.posts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.post { display: grid; gap: 16px; }
.post__media { aspect-ratio: 3/2; border-radius: var(--r-md); overflow: hidden; background: #141414; }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.post:hover .post__media img { transform: scale(1.04); }
.post__date { font-size: 12px; font-weight: 500; color: var(--c-muted-local); }
.post__title { font-size: var(--fs-lg); font-weight: 500; margin: 4px 0 8px; letter-spacing: var(--tracking); }
.post__excerpt { font-size: var(--fs-sm); font-weight: 500; color: var(--c-muted-local); margin: 0; }

@media (max-width: 809px) { .posts, .blog__head { grid-template-columns: 1fr; } }

/* ---------- contact ------------------------------------------------------- */

.contact { padding: 96px 40px 104px; }
.contact__card { padding: 8px 32px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.contact__title { margin: 0 0 16px; font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--tracking); }
.contact__lede { font-size: var(--fs-sm); font-weight: 500; color: var(--c-muted-local); max-width: 340px; margin: 0 0 32px; }
.contact__points { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.contact__points li { font-size: var(--fs-sm); font-weight: 500; display: flex; gap: 10px; }
.contact__points li::before { content: "—"; color: var(--c-muted-local); }

.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field label { font-size: 12px; font-weight: 600; color: var(--c-muted-local); }
.field input, .field textarea {
  font: inherit; font-size: var(--input-fs); font-weight: var(--input-weight);
  letter-spacing: var(--tracking); color: var(--c-white);
  background: rgba(255,255,255,.04); border: 1px solid var(--c-rule);
  border-radius: var(--r-sm); padding: var(--input-padding); width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--c-muted-local); }
.form__note { font-size: 12px; font-weight: 500; color: var(--c-muted-local); margin: 14px 0 0; }
.btn {
  border: 0; cursor: pointer; font: inherit;
  background: var(--c-white); color: var(--c-ink);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--tracking);
  padding: 14px 22px; border-radius: var(--r-xl); width: max-content;
}

@media (max-width: 1199px) { .contact__card { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 809px)  { .contact__card { padding: 24px; } }

/* ---------- footer CTA + footer (light) ----------------------------------- */

.outro { padding: 112px 0 64px; }
.outro__lede { font-size: var(--fs-lg); font-weight: 500; max-width: 620px; margin: 0 0 64px; }
.outro__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.outro h3 { font-size: 12px; font-weight: 600; color: var(--c-muted); margin: 0 0 16px; text-transform: none; }
.outro ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.outro a, .outro li { font-size: var(--fs-sm); font-weight: 500; }
.newsletter { display: flex; gap: 8px; max-width: 360px; }
.newsletter input {
  flex: 1; font: inherit; font-size: var(--fs-sm); font-weight: 500;
  border: 1px solid var(--c-rule); border-radius: var(--r-xl);
  padding: 12px 16px; background: transparent; color: var(--c-ink);
}
.newsletter button { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
  background: var(--c-ink); color: var(--c-white); border-radius: var(--r-xl); padding: 12px 18px; }
.colophon { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--c-rule);
  font-size: 12px; font-weight: 500; color: var(--c-muted); }

@media (max-width: 809px) { .outro__grid { grid-template-columns: 1fr; } }