/* =====================================================================
   LifeWheel — صفحة الدخول
   =====================================================================
   Self-contained on purpose: this page does not load app.css, so nothing
   in the application's cascade can reach in and change it, and nothing
   here can leak out into the app.

   The palette is fixed dark. Every other screen follows the viewer's
   theme; this one does not, because it is the product's first impression
   and it should look the same to everybody.
   ===================================================================== */

:root {
    --bg:          #080D1C;
    --bg-hero:     #0B0B24;
    --card:        #101729;
    --card-soft:   #131C33;

    --primary:     #6C63FF;
    --purple:      #8B5CF6;
    --accent:      #A78BFA;

    --white:       #F8FAFC;
    --muted:       #94A3B8;
    --faint:       #64748B;
    --line:        rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.14);

    --danger:      #F87171;
    --ok:          #34D399;
    /* Added for /password-help: «هيوصلك رد» is neither an error nor a
       success, and painting a wait in either colour misreads it. */
    --warn:        #FBBF24;

    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;

    /* One scale, used everywhere. Whitespace is the design here. */
    --s1: 6px;  --s2: 10px; --s3: 16px;
    --s4: 24px; --s5: 36px; --s6: 56px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--white);
    font-family: 'IBM Plex Sans Arabic', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* Focus is never removed — only replaced with something that belongs. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   The split
   ─────────────────────────────────────────────────────────────────────
   The document is RTL, so grid column 1 sits on the RIGHT. The hero takes
   column 1 (right, 62%) and the login card column 2 (left, 38%), which is
   the layout asked for read in the language it is written in.

   The login panel comes FIRST in the DOM regardless: it is the reason
   somebody opened the page, so it is what a screen reader and the tab key
   should reach first. Placement is presentation; order is meaning.
   ───────────────────────────────────────────────────────────────────── */
.lw-split {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
    min-height: 100dvh;
}

@media (min-width: 1024px) {
    .lw-split { grid-template-columns: 62% 38%; }
    .lw-hero  { grid-column: 1; grid-row: 1; }
    .lw-auth  { grid-column: 2; grid-row: 1; }
}

/* ═════════════════════════════════════════════════════════════════════
   LEFT — the login panel
   ═════════════════════════════════════════════════════════════════════ */
.lw-auth {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--s5) var(--s4);
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(108, 99, 255, 0.10), transparent 60%),
        var(--bg);
}

.lw-auth-inner {
    width: 100%;
    max-width: 400px;
}

/* ── Brand ─────────────────────────────────────────────────────────── */
/* 🌐 Brand on one side, language switch on the other. `.lw-brand` keeps its
   own margin so nothing else in this file has to change; the row only takes
   the vertical space over from it. Logical properties throughout, so the pair
   flips with `dir` rather than needing an RTL override. */
.lw-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    flex-wrap: wrap;
    margin-bottom: var(--s5);
}
.lw-brand-row .lw-brand { margin-bottom: 0; }

/* The language switch.
   ---------------------------------------------------------------------
   Deliberately quiet. The brand mark beside it is already a saturated
   gradient tile, and a second gradient 200px away made the top of the card
   read as two competing logos. This is chrome, not a call to action: a hair-
   line track, and the active language marked by a soft white fill rather
   than colour. The globe carries the meaning, so neither label has to.

   Both languages are always written in their OWN script — a switcher that
   translates the word «English» is unreadable to the one person who needs
   it. */
.lw-lang {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: 2px;
    padding: 3px;
    padding-inline-start: 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
}
.lw-lang-icon {
    display: block;
    width: 13px;
    height: 13px;
    margin-inline-end: 5px;
    color: var(--faint);
    flex: none;
}
.lw-lang a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--faint);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.lw-lang a:hover {
    color: var(--muted);
    background: rgba(255, 255, 255, 0.04);
}
.lw-lang a.is-on {
    color: var(--white);
    background: rgba(255, 255, 255, 0.10);
    border-color: var(--line-strong);
    font-weight: 600;
    cursor: default;
}
.lw-lang a.is-on:hover { background: rgba(255, 255, 255, 0.10); }

/* 320px: the row wraps and the switch starts the second line. Nothing
   shrinks, so neither label ever truncates. */
@media (max-width: 360px) {
    .lw-lang { padding-inline-start: 7px; }
    .lw-lang-icon { margin-inline-end: 4px; }
    .lw-lang a { padding: 0 9px; }
}

.lw-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    min-height: 44px;
    margin-bottom: var(--s5);
    text-decoration: none;
}
.lw-brand-mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    /* ♿ ink, not the raw accent — white sits on this fill. */
    background: linear-gradient(135deg, var(--primary-ink), var(--secondary-ink));
    box-shadow: 0 6px 20px rgba(108, 99, 255, 0.35);
}
.lw-brand-mark svg { width: 22px; height: 22px; }
.lw-brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.lw-brand-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.lw-brand-sub  { font-size: 11px; font-weight: 500; color: var(--faint); letter-spacing: 0.04em; }

/* ── Heading ───────────────────────────────────────────────────────── */
.lw-auth h1 {
    margin: 0 0 var(--s1);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.lw-auth-sub {
    margin: 0 0 var(--s4);
    color: var(--muted);
    font-size: 14px;
}

/* ── The card ──────────────────────────────────────────────────────── */
.lw-card {
    padding: var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--card);
    /* Depth from one soft shadow, not from a stack of blurs. */
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7);
}

/* ── Alerts (a blocked account lands here — it needs to say why) ────── */
.lw-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
    margin-bottom: var(--s3);
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card-soft);
    font-size: 13px;
    line-height: 1.6;
}
.lw-alert i { margin-top: 3px; }
.lw-alert.is-error   { border-color: rgba(248, 113, 113, 0.4); color: #FCA5A5; }
.lw-alert.is-success { border-color: rgba(52, 211, 153, 0.4);  color: #6EE7B7; }
.lw-alert.is-info    { border-color: rgba(167, 139, 250, 0.4); color: var(--accent); }
/* An invitation is good news, not a notice — it gets the warmer treatment so
   «فلان داعيك» reads as a welcome rather than as another system message. */
.lw-alert.is-invite {
    border-color: rgba(96, 165, 250, 0.42);
    background: rgba(96, 165, 250, 0.10);
    color: #BFDBFE;
}
.lw-alert.is-invite strong { color: #fff; }

/* ── Password strength (register) ──────────────────────────────────────
   A hint, never a gate. The server's rule is eight characters and this must
   not invent a stricter one the form will not enforce — so it says what would
   make the password stronger instead of refusing anything. */
.lw-pw { margin-top: 10px; }
.lw-pw-track {
    height: 4px;
    border-radius: 99px;
    background: var(--card-soft);
    overflow: hidden;
}
.lw-pw-track span {
    display: block;
    width: 8%;
    height: 100%;
    border-radius: 99px;
    transition: width .25s ease, background-color .25s ease;
}
.lw-pw-note { display: block; margin-top: 6px; font-size: 12px; line-height: 1.6; }
.is-weak   { background-color: #F87171; color: #FCA5A5; }
.is-fair   { background-color: #FBBF24; color: #FCD34D; }
.is-good   { background-color: #60A5FA; color: #93C5FD; }
.is-strong { background-color: #34D399; color: #6EE7B7; }
/* The note carries the colour as text, not as a filled bar behind it. */
.lw-pw-note.is-weak, .lw-pw-note.is-fair,
.lw-pw-note.is-good, .lw-pw-note.is-strong { background-color: transparent; }

/* ── Fields ────────────────────────────────────────────────────────── */
.lw-field { margin-bottom: var(--s3); }
.lw-field label {
    display: block;
    margin-bottom: var(--s1);
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
}

.lw-input {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.02);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.lw-input > i {
    position: absolute;
    inset-inline-start: 13px;
    color: var(--faint);
    font-size: 14px;
    pointer-events: none;
    transition: color .18s ease;
}
.lw-input input {
    width: 100%;
    padding: 13px 42px 13px 14px;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--white);
    font: inherit;
    font-size: 14px;
}
/* The icon sits at the start, so the padding that clears it must too. */
.lw-input input { padding-inline-start: 42px; padding-inline-end: 14px; }
.lw-input:has(.lw-eye) input { padding-inline-end: 44px; }

.lw-input input::placeholder { color: var(--faint); opacity: 1; }
.lw-input input:focus { outline: none; }

.lw-input:focus-within {
    border-color: var(--primary);
    background: rgba(108, 99, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15);
}
.lw-input:focus-within > i { color: var(--accent); }

.lw-input.is-bad { border-color: rgba(248, 113, 113, 0.55); }
.lw-input.is-bad:focus-within { box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15); }

/* Chrome paints its own background over autofilled inputs. */
.lw-input input:-webkit-autofill,
.lw-input input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--white);
    -webkit-box-shadow: 0 0 0 1000px var(--card-soft) inset;
    caret-color: var(--white);
}

/* The button READS as 34px, but it is 44 to the thumb. The visible pill stays
   small so it does not crowd the field; the hit area is the whole height of
   the input. A control that looks right and cannot be tapped does not work. */
.lw-eye {
    position: absolute;
    inset-inline-end: 2px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--faint);
    cursor: pointer;
    transition: color .18s ease, background .18s ease;
}
/* Hovering paints the inner pill, not the whole 44px box. */
.lw-eye:hover { color: var(--white); }
.lw-eye:hover i { background: rgba(255, 255, 255, 0.06); border-radius: 8px; padding: 7px; margin: -7px; }
.lw-eye i { transition: opacity .15s ease; }

.lw-err {
    display: block;
    margin-top: var(--s1);
    color: var(--danger);
    font-size: 12.5px;
    font-weight: 500;
}

/* A free-text box, for /password-help. Deliberately NOT wrapped in
   `.lw-input`: that box exists to hold an icon at the start edge, and an
   icon pinned to the start of a three-line textarea floats beside the first
   line looking like it fell off. Same border, same focus ring, no icon. */
.lw-field textarea {
    display: block;
    width: 100%;
    min-height: 88px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.02);
    color: var(--white);
    font: inherit;
    font-size: 14px;
    line-height: 1.7;
    /* Vertical only: a textarea a user can drag WIDER inside a fixed card is
       a textarea a user can drag off the edge of the card. */
    resize: vertical;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.lw-field textarea::placeholder { color: var(--faint); opacity: 1; }
.lw-field textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(108, 99, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15);
}

/* The sentence under a field that explains what the field is FOR — as
   opposed to `.lw-err`, which explains what went wrong with it. */
.lw-hint {
    display: block;
    margin-top: 6px;
    color: var(--faint);
    font-size: 12px;
    line-height: 1.6;
}
/* «(اختياري)» inside a label. Quieter than the label, and it has to be,
   or every optional field shouts louder than the required ones. */
.lw-optional { color: var(--faint); font-weight: 400; }

/* 🍯 The honeypot wrapper. `display:none` rather than an off-screen shift:
   some bots skip hidden inputs but almost none skip *rendered* ones, and
   the field is already removed from the accessibility tree by aria-hidden
   on this element, so there is nobody left who could reach it by accident. */
.lw-hp { display: none; }

/* ── Options row ───────────────────────────────────────────────────── */
.lw-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    margin-bottom: var(--s4);
    font-size: 13px;
}
.lw-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}
.lw-check input {
    appearance: none;
    /* 20px, not 16: this is a control a thumb has to hit, and the label
       around it only helps people who know the label is clickable. */
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin: 0;
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.lw-check input:checked {
    border-color: var(--primary);
    background: var(--primary-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.lw-check:hover input { border-color: var(--accent); }

/* 44, not 40. This is now the ONLY route back into an account somebody
   cannot get into — the e-mail reset is gone — so it is the last control on
   this page that should be a near-miss on a phone. The two neighbours in the
   row are already 40+ and the row is `align-items: center`, so nothing
   moves visually; the target just stops being short. */
.lw-forgot {
    display: inline-flex;
    align-items: center;
    /* Literal 44, not `var(--tap)`: this page is deliberately outside the
       app's cascade and does not have that token. */
    min-height: 44px;
    color: var(--accent);
    font-weight: 500;
    text-decoration: none;
}
.lw-forgot:hover { text-decoration: underline; }

/* A quiet box for a sentence that is context rather than instruction.
   Was `.lw-recover-body`, inside a <details> on the login page that said
   there was no automatic recovery. The disclosure is gone; the box turned
   out to be the reusable half, so it kept the styling and lost the name. */
.lw-note {
    margin-top: var(--s2);
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card-soft);
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.7;
}
.lw-note.is-warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
/* Inline links inside a paragraph still have to be tappable. */
.lw-note a {
    display: inline-block;
    padding-block: 7px;
    color: var(--accent);
    font-weight: 600;
}

/* ── Submit ────────────────────────────────────────────────────────── */
.lw-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    width: 100%;
    padding: 14px 20px;
    border: 0;
    border-radius: var(--r-sm);
/* ♿ ink, not the raw accent — white sits on this fill. */
    background: linear-gradient(135deg, var(--primary-ink), var(--secondary-ink));
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px -8px rgba(108, 99, 255, 0.6);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.lw-submit:hover {
    transform: translateY(-1px);
    filter: brightness(1.07);
    box-shadow: 0 14px 34px -10px rgba(108, 99, 255, 0.75);
}
.lw-submit:active { transform: translateY(0); }
.lw-submit .lw-arrow { transition: transform .18s ease; }
.lw-submit:hover .lw-arrow { transform: translateX(-3px); }

/* The confirmation page's «رجوع لتسجيل الدخول» is an <a>, not a <button>:
   it navigates. Same box, minus the things only a button needs. */
.lw-submit.is-link { text-decoration: none; margin-top: var(--s3); }

/* ── The request confirmation (/password-help) ─────────────────────── */

/* The ticket number. Big, copyable by eye, and framed as a reference
   rather than a secret — because it is one: it opens nothing. */
.lw-ref {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
    padding: 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--card-soft);
}
.lw-ref-k { color: var(--muted); font-size: 12.5px; }
.lw-ref-v {
    color: var(--white);
    font-size: 19px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    /* An LTR run inside an RTL line: without isolation the # jumps to the
       far side of the number. */
    direction: ltr;
    unicode-bidi: isolate;
}

/* What happens next, numbered. Three steps because the honest answer has
   three, and because a person who has just been told «هنبعتلك» wants to
   know what «بعدين» looks like before they close the tab. */
.lw-steps {
    list-style: none;
    margin: var(--s4) 0 0;
    padding: 0;
    display: grid;
    gap: var(--s3);
}
.lw-steps li {
    display: grid;
    /* The marker column is fixed; the text column takes what is left. `1fr`
       rather than `auto` so a long line wraps instead of widening the row. */
    grid-template-columns: 26px 1fr;
    gap: var(--s2);
    align-items: start;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.75;
}
.lw-steps strong { color: var(--white); font-weight: 600; }
.lw-step-n {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 22%, transparent);
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 700;
    /* Latin digits in an RTL list: isolate so «1» stays at the start. */
    direction: ltr;
    unicode-bidi: isolate;
}

/* ── Divider ───────────────────────────────────────────────────────── */
.lw-or {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin: var(--s4) 0;
    color: var(--faint);
    font-size: 12px;
}
.lw-or::before, .lw-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* ── Social ────────────────────────────────────────────────────────── */
/* One column, one provider. This was `repeat(3, 1fr)` when Apple and
   Microsoft sat next to Google as permanently-disabled buttons; they are
   gone, so the live control takes the whole width instead of a third of it
   and lines up with the submit button above it. */
.lw-social { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
.lw-social button,
.lw-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.02);
    color: var(--muted);
    font: inherit;
    /* 13.5px, not 12.5: the old size was what fit three labels across a
       phone card. With one control there is no width to fight for. */
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.lw-social button:not(:disabled):hover,
.lw-social a:hover {
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, 0.05);
    color: var(--white);
}
/* Not yet wired to anything, and saying so is the whole point: a login
   button that silently does nothing is worse than no button. */
.lw-social button:disabled { opacity: .45; cursor: not-allowed; }
/* The Google control is a link now that it goes somewhere. Same box, same
   colours — only the element changed, because a real navigation should be
   an anchor rather than a button that JavaScript redirects. */
.lw-social a { text-decoration: none; }
.lw-social svg { width: 18px; height: 18px; flex: 0 0 18px; }
.lw-social-note {
    margin: var(--s2) 0 0;
    color: var(--faint);
    font-size: 11.5px;
    text-align: center;
}

/* ── Register ──────────────────────────────────────────────────────── */
.lw-alt {
    margin: var(--s4) 0 0;
    color: var(--muted);
    font-size: 13.5px;
    text-align: center;
}
.lw-alt a {
    display: inline-block;
    padding-block: 8px;
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.lw-alt a:hover { text-decoration: underline; }

/* ═════════════════════════════════════════════════════════════════════
   RIGHT — the hero
   ═════════════════════════════════════════════════════════════════════ */
.lw-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--s6) var(--s5);
    background: var(--bg-hero);
    border-inline-start: 1px solid var(--line);
}

/* Layered lighting: a grid you can barely see, then two soft radial glows.
   Everything is a pseudo-element so the markup stays about the content. */
.lw-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(80% 60% at 50% 40%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(80% 60% at 50% 40%, #000 20%, transparent 75%);
    opacity: .5;
    pointer-events: none;
}
.lw-hero::after {
    content: '';
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(38% 38% at 22% 18%, rgba(139, 92, 246, 0.22), transparent 70%),
        radial-gradient(42% 42% at 82% 78%, rgba(108, 99, 255, 0.18), transparent 70%);
    pointer-events: none;
    animation: lw-drift 26s ease-in-out infinite alternate;
}
@keyframes lw-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(2%, -2%, 0) scale(1.06); }
}

.lw-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
}

/* ── Headline ──────────────────────────────────────────────────────── */
.lw-hero h2 {
    margin: 0 0 var(--s3);
    font-size: clamp(30px, 3.4vw, 46px);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -0.03em;
}
.lw-grad {
    background: linear-gradient(100deg, var(--purple), var(--accent) 60%, #C4B5FD);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Fallback for anything that cannot clip a gradient to text: without it
       the headline's second line renders invisible. */
    -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .lw-grad { color: var(--accent); -webkit-text-fill-color: var(--accent); }
}

.lw-hero-lead {
    margin: 0 0 var(--s5);
    max-width: 58ch;
    color: var(--muted);
    font-size: clamp(14.5px, 1.15vw, 16.5px);
    line-height: 1.85;
}

/* ── Wheel + quote ─────────────────────────────────────────────────── */
.lw-wheel-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s5);
    align-items: center;
    margin-bottom: var(--s5);
}
@media (min-width: 1280px) {
    .lw-wheel-row { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
}

.lw-wheel-wrap {
    position: relative;
    width: min(360px, 100%);
    margin-inline: auto;
    /* Wider than tall: the widest side label needs the room, and a square
       canvas would clip it at the left extreme. */
    aspect-ratio: 400 / 340;
}
.lw-wheel { width: 100%; height: 100%; display: block; overflow: visible; }

/* Each wedge grows out of the centre, one after another. */
.lw-seg {
    transform-origin: 200px 170px;
    animation: lw-grow .8s cubic-bezier(.2, .8, .3, 1) backwards;
}
@keyframes lw-grow {
    from { transform: scale(.35); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* A slow sweep, so the wheel reads as live data rather than a picture. */
.lw-sweep {
    transform-origin: 200px 170px;
    animation: lw-spin 22s linear infinite;
}
@keyframes lw-spin { to { transform: rotate(360deg); } }

.lw-hub-value { font-size: 22px; font-weight: 800; fill: var(--white); }
.lw-hub-label { font-size: 9px; font-weight: 500; fill: var(--faint); letter-spacing: .04em; }
.lw-seg-label { font-size: 10px; font-weight: 500; fill: var(--muted); }

/* ── Quote ─────────────────────────────────────────────────────────── */
.lw-quote { position: relative; padding-inline-start: var(--s4); }
.lw-quote::before {
    content: '';
    position: absolute;
    inset-block: 4px;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--purple), transparent);
}
.lw-quote blockquote {
    margin: 0 0 var(--s3);
    font-size: clamp(19px, 1.9vw, 26px);
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -0.02em;
}
.lw-quote-tie {
    margin: 0;
    max-width: 46ch;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.8;
}

/* ── Features ──────────────────────────────────────────────────────── */
.lw-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: var(--s2);
    margin-bottom: var(--s4);
}
@media (min-width: 1280px) {
    .lw-features { grid-template-columns: repeat(3, 1fr); }
}

.lw-feat {
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: rgba(16, 23, 41, 0.6);
    transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.lw-feat:hover {
    border-color: rgba(139, 92, 246, 0.35);
    background: rgba(19, 28, 51, 0.85);
    transform: translateY(-2px);
}
.lw-feat-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.lw-feat-ico { font-size: 15px; line-height: 1; }
.lw-feat h3 { margin: 0; font-size: 13.5px; font-weight: 600; }
.lw-feat-line { margin: 0 0 4px; color: var(--accent); font-size: 12.5px; font-weight: 500; }
.lw-feat p { margin: 0; color: var(--faint); font-size: 12px; line-height: 1.65; }

/* ── Closing statement ─────────────────────────────────────────────── */
.lw-statement {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    padding: 15px 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: linear-gradient(100deg, rgba(108, 99, 255, 0.10), rgba(139, 92, 246, 0.04));
}
.lw-statement-mark { color: var(--accent); font-size: 17px; line-height: 1.4; }
.lw-statement strong { display: block; font-size: 14px; font-weight: 600; }
.lw-statement span { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; }

/* ═════════════════════════════════════════════════════════════════════
   Small screens
   ═════════════════════════════════════════════════════════════════════
   Order is the spec's: login first, then the story. Somebody returning to
   sign in should never have to scroll past the pitch to reach the form.
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    .lw-auth { min-height: auto; padding: var(--s5) var(--s3) var(--s4); }
    .lw-hero {
        padding: var(--s5) var(--s3) var(--s6);
        border-inline-start: 0;
        border-top: 1px solid var(--line);
    }
    .lw-hero-inner { max-width: 560px; }
    .lw-wheel-row { gap: var(--s4); margin-bottom: var(--s4); }
    .lw-wheel-wrap { width: min(300px, 88%); }
}

@media (max-width: 480px) {
    .lw-auth { padding: var(--s4) var(--s3); }
    .lw-card { padding: var(--s3); border-radius: var(--r-md); }
    .lw-auth h1 { font-size: 22px; }
    /* The phone overrides that used to live here — one column, and labels
       pushed to the start edge — are gone. The row is already one column at
       every width now, and a single centred label under a centred submit
       button is the calmer reading. */
    .lw-hero h2 { font-size: 27px; }
    .lw-quote { padding-inline-start: var(--s3); }
}

/* Nothing here is load-bearing, so all of it goes when asked. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}