.dark .itp-secondary-button {
    border-color: #668078;
    background: #1d2a26;
    color: #edf4f1;
}

.dark .itp-secondary-button:hover {
    border-color: #53b694;
    color: #d8fff1;
}

.itp-toast {
    top: 82px;
    right: auto;
    bottom: auto;
    left: 50%;
    min-width: 104px;
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 7px;
    background: #5865f2;
    color: #fff;
    text-align: center;
    box-shadow: 0 12px 30px rgba(42, 50, 120, .25);
    transform: translate(-50%, -12px);
}

.itp-toast.is-visible {
    transform: translate(-50%, 0);
}

.itp-page {
    --itp-accent: #5865f2;
    --itp-accent-dark: #4652d9;
    --itp-ink: #292b35;
    --itp-muted: #69728a;
    --itp-line: #dfe5f3;
    --itp-soft: #f4f6ff;
}

.itp-tool-section {
    padding-top: 74px;
    background: #f8f9ff;
}

.itp-intro {
    max-width: 820px;
    margin: 0 auto 48px;
    text-align: center;
}

.itp-intro h1 {
    max-width: 800px;
    margin: 0 auto;
    color: #292b35;
    font-size: clamp(44px, 6vw, 72px);
    line-height: 1.02;
}

.itp-intro > p:last-of-type {
    max-width: 720px;
    margin: 20px auto 0;
    color: #737b91;
    font-size: 18px;
}

.itp-kicker {
    color: #5865f2;
}

.itp-hero-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

.itp-hero-badges span {
    padding: 7px 13px;
    border-radius: 999px;
    color: #4652d9;
    background: #e9ebff;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.itp-hero-badges span:nth-child(2) {
    color: #087f5b;
    background: #dcf7ee;
}

.itp-hero-badges span:nth-child(3) {
    color: #a35b00;
    background: #fff0dc;
}

.itp-tool-tab {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border: 1px solid #e2e6f3;
    border-radius: 8px;
    background: rgba(255, 255, 255, .8);
    color: #353846;
    box-shadow: 0 2px 8px rgba(80, 91, 150, .06);
    font-size: 14px;
    font-weight: 800;
}

.itp-tool-tab span:before {
    content: "▣";
    margin-right: 8px;
    color: #5865f2;
}

.itp-tool-shell {
    border-color: #dfe5f3;
    background: #fff;
    box-shadow: 0 16px 45px rgba(75, 84, 140, .1);
}

.itp-upload-column,
.itp-settings-column,
.itp-results {
    padding: 30px;
}

.itp-upload-column {
    border-color: #e4e8f2;
}

.itp-drop-zone {
    border-color: #cdd8ee;
    background: #f8faff;
}

.itp-drop-zone:hover,
.itp-drop-zone:focus-visible,
.itp-drop-zone.is-dragging {
    border-color: #5865f2;
    background: #f1f3ff;
}

.itp-upload-icon {
    background: #5865f2;
}

.itp-select,
.itp-segments,
.itp-check span {
    border-color: #d6ddea;
}

.itp-select:focus,
.itp-select:focus-visible {
    border-color: #5865f2;
    outline: 3px solid rgba(88, 101, 242, .12);
}

.itp-segments {
    background: #f5f6fb;
}

.itp-segments input:checked + span {
    color: #4652d9;
    box-shadow: 0 1px 5px rgba(75, 84, 140, .12);
}

.itp-check input:checked + span {
    border-color: #9aa5ff;
    color: #4652d9;
    background: #f0f2ff;
}

.itp-check input:checked + span:before {
    border-color: #5865f2;
    background: #5865f2;
}

.itp-primary-button {
    border-color: #5865f2;
    background: #5865f2;
    box-shadow: 0 8px 18px rgba(88, 101, 242, .2);
}

.itp-primary-button:hover:not(:disabled) {
    background: #4652d9;
}

.itp-results {
    background: #fbfcff;
}

.itp-insights {
    border-color: #dfe5f3;
    background: #f3f5ff;
}

.itp-tags span {
    border-color: #cbd2ff;
    color: #4652d9;
    background: #fff;
}

.itp-muted-section {
    background: #f5f6fc;
}

.itp-steps > li > span {
    background: #5865f2;
}

.itp-model-list li,
.itp-use-grid li,
.itp-example {
    border-color: #e0e5f0;
    box-shadow: 0 4px 16px rgba(75, 84, 140, .04);
}

.itp-testimonials-section {
    border-bottom: 1px solid #e2e6f1;
    background: #fff;
}

.itp-testimonials-heading {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.itp-testimonials-heading > p:last-child {
    margin-right: auto;
    margin-left: auto;
}

.itp-testimonials {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid #e0e5f0;
    border-radius: 8px;
    background: #fbfcff;
    overflow: hidden;
}

.itp-testimonial {
    display: flex;
    min-width: 0;
    min-height: 250px;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 30px;
}

.itp-testimonial + .itp-testimonial {
    border-left: 1px solid #e0e5f0;
}

.itp-testimonial:nth-child(n + 4) {
    border-top: 1px solid #e0e5f0;
}

.itp-testimonial:nth-child(4) {
    border-left: 0;
}

.itp-testimonial blockquote {
    margin: 0;
    color: #343746;
    font-size: 17px;
    line-height: 1.75;
}

.itp-testimonial figcaption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 28px;
}

.itp-testimonial figcaption span {
    color: #292b35;
    font-size: 14px;
    font-weight: 800;
}

.itp-testimonial figcaption small {
    color: #737b91;
    font-size: 13px;
}

.dark .itp-testimonials-section {
    border-color: #30364a;
    background: #10131e;
}

.dark .itp-testimonials {
    border-color: #343b52;
    background: #171b28;
}

.dark .itp-testimonial + .itp-testimonial {
    border-color: #343b52;
}

.dark .itp-testimonial:nth-child(n + 4) {
    border-top-color: #343b52;
}

.dark .itp-testimonial blockquote,
.dark .itp-testimonial figcaption span {
    color: #eceef8;
}

.dark .itp-testimonial figcaption small {
    color: #aeb5c9;
}

.itp-header-cta {
    background: #5865f2;
}

.itp-header-cta:hover {
    background: #4652d9;
}

.dark .itp-page,
.dark .itp-tool-shell,
.dark .itp-example {
    --itp-accent: #8992ff;
    --itp-accent-dark: #a9afff;
    --itp-line: #33394e;
    --itp-soft: #171b2a;
}

.dark .itp-tool-section {
    background: #10131e;
}

.dark .itp-intro h1 {
    color: #f1f2f8;
}

.dark .itp-tool-tab {
    border-color: #30364a;
    background: #171b28;
    color: #eceef8;
}

.dark .itp-drop-zone,
.dark .itp-select,
.dark .itp-segments,
.dark .itp-results,
.dark .itp-insights {
    border-color: #343b52;
    background: #171b28;
}

.dark .itp-check input:checked + span {
    border-color: #6f78da;
    color: #cbd0ff;
    background: #222842;
}

.dark .itp-segments input:checked + span {
    color: #d9dcff;
    background: #30375f;
    box-shadow: none;
}

.zf-layout-header__desktop a,
.zf-layout-header__desktop a:hover,
.zf-layout-header__desktop a.cur {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.itp-upload-empty[hidden],
.itp-preview-wrap[hidden],
.itp-file-actions[hidden] {
    display: none !important;
}

.itp-drop-zone:has(.itp-preview-wrap:not([hidden])) {
    border-style: solid;
    border-color: var(--itp-line);
    background: #111;
}

.itp-preview-wrap {
    position: relative;
    height: 390px;
}

.itp-preview-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #111;
}

.itp-preview-wrap .itp-file-actions {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 58px;
    margin: 0;
    padding: 10px 12px;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, .2));
}

.itp-preview-wrap .itp-file-meta {
    color: #fff;
}

.itp-preview-buttons {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
}

.itp-preview-wrap .itp-text-button {
    min-height: 38px;
    padding: 7px 10px;
    color: #fff;
    border-radius: 5px;
    background: rgba(255, 255, 255, .16);
}

.itp-preview-wrap .itp-danger {
    color: #fff;
    background: rgba(180, 35, 24, .78);
}

@media (max-width: 640px) {
    .itp-tool-section {
        padding-top: 44px;
    }

    .itp-intro {
        margin-bottom: 34px;
    }

    .itp-intro h1 {
        font-size: 43px;
    }

    .itp-intro > p:last-of-type {
        font-size: 17px;
    }

    .itp-hero-badges {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    .itp-hero-badges span {
        display: flex;
        min-height: 48px;
        align-items: center;
        justify-content: center;
        padding: 6px;
        text-align: center;
    }

    .itp-tool-tab {
        margin-bottom: 10px;
    }

    .itp-upload-column,
    .itp-settings-column,
    .itp-results {
        padding: 20px;
    }

    .itp-preview-wrap {
        height: 280px;
    }

    .itp-preview-wrap .itp-file-actions {
        align-items: flex-end;
    }

    .itp-preview-wrap .itp-file-meta {
        max-width: 48%;
    }

    .itp-testimonials {
        grid-template-columns: 1fr;
    }

    .itp-testimonial {
        min-height: 0;
        padding: 24px 20px;
    }

    .itp-testimonial + .itp-testimonial {
        border-top: 1px solid #e0e5f0;
        border-left: 0;
    }

    .dark .itp-testimonial + .itp-testimonial {
        border-top-color: #343b52;
    }
}