/* =======================================================================
   registration.css
======================================================================= */

/* ============================================================
   1. 공통
============================================================ */
.registration-page {
    --registration-content-max-width: 1040px;
    --registration-step-size: 68px;
    --registration-step-size-mobile: 40px;
    --registration-anchor-height: 80px;
    --registration-section-padding-y: var(--spacing-100);
    --registration-section-padding-y-tablet: var(--spacing-80);
    --registration-section-padding-y-mobile: var(--spacing-64);
    background-color: var(--color-bg-white);
}

.registration-page .fade-in-up.is-reveal-ready {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.registration-page .fade-in-up.is-reveal-ready.is-visible {opacity: 1; transform: translateY(0);}
.registration-page .fade-in-up.delay-1 {transition-delay: 0.1s;}
.registration-page .fade-in-up.delay-2 {transition-delay: 0.2s;}
.registration-page .fade-in-up.delay-3 {transition-delay: 0.3s;}
.registration-page .fade-in-up.delay-4 {transition-delay: 0.4s;}

.registration-page-header {
    position: relative;
    overflow: hidden;
    padding: var(--spacing-80) 0 var(--spacing-64);
    border-bottom: 1px solid var(--color-border-light);
    background-color: #F5F8FC;
}
.registration-page-header .container {position: relative; z-index: 1;}
.registration-page-header .page-header-desc {line-height: var(--line-height-base);}

.registration-section {padding: var(--registration-section-padding-y) 0; scroll-margin-top: calc(var(--header-height-pc) + var(--registration-anchor-height) + var(--spacing-24));}
.registration-section .section-header {margin-bottom: var(--spacing-48);}
.registration-section .section-header-center .section-header-content {
    align-items: center;
    width: 100%;
    max-width: 640px;
    text-align: center;
}
.registration-section .section-header-desc {max-width: 100%;}

.registration-section-note {
    margin-top: var(--spacing-24);
    margin-bottom: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
    line-height: var(--line-height-base);
    text-align: center;
}

.registration-contract-section {padding-bottom: var(--spacing-48);}

/* ============================================================
   2. 앵커 내비게이션
============================================================ */
.registration-anchor {
    position: sticky;
    top: var(--header-height-pc);
    z-index: calc(var(--z-header) - 1);
    border-bottom: 1px solid var(--color-border-light);
    background-color: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
}
.registration-anchor-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
    width: 100%;
    max-width: 100%;
    min-height: var(--registration-anchor-height);
    padding: var(--spacing-16) 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.registration-anchor-list::-webkit-scrollbar {display: none;}

.registration-anchor-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 48px;
    padding: 0 var(--spacing-20);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-full);
    background-color: var(--color-gray-5);
    color: var(--color-gray-70);
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    white-space: nowrap;
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.registration-page-header .page-header-title,
.registration-page-header .page-header-desc,
.registration-section .section-header-title,
.registration-section .section-header-desc,
.registration-contract-desc {
    overflow-wrap: anywhere;
}

.registration-anchor-link::after {content: none;}
.registration-anchor-link:hover,
.registration-anchor-link:focus-visible,
.registration-anchor-link.is-active {
    color: var(--color-primary);
}
.registration-anchor-link:hover,
.registration-anchor-link:focus-visible {
    border-color: var(--color-primary-30);
    background-color: var(--color-bg-white);
}
.registration-anchor-link:focus-visible {outline: 0; box-shadow: 0 0 0 3px var(--color-primary-10);}
.registration-anchor-link.is-active {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-text-white);
    font-weight: var(--font-weight-semibold);
}

/* ============================================================
   3. 비용안내
============================================================ */
.registration-cost-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-12) var(--spacing-24);
    max-width: var(--registration-content-max-width);
    margin: 0 auto;
}

.registration-cost-card {
    display: grid;
    grid-template-rows: auto auto auto;
    align-items: center;
    justify-items: center;
    min-height: 300px;
    padding: var(--spacing-48) var(--spacing-32) var(--spacing-24);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-white);
    text-align: center;
}

.registration-cost-title {
    margin-bottom: var(--spacing-48);
    color: var(--color-text-primary);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-base);
}

.registration-cost-body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: 62px;
    margin-bottom: var(--spacing-24);
    padding-bottom: var(--spacing-32);
    border-bottom: 1px solid var(--color-border-light);
}

.registration-cost-note del {color: var(--color-text-primary); font-weight: var(--font-weight-bold);}

.registration-cost-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--spacing-4);
    flex: 0 0 auto;
    min-height: 0;
    margin-bottom: 0;
    color: var(--color-primary);
    line-height: 1;
    white-space: nowrap;
}
.registration-cost-value strong {
    font-size: clamp(2.375rem, 2.85vw, 2.875rem);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0;
}
.registration-cost-value span {
    color: var(--color-primary);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
}
.registration-cost-value-rate strong {
    display: inline-flex;
    align-items: baseline;
    gap: 0.04em;
    font-size: clamp(2.375rem, 2.85vw, 2.875rem);
    white-space: nowrap;
}
.registration-cost-value-rate span {font-size: var(--font-size-h4); line-height: 1;}
.registration-cost-value-rate em {
    margin: 0 0.12em;
    font-style: normal;
    font-size: 0.82em;
    font-weight: var(--font-weight-regular);
    line-height: 1;
}
.registration-cost-card-initial .registration-cost-value strong {font-size: clamp(2.5rem, 3vw, 3rem);}

.registration-cost-note {
    align-self: center;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
    line-height: var(--line-height-base);
    text-align: center;
    overflow-wrap: anywhere;
}
.registration-cost-note strong {color: var(--color-primary); font-weight: var(--font-weight-bold);}

.registration-cost-card-note {
    grid-column: 3;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-sm);
    line-height: var(--line-height-base);
    text-align: center;
}

/* ============================================================
   4. 프로세스
============================================================ */
.registration-process-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    max-width: var(--registration-content-max-width);
    margin: 0 auto;
}

.registration-process-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-height: 0;
    padding: 0 var(--spacing-8);
    text-align: center;
}
.registration-process-item:not(:last-child)::after {
    content: "";
    position: absolute;
    display: block;
    top: calc(var(--registration-step-size) / 2);
    left: 50%;
    z-index: 0;
    width: 100%;
    height: 1px;
    background-color: #CFE0FF;
    transform: translateY(-50%);
}
.registration-process-item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: calc(var(--registration-step-size) / 2);
    left: calc(100% - 4px);
    z-index: 2;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background-color: #B7D0FF;
    transform: translateY(-50%) scale(1);
    animation: registrationProcessDot 4s ease-in-out infinite;
}

.registration-process-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    width: var(--registration-step-size);
    height: var(--registration-step-size);
    border: 0;
    border-radius: var(--radius-full);
    background-color: #EAF2FF;
    color: var(--color-primary);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    box-shadow: none;
}

.registration-process-item:nth-child(1)::before {animation-delay: 0s;}
.registration-process-item:nth-child(2)::before {animation-delay: 1s;}
.registration-process-item:nth-child(3)::before {animation-delay: 2s;}
.registration-process-item:nth-child(4)::before {animation-delay: 3s;}

.registration-process-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--spacing-32);
}

.registration-process-title {
    margin-bottom: var(--spacing-8);
    color: var(--color-text-primary);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-base);
}

.registration-process-desc {
    margin-bottom: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
    line-height: 1.55;
}

.registration-process-help {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 760px;
    margin: var(--spacing-48) auto 0;
    padding: var(--spacing-24) var(--spacing-32);
    border: 1px solid #DCE8FF;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #F8FBFF 0%, #F2F7FF 100%);
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
    line-height: var(--line-height-base);
    text-align: center;
}
.registration-process-help p {margin: 0;}
.registration-process-help strong {color: var(--color-text-primary); font-weight: var(--font-weight-bold);}

@keyframes registrationProcessDot {
    0%,
    18%,
    100% {
        background-color: #B7D0FF;
        box-shadow: none;
        transform: translateY(-50%) scale(1);
    }

    8% {
        background-color: var(--color-primary);
        box-shadow: 0 0 0 5px rgba(0, 86, 210, 0.12);
        transform: translateY(-50%) scale(1.18);
    }
}

.registration-process-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin-top: var(--spacing-12);
    min-height: 36px;
    padding: 6px var(--spacing-16);
    border-radius: var(--radius-full);
    background-color: #18243A;
    color: var(--color-text-white);
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    box-shadow: none;
}
.registration-process-badge::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -45%;
    width: 32%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
    transform: translateX(-120%) skewX(-18deg);
    animation: registrationBadgeShine 2.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes registrationBadgeShine {
    0%,
    45% {
        transform: translateX(-120%) skewX(-18deg);
    }

    72%,
    100% {
        transform: translateX(520%) skewX(-18deg);
    }
}

/* ============================================================
   5. 제출서류
============================================================ */
.registration-document-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-32);
    max-width: var(--registration-content-max-width);
    margin: 0 auto;
}

.registration-document-group {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    align-content: start;
    column-gap: var(--spacing-32);
    overflow: hidden;
    padding: var(--spacing-48);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-white);
}
.registration-document-group::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 112px;
    background: linear-gradient(180deg, #F5F8FC 0%, rgba(245, 248, 252, 0) 100%);
    pointer-events: none;
}

.registration-document-title {
    position: relative;
    z-index: 1;
    grid-column: 1;
    margin-bottom: var(--spacing-24);
    padding-bottom: var(--spacing-12);
    color: var(--color-text-primary);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-base);
}
.registration-document-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 2px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
}

.registration-document-list {
    position: relative;
    z-index: 1;
    grid-column: 1;
    display: grid;
    gap: var(--spacing-8);
    margin: 0;
    padding-left: var(--spacing-20);
    color: var(--color-text-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
}
.registration-document-list span {
    display: block;
    margin-top: 3px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-regular);
}

/* ============================================================
   6. 보증보험
============================================================ */
.registration-insurance-section {overflow-x: hidden;}

.registration-table-wrap {
    max-width: var(--registration-content-max-width);
    margin: 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.registration-insurance-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    table-layout: fixed;
    color: var(--color-text-primary);
    font-size: var(--font-size-body-lg);
    line-height: var(--line-height-base);
    text-align: center;
}
.registration-insurance-table caption {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0, 0, 0, 0);
}
.registration-insurance-table th,
.registration-insurance-table td {
    padding: var(--spacing-40) var(--spacing-16);
    border-bottom: 1px solid #DDE5F2;
    vertical-align: middle;
}
.registration-insurance-table tbody tr:last-child td {border-bottom: 1px solid #DDE5F2;}
.registration-insurance-table thead th {
    padding-top: 0;
    padding-bottom: var(--spacing-24);
    border-bottom: 2px solid #DDE5F2;
    background-color: transparent;
    color: var(--color-text-primary);
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-bold);
}
.registration-insurance-table tbody td {
    color: var(--color-text-primary);
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-regular);
}

.registration-insurance-title-wrap {
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;
    align-items: center;
    position: relative;
    width: 100%;
    column-gap: var(--spacing-12);
    row-gap: var(--spacing-12);
}
.registration-insurance-title-wrap .section-header-title {grid-column: 2; margin-bottom: 0;}

.registration-insurance-help-button {
    grid-column: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 2px solid #C8CCD2;
    border-radius: var(--radius-full);
    background-color: transparent;
    color: #AEB4BE;
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.registration-insurance-help-button:hover,
.registration-insurance-help-button:focus-visible,
.registration-insurance-help-button[aria-expanded="true"] {
    border-color: #18243A;
    background-color: transparent;
    color: var(--color-text-primary);
}
.registration-insurance-help-button:focus-visible {outline: 2px solid var(--color-primary); outline-offset: 3px;}

.registration-insurance-tooltip {
    grid-column: 1 / -1;
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0;
    padding: var(--spacing-16) var(--spacing-20);
    border: 1px solid #D6E8FF;
    border-radius: var(--radius-md);
    background-color: var(--color-primary-5); 
    color: var(--color-text-primary);
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
    text-align: left;
    box-shadow: none;
}
.registration-insurance-tooltip::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 14px;
    height: 14px;
    border-top: 1px solid #D6E8FF;
    border-left: 1px solid #D6E8FF;
    background-color: var(--color-primary-5); 
    transform: translateX(-50%) rotate(45deg);
}

/* ============================================================
   7. 전자계약
============================================================ */
.registration-contract-desc {
    margin-top: var(--spacing-12);
    margin-bottom: 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-semibold);
    line-height: 1.65;
    text-align: center;
}
.registration-contract-desc strong {color: var(--color-primary); font-weight: var(--font-weight-bold);}

.registration-process-list-contract {grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none;}

.registration-contract-panel {max-width: var(--registration-content-max-width); margin: 0 auto;}

.registration-contract-notes {
    display: grid;
    gap: var(--spacing-16);
    margin-top: var(--spacing-48);
    padding: var(--spacing-40) var(--spacing-48);
    border: 1px solid #E6EDF7;
    border-radius: var(--radius-md);
    background-color: #F8FAFD;
    color: var(--color-text-secondary);
    font-size: var(--font-size-ui);
    line-height: 1.65;
}

.registration-contract-notes-title {
    margin-bottom: 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
}

.registration-contract-note-list {
    display: grid;
    gap: var(--spacing-16);
    margin: 0;
    padding-left: var(--spacing-20);
}
.registration-contract-note-list li::marker {color: var(--color-text-primary); font-weight: var(--font-weight-bold);}
.registration-contract-note-list strong {
    display: block;
    margin-bottom: var(--spacing-4);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
}

/* ============================================================
   8. CTA
============================================================ */
.registration-cta-section {padding: 0 0 var(--spacing-80); background-color: var(--color-bg-white);}

.registration-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: var(--registration-content-max-width);
    margin: 0 auto;
}
.registration-cta .button {
    min-width: 260px;
    min-height: 64px;
    padding-right: var(--spacing-32);
    padding-left: var(--spacing-32);
    border-radius: var(--radius-full);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
}

/* ============================================================
   9. Reduced Motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
    .registration-page .fade-in-up.is-reveal-ready {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .registration-anchor-link,
    .registration-anchor-link::after {
        transition: none;
    }

    .registration-process-badge::after {animation: none;}
    .registration-process-item::before {animation: none;}
}

/* ============================================================
   10. 반응형
============================================================ */
@media (max-width: 1024px) {
    .registration-page {--registration-step-size: 60px;}
    .registration-section {padding: var(--registration-section-padding-y-tablet) 0;}

    .registration-cost-grid {gap: var(--spacing-20);}
    .registration-cost-card {padding: var(--spacing-32) var(--spacing-24);}

    .registration-insurance-help-button {font-size: 22px;}
}

@media (max-width: 768px) {
    .registration-page {--registration-step-size: var(--registration-step-size-mobile);}
    .registration-page .fade-in-up.delay-1,
    .registration-page .fade-in-up.delay-2,
    .registration-page .fade-in-up.delay-3,
    .registration-page .fade-in-up.delay-4 {
        transition-delay: 0s;
    }

    .registration-page-header {padding: var(--spacing-80) 0 var(--spacing-64); text-align: center;}

    .registration-anchor {top: var(--header-height-mobile);}

    .registration-section {scroll-margin-top: calc(var(--header-height-mobile) + var(--registration-anchor-height) + var(--spacing-24));}

    .registration-insurance-help-button {font-size: 20px;}

    .registration-cost-grid {grid-template-columns: 1fr; max-width: 520px;}
    .registration-cost-card-note {grid-column: 1;}

    .registration-process-list,
    .registration-process-list-contract {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-24);
        width: fit-content;
        max-width: 560px;
        margin-inline: auto;
    }

    .registration-contract-notes {padding: var(--spacing-32);}

    .registration-insurance-table {min-width: 0;}
    .registration-insurance-table th,
    .registration-insurance-table td {
        padding-right: var(--spacing-12);
        padding-left: var(--spacing-12);
    }

    .registration-process-item {
        display: grid;
        grid-template-columns: var(--registration-step-size) minmax(0, 1fr);
        align-items: start;
        column-gap: var(--spacing-20);
        padding: 0;
        text-align: left;
    }
    .registration-process-desc br {display: none;}
    .registration-process-number {font-size: var(--font-size-h6);}
    .registration-process-item:not(:last-child)::after {
        content: "";
        top: calc(var(--registration-step-size) + var(--spacing-4));
        right: auto;
        left: calc(var(--registration-step-size) / 2);
        width: 1px;
        height: calc(100% - var(--registration-step-size) + var(--spacing-16));
        background-color: var(--color-border-light);
        transform: none;
        -webkit-mask: none;
        mask: none;
    }
    .registration-process-item:not(:last-child)::before {display: none;}
    .registration-process-content {align-items: flex-start; margin-top: 0;}
    .registration-process-badge {align-self: flex-start;}

    .registration-document-panel {grid-template-columns: 1fr; gap: var(--spacing-24);}
    .registration-document-group {grid-template-columns: 1fr; padding: var(--spacing-40);}
}

@media (max-width: 480px) {
    .registration-page {--registration-step-size: var(--registration-step-size-mobile); --registration-anchor-height: 64px;}
    .registration-page-header {padding: var(--spacing-48) 0 var(--spacing-40);}
    .registration-section {padding: var(--registration-section-padding-y-mobile) 0; scroll-margin-top: calc(var(--header-height-mobile) + var(--registration-anchor-height) + var(--spacing-16));}
    .registration-section .section-header {margin-bottom: var(--spacing-40);}

    .registration-process-item {column-gap: var(--spacing-16);}

    .registration-anchor-list {
        justify-content: flex-start;
        gap: var(--spacing-8);
        padding-top: var(--spacing-8);
        padding-right: var(--spacing-16);
        padding-bottom: var(--spacing-8);
        padding-left: var(--spacing-16);
    }
    .registration-anchor-link {
        min-height: 48px;
        padding-right: var(--spacing-16);
        padding-left: var(--spacing-16);
        font-size: var(--font-size-ui);
    }

    .registration-insurance-help-button {font-size: 18px;}

    .registration-page-header .page-header-desc,
    .registration-section .section-header-desc {
        max-width: 100%;
    }

    .registration-cost-card {padding: var(--spacing-24) var(--spacing-20);}

    .registration-document-group {padding: var(--spacing-24);}

    .registration-contract-notes {padding: var(--spacing-32) var(--spacing-24);}

    .registration-cost-card {min-height: 280px;}
    .registration-cost-title {margin-bottom: var(--spacing-40); font-size: var(--font-size-h6);}
    .registration-cost-body {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--spacing-8);
        height: 56px;
    }
    .registration-cost-value strong {font-size: 2.125rem;}
    .registration-cost-value-rate strong {font-size: 2.125rem;}

    .registration-process-title {font-size: var(--font-size-h6);}
    .registration-process-number {font-size: var(--font-size-ui);}
    .registration-process-desc {font-size: var(--font-size-ui);}

    .registration-document-title {font-size: var(--font-size-h5);}

    .registration-insurance-table th,
    .registration-insurance-table td {
        padding: var(--spacing-24) var(--spacing-12);
    }
    .registration-insurance-table thead th {
        padding-top: 0;
        padding-bottom: var(--spacing-16);
        font-size: var(--font-size-ui);
    }
    .registration-insurance-table tbody td {font-size: var(--font-size-ui);}

    .registration-cta-section {padding: 0 0 var(--spacing-64);}
    .registration-cta .button {width: 100%; min-width: 0;}
}

@media (max-width: 360px) {
    .registration-cost-card {padding: var(--spacing-20) var(--spacing-16);}

    .registration-document-group {padding: var(--spacing-20);}

    .registration-contract-notes {padding: var(--spacing-24) var(--spacing-20);}

    .registration-cost-value strong {font-size: 2rem;}

    .registration-insurance-table thead th {font-size: var(--font-size-ui);}
    .registration-insurance-table tbody td {font-size: var(--font-size-ui);}
}