/*
 * "Оживити AI-дизайн" landing
 */

/* ── Pains ──────────────────────────────────────────────────────────────── */
.pains {
    padding: var(--space-section-sm) 0 var(--space-section);
}

.pains__list {
    display: flex;
    gap: 24px;
}

.pains__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px;
    border: 1px solid var(--color-line);
}

.pains__pixels { margin-bottom: 16px; }

.pains__item-text {
    font-size: var(--fs-body);
    line-height: 1.4;
    color: var(--color-text-muted);
}

/* ── Before / after ─────────────────────────────────────────────────────── */
.compare {
    padding: var(--space-section) 0;
}

.compare__wrp {
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.compare__title { margin-left: var(--content-indent); }

.compare__list {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.compare__item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.compare__caption {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
}

.before-after__frame {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-grey);
    cursor: ew-resize;
    user-select: none;
}

.before-after__after,
.before-after__image {
    display: block;
    width: 100%;
    height: auto;
}

.before-after__before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 50%;
    overflow: hidden;
}

.before-after__image {
    width: auto;
    max-width: none;
    height: 100%;
}

.before-after__label {
    position: absolute;
    top: 16px;
    padding: 6px 10px;
    font-family: var(--font-heading);
    font-size: var(--fs-caption);
    font-weight: 500;
    color: var(--color-bg);
    background: var(--color-text);
    pointer-events: none;
}

.before-after__label--before { left: 16px; }
.before-after__label--after { right: 16px; background: var(--color-primary); }

.before-after__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: var(--color-bg);
    pointer-events: none;
}

.before-after__handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    background: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-bg);
}

.before-after__control { display: block; }

.before-after__range {
    width: 100%;
    height: 24px;
    accent-color: var(--color-primary);
    cursor: ew-resize;
}

/* ── How it works ───────────────────────────────────────────────────────── */
.how {
    padding: var(--space-section-lg) 0;
}

.how__wrp {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.how__title { margin-left: var(--content-indent); }

.how__steps {
    display: flex;
    gap: 24px;
}

.how__step {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 24px 32px;
    border: 1px solid #2A2A2A;
}

.how__number {
    margin-bottom: 16px;
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: 1;
    color: var(--color-primary-50);
}

.how__step-text {
    font-size: var(--fs-small);
    line-height: 1.4;
    color: var(--color-text-on-dark);
}

/* ── Fixes checklist ────────────────────────────────────────────────────── */
.fixes {
    padding: var(--space-section) 0;
}

.fixes__wrp {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.fixes__title {
    flex: 0 1 var(--aside-width);
    min-width: 0;
    padding: 0 40px 0 var(--content-indent);
}

.fixes__title.heading::before { left: -40px; }

.fixes__list {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-line);
}

.fixes__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    font-size: 18px;
    line-height: 1.3;
    border-bottom: 1px solid var(--color-line);
}

.fixes__icon {
    flex: none;
    color: var(--color-primary);
}

/* ── Upload form ────────────────────────────────────────────────────────── */
.upload {
    padding: var(--space-section) 0;
}

.upload__wrp {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

.upload__intro {
    flex: 0 1 var(--aside-width);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 40px 0 var(--content-indent);
}

.upload__title.heading::before { left: -40px; }

.upload__text {
    font-size: 18px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.upload__form {
    flex: 1;
    min-width: 0;
    padding: 40px;
    border: 1px solid var(--color-border);
}

.form .jet-form-builder-file-upload {
    padding: 24px;
    text-align: center;
    border: 1px dashed var(--color-text-muted);
    transition: border-color var(--transition), background-color var(--transition);
}

.form .jet-form-builder-file-upload:hover,
.form .jet-form-builder-file-upload--dragover {
    background: var(--color-primary-10);
    border-color: var(--color-primary);
}

/* ── Cross-sell ─────────────────────────────────────────────────────────── */
.cross {
    padding: var(--space-section) 0;
}

.cross__list {
    display: flex;
    gap: 24px;
}

.cross__item { flex: 1; display: flex; }

.cross__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 32px;
    border: 1px solid var(--color-border);
    transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}

.cross__link:hover {
    color: var(--color-primary);
    background: var(--color-primary-10);
    border-color: var(--color-primary);
}

.cross__icon {
    flex: none;
    transition: transform var(--transition);
}

.cross__link:hover .cross__icon { transform: translateX(6px); }

/* ═══ Tablet (< 1024px) ═════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    .fixes__title { padding-top: 26px; }
    .fixes__title.heading::before { left: var(--content-indent); }
    .upload__title.heading::before { left: 0; }
    .pains__list { flex-wrap: wrap; gap: 20px; }
    .pains__item { flex: 1 1 260px; }
    .how__steps { flex-wrap: wrap; gap: 20px; }
    .how__step { flex: 1 1 240px; }
    .upload__form { padding: 28px; }
}

/* ═══ Phone (< 768px) ═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .fixes__title.heading::before,
    .upload__title.heading::before { left: 0; }
    .fixes__title,
    .upload__title { flex: none; padding: 0; }
    .pains { padding-top: 8px; }
    .pains__list { flex-direction: column; gap: 16px; }
    .pains__item { padding: 20px; }

    .compare__wrp { gap: 24px; }
    .compare__title { margin-left: 0; }
    .before-after__label { top: 8px; font-size: 10px; }
    .before-after__handle::after { width: 32px; height: 32px; }

    .how__wrp { gap: 32px; }
    .how__title { margin-left: 0; }
    .how__steps { flex-direction: column; gap: 12px; }
    .how__step { padding: 20px; }
    .how__number { margin-bottom: 8px; font-size: 32px; }

    .fixes__item { padding: 16px 0; font-size: var(--fs-body); }

    .upload__form { padding: 24px 20px; }

    .cross__list { flex-direction: column; gap: 16px; }
    .cross__link { padding: 20px; }
}