/* ==========================================================================
   Partner sign-up, step 1 — responsive layout.
   Mobile-first. Breakpoints:
     < 640px        phone: single column, form stacks under the hero
     640–1099px     tablet: single column, two-column form
     ≥ 1100px       laptop and up: hero left, form card right, filling the window.
                    All sizes are multiples of --u, which is the smaller of
                    (window width ÷ 1536) and (window height ÷ 1024). The sample
                    design is 1536×1024, so --u is 1 there. On a shorter window
                    everything shrinks together, so the whole page fits without
                    scrolling. Columns still stretch to the full width.
     ≥ 1280px       wide: adds the girl image, the note and the job cards
   Loaded only by resources/views/freelancer/register/step1.blade.php.
   ========================================================================== */

:root {
    --hp-ink: #15133b;
    --hp-ink-2: #2b2f55;
    --hp-muted: #6a6f8c;
    --hp-purple: #4f1fe6;
    --hp-purple-d: #4117cc;
    --hp-line: #dfe2ee;
    --hp-line-h: #c9cde0;
    --hp-red: #e11d48;
    --hp-ease: cubic-bezier(.2, .7, .2, 1);
    --u: 1px;
}

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

.fl-hp-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--hp-ink);
    font-family: var(--fl-font);
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(900px 600px at 0% 0%, #efeaff 0%, rgba(239, 234, 255, 0) 70%),
        linear-gradient(180deg, #f8f7ff 0%, #f4f2fd 100%);
    overflow-x: hidden;
}

/* ── Page shell (phone / tablet) ────────────────────────────────────────── */
.hp-page {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    max-width: 2400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 3vh, 32px);
    padding: clamp(18px, 3vh, 32px) clamp(16px, 4vw, 40px) clamp(24px, 4vh, 40px);
}

/* On small screens the left column is flattened so its blocks can be re-ordered
   around the form: hero → form → proof. On desktop it is a real column. */
.hp-left { display: contents; }
.hp-right { order: 3; display: flex; justify-content: center; min-width: 0; position: relative; z-index: 2; }

.hp-brand { order: 1; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; position: relative; z-index: 2; align-self: flex-start; }
.hp-brand img { display: block; width: clamp(160px, 15vw, 220px); height: auto; }
.hp-brand-text strong { display: block; font-size: clamp(20px, 1.6vw, 26px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--hp-ink); }
.hp-brand-text small { display: block; font-size: clamp(12px, .95vw, 14px); line-height: 1.3; font-weight: 600; color: var(--hp-ink-2); }

.hp-copy { order: 2; position: relative; z-index: 2; max-width: 640px; }
.hp-h1 {
    margin: 0; font-size: clamp(28px, 2.4vw, 40px); line-height: 1.12; font-weight: 700;
    letter-spacing: -.025em; color: var(--hp-ink);
}
.hp-h1 span { color: var(--hp-purple); }
.hp-sub { margin: clamp(8px, 1.3vh, 14px) 0 0; max-width: 44ch; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.5; color: var(--hp-muted); }

.hp-features { order: 5; list-style: none; margin: 0; padding: 0; position: relative; z-index: 2; display: flex; flex-direction: column; gap: clamp(12px, 1.8vh, 20px); max-width: 560px; }
.hp-feat { display: flex; align-items: flex-start; gap: clamp(12px, 1vw, 16px); animation: hp-rise .6s var(--hp-ease) both; animation-delay: calc(.12s + var(--i, 0) * .08s); }
.hp-feat-icon { flex: 0 0 auto; width: clamp(40px, 3vw, 48px); height: clamp(40px, 3vw, 48px); border-radius: 13px; display: grid; place-items: center; transition: transform .35s var(--hp-ease); }
.hp-feat:hover .hp-feat-icon { transform: scale(1.06) rotate(-3deg); }
.hp-tone-indigo { background: #ece8ff; color: #4f1fe6; }
.hp-tone-blue { background: #e0ecff; color: #2563eb; }
.hp-tone-green { background: #dcf7e8; color: #16a34a; }
.hp-tone-orange { background: #ffedd5; color: #f59e0b; }
.hp-feat-t { display: block; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.3; font-weight: 700; color: var(--hp-ink); }
.hp-feat-d { display: block; margin-top: 2px; font-size: clamp(12.5px, .92vw, 14px); line-height: 1.45; color: var(--hp-muted); }

/* Reviews: every review sits in the same grid cell, so the box is as tall as
   the longest one and the cross-fade never jumps. */
.hp-reviews-wrap { order: 6; position: relative; z-index: 2; max-width: 540px; width: 100%; }
.hp-reviews {
    display: grid; padding: clamp(14px, 1.4vw, 20px) clamp(16px, 1.6vw, 22px);
    border-radius: 16px; border: 1px solid #e6e1fb; background: linear-gradient(180deg, #f5f3ff, #f1eeff);
    box-shadow: 0 10px 26px rgba(60, 40, 150, .06); overflow: hidden;
}
.hp-review {
    grid-area: 1 / 1; margin: 0; visibility: hidden; opacity: 0; transform: translateY(14px);
    transition: opacity .7s ease, transform .7s var(--hp-ease), visibility .7s;
    pointer-events: none;
}
.hp-review.is-active { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
.hp-review blockquote { margin: 0; font-size: clamp(13px, .95vw, 15px); line-height: 1.5; color: var(--hp-ink-2); }
.hp-review figcaption { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.hp-review figcaption strong { font-size: clamp(13px, .95vw, 14px); font-weight: 700; color: var(--hp-ink); }
.hp-review figcaption span { font-size: clamp(11.5px, .85vw, 12.5px); color: var(--hp-muted); }
.hp-dots { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-left: 4px; }
.hp-dot {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #cfc8f3; cursor: pointer;
    transition: width .4s var(--hp-ease), background .3s ease;
}
.hp-dot:hover { background: #aba0ee; }
.hp-dot.is-active { width: 22px; border-radius: 6px; background: var(--hp-purple); }

/* ── Form card ──────────────────────────────────────────────────────────── */
.hp-card {
    position: relative; width: 100%; max-width: 760px;
    background: #fff; border: 1px solid #eceef7; border-radius: 18px;
    box-shadow: 0 12px 40px rgba(30, 30, 80, .08);
    padding: clamp(16px, 2.4vh, 30px) clamp(18px, 2.4vw, 40px) clamp(16px, 2.4vh, 30px);
    animation: hp-rise .8s .15s var(--hp-ease) both;
}
.hp-card-top { display: flex; justify-content: flex-end; }
/* "Already a partner?" with a pill button: a quiet label and a clear call to action. */
.hp-login { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1; color: var(--hp-muted); }
.hp-login-q { color: var(--hp-muted); }
.hp-login-pill {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px 0 16px; border-radius: 999px; text-decoration: none;
    border: 1px solid #ddd5fb; background: #fff; color: var(--hp-purple); font-weight: 600; font-size: 13px;
    box-shadow: 0 1px 2px rgba(20, 20, 60, .05); transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.hp-login-pill .fl-i { transition: transform .3s var(--hp-ease); }
.hp-login-pill:hover, .hp-login-pill:focus-visible {
    background: var(--hp-purple); border-color: var(--hp-purple); color: #fff; box-shadow: 0 8px 18px rgba(79, 31, 230, .25);
}
.hp-login-pill:hover .fl-i { transform: translateX(3px); }
/* freelancer.css underlines every link on hover (`.fl-body a:hover`), which outranks the rules above. The pill has no underline in any state. */
.fl-hp-body .hp-login-pill, .fl-hp-body .hp-login-pill:hover, .fl-hp-body .hp-login-pill:focus, .fl-hp-body .hp-login-pill:focus-visible { text-decoration: none; }

.hp-h2 { margin: 2px 0 0; font-size: clamp(24px, 2vw, 30px); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: var(--hp-ink); }
.hp-h2-sub { margin: 4px 0 0; font-size: clamp(13px, .98vw, 15px); line-height: 1.5; color: var(--hp-muted); }

/* Stepper: circles sit on a line that joins each circle to the next. */
.hp-steps { list-style: none; margin: clamp(12px, 1.9vh, 22px) 0 0; padding: 0; display: flex; }
.hp-step { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.hp-step:not(:last-child)::after {
    content: ""; position: absolute; top: calc(clamp(28px, 2.2vw, 34px) / 2 - 1px); left: 50%; width: 100%; height: 2px;
    border-radius: 2px; background: #e2e4f0; z-index: 0;
}
.hp-step.is-active:not(:last-child)::after { background: linear-gradient(90deg, var(--hp-purple), #b9b0f3); }
.hp-step-n {
    position: relative; z-index: 1; width: clamp(28px, 2.2vw, 34px); height: clamp(28px, 2.2vw, 34px); border-radius: 50%;
    display: grid; place-items: center; font-size: clamp(12px, .95vw, 14px); font-weight: 600;
    background: #fff; border: 1.5px solid #cfd3e6; color: #3c4163; transition: background .3s, border-color .3s, box-shadow .3s;
}
.hp-step.is-active .hp-step-n { background: var(--hp-purple); border-color: var(--hp-purple); color: #fff; box-shadow: 0 6px 14px rgba(79, 31, 230, .28); }
.hp-step-l { font-size: clamp(10.5px, .8vw, 12px); line-height: 1.25; text-align: center; font-weight: 500; color: #4a4f70; }
.hp-step.is-active .hp-step-l { color: var(--hp-purple); font-weight: 600; }
.hp-m-step { display: none; margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--hp-purple); }

.hp-h3-wrap { margin-top: clamp(10px, 1.8vh, 20px); }
.hp-h3 { margin: 0; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: var(--hp-ink); }
.hp-h3-sub { margin: 3px 0 0; font-size: clamp(12.5px, .92vw, 14px); line-height: 1.4; color: var(--hp-muted); }

/* Form grid: two columns from 640px, one column on phones. */
.hp-form {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(9px, 1.3vh, 14px) clamp(14px, 1.3vw, 22px); margin-top: clamp(10px, 1.6vh, 18px);
}
.hp-group { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hp-full { grid-column: 1 / -1; }
.hp-lbl { font-size: clamp(12px, .9vw, 13px); line-height: 1.3; font-weight: 600; color: var(--hp-ink); }
.hp-lbl em { font-style: normal; margin-left: 3px; color: var(--hp-red); }

/* Field shell shared by inputs, selects, dates, gender, photo and address. */
.hp-field, .hp-area, .hp-gender, .hp-photo {
    position: relative; border: 1px solid var(--hp-line); border-radius: 10px; background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.hp-field { display: flex; align-items: center; height: clamp(38px, 3.7vh, 44px); }
.hp-field:hover, .hp-area:hover, .hp-gender:hover, .hp-photo:hover { border-color: var(--hp-line-h); }
.hp-field:focus-within, .hp-area:focus-within, .hp-gender:focus-within, .hp-photo:focus-within {
    border-color: var(--hp-purple); box-shadow: 0 0 0 3px rgba(79, 31, 230, .10), 0 4px 14px rgba(79, 31, 230, .08);
}
.hp-field > .fl-i {
    position: absolute; left: clamp(12px, 1vw, 14px); top: 50%; transform: translateY(-50%);
    color: #3d4166; pointer-events: none; transition: color .2s ease;
}
.hp-field:focus-within > .fl-i { color: var(--hp-purple); }
.hp-field input, .hp-field select, .hp-field .hp-dd-btn {
    width: 100%; height: 100%; min-width: 0; padding: 0 12px 0 clamp(36px, 2.8vw, 44px); border: 0; outline: 0; border-radius: 10px;
    background: transparent; font: 500 clamp(13px, .95vw, 14px)/1 var(--fl-font); color: var(--hp-ink);
}
.hp-field input::placeholder { color: #9ca1b8; opacity: 1; }
.hp-field--action input { padding-right: 74px; }
.hp-field--code input { padding-right: 100px; }

/* Mobile number: a fixed "+91" prefix sits inside the field, then the 10 digits. The prefix
   takes the place of the input's left padding, so the digits start right after the divider. */
.hp-field.hp-field--tel input { padding-left: 10px; padding-right: 36px; }
.hp-cc {
    flex: none; display: flex; align-items: center; height: 56%; padding: 0 10px 0 clamp(36px, 2.8vw, 44px);
    border-right: 1px solid var(--hp-line); color: var(--hp-ink-2); user-select: none;
    font: 600 clamp(13px, .95vw, 14px)/1 var(--fl-font);
}
.hp-tel-ok {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px;
    display: grid; place-items: center; border-radius: 50%; background: #e8f8ef; color: #16a34a; animation: hp-pop .35s var(--hp-ease) both;
}
.hp-tel-ok[hidden] { display: none; }
/* Problem state, used by the mobile number. Red border, and a red ring instead of the purple one while focused. */
.hp-field.is-invalid { border-color: #f1a3b4; }
.hp-field.is-invalid:focus-within { border-color: var(--hp-red); box-shadow: 0 0 0 3px rgba(225, 29, 72, .1); }
.hp-select select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px; }
.hp-select select:invalid { color: #9ca1b8; }
.hp-select::after {
    content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
    border-right: 2px solid var(--hp-ink-2); border-bottom: 2px solid var(--hp-ink-2); transform: rotate(45deg); pointer-events: none;
    transition: transform .25s var(--hp-ease);
}
.hp-select:focus-within::after { transform: rotate(-135deg); margin-top: -2px; }

/* State picker. The closed control is a normal field (icon, border, focus ring, chevron). The
   list is a floating panel with a search box; the chosen row carries a lavender ground and a tick. */
.hp-dd { position: relative; }
.hp-field .hp-dd-btn { display: block; text-align: left; cursor: pointer; padding-right: 40px; }
.hp-dd-val { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.hp-dd-val.is-ph { color: #9ca1b8; }
.hp-dd.is-open > .hp-field { border-color: var(--hp-purple); box-shadow: 0 0 0 3px rgba(79, 31, 230, .10), 0 4px 14px rgba(79, 31, 230, .08); }
.hp-dd.is-open > .hp-field > .fl-i { color: var(--hp-purple); }
.hp-dd.is-open .hp-select::after { transform: rotate(-135deg); margin-top: -2px; }

.hp-dd-panel {
    position: absolute; z-index: 40; left: 0; top: calc(100% + 6px);
    min-width: max(100%, 240px); width: max-content; max-width: min(340px, calc(100vw - 32px));
    padding: 8px; border: 1px solid #e3def9; border-radius: 14px; background: #fff;
    box-shadow: 0 22px 48px rgba(45, 28, 130, .16), 0 3px 8px rgba(45, 28, 130, .06);
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top left;
    transition: opacity .16s ease, transform .22s var(--hp-ease), visibility 0s linear .22s;
}
.hp-dd.is-up .hp-dd-panel { top: auto; bottom: calc(100% + 6px); transform: translateY(6px) scale(.98); transform-origin: bottom left; }
.hp-dd.is-open .hp-dd-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.hp-dd-search { position: relative; display: block; margin: 0 0 6px; }
.hp-dd-search > .fl-i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #8a8fb0; pointer-events: none; }
.hp-dd-search input {
    width: 100%; height: 36px; padding: 0 12px 0 33px; border: 1px solid transparent; border-radius: 9px; outline: 0;
    background: #f5f4fd; font: 500 13.5px/1 var(--fl-font); color: var(--hp-ink); transition: border-color .2s ease, background .2s ease;
}
.hp-dd-search input::placeholder { color: #9ca1b8; opacity: 1; }
.hp-dd-search input:focus { border-color: #cfc4fb; background: #fff; }

.hp-dd-list {
    position: relative; max-height: 232px; margin: 0; padding: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: #d6d2ee transparent;
}
.hp-dd-opt {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 9px;
    font-size: 13.5px; line-height: 1.3; font-weight: 500; color: var(--hp-ink-2); cursor: pointer; transition: background .12s ease, color .12s ease;
}
.hp-dd-opt > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-dd-opt svg { flex: none; }
.hp-dd-opt.is-active { background: #f3f0ff; color: var(--hp-ink); }
.hp-dd-opt.is-selected { color: var(--hp-purple); font-weight: 600; }
.hp-dd-opt.is-selected.is-active { background: #ebe6ff; }
.hp-dd-none { padding: 14px 10px; font-size: 13px; text-align: center; color: var(--hp-muted); }

/* Email verification control: a tinted pill inside the field. Purple text on a soft
   lavender ground reads as an action without competing with Save & Continue. It fills
   purple only on hover. The same pill shape carries the code entry and the Verified state. */
.hp-verify {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
    border: 1px solid #d9cffc; border-radius: 999px; background: #f1edff; color: var(--hp-purple);
    font: 600 12.5px/1 var(--fl-font); letter-spacing: .01em; white-space: nowrap; cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.hp-verify:hover:not(:disabled) { background: var(--hp-purple); border-color: var(--hp-purple); color: #fff; box-shadow: 0 6px 14px rgba(79, 31, 230, .22); }
.hp-verify:focus-visible { outline: 2px solid #b9abff; outline-offset: 2px; }
.hp-verify.is-loading { opacity: .6; pointer-events: none; }
/* Verified state: a green tinted pill with the check and the word, so the outcome is explicit. */
.hp-ok {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 999px;
    background: #e8f8ef; color: #15803d; font: 600 12.5px/1 var(--fl-font); white-space: nowrap;
    animation: hp-pop .4s var(--hp-ease) both;
}

/* Date of birth: native picker, with our own placeholder until a value exists. */
.hp-date-wrap { overflow: visible; }
.hp-field input.hp-date { color: transparent; cursor: pointer; padding-right: 40px; }
.hp-field input.hp-date.has-value { color: var(--hp-ink); }
.hp-date::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.hp-placeholder {
    position: absolute; left: clamp(36px, 2.8vw, 44px); top: 50%; transform: translateY(-50%);
    font-size: clamp(13px, .95vw, 14px); color: #9ca1b8; pointer-events: none;
}
.hp-date.has-value ~ .hp-placeholder { display: none; }
.hp-cal { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); display: flex; color: #3d4166; pointer-events: none; }

/* Gender and photo: same height rhythm as the inputs beside them. */
.hp-gender { display: flex; flex-wrap: wrap; align-items: center; gap: 6px clamp(12px, 1.3vw, 20px); min-height: clamp(38px, 3.7vh, 44px); padding: 4px 12px; }
.hp-radio { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: clamp(12.5px, .92vw, 14px); color: var(--hp-ink); white-space: nowrap; }
.hp-radio input { width: 16px; height: 16px; margin: 0; accent-color: var(--hp-purple); cursor: pointer; }

.hp-photo { display: flex; align-items: center; gap: clamp(10px, .9vw, 14px); min-height: clamp(52px, 5.4vh, 60px); padding: 4px 14px; cursor: pointer; }
.hp-photo-circle {
    flex: 0 0 auto; width: clamp(42px, 3.4vw, 52px); height: clamp(42px, 3.4vw, 52px); border-radius: 50%; overflow: hidden;
    display: grid; place-items: center; background: #f5f3ff; color: var(--hp-purple);
    border: 1.5px dashed #c6bdf6; transition: transform .35s var(--hp-ease);
}
.hp-photo:hover .hp-photo-circle { transform: scale(1.05); }
.hp-photo-circle img { width: 100%; height: 100%; object-fit: cover; }
.hp-photo-text { display: flex; flex-direction: column; min-width: 0; }
.hp-photo-t { font-size: clamp(13px, .95vw, 14px); line-height: 1.2; font-weight: 600; color: var(--hp-ink); }
.hp-photo-h { margin-top: 2px; font-size: clamp(11px, .8vw, 12px); line-height: 1.3; color: var(--hp-muted); }
.hp-photo input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* Address */
.hp-area { height: clamp(78px, 9.6vh, 96px); }
.hp-area > .fl-i { position: absolute; left: clamp(12px, 1vw, 14px); top: 13px; color: #3d4166; }
.hp-area textarea {
    position: absolute; left: clamp(36px, 2.8vw, 44px); top: 11px; right: 12px; bottom: 26px; width: auto;
    border: 0; outline: 0; resize: none; background: transparent; padding: 0;
    font: 500 clamp(13px, .95vw, 14px)/1.5 var(--fl-font); color: var(--hp-ink);
}
.hp-area textarea::placeholder { color: #9ca1b8; opacity: 1; }
.hp-counter { position: absolute; right: 12px; bottom: 7px; font-size: 11px; color: #9ca1b8; }

.hp-err { font-size: 11.5px; line-height: 1.3; font-weight: 500; color: var(--hp-red); animation: hp-rise .3s var(--hp-ease) both; }
.hp-err.is-ok { color: #16a34a; }
.hp-err-global { padding: 8px 12px; border-radius: 10px; background: #fff1f3; }

/* Submit row */
.hp-actions { display: flex; justify-content: flex-end; margin-top: clamp(8px, 1.2vh, 12px); }
.hp-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: clamp(38px, 3.9vh, 46px);
    padding: 0 clamp(20px, 1.8vw, 26px); border: 0; border-radius: 9px; cursor: pointer;
    background: var(--hp-purple); color: #fff; font: 600 clamp(13.5px, 1vw, 15px)/1 var(--fl-font);
    box-shadow: 0 10px 22px rgba(79, 31, 230, .28); transition: background .2s ease, transform .25s var(--hp-ease), box-shadow .25s ease;
}
.hp-submit:hover { background: var(--hp-purple-d); transform: translateY(-2px); box-shadow: 0 14px 26px rgba(79, 31, 230, .34); }
.hp-submit:active { transform: translateY(0); }
.hp-submit .fl-i { transition: transform .3s var(--hp-ease); }
.hp-submit:hover .fl-i { transform: translateX(4px); }
.hp-submit:focus-visible, .hp-verify:focus-visible, .hp-dot:focus-visible, .hp-radio input:focus-visible, .hp-login:focus-visible {
    outline: 2px solid #b9abff; outline-offset: 2px;
}
/* Inputs, selects and the address textarea sit inside a shell that already draws the focus
   state (border + soft ring), so they must not paint a second outline of their own. */
.hp-field input:focus, .hp-field input:focus-visible,
.hp-field select:focus, .hp-field select:focus-visible,
.hp-area textarea:focus, .hp-area textarea:focus-visible { outline: 0; box-shadow: none; }

/* ── Email verification popup ───────────────────────────────────────────────
   A centred dialog on tablet and up, a bottom sheet on phones.
   Performance: only opacity and transform are animated (no blur, no layout
   changes), nothing runs until the popup opens, and the entrance is a short
   stagger of about 20 elements. The popup is hidden with visibility so it can
   fade, and so closed controls cannot take focus. */
.hp-modal {
    position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
    padding: 16px; visibility: hidden; pointer-events: none; transition: visibility 0s linear .28s;
}
.hp-modal.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.hp-modal-bd { position: absolute; inset: 0; background: rgba(21, 19, 59, .55); opacity: 0; transition: opacity .22s ease; }
.hp-modal.is-open .hp-modal-bd { opacity: 1; }
.hp-dialog {
    position: relative; width: 100%; max-width: 400px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
    padding: 36px 28px 22px; text-align: center; background: #fff; border-radius: 22px;
    box-shadow: 0 24px 60px rgba(21, 19, 59, .28);
    opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .22s ease, transform .3s var(--hp-ease);
}
.hp-modal.is-open .hp-dialog { opacity: 1; transform: none; }

/* Content eases in after the card lands. Each child starts 40ms after the one before. */
.hp-modal.is-open .hp-dialog-view > * { animation: hp-dlg-in .38s var(--hp-ease) both; animation-delay: calc(var(--d, 0) * 40ms + 70ms); }
.hp-dialog-view > :nth-child(2) { --d: 1; }
.hp-dialog-view > :nth-child(3) { --d: 2; }
.hp-dialog-view > :nth-child(4) { --d: 3; }
.hp-dialog-view > :nth-child(6) { --d: 5; }
.hp-dialog-view > :nth-child(7) { --d: 5; }
.hp-dialog-view > :nth-child(8) { --d: 6; }
.hp-dialog-view > :nth-child(9) { --d: 7; }
.hp-modal.is-open .hp-dialog-view > .hp-otp { animation: none; }
.hp-modal.is-open .hp-otp-i { animation: hp-dlg-in .38s var(--hp-ease) both; }
.hp-modal.is-open .hp-otp-i:nth-of-type(1) { animation-delay: .17s; }
.hp-modal.is-open .hp-otp-i:nth-of-type(2) { animation-delay: .20s; }
.hp-modal.is-open .hp-otp-i:nth-of-type(3) { animation-delay: .23s; }
.hp-modal.is-open .hp-otp-i:nth-of-type(4) { animation-delay: .26s; }
.hp-modal.is-open .hp-otp-i:nth-of-type(5) { animation-delay: .29s; }
.hp-modal.is-open .hp-otp-i:nth-of-type(6) { animation-delay: .32s; }

.hp-dialog-x {
    position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: grid; place-items: center;
    border: 0; border-radius: 50%; background: transparent; color: var(--hp-muted); cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.hp-dialog-x:hover { background: #f1f2f8; color: var(--hp-ink); }
.hp-dialog-badge {
    width: 54px; height: 54px; margin: 0 auto 16px; display: grid; place-items: center;
    border-radius: 50%; background: #f1edff; color: var(--hp-purple);
}
.hp-dialog-t { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--hp-ink); }
/* Paragraph margins are scoped under .hp-modal: freelancer.css resets `.fl-body p` to 0, which outranks a single class. */
.hp-modal .hp-dialog-s { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--hp-muted); }
.hp-dialog-s strong { color: var(--hp-ink); font-weight: 600; overflow-wrap: anywhere; }

/* The address the code went to, with a way to change it. */
.hp-dialog-to {
    display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: 12px auto 0;
    padding: 5px 5px 5px 14px; border-radius: 999px; background: #f6f4ff; color: var(--hp-ink); font-size: 14px; font-weight: 600;
}
.hp-dialog-to > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-dialog-to > button {
    flex: none; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: #fff; color: var(--hp-purple);
    font: 600 12.5px/1 var(--fl-font); cursor: pointer; box-shadow: 0 1px 2px rgba(21, 19, 59, .1); transition: background .2s ease, color .2s ease;
}
.hp-dialog-to > button:hover { background: var(--hp-purple); color: #fff; }

.hp-dialog-link {
    display: inline; padding: 0; border: 0; background: none; color: var(--hp-purple);
    font-family: var(--fl-font); font-size: inherit; font-weight: 600; line-height: inherit; cursor: pointer;
}
.hp-dialog-link:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
.hp-dialog-link:disabled { color: var(--hp-muted); font-weight: 500; cursor: default; }

/* Six soft boxes. They sit on a tint until focused, so the empty state is calm and the active box is obvious. */
.hp-otp { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.hp-otp.is-shake { animation: hp-shake .4s ease; }
.hp-otp-i {
    flex: 1 1 0; min-width: 0; max-width: 48px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: 14px;
    background: #f6f5fc; color: var(--hp-ink); caret-color: var(--hp-purple); text-align: center;
    font: 600 24px/1 var(--fl-font); font-variant-numeric: tabular-nums; -webkit-appearance: none; appearance: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.hp-otp-gap { margin-left: 8px; }
.hp-otp-i:hover { background: #f0eefb; }
.hp-otp-i.is-filled { background: #fff; border-color: #d6ccfb; }
.hp-otp-i:focus, .hp-otp-i:focus-visible {
    outline: 0; background: #fff; border-color: var(--hp-purple); box-shadow: 0 0 0 3px rgba(79, 31, 230, .12);
}
.hp-otp-i.is-error { background: #fff5f7; border-color: #f3a8b8; }

.hp-modal .hp-dialog-st { min-height: 20px; margin: 10px 0 0; font-size: 13px; line-height: 1.5; font-weight: 500; }
.hp-dialog-st.is-err { color: var(--hp-red); }
.hp-dialog-st.is-ok { color: #15803d; }
.hp-dialog-btn {
    width: 100%; height: 48px; margin-top: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    border: 0; border-radius: 13px; background: var(--hp-purple); color: #fff; cursor: pointer;
    font: 600 15px/1 var(--fl-font); box-shadow: 0 8px 20px rgba(79, 31, 230, .25);
    transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}
.hp-dialog-btn:hover:not(:disabled) { background: var(--hp-purple-d); }
.hp-dialog-btn:focus-visible { outline: 2px solid #b9abff; outline-offset: 2px; }
.hp-dialog-btn:disabled { background: #ebe8fa; color: #8a7fc9; box-shadow: none; cursor: not-allowed; }
.hp-dialog-btn.is-loading:disabled { background: var(--hp-purple); color: #fff; box-shadow: 0 8px 20px rgba(79, 31, 230, .25); cursor: progress; }
.hp-spin { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: hp-spin .7s linear infinite; }
.hp-modal .hp-dialog-foot { margin: 16px 0 0; font-size: 13.5px; color: var(--hp-muted); }
.hp-modal .hp-dialog-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: #8a8fab; }
.hp-dialog-x:focus-visible, .hp-dialog-link:focus-visible, .hp-dialog-to > button:focus-visible { outline: 2px solid #b9abff; outline-offset: 2px; border-radius: 6px; }

/* Confirmed: the tick draws itself once and a ring ripples out, then the popup closes on its own. */
.hp-done-mark {
    position: relative; width: 68px; height: 68px; margin: 0 auto 16px; display: grid; place-items: center;
    border-radius: 50%; background: #e8f8ef; color: #16a34a; animation: hp-done-pop .5s var(--hp-ease) both;
}
.hp-done-mark::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #16a34a; opacity: 0;
    animation: hp-ripple .9s .35s ease-out both;
}
.hp-done-tick { stroke-dasharray: 30; stroke-dashoffset: 30; animation: hp-draw .5s .25s var(--hp-ease) forwards; }
.hp-modal .hp-done-mark + .hp-dialog-t + .hp-dialog-s { margin-bottom: 22px; }

@keyframes hp-dlg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hp-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes hp-spin { to { transform: rotate(360deg); } }
@keyframes hp-done-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes hp-ripple { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(1.55); } }

@media (max-width: 639px) {
    .hp-modal { align-items: flex-end; padding: 0; }
    .hp-dialog {
        max-width: none; padding: 30px 18px calc(18px + env(safe-area-inset-bottom));
        border-radius: 24px 24px 0 0; transform: translateY(100%); transition: opacity .2s ease, transform .34s var(--hp-ease);
    }
    .hp-otp { gap: 6px; margin-top: 22px; }
    .hp-otp-i { max-width: none; height: 54px; font-size: 22px; }
    .hp-otp-gap { margin-left: 8px; }
    .hp-dialog-btn { height: 52px; }
}

/* ── Decorative layer (wide screens only) ───────────────────────────────── */
.hp-deco { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Tablet and up
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 640px) {
    .hp-page { padding-left: clamp(24px, 4vw, 48px); padding-right: clamp(24px, 4vw, 48px); }

    /* Six columns, so every row is still two equal halves (3 + 3), and City | State | Pincode can share
       one row (2 + 2 + 2) from 768px up. A narrow tablet keeps City | State with Pincode on the row below. */
    .hp-form { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .hp-form > .hp-group { grid-column: span 3; }
    .hp-form > .hp-pin, .hp-form > .hp-full { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
    .hp-form > .hp-third { grid-column: span 2; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Laptop and up: hero left, form card right, filling the window.
   Every size is a multiple of --u (see the header comment).
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1100px) {
    :root { --u: min(calc(100vw / 1440), calc(100vh / 940)); }

    .hp-page {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, min(47%, 780px));
        gap: 0; padding: 0; min-height: 100vh; min-height: 100dvh;
    }
    .hp-left {
        display: flex; flex-direction: column; gap: calc(26 * var(--u)); position: relative; isolation: isolate;
        min-width: 0; padding: calc(30 * var(--u)) calc(54 * var(--u)) calc(26 * var(--u));
        overflow: hidden;
    }
    .hp-right { padding: calc(22 * var(--u)) calc(26 * var(--u)) calc(22 * var(--u)) 0; align-items: center; }
    .hp-card { max-width: none; border-radius: calc(16 * var(--u)); padding: calc(22 * var(--u)) calc(28 * var(--u)) calc(24 * var(--u)); }
    .hp-brand, .hp-copy, .hp-right, .hp-features, .hp-reviews-wrap { order: initial; }
    .hp-copy { max-width: 640px; }
    .hp-reviews-wrap { margin-top: auto; }
    .hp-m-step { display: none; }

    .hp-brand { gap: calc(10 * var(--u)); }
    .hp-brand img { width: calc(200 * var(--u)); }
    .hp-brand-text strong { font-size: max(15px, calc(24 * var(--u))); }
    .hp-brand-text small { font-size: max(10px, calc(12 * var(--u))); }

    .hp-h1 { font-size: max(24px, calc(38 * var(--u))); }
    .hp-sub { margin-top: calc(10 * var(--u)); font-size: max(12px, calc(16 * var(--u))); }


    .hp-features { gap: calc(14 * var(--u)); max-width: calc(520 * var(--u)); }
    .hp-feat { gap: calc(12 * var(--u)); }
    .hp-feat-icon { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(12 * var(--u)); }
    .hp-feat-t { font-size: max(12.5px, calc(16 * var(--u))); }
    .hp-feat-d { margin-top: calc(2 * var(--u)); font-size: max(11px, calc(13.5 * var(--u))); }

    .hp-reviews-wrap { max-width: calc(440 * var(--u)); }
    .hp-reviews { padding: calc(16 * var(--u)) calc(20 * var(--u)); border-radius: calc(14 * var(--u)); }
    .hp-review blockquote { font-size: max(11px, calc(14 * var(--u))); }
    .hp-review figcaption { margin-top: calc(10 * var(--u)); }
    .hp-review figcaption strong { font-size: max(11px, calc(13.5 * var(--u))); }
    .hp-review figcaption span { font-size: max(9.5px, calc(12 * var(--u))); }
    .hp-dots { margin-top: calc(12 * var(--u)); gap: calc(10 * var(--u)); }
    .hp-dot { width: calc(8 * var(--u)); height: calc(8 * var(--u)); }
    .hp-dot.is-active { width: calc(22 * var(--u)); }

    .hp-login { font-size: max(10.5px, calc(13 * var(--u))); }
    .hp-h2 { font-size: max(20px, calc(28 * var(--u))); }
    .hp-h2-sub { margin-top: calc(3 * var(--u)); font-size: max(11px, calc(14 * var(--u))); }

    .hp-steps { margin-top: calc(14 * var(--u)); }
    .hp-step { gap: calc(6 * var(--u)); }
    .hp-step:not(:last-child)::after { top: calc(calc(30 * var(--u)) / 2 - 1px); }
    .hp-step-n { width: calc(30 * var(--u)); height: calc(30 * var(--u)); font-size: max(10.5px, calc(13 * var(--u))); }
    .hp-step-l { font-size: max(10px, calc(11.5 * var(--u))); }

    .hp-h3-wrap { margin-top: calc(14 * var(--u)); }
    .hp-h3 { font-size: max(15px, calc(20 * var(--u))); }
    .hp-h3-sub { margin-top: calc(2 * var(--u)); font-size: max(11px, calc(13 * var(--u))); }

    .hp-form { gap: calc(11 * var(--u)) calc(20 * var(--u)); margin-top: calc(14 * var(--u)); }
    .hp-group { gap: calc(5 * var(--u)); }
    .hp-lbl { font-size: max(11px, calc(12.5 * var(--u))); }
    .hp-lbl em { margin-left: calc(3 * var(--u)); }

    .hp-field, .hp-gender { height: calc(36 * var(--u)); min-height: calc(36 * var(--u)); }
    .hp-field { border-radius: calc(9 * var(--u)); }
    .hp-field > .fl-i { left: calc(12 * var(--u)); }
    .hp-field > .fl-i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
    .hp-feat-icon .fl-i { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
    .hp-field input, .hp-field select, .hp-field .hp-dd-btn { padding: 0 calc(10 * var(--u)) 0 calc(38 * var(--u)); font-size: max(11px, calc(13 * var(--u))); border-radius: calc(9 * var(--u)); }
    .hp-field--action input { padding-right: calc(76 * var(--u)); }
    .hp-field--code input { padding-right: calc(98 * var(--u)); }
    .hp-select select, .hp-field .hp-dd-btn { padding-right: calc(36 * var(--u)); }
    .hp-select::after { right: calc(14 * var(--u)); width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin-top: calc(-5 * var(--u)); border-width: 0 2px 2px 0; }
    .hp-select:focus-within::after, .hp-dd.is-open .hp-select::after { margin-top: calc(-1 * var(--u)); }

    .hp-dd-panel { top: calc(100% + 6 * var(--u)); min-width: max(100%, calc(230 * var(--u))); padding: calc(7 * var(--u)); border-radius: calc(12 * var(--u)); }
    .hp-dd.is-up .hp-dd-panel { top: auto; bottom: calc(100% + 6 * var(--u)); }
    .hp-dd-search { margin-bottom: calc(5 * var(--u)); }
    .hp-dd-search input { height: calc(34 * var(--u)); padding-left: calc(32 * var(--u)); border-radius: calc(8 * var(--u)); font-size: max(11px, calc(13 * var(--u))); }
    .hp-dd-search > .fl-i { left: calc(10 * var(--u)); width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
    .hp-dd-list { max-height: calc(224 * var(--u)); }
    .hp-dd-opt { min-height: calc(34 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(8 * var(--u)); font-size: max(11px, calc(13 * var(--u))); }
    .hp-dd-none { font-size: max(11px, calc(12.5 * var(--u))); }

    .hp-verify { height: calc(28 * var(--u)); padding: 0 calc(12 * var(--u)); font-size: max(11px, calc(12.5 * var(--u))); }
    .hp-ok { right: calc(10 * var(--u)); }
    .hp-ok svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
    .hp-cc { padding: 0 calc(8 * var(--u)) 0 calc(38 * var(--u)); font-size: max(11px, calc(13 * var(--u))); }
    .hp-field.hp-field--tel input { padding-left: calc(10 * var(--u)); padding-right: calc(32 * var(--u)); }
    .hp-tel-ok { right: calc(10 * var(--u)); width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
    .hp-tel-ok svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }

    .hp-field input.hp-date { padding-right: calc(36 * var(--u)); }
    .hp-placeholder { left: calc(38 * var(--u)); font-size: max(11px, calc(13 * var(--u))); }
    .hp-cal { right: calc(12 * var(--u)); }
    .hp-cal svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

    .hp-gender { gap: calc(4 * var(--u)) calc(16 * var(--u)); padding: calc(3 * var(--u)) calc(12 * var(--u)); }
    .hp-radio { gap: calc(6 * var(--u)); font-size: max(10.5px, calc(13 * var(--u))); }
    .hp-radio input { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

    .hp-photo { min-height: calc(50 * var(--u)); padding: calc(4 * var(--u)) calc(12 * var(--u)); gap: calc(10 * var(--u)); border-radius: calc(9 * var(--u)); }
    .hp-photo-circle { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
    .hp-photo-circle svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
    .hp-photo-t { font-size: max(11px, calc(13 * var(--u))); }
    .hp-photo-h { font-size: max(9.5px, calc(11 * var(--u))); }

    .hp-area { height: calc(84 * var(--u)); border-radius: calc(9 * var(--u)); }
    .hp-area > .fl-i { left: calc(12 * var(--u)); top: calc(12 * var(--u)); }
    .hp-area > .fl-i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
    .hp-area textarea { left: calc(38 * var(--u)); top: calc(10 * var(--u)); right: calc(12 * var(--u)); bottom: calc(24 * var(--u)); font-size: max(11px, calc(13 * var(--u))); }
    .hp-counter { right: calc(12 * var(--u)); bottom: calc(6 * var(--u)); font-size: max(9.5px, calc(11 * var(--u))); }

    .hp-err { font-size: max(10px, calc(11.5 * var(--u))); }
    .hp-actions { margin-top: calc(10 * var(--u)); }
    .hp-submit { height: calc(40 * var(--u)); padding: 0 calc(24 * var(--u)); border-radius: calc(9 * var(--u)); gap: calc(8 * var(--u)); font-size: max(12px, calc(14 * var(--u))); }
    .hp-submit svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Wide: add the girl, the handwritten note and the floating job cards.
   Shown from 1280px wide. Her size follows --u, so she shrinks with a short window.
   ══════════════════════════════════════════════════════════════════════════ */
/* 4K-class screens only (a 2560x1440 monitor and every laptop are unaffected): the card and page caps grow
   with --u, so the form keeps the same proportions instead of staying a small card with oversized text. */
@media (min-width: 2400px) and (min-height: 1500px) {
    .hp-page { grid-template-columns: minmax(0, 1fr) minmax(440px, min(47%, calc(780 * var(--u)))); max-width: max(2400px, calc(1700 * var(--u))); }
}

@media (min-width: 1280px) {
    .hp-deco { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
    .hp-left > .hp-brand, .hp-left > .hp-copy, .hp-left > .hp-features, .hp-left > .hp-reviews-wrap { position: relative; z-index: 2; }
    .hp-copy { max-width: calc(560 * var(--u)); }
    .hp-h1 { white-space: nowrap; }
    .hp-features { max-width: min(calc(420 * var(--u)), 60%); }
    .hp-reviews-wrap { max-width: min(calc(440 * var(--u)), 60%); }

    /* One lavender wave behind the girl, drawn as an SVG that fills the left column,
       so its shape stays in the same place at every window size. It drifts very slowly. */
    .hp-blob { position: absolute; inset: 0; width: 100%; height: 100%; animation: hp-blob-drift 14s ease-in-out infinite; }
    .hp-girl {
        position: absolute; left: 45%; bottom: 0; height: calc(790 * var(--u)); width: auto; max-width: none;
        user-select: none; animation: hp-girl-in 1.1s .2s var(--hp-ease) both;
    }
    .hp-note {
        position: absolute; left: 43%; top: 30%; font-size: max(16px, calc(26 * var(--u))); line-height: 1.2; font-weight: 600;
        color: #3d1fb8; transform: rotate(-6deg); animation: hp-note-float 6s 2s ease-in-out infinite;
        font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", "Chalkboard SE", cursive;
    }
    /* Each line writes itself in, one after another, then the note keeps drifting gently. */
    .hp-note span { display: block; opacity: 0; animation: hp-note-in .8s var(--hp-ease) forwards; }
    .hp-note span:nth-child(1) { animation-delay: .9s; }
    .hp-note span:nth-child(2) { animation-delay: 1.15s; }
    .hp-note span:nth-child(3) { animation-delay: 1.4s; }
    .hp-arrow path { stroke-dasharray: 120; stroke-dashoffset: 120; animation: hp-draw 1.1s 1.8s var(--hp-ease) forwards; }
    .hp-arrow path + path { animation-delay: 2.5s; }
    .hp-arrow { position: absolute; left: 56%; top: 39%; width: calc(40 * var(--u)); height: calc(52 * var(--u)); animation: hp-rise 1s 1.2s var(--hp-ease) both; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Phones: a single column with the hero, then the form, then the proof.
   Paragraph margins are scoped under .fl-hp-body because freelancer.css resets
   `.fl-body p` to 0, which outranks a single class. Every input is 16px so iOS
   does not zoom the page on focus, and every control is at least 48px tall.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
    .hp-page {
        gap: 20px;
        padding: calc(16px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
    }
    .hp-right { display: block; width: 100%; }
    .hp-card { min-width: 0; width: 100%; padding: 20px 16px 22px; border-radius: 20px; }

    /* Hero */
    .hp-brand img { width: min(168px, 50vw); }
    .hp-copy { padding: 0 2px; }
    .hp-h1 { font-size: clamp(26px, 7.6vw, 30px); line-height: 1.14; text-wrap: balance; }
    .fl-hp-body .hp-sub { margin-top: 10px; font-size: 15px; line-height: 1.55; }

    /* Card header and progress */
    .hp-card-top { margin-bottom: 14px; }
    .hp-h2 { margin-top: 0; font-size: clamp(22px, 6.4vw, 26px); text-wrap: balance; }
    .fl-hp-body .hp-h2-sub { margin-top: 6px; font-size: 14px; }
    .hp-steps { margin-top: 18px; padding: 0 2px; }
    .hp-step { flex: 1 1 0; }
    .hp-step-l { display: none; }
    .hp-step-n { width: 30px; height: 30px; font-size: 13px; }
    .hp-step:not(:last-child)::after { top: 14px; width: 100%; }
    .fl-hp-body .hp-m-step { display: block; margin-top: 12px; text-align: center; font-size: 13px; }
    .hp-h3-wrap { margin-top: 18px; padding-top: 18px; border-top: 1px solid #eef0f8; }
    .hp-h3 { font-size: 19px; }
    .fl-hp-body .hp-h3-sub { margin-top: 4px; font-size: 13.5px; }

    /* Fields */
    .hp-form { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 16px; }
    .hp-group { gap: 6px; }
    .hp-lbl { font-size: 13px; }
    .hp-field { height: 50px; border-radius: 12px; }
    .hp-field > .fl-i { left: 14px; }
    .hp-field input, .hp-field select, .hp-field .hp-dd-btn { padding-left: 44px; font-size: 16px; text-overflow: ellipsis; }
    .hp-dd-panel { top: calc(100% + 8px); min-width: 100%; max-width: 100%; padding: 8px; border-radius: 14px; }
    .hp-dd.is-up .hp-dd-panel { top: auto; bottom: calc(100% + 8px); }
    .hp-dd-search input { height: 44px; padding-left: 38px; font-size: 16px; border-radius: 10px; }
    .hp-dd-search > .fl-i { left: 13px; }
    .hp-dd-list { max-height: 252px; }
    .hp-dd-opt { min-height: 44px; font-size: 16px; padding: 0 12px; }
    .hp-field--action input { padding-right: 90px; }
    .hp-field--code input { padding-right: 106px; }
    .hp-field input.hp-date { padding-right: 44px; }
    .hp-placeholder { left: 44px; font-size: 16px; }
    .hp-select select { padding-right: 44px; }
    .hp-verify, .hp-ok { right: 8px; height: 34px; font-size: 13px; }
    .hp-cc { padding: 0 12px 0 44px; font-size: 16px; }
    .hp-field.hp-field--tel input { padding-left: 12px; padding-right: 42px; }
    .hp-tel-ok { right: 14px; width: 22px; height: 22px; }
    .hp-gender { min-height: 50px; padding: 6px 14px; gap: 6px 22px; border-radius: 12px; }
    .hp-radio { gap: 8px; font-size: 15px; }
    .hp-radio input { width: 20px; height: 20px; }
    .hp-photo { min-height: 66px; padding: 8px 14px; border-radius: 12px; }
    .hp-photo-t { font-size: 15px; }
    .hp-photo-h { font-size: 12.5px; }
    .hp-area { height: 108px; border-radius: 12px; }
    .hp-area > .fl-i { left: 14px; top: 16px; }
    .hp-area textarea { left: 44px; top: 14px; bottom: 28px; font-size: 16px; line-height: 1.45; }
    .hp-counter { bottom: 8px; font-size: 12px; }
    .hp-err { font-size: 12.5px; }
    .hp-actions { margin-top: 6px; }
    .hp-submit { width: 100%; height: 52px; border-radius: 12px; font-size: 16px; }
}
@media (max-width: 359px) {
    .hp-card { padding: 18px 14px 20px; }
    .hp-h1 { font-size: 25px; }
    .hp-field input, .hp-field select, .hp-field .hp-dd-btn { padding-left: 42px; }
    .hp-cc { padding-left: 42px; }
    .hp-gender { gap: 6px 12px; padding: 6px 12px; }
    .hp-radio { gap: 6px; font-size: 14px; }
    .hp-radio input { width: 18px; height: 18px; }
}

/* ── Motion ─────────────────────────────────────────────────────────────── */
@keyframes hp-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
@keyframes hp-blob-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-1.2%, 1%) scale(1.015); }
}
@keyframes hp-note-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
@keyframes hp-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes hp-note-float {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50% { transform: rotate(-4deg) translateY(-7px); }
}
@keyframes hp-girl-in {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: none; }
}
@keyframes hp-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes hp-pop {
    from { opacity: 0; transform: translateY(-50%) scale(.6); }
    to { opacity: 1; transform: translateY(-50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}