/* ─── How-to Help Page — standalone (no shared theme import) ─── */

:root {
    --hp-bg:           #0a0d14;
    --hp-card:         #161a24;
    --hp-card-hover:   #1d2230;
    --hp-border:       rgba(245, 166, 35, 0.18);
    --hp-border-hover: rgba(245, 166, 35, 0.35);
    --hp-text:         #ffffff;
    --hp-text-muted:   #c0cde0;
    --hp-text-dim:     rgba(255, 255, 255, 0.5);
    --hp-accent:       #f5a623;
    --hp-accent-soft:  rgba(245, 166, 35, 0.12);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--hp-bg);
    color: var(--hp-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.55;
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(ellipse at 18% 12%, rgba(245, 166, 35, 0.08) 0%, transparent 45%),
        radial-gradient(ellipse at 82% 88%, rgba(200, 230, 58, 0.05) 0%, transparent 50%),
        var(--hp-bg);
    min-height: 100vh;
    padding-bottom: 60px;
}

/* ─── Sticky header ─── */
.hp-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px calc(14px + env(safe-area-inset-top, 0)) 18px;
    padding-top: calc(14px + env(safe-area-inset-top, 0));
    background: rgba(10, 13, 20, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hp-border);
}

.hp-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--hp-accent-soft);
    border: 1px solid var(--hp-border);
    color: var(--hp-accent);
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.hp-back:hover { background: rgba(245, 166, 35, 0.2); border-color: var(--hp-border-hover); }
.hp-back-icon { line-height: 1; font-style: normal; }

.hp-header-text { flex: 1; min-width: 0; }
.hp-header-eyebrow {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--hp-accent);
    font-weight: 700;
}
.hp-header-title {
    margin: 2px 0 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--hp-text);
    line-height: 1.2;
}

/* ─── Hero block ─── */
.hp-hero {
    max-width: 480px;
    margin: 0 auto;
    padding: 36px 22px 18px;
    text-align: center;
}
.hp-hero-icon {
    font-size: 2.6rem;
    margin-bottom: 14px;
    filter: drop-shadow(0 4px 14px rgba(245, 166, 35, 0.4));
}
.hp-hero-title {
    margin: 0 0 10px;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--hp-text);
    line-height: 1.2;
}
.hp-hero-text {
    margin: 0;
    font-size: 0.92rem;
    color: var(--hp-text-muted);
    line-height: 1.6;
}

/* ─── Platform tabs ─── */
.hp-tabs {
    max-width: 480px;
    margin: 4px auto 8px;
    padding: 0 18px;
    display: flex;
    gap: 10px;
}
.hp-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--hp-card);
    border: 1px solid var(--hp-border);
    border-radius: 12px;
    color: var(--hp-text-muted);
    font-size: 0.92rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.18s;
}
.hp-tab:hover {
    background: var(--hp-card-hover);
    border-color: var(--hp-border-hover);
}
.hp-tab.active {
    background: var(--hp-accent-soft);
    border-color: var(--hp-accent);
    color: var(--hp-accent);
    box-shadow: 0 4px 14px rgba(245, 166, 35, 0.18);
}
.hp-tab-icon {
    font-size: 1.15rem;
    line-height: 1;
}
.hp-tab-label { line-height: 1; }

/* ─── Steps container ─── */
.hp-steps {
    max-width: 480px;
    margin: 0 auto;
    padding: 14px 18px 30px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hp-step {
    background: var(--hp-card);
    border: 1px solid var(--hp-border);
    border-radius: 18px;
    padding: 22px 20px 24px;
    position: relative;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.hp-step-number {
    position: absolute;
    top: -16px;
    left: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--hp-accent);
    color: #0a0d14;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(245, 166, 35, 0.4);
}

.hp-step-title {
    margin: 6px 0 8px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--hp-text);
    line-height: 1.3;
}

.hp-step-text {
    margin: 0 0 16px;
    font-size: 0.9rem;
    color: var(--hp-text-muted);
    line-height: 1.6;
}

.hp-step-img-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: center;
}
.hp-step-img-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Pulsing highlight ring — point this at any UI element on a screenshot
   by setting top/left/right/bottom inline. Size defaults to 38px but can
   be overridden inline with style="--hp-pulse-size: 52px". */
.hp-pulse {
    --hp-pulse-size: 38px;
    position: absolute;
    width: var(--hp-pulse-size);
    height: var(--hp-pulse-size);
    margin: calc(var(--hp-pulse-size) / -2);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
}
.hp-pulse::before,
.hp-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid var(--hp-accent);
    box-shadow: 0 0 12px rgba(245, 166, 35, 0.6),
                inset 0 0 12px rgba(245, 166, 35, 0.4);
    animation: hp-pulse-ring 2s ease-out infinite;
}
.hp-pulse::after {
    animation-delay: 1s;
}
@keyframes hp-pulse-ring {
    0%   { transform: scale(0.7); opacity: 1; }
    80%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Delayed pulse — same ring, but waits for the typewriter to finish typing
   before it starts. Use on steps where a typewriter overlay precedes the
   highlight (e.g. type email → then tap Forgot password).
   Typewriter cycle is 8s; typing finishes around 3s; hold lasts until 7s.
   Start the pulse at 3.5s so it appears just after the email is fully typed. */
.hp-pulse-delayed::before { animation-delay: 3.5s; }
.hp-pulse-delayed::after  { animation-delay: 4.5s; }

/* ─── Typewriter overlay ─────────────────────────────────────────
   Sits over a screenshot's text input area and "types" out a string
   character-by-character. Position via inline top/left/width %. */
.hp-typewriter {
    position: absolute;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Use container queries against the image-wrap width so the font scales */
    font-size: clamp(11px, 3.6cqw, 15px);
    color: #ffffff;
    line-height: 1;
    white-space: nowrap;
    /* Faux text cursor — flashes via a separate animation */
    border-right: 2px solid var(--hp-accent);
    width: 0;
    max-width: 100%;
    /* 8s cycle: 0-1s wait, 1-3s typing, 3-7s hold typed, 7-8s reset.
       Sync the delayed pulse animation to start at 3.5s. */
    animation:
        hp-typewriter-type 8s steps(22, end) infinite,
        hp-typewriter-cursor 0.7s step-end infinite;
}
/* Browser fallback when container queries aren't available */
@supports not (font-size: 1cqw) {
    .hp-typewriter { font-size: 13px; }
}
.hp-typewriter-text {
    display: inline-block;
}
@keyframes hp-typewriter-type {
    0%   { width: 0; }
    12%  { width: 0; }      /* short delay before typing starts */
    37%  { width: 22ch; }   /* typing finished at ~3s */
    87%  { width: 22ch; }   /* hold typed state until ~7s */
    100% { width: 0; }      /* reset for next loop */
}

/* Short typewriter variant for short strings like the 6-char temp password.
   Uses fewer steps and a smaller target width so the typing rhythm matches. */
.hp-typewriter-pwd {
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.04em;
    font-weight: 700;
    animation:
        hp-typewriter-type-pwd 8s steps(6, end) infinite,
        hp-typewriter-cursor 0.7s step-end infinite;
}
@keyframes hp-typewriter-type-pwd {
    0%   { width: 0; }
    12%  { width: 0; }
    37%  { width: 6.5ch; }
    87%  { width: 6.5ch; }
    100% { width: 0; }
}

/* Two-stage password typewriter — first types into "New password",
   then a moment later the second types into "Confirm password".
   Both share a 10s cycle to leave room for the crossfade and pulse. */
.hp-typewriter-pwd-1,
.hp-typewriter-pwd-2 {
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.04em;
    font-weight: 700;
    animation-iteration-count: infinite;
    animation-timing-function: steps(12, end);
    animation-duration: 10s;
}
.hp-typewriter-pwd-1 {
    animation-name: hp-typewriter-pwd-1, hp-typewriter-cursor;
    animation-duration: 10s, 0.7s;
    animation-timing-function: steps(12, end), step-end;
}
.hp-typewriter-pwd-2 {
    animation-name: hp-typewriter-pwd-2, hp-typewriter-cursor;
    animation-duration: 10s, 0.7s;
    animation-timing-function: steps(12, end), step-end;
}
@keyframes hp-typewriter-pwd-1 {
    0%   { width: 0; }
    8%   { width: 0; }       /* wait until 0.8s */
    23%  { width: 12.5ch; }  /* type by 2.3s */
    87%  { width: 12.5ch; }  /* hold typed */
    100% { width: 0; }
}
@keyframes hp-typewriter-pwd-2 {
    0%   { width: 0; }
    25%  { width: 0; }       /* stay empty until 2.5s (after first finishes) */
    40%  { width: 12.5ch; }  /* type by 4s */
    87%  { width: 12.5ch; }  /* hold typed */
    100% { width: 0; }
}

/* Late fade-in — used by the password-set step where the crossfade should
   wait for BOTH typewriters to finish before showing the filled form. */
.hp-img-fade-late {
    animation-duration: 10s;
}
.hp-img-fade-in.hp-img-fade-late {
    animation-name: hp-img-fade-late;
}
@keyframes hp-img-fade-late {
    0%   { opacity: 0; }
    42%  { opacity: 0; }     /* hidden through both typewriters */
    48%  { opacity: 1; }     /* fade in around 4.5s */
    87%  { opacity: 1; }     /* hold visible until 8.7s */
    100% { opacity: 0; }
}

/* Late pulse — fires after the late fade-in so it lands on the filled form. */
.hp-pulse-late::before { animation-delay: 5s; }
.hp-pulse-late::after  { animation-delay: 6s; }

/* Phone-number typewriter — sans-serif, 12 chars, 8s cycle so it can reuse
   the existing hp-pulse-delayed (3.5s) and hp-img-fade-in animations. */
.hp-typewriter-phone {
    animation:
        hp-typewriter-type-phone 8s steps(12, end) infinite,
        hp-typewriter-cursor 0.7s step-end infinite;
}
@keyframes hp-typewriter-type-phone {
    0%   { width: 0; }
    12%  { width: 0; }       /* short delay before typing */
    37%  { width: 12.5ch; }  /* typing finished at ~3s */
    87%  { width: 12.5ch; }  /* hold typed until ~7s */
    100% { width: 0; }
}

/* OTP typewriter — 5 digits with wide letter-spacing to match the
   segmented-input look of the Verify Account screen. */
.hp-typewriter-otp {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(16px, 5.5cqw, 26px);
    font-weight: 700;
    letter-spacing: 0.55em;
    text-align: left;
    animation:
        hp-typewriter-type-otp 8s steps(5, end) infinite,
        hp-typewriter-cursor 0.7s step-end infinite;
}
@keyframes hp-typewriter-type-otp {
    0%   { width: 0; }
    12%  { width: 0; }
    37%  { width: 7.5ch; }   /* 5 chars + wide letter-spacing */
    87%  { width: 7.5ch; }
    100% { width: 0; }
}

/* Secondary image wraps inside a single step — give them a small top
   margin so they don't bump against the one above. */
.hp-step-img-wrap-spaced { margin-top: 14px; }

/* Caption-style image wrap — narrower than the main phone-screen image,
   centred, used for supplementary screenshots like the WhatsApp message. */
.hp-step-img-wrap-caption {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    border: 0;
}
.hp-step-img-wrap-caption img {
    border-radius: 10px;
}
@keyframes hp-typewriter-cursor {
    0%, 100% { border-right-color: var(--hp-accent); }
    50%      { border-right-color: transparent; }
}

/* Set up container queries on the image wrap so the typewriter can
   responsively size itself relative to the screenshot width. */
.hp-step-img-wrap { container-type: inline-size; }

/* ─── Stacked image variant ──────────────────────────────────────
   Used when a step has two screenshots stacked on top of each other
   (e.g. before/after states). The first <img> stays in flow to give
   the wrapper its height; the second is absolutely positioned over
   it and fades in/out via animation. */
.hp-step-img-wrap-stack {
    position: relative;
}
.hp-step-img-wrap-stack > img:first-of-type {
    position: relative;
    z-index: 0;
}
.hp-step-img-wrap-stack > img.hp-img-fade-in {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 0;
    /* z-index 3 sits above the typewriter (z-index 2) and pulse (z-index 2)
       so when the image fades in, it covers the typing cursor and pulse ring.
       The pulse and typewriter still animate underneath but are masked. */
    z-index: 3;
    /* 8s cycle synced with the typewriter:
       0-5s:    hidden (typing + pulse phase)
       5-5.5s:  fade in
       5.5-7s:  hold
       7-8s:    fade out */
    animation: hp-img-fade-in 8s ease-in-out infinite;
}
@keyframes hp-img-fade-in {
    0%   { opacity: 0; }
    65%  { opacity: 0; }      /* hidden through typing + pulse */
    72%  { opacity: 1; }      /* fade in around 5.7s */
    87%  { opacity: 1; }      /* hold visible until 7s */
    100% { opacity: 0; }      /* fade out for next cycle */
}

/* ─── Scrollable image frame ────────────────────────────────────
   Used when a step needs to "scroll" through a tall screen by
   stitching two stacked screenshots and animating translateY. */
.hp-scroll-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 384 / 805;
    max-width: 100%;
}
.hp-scroll-inner {
    width: 100%;
    /* 10s cycle: hold top → scroll → hold bottom (with pulses) → snap back */
    animation: hp-scroll 10s ease-in-out infinite;
}
.hp-scroll-inner img {
    display: block;
    width: 100%;
    height: auto;
}
@keyframes hp-scroll {
    0%   { transform: translateY(0); }
    10%  { transform: translateY(0); }      /* hold top for 1s */
    35%  { transform: translateY(-50%); }   /* scroll down to bottom by 3.5s */
    90%  { transform: translateY(-50%); }   /* hold bottom for ~5.5s */
    100% { transform: translateY(0); }      /* snap back for next loop */
}

/* Pulse delays synced to the scroll animation:
   - Scroll completes at 3.5s
   - Checkbox pulse fires at 4s
   - Accept button pulse fires at 6s */
.hp-pulse-after-scroll::before { animation-delay: 4s; }
.hp-pulse-after-scroll::after  { animation-delay: 5s; }
.hp-pulse-after-accept::before { animation-delay: 6s; }
.hp-pulse-after-accept::after  { animation-delay: 7s; }

/* ─── Done card ─── */
.hp-done {
    margin-top: 12px;
    padding: 28px 22px;
    text-align: center;
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.14), rgba(200, 230, 58, 0.08));
    border: 1px solid var(--hp-border-hover);
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(245, 166, 35, 0.15);
}
.hp-done-icon {
    font-size: 2.4rem;
    margin-bottom: 10px;
    filter: drop-shadow(0 4px 12px rgba(245, 166, 35, 0.5));
}
.hp-done-title {
    margin: 0 0 10px;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--hp-text);
}
.hp-done-text {
    margin: 0;
    font-size: 0.9rem;
    color: var(--hp-text-muted);
    line-height: 1.6;
}
.hp-done-text a { color: var(--hp-accent); text-decoration: none; }
.hp-done-text a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   PHONE FRAME — standalone HTML replica of the app's login screen
   Used in steps 5+ instead of screenshots. Mimics the glassmorphism
   style from login.html without pulling in the full file.
   ═══════════════════════════════════════════════════════════════ */

.hp-phone {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 384 / 805;
    margin: 0 auto;
    background: #000;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.6);
    container-type: inline-size;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Spot lighting behind the card — mimics the app's radial glow */
.hp-phone::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 18% 25%, rgba(245, 166, 35, 0.13) 0%, transparent 52%),
        radial-gradient(ellipse at 80% 65%, rgba(200, 230, 58, 0.08) 0%, transparent 48%),
        radial-gradient(ellipse at 50% 90%, rgba(245, 166, 35, 0.07) 0%, transparent 40%);
    pointer-events: none;
}

/* Mock status bar — matches Android's orange notification bar */
.hp-phone__status {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.2% 4.5%;
    font-size: clamp(9px, 3cqw, 12px);
    color: #000;
    font-weight: 700;
    background: #f5a623;
}
.hp-phone__status-left,
.hp-phone__status-right {
    display: flex;
    gap: 5px;
    align-items: center;
}
.hp-phone__status-left { gap: 8px; }
.hp-phone__status i { font-size: 1em; line-height: 1; }
.hp-phone__status-time { letter-spacing: 0.01em; }

/* Card — mimics .gls-card. Vertically centred within the phone frame. */
.hp-phone__card {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(245, 166, 35, 0.18);
    border-radius: 6cqw;
    padding: 9cqw 7cqw 8cqw;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 30px 80px rgba(0, 0, 0, 0.55),
        0 0 60px rgba(245, 166, 35, 0.06) inset;
    display: flex;
    flex-direction: column;
    gap: 7cqw;
}

/* Icon ring */
.hp-phone__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.hp-phone__icon-ring {
    width: 16cqw;
    height: 16cqw;
    border-radius: 50%;
    background: rgba(245, 166, 35, 0.12);
    border: 1.5px solid rgba(245, 166, 35, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7cqw;
    color: #f5a623;
}
.hp-phone__title {
    margin: 0;
    font-size: clamp(13px, 5cqw, 22px);
    font-weight: 800;
    letter-spacing: -0.3px;
    background: linear-gradient(135deg, #f5a623 0%, #fff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #f5a623;
}
.hp-phone__subtitle {
    margin: 0;
    font-size: clamp(8px, 2.8cqw, 12px);
    color: rgba(180, 190, 210, 0.65);
    font-weight: 500;
}

/* Form */
.hp-phone__form {
    display: flex;
    flex-direction: column;
    gap: 4cqw;
}
.hp-phone__input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 1px solid rgba(245, 166, 35, 0.25);
    border-radius: 4cqw;
    padding: 3.5cqw 4.5cqw;
    position: relative;
}
.hp-phone__input-icon {
    color: rgba(180, 190, 210, 0.5);
    font-size: clamp(12px, 3.8cqw, 16px);
    line-height: 1;
    flex-shrink: 0;
}
/* The input slot is position:relative with a fixed height; placeholder and
   typewriter sit on top of each other via absolute positioning, so the
   typewriter always starts from the left edge regardless of placeholder state. */
.hp-phone__input {
    flex: 1;
    position: relative;
    color: #fff;
    font-size: clamp(9px, 3.4cqw, 14px);
    font-family: inherit;
    height: 1.2em;
    text-align: left;
}
.hp-phone__input-placeholder {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(180, 190, 210, 0.35);
    text-align: left;
    white-space: nowrap;
}

/* Primary button */
.hp-phone__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 3.5% 0;
    border: none;
    border-radius: 4cqw;
    background: linear-gradient(135deg, #f5a623, #e07b18);
    color: #0a0d14;
    font-family: inherit;
    font-size: clamp(10px, 3.6cqw, 15px);
    font-weight: 700;
    box-shadow: 0 6px 22px rgba(245, 166, 35, 0.35);
}

/* Hint line + forgot password link */
.hp-phone__hint {
    margin: 0;
    text-align: center;
    font-size: clamp(7px, 2.4cqw, 11px);
    color: rgba(180, 190, 210, 0.45);
}
.hp-phone__hint em {
    color: rgba(245, 166, 35, 0.7);
    font-style: normal;
}
.hp-phone__link {
    display: block;
    margin-top: 2%;
    text-align: center;
    font-size: clamp(8px, 2.8cqw, 12px);
    font-weight: 500;
    color: rgba(245, 166, 35, 0.85);
    cursor: pointer;
    position: relative;
    padding: 6px 10px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    border-radius: 999px;
}
/* Pulsing ring around the link — two staggered ::before and ::after rings
   that expand outward. Only visible during the "click now" phase of the
   step 5 animation (3-5s). */
.hp-phone__link::before,
.hp-phone__link::after {
    content: '';
    position: absolute;
    inset: -6px -14px;
    border-radius: 999px;
    border: 2px solid #f5a623;
    box-shadow:
        0 0 14px rgba(245, 166, 35, 0.75),
        inset 0 0 14px rgba(245, 166, 35, 0.35);
    pointer-events: none;
    opacity: 0;
}

/* Success banner (shown after the forgot password pulse) */
.hp-phone__success {
    margin-top: 3%;
    text-align: center;
    font-size: clamp(7px, 2.5cqw, 11px);
    color: #7dffa6;
    line-height: 1.5;
    opacity: 0;
}

/* ─── Typewriter inside a phone input ─────────────────────────
   Sits inside .hp-phone__input and reveals text character by character.
   Absolute-positioned so it doesn't get pushed by the placeholder. */
.hp-phone__typewriter {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #f5a623;
    width: 0;
    color: #fff;
    max-width: 100%;
}
@keyframes hp-phone-cursor {
    0%, 100% { border-right-color: #f5a623; }
    50%      { border-right-color: transparent; }
}

/* ─── Step 5 animation timeline ────────────────────────────────
   0-1s:    idle (placeholder visible)
   1-3s:    type email into username
   3-3.5s:  hide placeholder of username (already done)
   3.5-5.5s pulse on forgot password
   5.5-6s:  fade in success message
   6-8s:    hold
   8s:      reset loop */
.hp-phone--step5 .hp-phone__tw-email {
    animation:
        hp-phone-step5-type 8s steps(22, end) infinite,
        hp-phone-cursor 0.7s step-end infinite;
}
@keyframes hp-phone-step5-type {
    0%   { width: 0; }
    10%  { width: 0; }
    37%  { width: 22ch; }
    87%  { width: 22ch; }
    100% { width: 0; }
}
/* Hide the username placeholder whenever the typewriter has any content */
.hp-phone--step5 .hp-phone__tw-email-ph {
    animation: hp-phone-step5-ph 8s linear infinite;
}
@keyframes hp-phone-step5-ph {
    0%, 9%   { opacity: 1; }
    11%, 89% { opacity: 0; }
    91%, 100%{ opacity: 1; }
}
.hp-phone--step5 .hp-phone__success {
    animation: hp-phone-step5-success 8s ease-in-out infinite;
}
@keyframes hp-phone-step5-success {
    0%, 66%  { opacity: 0; transform: translateY(4px); }
    72%      { opacity: 1; transform: translateY(0); }
    87%      { opacity: 1; transform: translateY(0); }
    100%     { opacity: 0; transform: translateY(4px); }
}
/* During the "click now" phase, glow the link text AND pulse two rings
   around it outward. Rings are staggered by 1s so there's always one
   active during the 3.5-6s window. */
.hp-phone--step5 .hp-phone__link {
    animation: hp-phone-step5-link-glow 8s ease-out infinite;
}
.hp-phone--step5 .hp-phone__link::before {
    animation: hp-phone-step5-ring 8s ease-out infinite;
}
.hp-phone--step5 .hp-phone__link::after {
    animation: hp-phone-step5-ring 8s ease-out infinite;
    animation-delay: 0.5s;
}
@keyframes hp-phone-step5-link-glow {
    0%, 40%  { color: rgba(245, 166, 35, 0.85); text-shadow: none; }
    48%      { color: #ffdc6e; text-shadow: 0 0 16px rgba(245, 166, 35, 0.85); }
    62%      { color: #ffdc6e; text-shadow: 0 0 16px rgba(245, 166, 35, 0.85); }
    75%      { color: rgba(245, 166, 35, 0.85); text-shadow: none; }
    100%     { color: rgba(245, 166, 35, 0.85); text-shadow: none; }
}
@keyframes hp-phone-step5-ring {
    0%, 40%  { transform: scale(0.85); opacity: 0; }
    46%      { transform: scale(0.95); opacity: 1; }
    60%      { transform: scale(1.18); opacity: 0; }
    100%     { transform: scale(1.18); opacity: 0; }
}

/* ─── Static input text (already-filled field, no animation) ───── */
.hp-phone__input-static {
    color: #fff;
    font-size: clamp(9px, 3.4cqw, 14px);
    white-space: nowrap;
}

/* ─── Monospace typewriter variant for passwords / codes ─────── */
.hp-phone__mono {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* ─── Static link variant (no pulse) ─────────────────────────── */
.hp-phone__link--static::before,
.hp-phone__link--static::after { display: none; }

/* ─── Pulsing ring on the primary button ─────────────────────── */
.hp-phone__btn {
    position: relative;
}
.hp-phone__btn--pulse::before,
.hp-phone__btn--pulse::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 2px solid #f5a623;
    box-shadow:
        0 0 16px rgba(245, 166, 35, 0.75),
        inset 0 0 14px rgba(245, 166, 35, 0.3);
    pointer-events: none;
    opacity: 0;
}

/* ─── Step 7 animation timeline ────────────────────────────────
   0-1s:   idle (email already filled, password empty)
   1-3s:   type the 6-char temp password
   3-3.5s: pulse starts on Sign In button
   3.5-5.5s pulse continues
   5.5-8s: hold, then loop */
.hp-phone--step7 .hp-phone__tw-pwd {
    animation:
        hp-phone-step7-type 8s steps(6, end) infinite,
        hp-phone-cursor 0.7s step-end infinite;
}
@keyframes hp-phone-step7-type {
    0%   { width: 0; }
    12%  { width: 0; }
    37%  { width: 7ch; }
    87%  { width: 7ch; }
    100% { width: 0; }
}
.hp-phone--step7 .hp-phone__tw-pwd-ph {
    animation: hp-phone-step7-ph 8s linear infinite;
}
@keyframes hp-phone-step7-ph {
    0%, 11%  { opacity: 1; }
    13%, 89% { opacity: 0; }
    91%, 100%{ opacity: 1; }
}
.hp-phone--step7 .hp-phone__btn--pulse::before {
    animation: hp-phone-step5-ring 8s ease-out infinite;
    animation-delay: 0s;
}
.hp-phone--step7 .hp-phone__btn--pulse::after {
    animation: hp-phone-step5-ring 8s ease-out infinite;
    animation-delay: 0.5s;
}

/* ═══════════════════════════════════════════════════════════════
   STEP 8 — Light Control app with scrollable disclaimer
   ═══════════════════════════════════════════════════════════════ */

/* App-style header bar (menu, title, icons). Solid dark background and
   a high z-index so scrolling content is clipped behind it rather than
   bleeding through into the header area. */
.hp-phone__app-header {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 2.5cqw;
    padding: 3cqw 4cqw;
    background: #0a0d14;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.hp-phone__app-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 9cqw;
    height: 9cqw;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: clamp(12px, 3.8cqw, 16px);
    cursor: pointer;
}
.hp-phone__app-btn--orange {
    background: rgba(245, 166, 35, 0.15);
    color: #f5a623;
    border: 1px solid rgba(245, 166, 35, 0.45);
}
.hp-phone__app-title {
    flex: 1;
    color: #fff;
    font-size: clamp(11px, 3.6cqw, 15px);
    font-weight: 700;
}

/* Disclaimer scroll frame — clips content and animates translateY.
   Styled to match the real .ml-pw-card + .ml-disclaimer-body in the
   member portal's first-login disclaimer overlay. */
.hp-phone__disclaimer {
    position: absolute;
    left: 0;
    right: 0;
    top: 18cqw;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
}
.hp-phone__disclaimer-scroll {
    padding: 6cqw 6cqw 6cqw;
    color: rgba(180, 190, 210, 0.75);   /* text-secondary */
    font-size: clamp(11px, 3.3cqw, 14px);
    line-height: 1.6;
    text-align: center;
    /* 12s cycle: 0-1.2s hold top, 1.2-4.8s scroll, 4.8-10.5s hold bottom,
       10.5-12s snap back */
    animation: hp-phone-step8-scroll 12s ease-in-out infinite;
}
.hp-phone__disclaimer-scroll p {
    margin: 0 0 8px;
    color: rgba(180, 190, 210, 0.75);
    text-align: center;
}
.hp-phone__disclaimer-scroll p strong { color: #ffffff; }
.hp-phone__disclaimer-scroll h6 {
    margin: 14px 0 2px;
    font-size: clamp(10px, 3cqw, 13px);
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.hp-phone__disclaimer-icon {
    width: 14cqw;
    height: 14cqw;
    border-radius: 50%;
    background: rgba(245, 166, 35, 0.12);
    border: 1px solid rgba(245, 166, 35, 0.3);
    color: #f5a623;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7cqw;
    margin: 0 auto 4cqw;
}
.hp-phone__disclaimer-title {
    margin: 0 0 4cqw;
    text-align: center;
    color: #ffffff;
    font-size: clamp(15px, 5cqw, 22px);
    font-weight: 700;
    letter-spacing: -0.2px;
}
.hp-phone__disclaimer-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 0 10px;
    color: rgba(180, 190, 210, 0.85);
    font-size: clamp(10px, 3cqw, 13px);
    line-height: 1.45;
    position: relative;
    text-align: left;
}
.hp-phone__disclaimer-box {
    display: block;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 2px solid rgba(245, 166, 35, 0.55);
    border-radius: 3px;
    background: transparent;
    position: relative;
    flex-shrink: 0;
    margin-top: 1px;
}
.hp-phone__btn--accept {
    margin-top: 4px;
    position: relative;
    font-size: clamp(12px, 3.8cqw, 16px);
}
.hp-phone__disclaimer-decline {
    display: block;
    text-align: center;
    margin-top: 8px;
    color: rgba(180, 190, 210, 0.55);
    font-size: clamp(10px, 3cqw, 13px);
    text-decoration: underline;
}

/* Scroll animation: pan down only far enough to bring the Accept &
   Continue button into view — keeps some of the disclaimer content
   visible at the top instead of scrolling the whole thing away. */
@keyframes hp-phone-step8-scroll {
    0%   { transform: translateY(0); }
    10%  { transform: translateY(0); }
    40%  { transform: translateY(-30%); }
    88%  { transform: translateY(-30%); }
    100% { transform: translateY(0); }
}

/* Checkbox and button pulses appear after scroll settles */
.hp-phone--step8 .hp-phone__disclaimer-box::after {
    content: '';
    position: absolute;
    inset: -4cqw;
    border-radius: 50%;
    border: 2px solid #f5a623;
    box-shadow: 0 0 12px rgba(245, 166, 35, 0.7);
    opacity: 0;
    animation: hp-phone-step8-pulse-check 12s ease-out infinite;
}
@keyframes hp-phone-step8-pulse-check {
    0%, 42%  { transform: scale(0.6); opacity: 0; }
    47%      { transform: scale(0.9); opacity: 1; }
    55%      { transform: scale(1.3); opacity: 0; }
    60%      { transform: scale(0.9); opacity: 1; }
    68%      { transform: scale(1.3); opacity: 0; }
    100%     { opacity: 0; }
}

/* Checkbox tick appears during the pulse */
.hp-phone--step8 .hp-phone__disclaimer-box::before {
    content: '';
    position: absolute;
    left: 25%;
    top: 5%;
    width: 30%;
    height: 60%;
    border-right: 2px solid #f5a623;
    border-bottom: 2px solid #f5a623;
    transform: rotate(45deg);
    opacity: 0;
    animation: hp-phone-step8-tick 12s ease-out infinite;
}
@keyframes hp-phone-step8-tick {
    0%, 55% { opacity: 0; }
    60%, 100% { opacity: 1; }
}

/* Button pulse after checkbox */
.hp-phone--step8 .hp-phone__btn--accept::before,
.hp-phone--step8 .hp-phone__btn--accept::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 2px solid #f5a623;
    box-shadow: 0 0 16px rgba(245, 166, 35, 0.75),
                inset 0 0 14px rgba(245, 166, 35, 0.3);
    pointer-events: none;
    opacity: 0;
    animation: hp-phone-step8-pulse-btn 12s ease-out infinite;
}
.hp-phone--step8 .hp-phone__btn--accept::after { animation-delay: 0.5s; }
@keyframes hp-phone-step8-pulse-btn {
    0%, 68%  { transform: scale(0.95); opacity: 0; }
    73%      { transform: scale(1); opacity: 1; }
    85%      { transform: scale(1.1); opacity: 0; }
    100%     { opacity: 0; }
}

/* Card variant — used for steps 9/10/11 where the phone has an app header.
   Shift the centring point down slightly so the card sits visually centred
   in the area below the header rather than in the whole phone. */
.hp-phone__card--mid {
    top: 55%;
}

/* ═══════════════════════════════════════════════════════════════
   STEP 9 — Welcome + set password (two typewriters)
   ═══════════════════════════════════════════════════════════════ */
.hp-phone--step9 .hp-phone__tw-pwd1 {
    animation:
        hp-phone-step9-pwd1 10s steps(12, end) infinite,
        hp-phone-cursor 0.7s step-end infinite;
}
.hp-phone--step9 .hp-phone__tw-pwd1-ph {
    animation: hp-phone-step9-ph1 10s linear infinite;
}
.hp-phone--step9 .hp-phone__tw-pwd2 {
    animation:
        hp-phone-step9-pwd2 10s steps(12, end) infinite,
        hp-phone-cursor 0.7s step-end infinite;
}
.hp-phone--step9 .hp-phone__tw-pwd2-ph {
    animation: hp-phone-step9-ph2 10s linear infinite;
}
@keyframes hp-phone-step9-pwd1 {
    0%   { width: 0; }
    8%   { width: 0; }       /* wait 0.8s */
    23%  { width: 13ch; }    /* type by 2.3s */
    87%  { width: 13ch; }    /* hold */
    100% { width: 0; }
}
@keyframes hp-phone-step9-ph1 {
    0%, 9%   { opacity: 1; }
    11%, 89% { opacity: 0; }
    91%, 100%{ opacity: 1; }
}
@keyframes hp-phone-step9-pwd2 {
    0%   { width: 0; }
    25%  { width: 0; }       /* wait until 2.5s */
    40%  { width: 13ch; }    /* type by 4s */
    87%  { width: 13ch; }
    100% { width: 0; }
}
@keyframes hp-phone-step9-ph2 {
    0%, 26%  { opacity: 1; }
    28%, 89% { opacity: 0; }
    91%, 100%{ opacity: 1; }
}
.hp-phone--step9 .hp-phone__btn--pulse9::before,
.hp-phone--step9 .hp-phone__btn--pulse9::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 2px solid #f5a623;
    box-shadow: 0 0 16px rgba(245, 166, 35, 0.75),
                inset 0 0 14px rgba(245, 166, 35, 0.3);
    pointer-events: none;
    opacity: 0;
    animation: hp-phone-step9-btn 10s ease-out infinite;
}
.hp-phone--step9 .hp-phone__btn--pulse9::after { animation-delay: 0.5s; }
@keyframes hp-phone-step9-btn {
    0%, 43%  { transform: scale(0.95); opacity: 0; }
    48%      { transform: scale(1); opacity: 1; }
    60%      { transform: scale(1.1); opacity: 0; }
    100%     { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   STEP 10 — Phone number entry
   ═══════════════════════════════════════════════════════════════ */
.hp-phone--step10 .hp-phone__tw-phone {
    animation:
        hp-phone-step10-type 8s steps(12, end) infinite,
        hp-phone-cursor 0.7s step-end infinite;
}
@keyframes hp-phone-step10-type {
    0%   { width: 0; }
    12%  { width: 0; }
    37%  { width: 13ch; }
    87%  { width: 13ch; }
    100% { width: 0; }
}
.hp-phone--step10 .hp-phone__tw-phone-ph {
    animation: hp-phone-step10-ph 8s linear infinite;
}
@keyframes hp-phone-step10-ph {
    0%, 11%  { opacity: 1; }
    13%, 89% { opacity: 0; }
    91%, 100%{ opacity: 1; }
}
.hp-phone--step10 .hp-phone__btn--pulse10::before,
.hp-phone--step10 .hp-phone__btn--pulse10::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 2px solid #f5a623;
    box-shadow: 0 0 16px rgba(245, 166, 35, 0.75),
                inset 0 0 14px rgba(245, 166, 35, 0.3);
    pointer-events: none;
    opacity: 0;
    animation: hp-phone-step5-ring 8s ease-out infinite;
}
.hp-phone--step10 .hp-phone__btn--pulse10::after { animation-delay: 0.5s; }

/* ═══════════════════════════════════════════════════════════════
   STEP 11 — Verify Account OTP
   ═══════════════════════════════════════════════════════════════ */
.hp-phone__otp {
    display: flex;
    justify-content: center;
    gap: 2.5cqw;
    padding: 3cqw 0;
    border: 2px solid rgba(245, 166, 35, 0.5);
    border-radius: 3cqw;
    background: rgba(245, 166, 35, 0.05);
}
.hp-phone__otp-digit {
    font-size: clamp(14px, 5cqw, 22px);
    font-weight: 700;
    color: #fff;
    font-family: inherit;
    width: 5cqw;
    text-align: center;
    opacity: 0;
}
.hp-phone--step11 .hp-phone__otp-digit--1 {
    animation: hp-phone-step11-digit 8s ease-out infinite;
    animation-delay: 1s;
}
.hp-phone--step11 .hp-phone__otp-digit--2 {
    animation: hp-phone-step11-digit 8s ease-out infinite;
    animation-delay: 1.4s;
}
.hp-phone--step11 .hp-phone__otp-digit--3 {
    animation: hp-phone-step11-digit 8s ease-out infinite;
    animation-delay: 1.8s;
}
.hp-phone--step11 .hp-phone__otp-digit--4 {
    animation: hp-phone-step11-digit 8s ease-out infinite;
    animation-delay: 2.2s;
}
.hp-phone--step11 .hp-phone__otp-digit--5 {
    animation: hp-phone-step11-digit 8s ease-out infinite;
    animation-delay: 2.6s;
}
@keyframes hp-phone-step11-digit {
    0%, 5%   { opacity: 0; transform: translateY(4px); }
    10%      { opacity: 1; transform: translateY(0); }
    85%      { opacity: 1; transform: translateY(0); }
    95%      { opacity: 0; transform: translateY(0); }
    100%     { opacity: 0; }
}
.hp-phone--step11 .hp-phone__btn--pulse11::before,
.hp-phone--step11 .hp-phone__btn--pulse11::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 2px solid #f5a623;
    box-shadow: 0 0 16px rgba(245, 166, 35, 0.75),
                inset 0 0 14px rgba(245, 166, 35, 0.3);
    pointer-events: none;
    opacity: 0;
    animation: hp-phone-step11-btn 8s ease-out infinite;
}
.hp-phone--step11 .hp-phone__btn--pulse11::after { animation-delay: 0.5s; }
@keyframes hp-phone-step11-btn {
    0%, 42%  { transform: scale(0.95); opacity: 0; }
    47%      { transform: scale(1); opacity: 1; }
    60%      { transform: scale(1.1); opacity: 0; }
    100%     { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   STEP 12 — My Profile page (scrollable)
   ═══════════════════════════════════════════════════════════════ */
.hp-phone__profile {
    position: absolute;
    left: 0;
    right: 0;
    top: 18cqw;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
}
.hp-phone__profile-scroll {
    padding: 5cqw 5cqw 5cqw;
    animation: hp-phone-step12-scroll 18s ease-in-out infinite;
}
/* 18s cycle, six stops:
   0-1s    hold top  (Personal Info + DOB pulse)
   1-2.5s  scroll to Tennis Information       (-22%)
   2.5-4s  hold
   4-5.5s  scroll to Playing Availability     (-42%)
   5.5-7s  hold
   7-8.5s  scroll to Medical Conditions       (-62%)
   8.5-10s hold
   10-11.5s scroll to Emergency Contact       (-78%)
   11.5-13s hold
   13-14.5s scroll to Save Changes button     (-90%)
   14.5-17s hold while Save Changes pulses
   17-18s   snap back to top */
@keyframes hp-phone-step12-scroll {
    0%   { transform: translateY(0); }
    6%   { transform: translateY(0); }
    14%  { transform: translateY(-22%); }   /* Tennis Information */
    22%  { transform: translateY(-22%); }
    31%  { transform: translateY(-42%); }   /* Playing Availability */
    39%  { transform: translateY(-42%); }
    47%  { transform: translateY(-62%); }   /* Medical Conditions */
    55%  { transform: translateY(-62%); }
    64%  { transform: translateY(-78%); }   /* Emergency Contact */
    72%  { transform: translateY(-78%); }
    80%  { transform: translateY(-90%); }   /* Save Changes button */
    94%  { transform: translateY(-90%); }   /* hold while Save Changes pulses */
    100% { transform: translateY(0); }       /* snap back */
}

/* Pulsing rings around Save Changes — fires when the scroll settles on it.
   18s cycle; scroll lands on the button at ~14.5s, so the rings animate
   from ~14.5s through 17s. */
.hp-phone__btn--save-pulse {
    position: relative;
}
.hp-phone__btn--save-pulse::before,
.hp-phone__btn--save-pulse::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 2px solid #f5a623;
    box-shadow:
        0 0 18px rgba(245, 166, 35, 0.75),
        inset 0 0 14px rgba(245, 166, 35, 0.3);
    pointer-events: none;
    opacity: 0;
    animation: hp-phone-step12-save-ring 18s ease-out infinite;
}
.hp-phone__btn--save-pulse::after { animation-delay: 0.6s; }
@keyframes hp-phone-step12-save-ring {
    0%, 80%  { transform: scale(0.92); opacity: 0; }
    84%      { transform: scale(1); opacity: 1; }
    90%      { transform: scale(1.12); opacity: 0; }
    94%      { transform: scale(1); opacity: 1; }
    100%     { transform: scale(1.12); opacity: 0; }
}
.hp-phone__profile-avatar {
    width: 17cqw;
    height: 17cqw;
    margin: 0 auto 4cqw;
    border-radius: 50%;
    background: rgba(245, 166, 35, 0.15);
    border: 2px solid #f5a623;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f5a623;
    font-weight: 800;
    font-size: clamp(14px, 5cqw, 22px);
}
.hp-phone__profile-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(245, 166, 35, 0.15);
    border-radius: 4cqw;
    padding: 4cqw;
    display: flex;
    flex-direction: column;
    gap: 3cqw;
    margin-bottom: 3cqw;
}
/* Preferred day pills */
.hp-phone__days {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5cqw;
    margin-top: 1cqw;
}
.hp-phone__day {
    flex: 1;
    min-width: 8cqw;
    padding: 2cqw 0;
    text-align: center;
    border: 1px solid rgba(245, 166, 35, 0.25);
    border-radius: 2cqw;
    color: rgba(180, 190, 210, 0.6);
    background: rgba(255, 255, 255, 0.02);
    font-size: clamp(8px, 2.6cqw, 11px);
    font-weight: 600;
}
.hp-phone__day--active {
    background: rgba(245, 166, 35, 0.12);
    border-color: #f5a623;
    color: #f5a623;
}

/* Save Changes button — styled like ml-profile-save-btn in the real app */
.hp-phone__btn--save {
    margin-top: 2cqw;
    background: #f5a623;
    color: #0a0d14;
    font-weight: 700;
    border: none;
    border-radius: 3cqw;
    padding: 3.5cqw 0;
    font-size: clamp(12px, 3.8cqw, 15px);
    cursor: pointer;
    width: 100%;
    box-shadow: 0 4px 14px rgba(245, 166, 35, 0.35);
}
.hp-phone__profile-section {
    font-size: clamp(9px, 3cqw, 12px);
    font-weight: 700;
    color: #f5a623;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-bottom: 2cqw;
    border-bottom: 1px solid rgba(245, 166, 35, 0.2);
}
.hp-phone__profile-section i { margin-right: 1.5cqw; }
.hp-phone__profile-row {
    display: flex;
    gap: 3cqw;
}
.hp-phone__profile-row .hp-phone__profile-field { flex: 1; }
.hp-phone__profile-field {
    display: flex;
    flex-direction: column;
    gap: 1cqw;
    position: relative;
}
.hp-phone__profile-field label {
    font-size: clamp(7px, 2.2cqw, 10px);
    color: rgba(180, 190, 210, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.hp-phone__profile-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(245, 166, 35, 0.2);
    border-radius: 2cqw;
    padding: 2.5cqw 3cqw;
    color: #fff;
    font-size: clamp(9px, 3cqw, 12px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hp-phone__profile-input--locked {
    color: rgba(180, 190, 210, 0.55);
}
.hp-phone__profile-input--locked i {
    font-size: 0.9em;
    margin-right: 1cqw;
}
.hp-phone__profile-input--empty {
    color: rgba(180, 190, 210, 0.4);
    font-style: italic;
}
.hp-phone__profile-input--tall {
    min-height: 8cqw;
    white-space: normal;
    line-height: 1.4;
}
.hp-phone__profile-badge {
    display: inline-block;
    margin-left: 1cqw;
    padding: 0.3cqw 1.5cqw;
    background: rgba(125, 255, 166, 0.12);
    border: 1px solid rgba(125, 255, 166, 0.4);
    border-radius: 2cqw;
    color: #7dffa6;
    font-size: 0.85em;
}
/* Pulse ring around the first empty field */
.hp-phone--step12 .hp-phone__profile-field--pulse::before,
.hp-phone--step12 .hp-phone__profile-field--pulse::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 3cqw;
    border: 2px solid #f5a623;
    box-shadow: 0 0 18px rgba(245, 166, 35, 0.7),
                inset 0 0 14px rgba(245, 166, 35, 0.3);
    pointer-events: none;
    opacity: 0;
    animation: hp-phone-step5-ring 4s ease-out infinite;
}
.hp-phone--step12 .hp-phone__profile-field--pulse::after { animation-delay: 1s; }

/* ═══════════════════════════════════════════════════════════════
   EMAIL REPLICA — matches the password_reset template in server.js
   Dark card, orange accent, monospace password, Next Steps list
   ═══════════════════════════════════════════════════════════════ */
.hp-email {
    max-width: 400px;
    margin: 0 auto;
    background: #0f1117;
    border: 2px solid #f5a623;
    border-radius: 16px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.55;
    box-shadow: 0 8px 40px rgba(245, 166, 35, 0.2);
}
.hp-email__header {
    background: #f5a623;
    color: #0a0d14;
    padding: 22px 24px 18px;
    text-align: center;
}
.hp-email__header-title {
    font-size: 16px;
    font-weight: 900;
    line-height: 1.2;
}
.hp-email__header-from {
    font-size: 9px;
    margin-top: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(10, 13, 20, 0.55);
}
.hp-email__header-club {
    font-size: 15px;
    font-weight: 800;
    margin-top: 1px;
}
.hp-email__body {
    background: #1a1d27;
    padding: 28px 32px 24px;
}
.hp-email__body p {
    margin: 0 0 12px;
    color: #ffffff;
}
.hp-email__greeting {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 14px !important;
}
.hp-email__muted {
    font-size: 13px;
    color: #c0cde0 !important;
}
.hp-email__muted strong { color: #fff; }

/* Temp password box + pulse ring */
.hp-email__pwd-box {
    position: relative;
    background: #0f1117;
    border: 2px solid #f5a623;
    border-radius: 10px;
    padding: 16px 14px;
    margin: 16px 0;
    text-align: center;
}
.hp-email__pwd-label {
    font-size: 10px;
    color: #c0cde0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    font-weight: 700;
}
.hp-email__pwd-value {
    font-family: 'Courier New', Courier, monospace;
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.12em;
}

/* Pulse ring drawing attention to the password — expands out from the box */
.hp-email__pwd-ring {
    position: absolute;
    inset: -4px;
    border-radius: 14px;
    border: 3px solid #f5a623;
    box-shadow: 0 0 18px rgba(245, 166, 35, 0.6),
                inset 0 0 14px rgba(245, 166, 35, 0.25);
    pointer-events: none;
    opacity: 0;
    animation: hp-email-pulse 3.5s ease-out infinite;
}
@keyframes hp-email-pulse {
    0%   { transform: scale(0.92); opacity: 0; }
    15%  { transform: scale(1); opacity: 1; }
    55%  { transform: scale(1.08); opacity: 0; }
    100% { transform: scale(1.08); opacity: 0; }
}

/* Next Steps action box */
.hp-email__action {
    background: rgba(245, 166, 35, 0.08);
    border-left: 3px solid #f5a623;
    border-radius: 8px;
    padding: 14px 18px;
    margin: 20px 0 4px;
}
.hp-email__action-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.hp-email__action ul {
    margin: 0;
    padding-left: 18px;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.7;
}
.hp-email__action li {
    margin-bottom: 3px;
}

/* Footer */
.hp-email__footer {
    background: #1a1d27;
    padding: 18px 32px 24px;
    border-top: 1px solid rgba(245, 166, 35, 0.3);
    color: #c0cde0;
    font-size: 11px;
    line-height: 1.6;
}
.hp-email__footer strong { color: #ffffff; }
.hp-email__footer-small {
    margin-top: 4px;
    font-size: 10px;
    color: rgba(192, 205, 224, 0.7);
}

/* ═══════════════════════════════════════════════════════════════
   WHATSAPP MESSAGE REPLICA — step 11 caption
   Mimics an incoming WhatsApp dark-mode chat bubble with the
   Mzansi Court Q Verification sender name and the OTP code.
   ═══════════════════════════════════════════════════════════════ */
.hp-wa {
    max-width: 400px;
    margin: 0 auto 14px;
    background: #0b141a;   /* WhatsApp dark chat bg */
    border-radius: 10px;
    padding: 14px 16px 16px;
    font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.hp-wa__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.hp-wa__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #25d366;   /* WhatsApp green */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.hp-wa__name {
    font-size: 13px;
    font-weight: 600;
    color: #e9edef;
}
.hp-wa__bubble {
    position: relative;
    background: #202c33;   /* WhatsApp incoming bubble */
    border-radius: 8px 8px 8px 2px;
    padding: 10px 12px 8px;
    color: #e9edef;
    font-size: 13px;
    line-height: 1.5;
    max-width: 95%;
}
.hp-wa__text { margin: 0 0 4px; white-space: normal; }
.hp-wa__pin {
    color: #25d366;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.hp-wa__time {
    display: block;
    text-align: right;
    font-size: 10px;
    color: rgba(233, 237, 239, 0.55);
    margin-top: -4px;
}

/* ─── Footer ─── */
.hp-footer {
    max-width: 480px;
    margin: 30px auto 0;
    padding: 22px;
    text-align: center;
    border-top: 1px solid var(--hp-border);
    font-size: 0.82rem;
    color: var(--hp-text-dim);
}
.hp-footer p { margin: 0 0 8px; }
.hp-footer a { color: var(--hp-accent); text-decoration: none; }
.hp-footer a:hover { text-decoration: underline; }
.hp-footer-brand {
    margin-top: 14px;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    color: var(--hp-text-dim);
}

/* ─── Tablet+ ─── */
@media (min-width: 700px) {
    .hp-hero { padding-top: 52px; }
    .hp-hero-title { font-size: 1.8rem; }
    .hp-hero-text  { font-size: 1rem; }
    .hp-step       { padding: 26px 24px 28px; }
    .hp-step-title { font-size: 1.2rem; }
    .hp-step-text  { font-size: 0.95rem; }
}

/* ─── iOS install-step mockups + new step 10/11 additions ─────
   Operator 2026-07-12 — no iPhone screenshots available, so the
   Safari share-sheet + home-screen visuals are all inline CSS
   replicas built from the .hp-ios-* primitives below. Same
   visual grammar as the existing .hp-phone-* mocks. */

.hp-ios {
    position: relative;
    margin: 18px auto 0;
    max-width: 300px;
    background: linear-gradient(180deg, #12141a 0%, #181c25 100%);
    border-radius: 22px;
    padding: 10px 10px 18px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45),
                inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.hp-ios__addressbar {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    background: rgba(60, 65, 75, 0.6);
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 6px 0 10px;
}
.hp-ios__lock { font-size: 0.75rem; }
.hp-ios__url { font-weight: 500; letter-spacing: 0.01em; }
.hp-ios__viewport {
    background: #ffffff;
    color: #0a0d14;
    border-radius: 8px;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
}
.hp-ios__club-mark { text-align: center; }
.hp-ios__club-ring {
    width: 68px; height: 68px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hp-accent) 0%, #d68610 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(245, 166, 35, 0.35);
}
.hp-ios__club-ring i { font-size: 2.1rem; color: #ffffff; }
.hp-ios__club-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0a0d14;
}
.hp-ios__club-sub {
    margin-top: 4px;
    font-size: 0.85rem;
    color: #4a5364;
}
.hp-ios__tabbar {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: rgba(30, 34, 44, 0.9);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 1.15rem;
}
.hp-ios__share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--hp-accent);
    box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.4);
}
.hp-ios__pulse {
    top: auto; bottom: 22px; left: 50%;
    transform: translateX(-50%);
    --hp-pulse-size: 46px;
}
.hp-ios__pulse--row {
    top: 50%; left: 92%;
    transform: translate(-50%, -50%);
    --hp-pulse-size: 24px;
}
.hp-ios__pulse--add {
    top: 50%; right: 8px; left: auto;
    transform: translateY(-50%);
    --hp-pulse-size: 44px;
}
.hp-ios__pulse--home {
    top: 20px; left: 50%;
    transform: translateX(-50%);
    --hp-pulse-size: 60px;
}

/* Share sheet — full-height panel that reads like the real iOS UI. */
.hp-ios__sheet {
    background: rgba(28, 32, 42, 0.98);
    border-radius: 14px;
    padding: 6px 0 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.hp-ios__sheet-grabber {
    width: 40px; height: 4px;
    margin: 6px auto 12px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
}
.hp-ios__sheet-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    margin: 0 12px 12px;
}
.hp-ios__sheet-preview-icon {
    width: 38px; height: 38px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--hp-accent) 0%, #d68610 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.hp-ios__sheet-preview-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}
.hp-ios__sheet-preview-sub {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 2px;
}
.hp-ios__sheet-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.86rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.hp-ios__sheet-row:last-child { border-bottom: none; }
.hp-ios__sheet-row i {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.72);
    width: 22px; text-align: center;
}
.hp-ios__sheet-row--highlight {
    background: rgba(245, 166, 35, 0.10);
    color: #ffffff;
}
.hp-ios__sheet-row--highlight i {
    color: var(--hp-accent);
}

/* Confirm-add screen — modal-style panel with Cancel/Add header. */
.hp-ios__confirm {
    background: rgba(24, 28, 36, 0.98);
    border-radius: 14px;
    padding: 0 0 14px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.hp-ios__confirm-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
}
.hp-ios__confirm-title {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.hp-ios__confirm-cancel,
.hp-ios__confirm-add {
    background: none;
    border: 0;
    padding: 4px 8px;
    color: var(--hp-accent);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}
.hp-ios__confirm-cancel { color: rgba(255, 255, 255, 0.55); font-weight: 500; }
.hp-ios__confirm-body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px 6px;
}
.hp-ios__confirm-icon {
    width: 54px; height: 54px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--hp-accent) 0%, #d68610 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.6rem;
    flex-shrink: 0;
}
.hp-ios__confirm-name {
    font-size: 0.98rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.hp-ios__confirm-url {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
    word-break: break-all;
}
.hp-ios__confirm-hint {
    padding: 10px 18px 4px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.4;
}

/* Home-screen grid — 4 columns × 2 rows of app tiles, with the
   target app highlighted with a pulse. */
.hp-ios--home {
    background: linear-gradient(160deg, #1b3a6e 0%, #0f1f38 100%);
    padding-top: 30px;
}
.hp-ios__home-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px 12px;
    padding: 6px 6px 20px;
    position: relative;
}
.hp-ios__home-app {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    line-height: 1.15;
}
.hp-ios__home-app i {
    width: 42px; height: 42px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.35rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
.hp-ios__home-app--target i {
    background: linear-gradient(135deg, var(--hp-accent) 0%, #d68610 100%);
    box-shadow: 0 4px 16px rgba(245, 166, 35, 0.5);
}
.hp-ios__home-app--target span { font-weight: 600; color: #ffe2b1; }
.hp-ios__homebar {
    width: 60%;
    height: 4px;
    margin: 8px auto 0;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 4px;
}

/* Step 10 additions — verify-explainer + verify-hint replace the
   old phone-number input UI. */
.hp-phone__verify-explainer {
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.82rem;
    line-height: 1.4;
    margin-bottom: 12px;
}
.hp-phone__verify-hint {
    margin: 10px 4px 0;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    line-height: 1.4;
}

/* Outbound WA bubble — for the "verify" send in step 11. */
.hp-wa__bubble--out {
    align-self: flex-end;
    background: #054d40;
    color: #ffffff;
    border-radius: 12px 12px 4px 12px;
    margin-left: auto;
    margin-right: 8px;
    max-width: 80%;
}
.hp-wa__bubble--out .hp-wa__time {
    color: rgba(255, 255, 255, 0.6);
    text-align: right;
}
/* Wrap the WA bubbles inside a flex column so out-bubbles sit on
   the right + in-bubbles sit on the left, matching real WhatsApp. */
.hp-wa {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Muted step text variant (used at the bottom of step 11). */
.hp-step-text--muted {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.86rem;
    font-style: italic;
    margin-top: 14px;
}

/* Inline link for URLs mentioned in help copy — "visit
   eldoraigne.courtq.co.za" etc. Accent-tinted, underlined on
   hover, target="_blank" opens the club site in a new tab so
   the reader doesn't lose their place in the help walkthrough. */
.hp-link {
    color: var(--hp-accent);
    text-decoration: none;
    border-bottom: 1px dashed rgba(245, 166, 35, 0.4);
    padding-bottom: 1px;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.hp-link:hover,
.hp-link:focus {
    color: #ffb84a;
    border-bottom-color: var(--hp-accent);
    text-decoration: none;
}
.hp-link strong { color: inherit; }

/* Ace tip card — closes step 11 with the "save Ace as a contact"
   nudge + a line about Ace answering general club queries. Accent-
   left-border card echoes the disclaimer /   hp-email__action styling. */
.hp-ace-tip {
    margin: 18px 0 6px;
    padding: 14px 16px 12px;
    background: rgba(245, 166, 35, 0.06);
    border: 1px solid rgba(245, 166, 35, 0.28);
    border-left-width: 3px;
    border-radius: 10px;
}
.hp-ace-tip-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.hp-ace-tip-avatar {
    font-size: 1.15rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hp-accent) 0%, #d68610 100%);
}
.hp-ace-tip-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
}
.hp-ace-tip-text {
    margin: 6px 0 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
}
.hp-ace-tip-text:first-of-type { margin-top: 2px; }

/* ─── Per-club docs block — surfaces the club's published Documents
   section (Constitution, Court Rules, etc.) inside the disclaimer
   phone-mock so the member reading through onboarding sees a link
   to the actual policies alongside the consent copy. Server-side
   renders empty when the club has no documents section, so this
   block only shows up when it has real links to display.
   Operator 2026-07-12. */
.hp-phone__doc-block {
    margin-top: 10px;
    padding: 10px 12px 12px;
    background: rgba(245, 166, 35, 0.06);
    border: 1px solid rgba(245, 166, 35, 0.25);
    border-left-width: 3px;
    border-radius: 8px;
}
.hp-phone__doc-block-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 6px;
}
.hp-phone__doc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.hp-phone__doc-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--hp-accent);
    font-size: 0.78rem;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.hp-phone__doc-chip:hover,
.hp-phone__doc-chip:focus {
    background: rgba(245, 166, 35, 0.12);
    border-color: rgba(245, 166, 35, 0.40);
    text-decoration: none;
}
.hp-phone__doc-chip i {
    font-size: 0.9rem;
    line-height: 1;
    color: var(--hp-accent);
}