/* tune-v2 — presentation facelift for /tune/* pages.
   CSS-only: zero content/URL/schema changes, so zero SEO risk.
   Loaded AFTER the page's inline styles; overrides deliberately. */

/* ── type & rhythm ─────────────────────────────────────────── */
main { max-width: 820px !important; }
main h1 { font-size: clamp(38px, 7.5vw, 64px) !important; line-height: 1.05 !important; margin-bottom: 18px !important; }
.lede { font-size: 18px !important; line-height: 1.7 !important; color: var(--text-2) !important; max-width: 640px; }
main section { margin-bottom: 72px !important; }
main section h2 {
  font-size: clamp(26px, 4.5vw, 38px) !important;
  padding-bottom: 14px; margin-bottom: 22px !important;
  border-bottom: 1px solid var(--border-soft);
}

/* ── stat band: three boxes → one bold strip ───────────────── */
.specs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 !important;
  background: var(--bg2); border: 1px solid var(--border-soft); border-radius: 16px;
  overflow: hidden; margin-bottom: 64px !important;
}
.specs .spec { background: transparent !important; border: none !important; border-left: 1px solid var(--border-soft) !important; border-radius: 0 !important; padding: 26px 22px !important; text-align: center; }
.specs .spec:first-child { border-left: none !important; }
.specs .spec .val { font-size: 34px !important; letter-spacing: -0.03em; }
.specs .spec.gain .val { color: var(--accent) !important; }
.specs .spec .lbl { margin-bottom: 8px !important; }
@media (max-width: 600px) {
  .specs { grid-template-columns: 1fr; }
  .specs .spec { border-left: none !important; border-top: 1px solid var(--border-soft) !important; }
  .specs .spec:first-child { border-top: none !important; }
}

/* ── every plain content list → card grid ──────────────────── */
main > section > ul {
  list-style: none !important; padding: 0 !important; margin: 0 !important;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
main > section > ul > li {
  background: var(--bg2); border: 1px solid var(--border-soft); border-radius: 12px;
  padding: 15px 17px !important; margin: 0 !important;
  font-size: 14px !important; line-height: 1.55 !important; color: var(--text-3);
}
main > section > ul > li strong { display: block; color: var(--text); font-size: 14.5px; margin-bottom: 3px; }
main > section > ul > li::marker { content: ""; }
@media (max-width: 640px) { main > section > ul { grid-template-columns: 1fr; } }

/* ── offer grid polish ─────────────────────────────────────── */
.offer-grid .offer-item { border-radius: 12px; padding: 14px 16px; background: var(--bg2); border: 1px solid var(--border-soft); }
.offer-grid { gap: 10px !important; }
.offer-item .ic { color: var(--accent) !important; }

/* ── pricing tiers: give them hierarchy ────────────────────── */
.tiers { gap: 12px !important; align-items: stretch; }
.tiers .tier {
  border-radius: 16px !important; padding: 26px 22px !important;
  transition: border-color .2s;
}
.tiers .tier:first-child { border-color: var(--accent) !important; position: relative; box-shadow: 0 12px 40px rgba(230, 40, 40, 0.10); }
.tiers .tier:first-child::after {
  content: "MOST BOOKED"; position: absolute; top: -9px; right: 16px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  background: var(--accent); color: #fff; border-radius: 100px; padding: 3px 10px;
}
.tiers .tier .price { font-size: 30px !important; letter-spacing: -0.03em; }
.tiers .tier .stage { color: var(--accent) !important; letter-spacing: 0.14em !important; }

/* ── guarantee: from box to statement ──────────────────────── */
.guarantee {
  background: linear-gradient(135deg, rgba(230,40,40,0.07), transparent 55%), var(--bg2) !important;
  border: 1px solid var(--border-soft) !important; border-left: 3px solid var(--accent) !important;
  border-radius: 16px !important; padding: 30px 28px !important; margin-bottom: 72px !important;
}
.guarantee .gt strong { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; font-size: 22px; letter-spacing: -0.01em; display: block; margin-bottom: 8px; color: var(--text); }

/* ── FAQ polish ────────────────────────────────────────────── */
.faq details { border-radius: 12px !important; transition: border-color .15s; }
.faq details:hover { border-color: var(--border) !important; }
.faq details[open] { border-color: var(--accent) !important; }
.faq summary { font-size: 15.5px !important; }

/* ── book CTA: give it weight ──────────────────────────────── */
.book-cta {
  border: 1px solid rgba(230, 40, 40, 0.35) !important;
  background: radial-gradient(120% 140% at 50% 0%, rgba(230, 40, 40, 0.10), transparent 60%), var(--bg2) !important;
  border-radius: 18px !important; padding: 44px 28px !important;
}
.book-cta h2 { border-bottom: none !important; padding-bottom: 0 !important; }

/* ── vehicle directory: recede into a quiet index ──────────── */
#tune-directory { padding-top: 34px !important; }
#tune-directory h2 { font-size: 17px !important; border-bottom: none !important; margin-bottom: 2px !important; color: var(--text-3) !important; }
#tune-directory p { font-size: 12.5px !important; }
#tune-directory div[style*="grid"] { gap: 18px 22px !important; }
#tune-directory a { font-size: 12.5px !important; padding: 3px 0 !important; color: var(--text-4) !important; }
#tune-directory a:hover { color: var(--text-2) !important; }
#tune-directory div[style*="uppercase"], #tune-directory div div:first-child { font-size: 10px !important; }