.service-page { min-height: 100svh; }
.service-main { font-size: 1rem; line-height: 1.6; }
.service-intro { padding-block: 64px 48px; background: radial-gradient(ellipse 65% 100% at 50% 0%, #0b202b 0%, #0a101b 60%, #0a0e17 100%); }
.service-eyebrow { margin-bottom: 20px; color: var(--accent); font-size: .875rem; }
.service-main h1 { font-size: 2.5rem; line-height: 1.2; letter-spacing: -.035em; }
.service-lead { margin-top: 24px; color: var(--muted); font-size: 1.125rem; line-height: 1.65; }
.service-contents { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid #25303e; }
.service-contents a { padding-block: 4px; color: #c8d2df; font-size: .875rem; text-decoration: underline; text-decoration-color: #526273; text-underline-offset: 5px; }
.service-contents a:hover { color: var(--accent); text-decoration-color: currentColor; }

.service-details { background: #eef1f2; color: var(--signal-text); color-scheme: light; }
.service-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; padding-block: 48px; scroll-margin-top: 24px; }
.service-feature + .service-feature { border-top: 1px solid #ccd6dc; }
.service-feature-heading, .service-feature-body { min-width: 0; }
.service-section-number { display: inline-block; color: var(--signal-muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.service-feature h2 { margin: 10px 0 16px; font-size: 1.75rem; font-weight: 500; line-height: 1.25; letter-spacing: -.025em; }
.service-feature-heading p { color: var(--signal-muted); }
.service-feature-body > p + p { margin-top: 16px; }
.service-feature h3 { margin: 24px 0 16px; font-size: 1.125rem; font-weight: 500; line-height: 1.4; }
.service-feature dl { margin: 0; }
.service-feature dt, .service-access-list dt { font-weight: 500; line-height: 1.4; }
.service-feature dd, .service-access-list dd { margin: 6px 0 0; color: var(--signal-muted); }
.service-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.service-cards > div, .service-note { min-width: 0; padding: 18px; border-radius: 12px; background: #fff; }
.service-feature-body .service-cards { margin-block: 24px; }
.service-feature-body > .service-cards:first-child { margin-top: 0; }
.service-feature-body h3 + .service-cards { margin-top: 0; }
.service-cards > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.service-card-group { display: grid; gap: 10px; margin-block: 24px; }
.service-feature-body h3 + .service-card-group { margin-top: 0; }
.service-card-group > .service-cards { margin: 0; }
.service-note { box-shadow: inset 0 0 0 2px var(--accent); }
.service-note h3 { margin: 0 0 6px; font-size: 1rem; }
.service-note p { color: var(--signal-muted); }
.service-note p + p { margin-top: 16px; }
.service-feature-body > .service-conclusion,
.service-access-copy > .service-conclusion { margin-top: 24px; font-weight: 500; }

.service-access { padding-block: 64px; scroll-margin-top: 24px; }
.service-access-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: 48px; }
.service-access h2 { margin: 0 0 24px; font-size: 2.25rem; font-weight: 400; line-height: 1.2; letter-spacing: -.035em; }
.service-access-copy > p { color: var(--muted); }
.service-access-list { display: grid; gap: 24px; margin: 28px 0 0; }
.service-access-list dd { color: var(--muted); }
.service-plan { min-width: 0; padding: 28px; border: 1px solid #2b3645; border-radius: 12px; background: #0d131d; }
.service-plan-label { color: var(--muted); font-size: .875rem; }
.service-price { margin-top: 16px; font-size: 2.25rem; font-weight: 500; line-height: 1.2; letter-spacing: -.03em; }
.service-price span { display: block; margin-top: 8px; color: var(--muted); font-size: 1rem; font-weight: 400; letter-spacing: 0; }
.service-plan-scope { margin-top: 8px; }
.service-plan-period { margin-top: 8px; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.service-trial { margin-top: 24px; padding-top: 24px; border-top: 1px solid #2b3645; }
.service-trial h3 { margin: 0 0 12px; color: var(--accent); font-size: 1.125rem; font-weight: 500; line-height: 1.4; }
.service-trial p { color: var(--muted); }
.service-plan .button { width: 100%; margin-top: 24px; padding-inline: 16px; font-weight: 500; text-align: center; }
.service-plan-note { margin-top: 20px; color: var(--muted); font-size: .875rem; line-height: 1.6; }

@media (max-width: 800px) {
  .service-feature { grid-template-columns: 1fr; gap: 24px; }
  .service-feature h2 { margin-top: 8px; margin-bottom: 12px; }
  .service-access-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .service-intro { padding-block: 40px 32px; }
  .service-main h1 { font-size: 2rem; }
  .service-eyebrow { margin-bottom: 16px; }
  .service-lead { margin-top: 20px; }
  .service-contents { gap: 8px 20px; margin-top: 24px; padding-top: 16px; }
  .service-contents a { min-height: 40px; padding-block: 8px; }
  .service-feature { padding-block: 32px; }
  .service-cards { grid-template-columns: 1fr; }
  .service-cards > div:last-child:nth-child(odd) { grid-column: auto; }
  .service-cards > div, .service-note { padding: 16px; }
  .service-access { padding-block: 40px; }
  .service-access h2 { font-size: 1.875rem; }
  .service-plan { padding: 20px; }
}