* {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html,
 body {
     width: 100%;
     background: #F5F5F6;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
     color: #18181B;
     -webkit-font-smoothing: antialiased;
 }

 a {
     text-decoration: none;
     color: inherit;
 }

 ul {
     list-style: none;
 }

 button {
     font-family: inherit;
     cursor: pointer;
     border: none;
 }

 input,
 select {
     font-family: inherit;
 }

 .site-header {
     width: 100%;
     background: #FFFFFF;
     border-bottom: 1px solid #EAEAEC;
     padding: 20px 64px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .logo {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .logo img {
     width: 60px;
     height: 60px;
 }

 .logo-mark {
     width: 34px;
     height: 34px;
     flex-shrink: 0;
 }

 .logo-text {
     display: flex;
     flex-direction: column;
     line-height: 1.1;
 }

 .logo-text .l1 {
     font-size: 15px;
     font-weight: 800;
     letter-spacing: 0.5px;
     color: #18181B;
 }

 .logo-text .l2 {
     font-size: 8px;
     font-weight: 600;
     letter-spacing: 2px;
     color: #9A9AA2;
 }

 .nav-links {
     display: flex;
     align-items: center;
     gap: 36px;
 }

 .nav-links a {
     font-size: 14px;
     font-weight: 500;
     color: #3F3F46;
 }

 .nav-links a:hover {
     color: #18181B;
 }

 .support-btn {
     display: flex;
     align-items: center;
     gap: 8px;
     background: #18181B;
     color: #FFFFFF;
     padding: 12px 20px;
     border-radius: 8px;
     font-size: 14px;
     font-weight: 600;
 }

 .hamburger {
     display: none;
     width: 22px;
     height: 16px;
     flex-direction: column;
     justify-content: space-between;
 }

 .hamburger span {
     display: block;
     width: 100%;
     height: 2px;
     background: #18181B;
 }

 .hero {
     padding: 64px 0;
     display: flex;
     gap: 64px;
     align-items: flex-start;
     justify-content: center;
     max-width: 80%;
     margin: 0 auto;
 }

 .hero-left {
     max-width: 50%;
     flex-shrink: 0;
 }

 .eyebrow {
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 1.5px;
     color: #9A9AA2;
     margin-bottom: 18px;
 }

 .hero-title {
     font-size: 42px;
     font-weight: 700;
     line-height: 1.15;
     color: #18181B;
     margin-bottom: 22px;
 }

 .hero-title .grey {
     color: #B0B0B6;
 }

 .hero-desc {
     font-size: 15px;
     line-height: 1.7;
     color: #6B6B72;
     margin-bottom: 30px;
 }

 .hero-desc b {
     color: #18181B;
     font-weight: 700;
 }

 .notice-box {
     display: flex;
     gap: 14px;
     align-items: flex-start;
     background: #FAFAFA;
     border: 1px solid #ECECEE;
     border-radius: 12px;
     padding: 18px;
 }

 .notice-icon {
     width: 34px;
     height: 34px;
     flex-shrink: 0;
     border-radius: 50%;
     background: #EFEFF1;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .notice-icon img {
     width: 100%;
     height: 100%;
 }

 .notice-box p {
     font-size: 13px;
     line-height: 1.7;
     color: #6B6B72;
 }

 .notice-box b {
     color: #18181B;
     font-weight: 700;
 }

 .form-card {
     background: #FFFFFF;
     border: 1px solid #ECECEE;
     border-radius: 16px;
     padding: 36px;
     width: 50%;
     flex-shrink: 0;
     box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.08);
 }

 .form-card-head {
     display: flex;
     align-items: center;
     gap: 14px;
     margin-bottom: 28px;
 }

 .form-card-head .icon-circle {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background: #F4F4F5;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .form-card-head h2 {
     font-size: 18px;
     font-weight: 700;
 }

 .field {
     margin-bottom: 20px;
 }

 .field label {
     display: block;
     font-size: 13px;
     font-weight: 700;
     color: #18181B;
     margin-bottom: 9px;
 }

 .field label .opt {
     font-weight: 500;
     color: #9A9AA2;
 }

 .field label .req {
     color: #EF4444;
 }

 .input-wrap {
     position: relative;
     display: flex;
     align-items: center;
 }

 .input-wrap img {
     position: absolute;
     left: 14px;
     width: 18px;
     height: 18px;
     pointer-events: none;
 }

 .input-wrap select,
 .input-wrap input {
     width: 100%;
     background: #FAFAFA;
     border: 1px solid #EAEAEC;
     border-radius: 9px;
     padding: 13px 14px 13px 40px;
     font-size: 13.5px;
     color: #18181B;
     outline: none;
     appearance: none;
 }

 .input-wrap select {
     padding-right: 34px;
     cursor: pointer;
 }

 .input-wrap.no-icon select,
 .input-wrap.no-icon input {
     padding-left: 14px;
 }

 .input-wrap select::placeholder,
 .input-wrap input::placeholder {
     color: #B0B0B6;
 }

 .input-wrap .chev {
     left: auto;
     right: 14px;
 }

 .checkbox-row {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     margin-bottom: 22px;
 }

 .checkbox-row input {
     margin-top: 3px;
     width: 15px;
     height: 15px;
     accent-color: #18181B;
     flex-shrink: 0;
 }

 .checkbox-row p {
     font-size: 12.5px;
     line-height: 1.6;
     color: #6B6B72;
 }

 .delete-btn {
     width: 100%;
     background: #18181B;
     color: #FFFFFF;
     padding: 15px;
     border-radius: 9px;
     font-size: 14px;
     font-weight: 700;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 9px;
     margin-bottom: 18px;
 }

 .delete-btn:hover {
     background: #000000;
 }

 .secure-note {
     display: flex;
     align-items: flex-start;
     gap: 8px;
     justify-content: center;
     text-align: center;
 }

 .secure-note svg {
     width: 13px;
     height: 13px;
     color: #B0B0B6;
     flex-shrink: 0;
     margin-top: 2px;
 }

 .secure-note p {
     font-size: 11.5px;
     color: #9A9AA2;
     line-height: 1.6;
 }

 .steps-section {
     background: #FFFFFF;
     border-top: 1px solid #EAEAEC;
     border-bottom: 1px solid #EAEAEC;
     padding: 56px 64px;
     text-align: center;
 }

 .steps-title {
     font-size: 22px;
     font-weight: 700;
     margin-bottom: 40px;
 }

 .steps-row {
     display: flex;
     align-items: flex-start;
     justify-content: center;
     gap: 0;
     max-width: 800px;
     margin: 0 auto;
 }

 .step {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 160px;
 }

 .step-icon {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: #F4F4F5;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 16px;
 }

 .step-icon svg {
     width: 26px;
     height: 26px;
     color: #18181B;
 }

 .step h4 {
     font-size: 14px;
     font-weight: 700;
     margin-bottom: 6px;
 }

 .step p {
     font-size: 12.5px;
     color: #9A9AA2;
     line-height: 1.6;
 }

 .step-arrow {
     width: 40px;
     height: 56px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #D4D4D8;
     flex-shrink: 0;
 }

 .process-note {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: #FAFAFA;
     border: 1px solid #ECECEE;
     border-radius: 999px;
     padding: 10px 20px;
     font-size: 12.5px;
     margin-top: 36px;
 }

 .process-note svg {
     width: 14px;
     height: 14px;
 }

 .data-section {
     padding: 56px 64px;
     display: flex;
     gap: 24px;
 }

 .data-card {
     flex: 1;
     background: #FFFFFF;
     border: 1px solid #ECECEE;
     border-radius: 14px;
     padding: 26px 28px;
 }

 .data-card-head {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 20px;
 }

 .data-card-head .dot {
     width: 22px;
     height: 22px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .dot.green img {
     width: 24px;
     height: 24px;
 }

 .dot.amber img {
     width: 24px;
     height: 24px;
 }

 .data-card-head h3 {
     font-size: 15px;
     font-weight: 700;
 }

 .data-card ul li {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 13.5px;
     color: #3F3F46;
     padding: 8px 0;
 }

 .data-card ul li svg {
     width: 15px;
     height: 15px;
     flex-shrink: 0;
 }

 .data-card.deleted ul li img {
     width: 14px;
     height: 14px;
 }

 .data-card.retained ul li img {
     width: 14px;
     height: 14px;
 }

 .footer-note {
     margin: 0 64px 40px 64px;
     display: flex;
     align-items: center;
     gap: 12px;
     background: #FAFAFA;
     border-radius: 12px;
     padding: 18px 24px;
     justify-content: center;
     text-align: center;
 }

 .footer-note img {
     width: 18px;
     height: 18px;
     color: #9A9AA2;
     flex-shrink: 0;
 }

 .footer-note p {
     font-size: 13px;
     color: #6B6B72;
     line-height: 1.6;
 }

 .site-footer {
     border-top: 1px solid #EAEAEC;
     padding: 48px 64px 24px 64px;
 }

 .footer-grid {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 40px;
     padding-bottom: 32px;
 }

 .footer-col h5 {
     font-size: 13px;
     font-weight: 700;
     margin-bottom: 16px;
 }

 .footer-col.brand {
     max-width: 40%;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
 }

 .footer-col.brand .logo {
     margin-bottom: 14px;
 }

 .footer-col.brand p {
     font-size: 13px;
     color: #9A9AA2;
     line-height: 1.7;
 }

 .footer-col ul li {
     margin-bottom: 11px;
 }

 .footer-col ul li a {
     font-size: 13px;
     color: #6B6B72;
 }

 .footer-col ul li a:hover {
     color: #18181B;
 }

 .footer-col ul li.with-icon {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .footer-col ul li.with-icon img {
     width: 16px;
     height: 16px;
     color: #9A9AA2;
     flex-shrink: 0;
 }

 .footer-bottom {
     border-top: 1px solid #EAEAEC;
     padding-top: 20px;
     font-size: 12.5px;
     color: #9A9AA2;
     text-align: center;
 }

 .accordion {
     display: none;
 }

 .accordion-item {
     border-radius: 12px;
     margin-bottom: 12px;
     overflow: hidden;
     border: 1px solid #ECECEE;
 }

 .accordion-item.green {
     background: #F0FDF4;
     border-color: #DCFCE7;
 }

 .accordion-item.amber {
     background: #FFFBEB;
     border-color: #FEF3C7;
 }

 .accordion-head {
     width: 100%;
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 15px 18px;
     background: transparent;
     font-size: 13.5px;
     font-weight: 700;
 }

 .accordion-item.green .accordion-head {
     color: #15803D;
 }

 .accordion-item.amber .accordion-head {
     color: #B45309;
 }

 .accordion-head svg.dot-icon {
     width: 16px;
     height: 16px;
     flex-shrink: 0;
 }

 .accordion-head svg.chev-icon {
     margin-left: auto;
     width: 14px;
     height: 14px;
     transition: transform 0.2s ease;
 }

 .accordion-item.open .accordion-head svg.chev-icon {
     transform: rotate(180deg);
 }

 .accordion-body {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.25s ease;
     padding: 0 18px;
 }

 .accordion-item.open .accordion-body {
     padding: 0 18px 16px 18px;
     max-height: fit-content;
 }

 .accordion-body ul li {
     display: flex;
     align-items: center;
     gap: 9px;
     font-size: 12.5px;
     color: #3F3F46;
     padding: 6px 0;
 }

 .accordion-body ul li svg {
     width: 13px;
     height: 13px;
     flex-shrink: 0;
 }

 .accordion-item.green .accordion-body ul li svg {
     color: #16A34A;
 }

 .accordion-item.amber .accordion-body ul li svg {
     color: #D97706;
 }

 @media (max-width: 1024px) {

     .site-header {
         padding: 18px 28px;
     }

     .nav-links {
         display: none;
     }

     .nav-links.mobile-open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        padding: 20px 28px;
        border-bottom: 1px solid #EAEAEC;
        gap: 20px;
        z-index: 20;
    }

     .support-btn {
         display: none;
     }

     .hamburger {
         display: flex;
     }

     .hero {
         flex-direction: column;
         padding: 40px 28px;
         gap: 36px;
         align-items: center;
     }

     .hero-left {
         max-width: 640px;
         text-align: left;
     }

     .hero-title {
         font-size: 32px;
     }

     .form-card {
         width: 100%;
         max-width: 440px;
     }

     .steps-section {
         padding: 40px 24px;
     }

     .steps-row {
         flex-wrap: nowrap;
         justify-content: center;
         gap: 8px 0;
     }

     .step {
         width: 130px;
     }

     .step-arrow {
         width: 26px;
     }

     .data-section {
         flex-direction: column;
         padding: 40px 28px;
     }

     .footer-note {
         text-align: left;
         justify-content: flex-start;
         align-items: flex-start;
     }

     .footer-note {
         margin: 0 28px 32px 28px;
     }

     .site-footer {
         padding: 40px 28px 20px 28px;
     }

     .footer-grid {
         flex-wrap: wrap;
         gap: 32px;
     }
 }

 @media (max-width: 768px) {

     .site-header {
         padding: 16px 20px;
     }

     .hero {
         padding: 28px 20px;
         gap: 28px;
     }

     .hero-left {
         max-width: 100%;
     }

     .hero-title {
         font-size: 26px;
     }

     .hero-desc {
         font-size: 13.5px;
     }

     .form-card {
         padding: 24px 20px;
         border-radius: 14px;
     }

     .form-card-head h2 {
         font-size: 16px;
     }

     .steps-section {
         padding: 32px 20px;
     }

     .steps-title {
         font-size: 18px;
         margin-bottom: 28px;
     }

     .step h4,
     .step p {
         display: none;
     }

     .step-icon {
         margin-bottom: 0;
         width: 44px;
         height: 44px;
         flex-shrink: 0;
     }

     .step-icon svg {
         width: 18px;
         height: 18px;
     }

     .step-arrow {
         display: none;
     }

     .process-note {
         width: 100%;
         justify-content: center;
         text-align: center;
     }

     .data-section {
         display: none;
     }

     .accordion {
         display: block;
         padding: 0 20px 8px 20px;
     }

     .site-footer {
         padding: 16px 20px 12px 20px;
     }

     .footer-grid {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         gap: 12px;
         padding-bottom: 12px;
     }

     .footer-col.brand {
         width: 100%;
         max-width: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: flex-start;
         gap: 0;
     }

     .footer-col.brand .logo {
         margin-bottom: 0;
     }

     .footer-col.brand .logo img {
         width: 60px;
         height: 60px;
     }

     #company-footer-description {
         display: none !important;
     }

     .footer-col h5 {
         display: none;
     }

     .footer-grid .footer-col:nth-child(3) {
         width: fit-content;
         margin: 0 auto;
         order: 2;
     }



     .footer-grid .footer-col:nth-child(3) ul {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         justify-content: flex-start;
         gap: 8px;
     }

     .footer-grid .footer-col:nth-child(3) ul li {
         margin-bottom: 0;
     }

     .footer-grid .footer-col:nth-child(3) ul li.with-icon {
         display: flex;
         align-items: center;
         gap: 6px;
     }

     .footer-grid .footer-col:nth-child(3) ul li.with-icon img {
         width: 12px;
         height: 12px;
     }

     .footer-grid .footer-col:nth-child(3) ul li a {
         font-size: 12px;
         white-space: nowrap;
     }

     .footer-grid .footer-col:nth-child(2) {
         width: 100%;
         order: 3;
     }

     .footer-grid .footer-col:nth-child(2) ul {
         display: flex;
         justify-content: center;
         align-items: center;
         gap: 18px;
         flex-wrap: wrap;
         width: 100%;
     }

     .footer-grid .footer-col:nth-child(2) ul li {
         margin-bottom: 0;
     }

     .footer-grid .footer-col:nth-child(2) ul li a {
         font-size: 11px;
         white-space: nowrap;
     }

     .footer-bottom {
         padding-top: 10px;
         font-size: 9px;
         text-align: center;
     }
 }