.service-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-block: 28px; }
.service-plan { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px; border: 1px solid #dbe2dc; border-radius: 14px; background: #fff; color: #1d332b; }
.service-plan h3 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.4; }
.service-plan p { margin: 0; font-size: 15px; line-height: 1.6; }
.service-plan .service-plan-price { margin-block: 4px; }
.service-plan-price strong { font-size: 40px; font-weight: 650; letter-spacing: -.04em; line-height: 1.2; }
.service-plan-price span, .service-plan .service-plan-note { color: #607166; font-size: 14px; }
.service-plan .fi-btn { margin-top: auto; }
.service-contact { display: inline-flex; align-items: center; gap: 8px; color: #176b43; font-size: 14px; font-weight: 600; line-height: 1.5; text-decoration: underline; text-underline-offset: 4px; }
.service-contact svg { width: 18px; height: 18px; flex-shrink: 0; }
.service-contact:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.service-contact:hover { color: #0d472b; }
.service-subscription { display: grid; gap: 24px; }
.service-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.service-status dt { color: #64748b; font-size: 13px; }
.service-status dd { margin-top: 8px; font-size: 15px; font-weight: 600; }
.service-introduction, .service-footnote { font-size: 14px; line-height: 1.7; }
.service-footnote { color: #64748b; margin-top: 8px; }
.service-pending { margin-top: 22px; padding: 14px; border: 1px solid #fcd34d; border-radius: 8px; background: #fffbeb; color: #92400e; font-size: 14px; line-height: 1.7; }
.dark .service-subscription .service-plan { background: #18181b; color: #f4f4f5; border-color: #3f3f46; }
.dark .service-subscription :is(.service-plan-price span, .service-plan-note, .service-status dt, .service-footnote) { color: #a1a1aa; }
.dark .service-subscription .service-contact { color: #86efac; }
@media (max-width: 900px) {
    .service-plans { gap: 14px; }
    .service-plan { padding: 22px 18px; }
    .service-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .service-plans { grid-template-columns: minmax(0, 1fr); }
    .service-plan { padding: 26px; }
}