/* =========================================================
   TATTOOAE · FUNNEL V3
   BUILD 02A · MOBILE-FIRST BASE
   ========================================================= */


/* =========================================================
   01 · TOKENS
   ========================================================= */

:root {
    --tae-f3-bg: #f4f5f7;
    --tae-f3-surface: #ffffff;

    --tae-f3-text: #18191c;
    --tae-f3-text-secondary: #65676b;
    --tae-f3-text-muted: #8a8d91;

    --tae-f3-line: #e2e4e8;
    --tae-f3-line-strong: #d4d7dc;

    --tae-f3-action: #171717;
    --tae-f3-action-hover: #000000;
    --tae-f3-action-soft: rgba(183, 154, 97, 0.14);
    --tae-f3-accent: #b79a61;

    --tae-f3-radius-sm: 8px;
    --tae-f3-radius-md: 12px;
    --tae-f3-radius-lg: 16px;

    --tae-f3-space-4: 4px;
    --tae-f3-space-8: 8px;
    --tae-f3-space-12: 12px;
    --tae-f3-space-16: 16px;
    --tae-f3-space-20: 20px;
    --tae-f3-space-24: 24px;
    --tae-f3-space-32: 32px;

    --tae-f3-shell-max: 560px;
}


/* =========================================================
   02 · SHELL
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--tae-f3-bg);
}

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;

    background: var(--tae-f3-bg);
    color: var(--tae-f3-text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 16px;
    line-height: 1.45;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
textarea,
select {
    font: inherit;
}

.tae-f3 {
    width: 100%;
    min-height: 100vh;
}

.tae-f3__shell {
    width: 100%;
    max-width: var(--tae-f3-shell-max);
    min-height: 100vh;
    margin: 0 auto;

    background: var(--tae-f3-surface);
}



.tae-f3__intro[hidden],
.tae-f3__progress[hidden],
.tae-f3__steps[hidden] {
    display: none !important;
}

/* =========================================================
   03 · ARTIST HEADER
   ========================================================= */

.tae-f3__artist-header {
    display: flex;
    align-items: center;
    gap: var(--tae-f3-space-12);

    padding:
        var(--tae-f3-space-16)
        var(--tae-f3-space-16)
        var(--tae-f3-space-12);

    background: var(--tae-f3-surface);
}

.tae-f3__artist-avatar {
    display: block;

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    object-fit: cover;
    border-radius: 50%;

    background: var(--tae-f3-bg);
    border: 1px solid var(--tae-f3-line);
}

.tae-f3__artist-info {
    display: flex;
    flex-direction: column;
    gap: 2px;

    min-width: 0;
}

.tae-f3__artist-name {
    overflow: hidden;

    color: var(--tae-f3-text);

    font-size: 15px;
    font-weight: 650;
    line-height: 1.25;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.tae-f3__artist-context {
    color: var(--tae-f3-text-secondary);

    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
}


/* =========================================================
   04 · ARTIST INTRO COMPONENT
   ========================================================= */

.tae-f3__intro {
    display: flex;
    min-height: min(72vh, 660px);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 52px 24px 40px;
    text-align: center;
}

.tae-f3__intro-avatar {
    width: 92px;
    height: 92px;
    margin-bottom: 20px;
    object-fit: cover;
    border: 1px solid var(--tae-f3-line);
    border-radius: 50%;
    background: var(--tae-f3-bg);
}

.tae-f3__intro-eyebrow {
    margin: 0 0 8px;
    color: var(--tae-f3-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}

.tae-f3__intro-title {
    max-width: 440px;
    margin: 0;
    color: var(--tae-f3-text);
    font-size: clamp(28px, 7vw, 38px);
    line-height: 1.08;
    letter-spacing: -.025em;
}

.tae-f3__intro-message,
.tae-f3__intro-location {
    max-width: 440px;
    margin: 16px 0 0;
    color: var(--tae-f3-text-secondary);
    font-size: 16px;
    line-height: 1.55;
}

.tae-f3__intro-location {
    margin-top: 8px;
    font-size: 14px;
}

.tae-f3__intro-cta {
    width: 100%;
    max-width: 360px;
    min-height: 52px;
    margin-top: 28px;
    border: 0;
    border-radius: 12px;
    background: var(--tae-f3-action);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease;
}

.tae-f3__intro-cta:hover { background: var(--tae-f3-action-hover); }
.tae-f3__intro-cta:active { transform: scale(.985); }

@media (min-width: 700px) {
    .tae-f3__intro { padding-inline: 40px; }
}


/* =========================================================
   05 · PROGRESS
   ========================================================= */

.tae-f3__progress {
    padding:
        var(--tae-f3-space-8)
        var(--tae-f3-space-16)
        var(--tae-f3-space-20);

    border-bottom: 1px solid var(--tae-f3-line);
}

.tae-f3__progress-meta {
    display: flex;
    justify-content: flex-end;

    margin-bottom: var(--tae-f3-space-8);

    color: var(--tae-f3-text-secondary);

    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
}

.tae-f3__progress-track {
    width: 100%;
    height: 4px;

    overflow: hidden;

    background: var(--tae-f3-line);
    border-radius: 999px;
}

.tae-f3__progress-value {
    width: 25%;
    height: 100%;

    background: var(--tae-f3-action);
    border-radius: inherit;
}


/* =========================================================
   05 · STEP
   ========================================================= */

.tae-f3__steps {
    width: 100%;
}

.tae-f3__step {
    padding:
        var(--tae-f3-space-24)
        var(--tae-f3-space-16)
        var(--tae-f3-space-32);
}

.tae-f3__step[hidden] {
    display: none !important;
}

.tae-f3__step-header {
    margin-bottom: var(--tae-f3-space-24);
}

.tae-f3__step-title {
    margin: 0;

    color: var(--tae-f3-text);

    font-size: clamp(24px, 7vw, 30px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.tae-f3__field {
    min-width: 0;
    margin: 0 0 var(--tae-f3-space-24);
    padding: 0;

    border: 0;
}

.tae-f3__field-label {
    display: block;

    margin-bottom: var(--tae-f3-space-12);

    color: var(--tae-f3-text);

    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.tae-f3__field-help {
    margin:
        var(--tae-f3-space-8)
        0
        0;

    color: var(--tae-f3-text-secondary);

    font-size: 13px;
    line-height: 1.4;
}


/* =========================================================
   11 · MOBILE
   ========================================================= */

@media (max-width: 599px) {
    .tae-f3__shell {
        max-width: none;
    }
}


/* =========================================================
   12 · DESKTOP
   ========================================================= */

@media (min-width: 600px) {
    body {
        padding: 32px 16px;
    }

    .tae-f3__shell {
        min-height: auto;

        overflow: hidden;

        border: 1px solid var(--tae-f3-line);
        border-radius: var(--tae-f3-radius-lg);

        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.04),
            0 8px 32px rgba(0, 0, 0, 0.06);
    }
}


/* =========================================================
   06 · OPTIONS
   BUILD 02B
   ========================================================= */

.tae-f3__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tae-f3-space-12);
}

.tae-f3__option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 56px;
    padding: 14px 16px;

    cursor: pointer;
    user-select: none;

    background: var(--tae-f3-surface);
    border: 1px solid var(--tae-f3-line);
    border-radius: var(--tae-f3-radius-md);

    color: var(--tae-f3-text);

    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;

    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease,
        transform 120ms ease;
}

.tae-f3__option:hover {
    border-color: var(--tae-f3-line-strong);
    background: #fafbfc;
}

.tae-f3__option:active {
    transform: scale(0.985);
}

.tae-f3__option input {
    position: absolute;

    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;

    overflow: hidden;

    clip: rect(0 0 0 0);
    clip-path: inset(50%);

    border: 0;

    white-space: nowrap;
}

.tae-f3__option:has(input:focus-visible) {
    outline: 3px solid var(--tae-f3-action-soft);
    outline-offset: 2px;

    border-color: var(--tae-f3-action);
}

.tae-f3__option:has(input:checked) {
    background: var(--tae-f3-action);
    border-color: var(--tae-f3-action);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}



.tae-f3__option:has(input[value="other"]) {
    grid-column: 1 / -1;
}


/* =========================================================
   CONDITIONAL · OTHER
   ========================================================= */

.tae-f3__conditional {
    margin-top: var(--tae-f3-space-12);
}

.tae-f3__conditional[hidden] {
    display: none !important;
}

.tae-f3__conditional label {
    display: block;

    margin-bottom: var(--tae-f3-space-8);

    color: var(--tae-f3-text);

    font-size: 14px;
    font-weight: 600;
}

.tae-f3__conditional input {
    width: 100%;
    min-height: 50px;

    padding: 12px 14px;

    background: #ffffff;
    color: var(--tae-f3-text);

    border: 1px solid var(--tae-f3-line);
    border-radius: var(--tae-f3-radius-sm);

    outline: none;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.tae-f3__conditional input:focus {
    border-color: var(--tae-f3-action);

    box-shadow:
        0 0 0 3px var(--tae-f3-action-soft);
}


/* =========================================================
   STEP 1 · RHYTHM
   ========================================================= */

.tae-f3__step[data-step="1"] .tae-f3__field + .tae-f3__field {
    margin-top: var(--tae-f3-space-32);
}

.tae-f3__step[data-step="1"] .tae-f3__field-label {
    margin-bottom: var(--tae-f3-space-12);

    font-size: 16px;
    font-weight: 650;
}


/* =========================================================
   MOBILE POLISH
   ========================================================= */

@media (max-width: 380px) {
    .tae-f3__options {
        grid-template-columns: 1fr;
    }

    .tae-f3__option:has(input[value="other"]) {
        grid-column: auto;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .tae-f3__option {
        transition: none;
    }
}


/* =========================================================
   13 · FLOW MOTION
   BUILD 03A
   ========================================================= */

.tae-f3__progress-value {
    transition: width 220ms ease;
}

.tae-f3__field.is-revealing {
    opacity: 0;
    transform: translateY(8px);

    transition:
        opacity 200ms ease,
        transform 200ms ease;
}

.tae-f3__field.is-revealing.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.tae-f3__step.is-entering {
    animation: tae-f3-step-enter 220ms ease both;
}

@keyframes tae-f3-step-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   BACK ACTION
   ========================================================= */

.tae-f3__back {
    display: inline-flex;
    align-items: center;

    min-height: 36px;
    margin: 0 0 var(--tae-f3-space-16);
    padding: 0;

    appearance: none;
    background: transparent;
    border: 0;

    color: var(--tae-f3-text-secondary);

    cursor: pointer;

    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

.tae-f3__back:hover {
    color: var(--tae-f3-text);
}

.tae-f3__back:focus-visible {
    outline: 3px solid var(--tae-f3-action-soft);
    outline-offset: 4px;

    border-radius: var(--tae-f3-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    .tae-f3__progress-value,
    .tae-f3__field.is-revealing {
        transition: none;
    }

    .tae-f3__step.is-entering {
        animation: none;
    }
}


/* =========================================================
   BUILD 03A-R1 · SCREEN FLOW
   ========================================================= */

.tae-f3__field[hidden],
.tae-f3__back[hidden] {
    display: none !important;
}

.tae-f3__field.is-entering,
.tae-f3__step.is-entering {
    animation: tae-f3-r1-enter 200ms ease both;
}

@keyframes tae-f3-r1-enter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* CONTINUE */

.tae-f3__continue {
    width: 100%;
    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: var(--tae-f3-space-16);
    padding: 12px 18px;

    appearance: none;

    background: var(--tae-f3-action);
    color: #ffffff;

    border: 0;
    border-radius: var(--tae-f3-radius-md);

    cursor: pointer;

    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.tae-f3__continue:hover {
    background: var(--tae-f3-action-hover);
}

.tae-f3__continue:focus-visible {
    outline: 3px solid var(--tae-f3-action-soft);
    outline-offset: 3px;
}


/* BACK ALWAYS BELOW */

.tae-f3__back {
    width: 100%;

    justify-content: center;

    margin:
        var(--tae-f3-space-24)
        0
        0;

    padding: 10px 0;
}


/* OTHER INVALID */

.tae-f3__conditional input[aria-invalid="true"] {
    border-color: #c62828;

    box-shadow:
        0 0 0 3px rgba(198, 40, 40, 0.08);
}


/* PROGRESS ABOVE ARTIST */

.tae-f3__progress {
    order: initial;

    padding:
        14px
        16px
        10px;

    border-bottom: 0;
}

.tae-f3__progress-meta {
    margin-bottom: 7px;
}


/* SEGMENTED VISUAL TRACK */

.tae-f3__progress-track {
    height: 4px;

    background:
        repeating-linear-gradient(
            to right,
            var(--tae-f3-line) 0,
            var(--tae-f3-line) calc(25% - 6px),
            transparent calc(25% - 6px),
            transparent 25%
        );
}

.tae-f3__progress-value {
    background:
        repeating-linear-gradient(
            to right,
            var(--tae-f3-action) 0,
            var(--tae-f3-action) calc(25% - 6px),
            transparent calc(25% - 6px),
            transparent 25%
        );
}


/* R1: TITLE / FIELD AS ONE QUESTION */

.tae-f3__step[data-step="1"] .tae-f3__field-label {
    position: absolute;

    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;

    overflow: hidden;

    clip: rect(0 0 0 0);
    clip-path: inset(50%);

    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .tae-f3__field.is-entering,
    .tae-f3__step.is-entering {
        animation: none;
    }
}


/* =========================================================
   14 · ENGINE REGISTRY V1
   BUILD 03B-A
   ========================================================= */

.tae-f3__progress-track {
    height: auto;
    overflow: visible;
    background: transparent;
}

.tae-f3__progress-value {
    display: none;
}

.tae-f3__progress-segments {
    display: grid;

    grid-template-columns:
        repeat(
            var(--tae-f3-segment-count),
            minmax(0, 1fr)
        );

    gap: 6px;

    width: 100%;
}

.tae-f3__progress-segment {
    display: block;

    height: 4px;

    background: var(--tae-f3-line);

    border-radius: 999px;

    transition:
        background-color 180ms ease,
        opacity 180ms ease;
}

.tae-f3__progress-segment.is-complete,
.tae-f3__progress-segment.is-current {
    background: var(--tae-f3-action);
}

.tae-f3__back {
    width: auto;
    min-height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin:
        var(--tae-f3-space-24)
        0
        0;

    padding: 8px 12px;

    background: transparent;
    color: var(--tae-f3-text-secondary);

    border: 1px solid var(--tae-f3-line);
    border-radius: var(--tae-f3-radius-sm);

    font-size: 13px;
    font-weight: 600;
}

.tae-f3__back:hover {
    background: #fafbfc;
    border-color: var(--tae-f3-line-strong);
    color: var(--tae-f3-text);
}

@media (prefers-reduced-motion: reduce) {
    .tae-f3__progress-segment {
        transition: none;
    }
}


/* =========================================================
   15 · FORM CONTROLS · UPLOAD GALLERY
   V1-B
   ========================================================= */

.tae-f3__upload-input {
    position: absolute;

    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;

    overflow: hidden;

    clip: rect(0 0 0 0);
    clip-path: inset(50%);

    border: 0;

    white-space: nowrap;
}


/* EMPTY STATE */

.tae-f3__upload-picker {
    width: 100%;
    min-height: 92px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 18px;

    background: #fafbfc;
    color: var(--tae-f3-text);

    border: 1px dashed var(--tae-f3-line-strong);
    border-radius: var(--tae-f3-radius-md);

    cursor: pointer;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        transform 120ms ease;
}

.tae-f3__upload-picker:hover {
    background: var(--tae-f3-action-soft);
    border-color: var(--tae-f3-action);
}

.tae-f3__upload-picker:active {
    transform: scale(0.99);
}

.tae-f3__upload-picker-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    background: var(--tae-f3-action-soft);
    color: var(--tae-f3-action);

    border-radius: 50%;

    font-size: 23px;
    font-weight: 400;
    line-height: 1;
}

.tae-f3__upload-picker-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tae-f3__upload-picker-copy strong {
    font-size: 14px;
    font-weight: 700;
}

.tae-f3__upload-picker-copy small {
    color: var(--tae-f3-text-secondary);

    font-size: 12px;
    font-weight: 400;
}


/* THUMB GRID */

.tae-f3__upload-gallery {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;

    margin-bottom: 10px;
}

.tae-f3__upload-gallery:empty {
    display: none;
}

.tae-f3__upload-thumb {
    position: relative;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: var(--tae-f3-bg);

    border: 1px solid var(--tae-f3-line);
    border-radius: var(--tae-f3-radius-md);
}

.tae-f3__upload-thumb-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* REMOVE */

.tae-f3__upload-remove {
    position: absolute;

    top: 6px;
    right: 6px;

    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    padding: 0;

    appearance: none;

    background: rgba(24, 25, 28, 0.78);
    color: #ffffff;

    border: 0;
    border-radius: 50%;

    cursor: pointer;

    font-size: 20px;
    font-weight: 400;
    line-height: 1;

    backdrop-filter: blur(4px);
}

.tae-f3__upload-remove:hover {
    background: rgba(24, 25, 28, 0.94);
}


/* ADD CARD INSIDE GRID */

.tae-f3__upload-picker.is-grid-add {
    width: 100%;
    min-height: 0;

    aspect-ratio: 1 / 1;

    display: grid;
    place-items: center;

    padding: 10px;

    background: #fafbfc;

    border: 1px dashed var(--tae-f3-line-strong);
    border-radius: var(--tae-f3-radius-md);
}

.tae-f3__upload-picker.is-grid-add:hover {
    background: var(--tae-f3-action-soft);
    border-color: var(--tae-f3-action);
}

.tae-f3__upload-picker.is-grid-add
.tae-f3__upload-picker-icon {
    width: 40px;
    height: 40px;

    font-size: 27px;
}

.tae-f3__upload-picker.is-grid-add
.tae-f3__upload-picker-copy {
    display: none;
}


/* HIDDEN */

.tae-f3__upload-picker[hidden] {
    display: none !important;
}


@media (prefers-reduced-motion: reduce) {
    .tae-f3__upload-picker {
        transition: none;
    }
}


/* =========================================================
   16 · FORM CONTROLS
   V1-B · GENERIC PREMIUM INPUTS
   ========================================================= */

.tae-f3__field-label {
    display: block;

    margin-bottom: 10px;

    color: var(--tae-f3-text);

    font-size: 15px;
    font-weight: 650;
    line-height: 1.3;
}


/* TEXT / TEL / EMAIL / NUMBER */

.tae-f3__field
input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.tae-f3__field textarea {
    width: 100%;

    appearance: none;

    background: var(--tae-f3-surface);
    color: var(--tae-f3-text);

    border: 1px solid var(--tae-f3-line-strong);
    border-radius: var(--tae-f3-radius-md);

    outline: none;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.45;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}


.tae-f3__field
input:not([type="radio"]):not([type="checkbox"]):not([type="file"]) {
    min-height: 52px;

    padding: 12px 14px;
}


.tae-f3__field textarea {
    min-height: 144px;

    padding: 14px 15px;

    resize: vertical;
}


/* PLACEHOLDER */

.tae-f3__field input::placeholder,
.tae-f3__field textarea::placeholder {
    color: var(--tae-f3-text-muted);

    opacity: 1;
}


/* HOVER */

.tae-f3__field
input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):hover,
.tae-f3__field textarea:hover {
    border-color: var(--tae-f3-line-strong);
}


/* FOCUS */

.tae-f3__field
input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):focus,
.tae-f3__field textarea:focus {
    border-color: var(--tae-f3-action);

    box-shadow:
        0 0 0 3px var(--tae-f3-action-soft);
}


/* INVALID */

.tae-f3__field
input[aria-invalid="true"],
.tae-f3__field
textarea[aria-invalid="true"] {
    border-color: #c62828;

    box-shadow:
        0 0 0 3px rgba(198, 40, 40, 0.08);
}

.tae-f3__field-error {
    margin: 8px 0 0;

    color: #c62828;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
}


/* DISABLED */

.tae-f3__field
input:disabled,
.tae-f3__field
textarea:disabled {
    background: var(--tae-f3-bg);
    color: var(--tae-f3-text-muted);

    cursor: not-allowed;

    opacity: 0.72;
}


/* HELPER */

.tae-f3__field-help {
    margin:
        8px
        0
        0;

    color: var(--tae-f3-text-secondary);

    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}


/* SPACING */

.tae-f3__field + .tae-f3__field {
    margin-top: var(--tae-f3-space-24);
}


/* TEXTAREA MOBILE COMFORT */

@media (max-width: 599px) {
    .tae-f3__field textarea {
        min-height: 132px;
    }
}


@media (prefers-reduced-motion: reduce) {
    .tae-f3__field
    input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
    .tae-f3__field textarea {
        transition: none;
    }
}


/* =========================================================
   17 · COMPLETION ACTION
   GENERIC MANUAL CONTINUE
   ========================================================= */

.tae-f3__continue--manual {
    margin-top: var(--tae-f3-space-24);
}

.tae-f3__continue:disabled {
    background: #dfe3e8;
    color: #8a9098;

    cursor: not-allowed;

    box-shadow: none;

    opacity: 1;
}

.tae-f3__continue:disabled:hover {
    background: #dfe3e8;
}

.tae-f3__continue:not(:disabled):active {
    transform: scale(0.99);
}

@media (prefers-reduced-motion: reduce) {
    .tae-f3__continue {
        transition: none;
    }
}


/* =========================================================
   18 · ACTION ROW
   V1 · GENERIC SCREEN NAVIGATION
   ========================================================= */

.tae-f3__action-row {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-top: var(--tae-f3-space-24);
}

.tae-f3__action-row
.tae-f3__back,
.tae-f3__action-row
.tae-f3__continue {
    margin: 0;
}

.tae-f3__action-row
.tae-f3__back {
    flex: 0 0 auto;

    min-height: 42px;

    padding: 9px 12px;
}

.tae-f3__action-row
.tae-f3__continue {
    width: auto;
    min-width: 132px;
    min-height: 42px;

    flex: 0 0 auto;

    padding: 10px 18px;
}

.tae-f3__action-row
.tae-f3__continue:disabled {
    min-width: 132px;
}

@media (max-width: 380px) {
    .tae-f3__action-row {
        gap: 8px;
    }

    .tae-f3__action-row
    .tae-f3__back {
        padding-inline: 10px;
    }

    .tae-f3__action-row
    .tae-f3__continue {
        min-width: 118px;

        padding-inline: 14px;
    }
}


/* =========================================================
   19 · WHATSAPP CONFIRMATION MODAL
   V1 · GENERIC FIELD CONFIRMATION
   ========================================================= */

html.tae-f3-modal-open,
body.tae-f3-modal-open {
    overflow: hidden;
}


.tae-f3__modal-backdrop {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: grid;
    place-items: center;

    padding:
        max(20px, env(safe-area-inset-top))
        20px
        max(20px, env(safe-area-inset-bottom));

    background: rgba(15, 20, 28, 0.48);

    opacity: 0;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    transition:
        opacity 180ms ease;
}


.tae-f3__modal-backdrop.is-visible {
    opacity: 1;
}


.tae-f3__modal {
    width: min(100%, 420px);

    padding: 22px;

    background: var(--tae-f3-surface);
    color: var(--tae-f3-text);

    border: 1px solid var(--tae-f3-line);
    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(15, 20, 28, 0.22);

    transform: translateY(8px) scale(0.985);

    transition:
        transform 180ms ease;
}


.tae-f3__modal-backdrop.is-visible
.tae-f3__modal {
    transform: translateY(0) scale(1);
}


.tae-f3__modal-title {
    margin: 0 0 12px;

    color: var(--tae-f3-text);

    font-size: 21px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.02em;
}


.tae-f3__modal-value {
    display: block;

    margin-bottom: 12px;

    color: var(--tae-f3-text);

    font-size: 25px;
    font-weight: 780;
    line-height: 1.15;
    letter-spacing: -0.025em;
}


.tae-f3__modal-question {
    margin: 0 0 10px;

    color: var(--tae-f3-text);

    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}


.tae-f3__modal-text {
    margin: 0;

    color: var(--tae-f3-text-secondary);

    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}


.tae-f3__modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-top: 20px;
}


.tae-f3__modal-edit,
.tae-f3__modal-confirm {
    min-height: 44px;

    padding: 10px 14px;

    appearance: none;

    border-radius: var(--tae-f3-radius-sm);

    font: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        transform 120ms ease;
}


.tae-f3__modal-edit {
    background: transparent;
    color: var(--tae-f3-text-secondary);

    border: 1px solid var(--tae-f3-line);
}


.tae-f3__modal-confirm {
    background: var(--tae-f3-action);
    color: #ffffff;

    border: 1px solid var(--tae-f3-action);
}


.tae-f3__modal-edit:hover {
    background: #f4f6f8;
}


.tae-f3__modal-confirm:hover {
    filter: brightness(0.97);
}


.tae-f3__modal-edit:active,
.tae-f3__modal-confirm:active {
    transform: scale(0.985);
}


.tae-f3__modal-edit:focus-visible,
.tae-f3__modal-confirm:focus-visible {
    outline: 3px solid var(--tae-f3-action-soft);
    outline-offset: 2px;
}


@media (max-width: 420px) {
    .tae-f3__modal {
        padding: 20px;
    }

    .tae-f3__modal-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .tae-f3__modal-edit,
    .tae-f3__modal-confirm {
        width: 100%;
    }
}


@media (prefers-reduced-motion: reduce) {
    .tae-f3__modal-backdrop,
    .tae-f3__modal,
    .tae-f3__modal-edit,
    .tae-f3__modal-confirm {
        transition: none;
    }
}


/* =========================================================
   20 · MODAL EDIT-IN-PLACE
   V1 · GENERIC FIELD EDITOR
   ========================================================= */

.tae-f3__modal-input-wrap {
    display: none;

    margin-bottom: 12px;
}


.tae-f3__modal.is-editing
.tae-f3__modal-value {
    display: none;
}


.tae-f3__modal.is-editing
.tae-f3__modal-input-wrap {
    display: block;
}


.tae-f3__modal-input {
    width: 100%;
    min-height: 50px;

    padding: 11px 13px;

    appearance: none;

    background: var(--tae-f3-surface);
    color: var(--tae-f3-text);

    border: 1px solid var(--tae-f3-line-strong);
    border-radius: var(--tae-f3-radius-md);

    outline: none;

    font: inherit;
    font-size: 18px;
    font-weight: 650;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}


.tae-f3__modal-input:focus {
    border-color: var(--tae-f3-action);

    box-shadow:
        0 0 0 3px var(--tae-f3-action-soft);
}


.tae-f3__modal-input[aria-invalid="true"] {
    border-color: #c62828;

    box-shadow:
        0 0 0 3px rgba(198, 40, 40, 0.08);
}


.tae-f3__modal-error {
    margin: 7px 0 0;

    color: #b42318;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}


.tae-f3__modal-error[hidden] {
    display: none;
}


.tae-f3__modal.is-editing
.tae-f3__modal-edit {
    display: none;
}


.tae-f3__modal.is-editing
.tae-f3__modal-confirm {
    margin-left: auto;
}


@media (prefers-reduced-motion: reduce) {
    .tae-f3__modal-input {
        transition: none;
    }
}


/* =========================================================
   PRIVACY NOTICE
   ========================================================= */

.tae-f3__privacy-notice {
    margin: var(--tae-f3-space-24) 0 0;
    color: var(--tae-f3-text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

/* =========================================================
   21 · SUCCESS SCREEN V1
   ========================================================= */

.tae-f3__submit-error {
    margin: 14px 0 0;
    padding: 12px 14px;

    border: 1px solid rgba(190, 40, 40, 0.2);
    border-radius: 12px;

    background: rgba(190, 40, 40, 0.05);

    font-size: 14px;
    line-height: 1.45;
}

.tae-f3__success {
    width: 100%;
    max-width: 560px;

    margin: 22px auto 0;
    padding: 16px 24px 32px;

    text-align: center;
}

.tae-f3__success-avatar {
    width: clamp(104px, 28vw, 116px);
    height: clamp(104px, 28vw, 116px);

    margin: 0 auto 18px;

    display: block;

    border-radius: 50%;
    object-fit: cover;
}

.tae-f3__success-title {
    margin: 0;

    font-size: clamp(26px, 6vw, 34px);
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.tae-f3__success-request {
    margin: 10px 0 0;

    font-size: 14px;
    font-weight: 700;
}

.tae-f3__success-message {
    max-width: 470px;

    margin: 18px auto 0;

    font-size: 16px;
    line-height: 1.6;
}

.tae-f3__success-service {
    margin: 24px auto 0;
    padding: 16px 18px;

    display: flex;
    flex-direction: column;
    gap: 4px;

    border: 1px solid var(--tae-f3-border);
    border-radius: 16px;

    background: #fff;

    text-align: left;
}

.tae-f3__success-service strong {
    font-size: 13px;
}

.tae-f3__success-service span {
    font-size: 15px;
}

.tae-f3__success-urgency {
    width: 100%;

    margin-top: 16px;
    min-height: 48px;
    padding: 13px 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: var(--tae-f3-action);
    color: #fff;

    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.tae-f3__success-urgency:hover {
    filter: brightness(0.97);
}

/* =========================================================
   22 · SUCCESS CLEANUP V2 FINAL
   ========================================================= */

.tae-f3__shell.is-success .tae-f3__artist-header,
.tae-f3__shell.is-success .tae-f3__progress {
    display: none !important;
}

.tae-f3__success-urgency {
    width: auto;
    min-width: 210px;
    max-width: 270px;

    margin: 18px auto 0;
    padding-left: 22px;
    padding-right: 22px;

    align-self: center;
}


/* =========================================================
   23 · SUCCESS CENTER + CONTACT NAME V1
   ========================================================= */

.tae-f3__steps.is-success-mode {
    min-height: min(72vh, 680px);

    display: flex;
    align-items: center;
    justify-content: center;
}

.tae-f3__steps.is-success-mode .tae-f3__success {
    margin: 0 auto;
    padding: 16px 24px 28px;
}

.tae-f3__success {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tae-f3__success-urgency {
    width: auto;
    min-width: 220px;
    max-width: 290px;

    margin: 20px auto 0;
    padding: 12px 20px;
}

@media (max-width: 599px) {
    .tae-f3__steps.is-success-mode {
        min-height: min(68vh, 560px);
    }

    .tae-f3__success {
        padding: 12px 22px 28px;
    }

    .tae-f3__success-urgency {
        min-width: 198px;
        max-width: 260px;
    }
}


/* =========================================================
   24 · SUBMIT LOADING
   ========================================================= */

.tae-f3__submit-loading {
    min-height: min(62vh, 520px);
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    color: var(--tae-f3-text-secondary);
    animation: tae-f3-step-enter 180ms ease both;
}

.tae-f3__submit-loading strong {
    color: var(--tae-f3-text);
    font-size: 18px;
}

.tae-f3__spinner {
    width: 34px;
    height: 34px;
    margin-bottom: 8px;
    border: 3px solid var(--tae-f3-line);
    border-top-color: var(--tae-f3-action);
    border-radius: 50%;
    animation: tae-f3-spin .72s linear infinite;
}

@keyframes tae-f3-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .tae-f3__submit-loading,
    .tae-f3__spinner { animation: none; }
}