/* Service pages reuse the homepage typography, offers and navigation. */
.service-page .nav { background: rgba(7, 8, 7, .96); border-bottom: 1px solid var(--hairline); }
.service-page main { max-width: 1320px; }
.service-page .nav-links [aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 7px; }
.service-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; gap: 80px; padding: 135px 0 85px; }
.service-back { display: inline-block; color: var(--ink-60); font-size: 13px; padding: 10px 0; margin-bottom: 35px; }
.service-hero h1 { font: 600 clamp(40px, 5.4vw, 74px)/1.07 var(--display); letter-spacing: -.04em; margin: 20px 0 24px; }
.service-intro { max-width: 560px; color: var(--ink-60); font-size: 17px; }
.service-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 30px; }
.service-actions .pill { font-size: 12px; line-height: 1.4; }
.service-summary { padding: 36px; background: #141511; border: 1px solid #555; border-radius: 18px; }
.service-summary .service-price { font: 600 clamp(38px, 4.5vw, 60px)/1.15 var(--display); letter-spacing: -.04em; margin: 28px 0 10px; color: var(--ink); }
.service-summary > p:not(.eyebrow):not(.service-price), .service-summary li { color: var(--ink-60); font-size: 14px; }
.service-summary ul { list-style: none; padding-top: 20px; margin-top: 25px; border-top: 1px solid var(--hairline); }
.service-summary li { padding: 10px 0; }
.service-summary .service-tax { margin-top: 25px; font-size: 12px !important; }
.service-section { padding: 65px 0; border-top: 1px solid var(--hairline); }
.service-section-head { margin-bottom: 48px; }
.service-section h2, .service-next h2 { font: 600 clamp(30px, 3.4vw, 44px)/1.15 var(--display); letter-spacing: -.025em; margin-top: 14px; }
.service-page .plan-top { min-height: 88px; }
.service-page .plans { margin-top: 70px; }
.service-page .monthly-plan h3 { font: 500 26px/1.2 var(--display); }
.service-page .monthly-grid { gap: 20px; }
.service-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.service-steps span { color: var(--ink-60); font-size: 12px; }
.service-steps h3 { font: 500 23px/1.25 var(--display); margin: 20px 0 14px; }
.service-steps p { font-size: 15px; color: var(--ink-60); }
.service-faq { max-width: 920px; }
.service-faq details { border-bottom: 1px solid var(--hairline); }
.service-faq summary { cursor: pointer; font: 500 20px/1.4 var(--display); padding: 24px 30px 24px 0; }
.service-faq details p { color: var(--ink-60); font-size: 15px; max-width: 760px; padding-bottom: 25px; }
.service-faq a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.service-next { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 55px 36px; margin: 30px 0 0; background: #141511; border: 1px solid #555; border-radius: 18px; }
.service-next p:not(.eyebrow) { color: var(--ink-60); font-size: 15px; max-width: 570px; margin-top: 18px; }
.service-next .pill { flex-shrink: 0; font-size: 12px; line-height: 1.4; }
.service-related { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; padding: 35px 0 65px; }
.service-related span { color: var(--ink-60); font-size: 13px; }
@media (max-width: 959px) {
  .service-hero { gap: 35px; }
  .service-summary { padding: 26px; }
  .service-steps { gap: 25px; }
  .service-next { align-items: start; flex-direction: column; }
}
@media (max-width: 767px) {
  .service-hero { grid-template-columns: 1fr; padding: 100px 0 55px; }
  .service-back { margin-bottom: 20px; }
  .service-hero h1 { font-size: clamp(38px, 8.5vw, 60px); }
  .service-steps { grid-template-columns: 1fr; gap: 32px; }
  .service-section { padding: 45px 0; }
  .service-section-head { margin-bottom: 30px; }
  .service-next { padding: 30px 24px; }
  .service-faq summary { font-size: 18px; }
}
