/* ============================================================
   PAGE-SPECIFIC: fit / honest review page
   (the block above is the shared site CSS, kept in sync across
   home.html, pricing.html, how-it-works.html, how-to-set-it-up.html
   and this page)
   ============================================================ */

.sec-intro{max-width:720px;margin:0 auto 48px;text-align:center}
.sec-intro p{font-size:18px;line-height:1.66}
.sec-intro p:last-child{margin-bottom:0}

/* budget ladder */
.tier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:1040px;margin:0 auto;align-items:start}
.tier{
  background:#fff;border:.8px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:30px 28px;display:flex;flex-direction:column;
}
.tier--top{border:1.6px solid var(--green);box-shadow:0 8px 30px -8px rgba(95,172,90,.3)}
.tier__meter{display:flex;gap:5px;margin-bottom:20px}
.tier__meter i{height:5px;flex:1;border-radius:3px;background:var(--bg-alt);display:block}
.tier__meter i.on{background:var(--green)}
.tier__spend{
  font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;
}
.tier h3{font-size:20px;margin-bottom:12px;letter-spacing:-.025em;line-height:1.28}
.tier p{font-size:15px;line-height:1.63;margin-bottom:0}
.tier__badge{
  display:inline-block;align-self:flex-start;margin-top:20px;
  font-size:12.5px;font-weight:600;color:#3B7A36;
  background:var(--green-tint);border-radius:20px;padding:6px 14px;
}

/* signs checklist */
.signs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 34px;max-width:920px;margin:0 auto}
.signs li{display:flex;gap:13px;align-items:flex-start;font-size:16px;line-height:1.6}
.signs .tick{margin-top:4px}
.signs b{font-weight:600}

/* profile cards */
.card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.profile{
  background:#fff;border:.8px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:26px 24px;
}
.profile__ico{
  width:42px;height:42px;border-radius:11px;background:var(--green-tint);
  border:.8px solid var(--green-line-2);display:flex;align-items:center;justify-content:center;margin-bottom:15px;
}
.profile h4{font-size:17px;margin-bottom:9px}
.profile p{font-size:14.5px;line-height:1.6;margin:0}

/* trade-offs */
.tradeoffs{max-width:820px;margin:0 auto;display:grid;gap:0}
.tradeoff{display:flex;gap:20px;padding:24px 0;border-top:.8px solid var(--line)}
.tradeoff:first-child{border-top:0;padding-top:0}
.tradeoff__n{
  flex:0 0 36px;height:36px;border-radius:50%;background:var(--bg-alt);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;
}
.tradeoff h4{font-size:17.5px;margin-bottom:8px}
.tradeoff p{font-size:15.5px;line-height:1.63;margin:0}

.nav a.is-active{color:var(--green)}

@media (max-width:1024px){
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .tier-grid{grid-template-columns:1fr;max-width:560px}
  .signs{grid-template-columns:1fr;max-width:560px}
}
@media (max-width:640px){
  .card-grid{grid-template-columns:1fr}
  .tier{padding:24px 22px}
  .profile{padding:22px 20px}
  .tradeoff{gap:14px}
  .sec-intro{margin-bottom:34px}
}