.index-application-page {
    margin-top: 32px;
}
/* Use the standard site container width (global.css .container = 1780px),
   matching /reseller-calculator. The previous 1400px cap made this page
   look noticeably narrower than the rest of the site. */
body h1.title {
    font-size: 24px;
    line-height: 32px;
    color: #17181A;
    font-weight: 600;
}
body h2.title {
    font-size: 20px;
    line-height: 26px;
    color: #17181A;
    font-weight: 700;
}
body h3.title {
    font-size: 18px;
    line-height: 24px;
    color: #17181A;
    font-weight: 700;
}
.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    width: 100%;
}
.action-buttons .btn {
    margin: 0;
    width: 100%;
    justify-content: center;
}
.action-buttons .btn:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary-light);
}
.action-buttons .btn:hover svg path {
    fill: var(--primary);
}
/* The "Create Supplier Account" button keeps the .create-account-link class so
   global.js opens the registration popup, but that class normally styles a small
   underlined text link (login popup). Reset those props so it renders as a .btn. */
.action-buttons .create-account-link {
    display: inline-flex;
    color: #fff;
    font-size: 18px;
    line-height: 50px;
    text-decoration: none;
    margin-top: 0;
}
.action-buttons .create-account-link:hover {
    color: var(--primary);
    text-decoration: none;
}
/**/
.content {
  display: none;
}
.content.active {
  display: block;
}
.content-wrapper {
    border: 1px solid #F3F3F3;
    border-radius: 0 0 32px 32px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.content-wrapper-main {
    width: calc(100% - 400px);
}
.content .title {
    margin-bottom: 8px;
}
.content p {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 24px;
    color: #17181A;
}
.content .cta-lead {
    margin-top: 16px;
    font-weight: 600;
}
.benefits-heading {
    font-size: 16px;
    line-height: 24px;
    color: #17181A;
    font-weight: 700;
    margin: 16px 0 8px;
}
.partner-benefits {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.partner-benefits li {
    padding-left: 24px;
    position: relative;
}
.partner-benefits li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.184 3.42219C12.5032 2.97155 13.1278 2.86478 13.5785 3.18391C14.0291 3.50312 14.1359 4.12777 13.8168 4.57844L8.14978 12.5784C7.97028 12.8318 7.68271 12.9872 7.37243 12.9993C7.10119 13.0099 6.83929 12.9097 6.64489 12.7249L6.56579 12.6409L3.23181 8.64094C2.87827 8.2167 2.93555 7.58534 3.35974 7.23176C3.78398 6.87823 4.41534 6.9355 4.76892 7.35969L7.26892 10.3607L12.184 3.42219Z' fill='%232AA466'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}
.partner-benefits .benefit-title {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    color: #17181A;
    margin: 0 0 4px;
}
.partner-benefits li p {
    font-size: 14px;
    line-height: 20px;
    color: #555;
    margin: 0;
}
.partner-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}
.partner-benefits-list li {
    padding-left: 22px;
    position: relative;
    font-size: 14px;
    line-height: 22px;
    color: #17181A;
}
.partner-benefits-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.184 3.42219C12.5032 2.97155 13.1278 2.86478 13.5785 3.18391C14.0291 3.50312 14.1359 4.12777 13.8168 4.57844L8.14978 12.5784C7.97028 12.8318 7.68271 12.9872 7.37243 12.9993C7.10119 13.0099 6.83929 12.9097 6.64489 12.7249L6.56579 12.6409L3.23181 8.64094C2.87827 8.2167 2.93555 7.58534 3.35974 7.23176C3.78398 6.87823 4.41534 6.9355 4.76892 7.35969L7.26892 10.3607L12.184 3.42219Z' fill='%232AA466'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}
/**/
.index-application-inner {
    margin-top: 24px;
}
.button-wrapper {
    background-color: #F3F3F3;
    border-radius: 32px 32px 0 0;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tab-button {
    background-color: #fff;
    border: 1px solid var(--primary-border);
    border-radius: 40px;
    padding: 8px 18px;
    display: flex;
    align-items: center;
    background-repeat: no-repeat;
    background-position: 14px center;
    gap: 10px;
    cursor: pointer;
    transition: 0.3s all ease;
}
.tab-button.active {
    background-color: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
}
/**/
.form-content {
    width: 380px;
    border: 1px solid #F3F3F3;
    border-radius: 24px;
    padding: 20px;
}
.block-content {
    margin-top: 24px;
}
.form-content .row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.form-content .row .col {
    width: 100%;
}
.comment-box .title {
    margin: 10px 0 16px;
}
textarea {
    width: 100%;
    padding: 14px 16px 16px;
    font-size: 16px;
    border: 1px solid #cdcfd4;
    border-radius: 16px;
    outline: none;
    height: 56px;
    color: #17181a;
    box-sizing: border-box;
    font-weight: 500;
    min-height: 100px;
}

@media (max-width: 1023px) {
    .form-content {
        width: 320px;
    }
    .content-wrapper-main {
        width: calc(100% - 340px);
    }
}
@media (max-width: 767px) {
    .index-application-page {
        margin-top: 24px;
    }
    body h1.title {
        font-size: 20px;
        line-height: 24px;
    }
    .page-content, .form-content {
        width: 100%;
    }
    .button-wrapper {
        border-radius: 24px 24px 0 0;
    }
    .content-wrapper {
        border-radius: 0 0 24px 24px;
        gap: 40px;
    }
    .content .title {
        font-size: 18px;
        line-height: 24px;
    }
    .action-buttons .btn {
        height: 50px;
        line-height: 50px;
    }
    .button-wrapper {
        flex-wrap: nowrap;
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .tab-button {
        white-space: nowrap;
    }
    .content-wrapper-main {
        width: 100%;
    }
}
@media (max-width: 479px) {
    .content-wrapper {
        padding: 20px 16px;
    }
    .form-content {
        padding: 20px 16px;
    }
}

/* --- Ported home-page sections inside the application tabs ---------------
   Scoped under .content (the tab panel) with bespoke .appsec-* class names
   so they don't collide with home.css and aren't disturbed by the generic
   .content p / .content .title tab rules above, while replicating the
   home-page card aesthetic (soft primary-light border, chip subtitle,
   icon-list, stat counters). Media uses inline <video> and lazy YouTube
   <iframe>, so there is no home.js video-popup dependency. */
.content .appsec-card {
    border: 6px solid var(--primary-light);
    border-radius: 24px;
    padding: 28px;
    margin-top: 20px;
}
.content .appsec-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}
.content .appsec-row > .appsec-card {
    flex: 1 1 280px;
    min-width: 0;
    margin-top: 0;
}
/* First block in a tab hugs the top (no leading gap). */
.content .appsec-first {
    margin-top: 0;
}
/* image-with-text style: media beside body. */
.content .appsec-split {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}
.content .appsec-split > .appsec-media {
    flex: 1 1 44%;
    min-width: 0;
    margin: 0;
}
.content .appsec-split > .appsec-body {
    flex: 1 1 300px;
    min-width: 0;
}
/* Stacked media (video on top of the copy, e.g. Equipment Recognition). */
.content .appsec-media {
    margin: 16px 0 18px;
}
.content .appsec-media video,
.content .appsec-media iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 18px;
    display: block;
    background: #000;
}
/* Thumbnail-with-play-icon facade (matches /home: a clean poster + custom play
   button instead of YouTube chrome). Clicking swaps in the embed via JS. */
.content .appsec-video {
    position: relative;
    cursor: pointer;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #000;
}
.content .appsec-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.content .appsec-video .appsec-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
    transition: transform 0.2s ease;
}
.content .appsec-video:hover .appsec-video-play {
    transform: translate(-50%, -50%) scale(1.08);
}
.content .appsec-video iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    display: block;
}
/* Chip subtitle — matches home.css .heading-block h4.subtitle. */
.content .appsec-subtitle {
    display: inline-block;
    padding: 5px 10px;
    background-color: #f3f3f3;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    font-size: 15px;
    line-height: 20px;
    color: #17181A;
    font-weight: 600;
    margin: 0 0 14px;
}
.content .appsec-title {
    font-size: 24px;
    line-height: 30px;
    color: #17181A;
    font-weight: 700;
    margin: 0 0 12px;
}
.content .appsec-card .appsec-text {
    font-size: 15px;
    line-height: 24px;
    color: #454B54;
    font-weight: 500;
    margin: 0 0 12px;
}
.content .appsec-card .appsec-text:last-child {
    margin-bottom: 0;
}
/* Icon list (supplier benefits) — matches home.css .icon-list. */
.content .appsec-iconlist {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
}
.content .appsec-iconlist li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.content .appsec-iconlist li:last-child {
    margin-bottom: 0;
}
.content .appsec-ico {
    width: 28px;
    height: 28px;
    min-width: 28px;
    background-color: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
}
.content .appsec-ico-text h3 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: #17181A;
    margin: 0 0 4px;
}
.content .appsec-iconlist li p {
    font-size: 15px;
    line-height: 22px;
    color: #454B54;
    margin: 0;
}
/* Simple benefit list (reseller) — matches home.css ul.ul-list-block. */
.content .appsec-benefits-heading {
    font-size: 18px;
    line-height: 24px;
    color: #17181A;
    font-weight: 700;
    margin: 16px 0 8px;
}
.content .appsec-list {
    list-style: inside;
    padding-left: 2px;
    margin: 0;
}
.content .appsec-list li {
    margin: 3px 0;
    font-size: 15px;
    line-height: 24px;
    color: #17181A;
}
/* Stat counters — matches home.css .count-box / .count-number.green. */
.content .appsec-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 24px;
}
.content .appsec-stat {
    width: calc(50% - 10px);
}
.content .appsec-stat-num {
    display: block;
    font-size: 28px;
    line-height: 32px;
    font-weight: 700;
    color: var(--primary);
}
.content .appsec-stat-label {
    display: block;
    font-size: 16px;
    line-height: 22px;
    color: #17181A;
    margin-top: 4px;
}
@media (max-width: 600px) {
    .content .appsec-card {
        padding: 20px;
    }
    .content .appsec-split {
        gap: 20px;
    }
    .content .appsec-stat {
        width: 100%;
    }
}