/* responsive.css */

/* <= 1024px (tablet/ small laptop) */
@media (max-width: 1024px) {
    .hero-container { padding: 32px 40px; }
    .hero-title { font-size: 56px; }
    .hero-subtitle { font-size: 32px; }
    .hero-image { max-width: 200px; margin: 0 auto }

    .sec-2fa__title,
    .acc-status__title,
    .iw-title { font-size: 40px; }

    .acc-status__head,
    .acc-status__row { padding: 15px 30px; }

    .iw-step { font-size: 16px; padding: 12px 16px; }
    .iw-infoText { font-size: 20px; }
    .iw-infoRow { padding: 20px 24px; margin-bottom: 60px; }

    .notice-sec__card { padding: 40px; }
    .mt-140 { margin-top: 100px; }
}

/* <= 768px (mobile landscape / tablet portrait) */
@media (max-width: 768px) {
    body { padding: 16px; }

    .hero-container { padding: 24px 20px; }
    .hero-title { font-size: 40px; line-height: 115%; }
    .hero-subtitle { font-size: 24px; }
    .hero-f-width__block { margin-top: 40px; margin-bottom: 24px; }
    .hero-f-width__block:before { left: -20px; right: -20px; }

    .sec-2fa__title,
    .acc-status__title,
    .iw-title { font-size: 32px; margin-bottom: 24px; }

    .sec-2fa__card { padding: 24px; }
    .card-2fa__icon { margin-bottom: 24px; }

    .acc-status__head,
    .acc-status__row { padding: 12px 16px; }

    .acc-status__th,
    .acc-status__cell { font-size: 16px; }

    .notice-sec__card { padding: 28px; }
    .notice-sec__title { font-size: 20px; }
    .notice-sec__text { font-size: 14px; margin-bottom: 24px; }

    .iw-header { gap: 16px; }
    .iw-steps { flex-direction: column; align-items: flex-start; }
    .iw-step { width: 100%; justify-content: flex-start; }

    .iw-select { padding: 12px 16px; margin: 20px 0 24px; }
    .iw-infoRow { padding: 16px; margin-bottom: 40px; }
    .iw-infoText { font-size: 16px; }

    .iw-input { height: 52px; }
    .iw-grid { margin-bottom: 40px; }

    .mt-140 { margin-top: 60px; }
    .mt-60 { margin-top: 40px; }
}

/* <= 480px (mobile) */
@media (max-width: 480px) {
    .hero-logo img { width: 90px; }

    .hero-title { font-size: 32px; }
    .hero-subtitle { font-size: 20px; }
    .hero-text { font-size: 14px; }

    .sec-2fa__title,
    .acc-status__title,
    .iw-title { font-size: 26px; }

    .card-2fa__title { font-size: 18px; }
    .card-2fa__text { font-size: 14px; }

    .notice-sec__btn,
    .iw-next { width: 100%; }

    .iw-infoText { font-size: 15px; }
    .text-lg { font-size: 24px; margin-bottom: 16px; }
    .leading-6 { font-size: 16px; }

    .iw-doneCard { padding: 28px 15px; }
}