/* Sign-up — page styles.
   Extracted from signup.php (337 lines of inline \3c style>).
   This entry point does NOT load style.css, so it cannot use the --c-*
   or --z-* tokens; its values stay literal on purpose. It is standalone
   by design — a signed-out visitor should not download the whole app's
   stylesheet to read one page.
   Cache-busted with filemtime, which inline CSS could never be. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
        --blue:    #0f172a;
        --blue-d:  #000000;
        --blue-l:  #f1f5f9;
        --slate:   #334155;
        --slate-d: #0f172a;
        --muted:   #475569;
        --border:  #e2e8f0;
        --bg:      #f1f5f9;
        --green:   #157a58;
        --green-l: #f8fafc;
        --red:     #b3352a;
        --red-l:   #fef2f2;
    }

    html, body {
        height: 100%;
        font-family: 'Public Sans', -apple-system, sans-serif;
        background: var(--bg);
    }

    /* ── Layout ─────────────────────────────────── */
    .sw-wrap {
        display: flex;
        min-height: 100vh; min-height: 100dvh;
    }

    /* ── Left panel ─────────────────────────────── */
    .sw-left {
        width: 420px;
        flex-shrink: 0;
        background: var(--slate-d);
        display: flex;
        flex-direction: column;
        padding: 48px 44px;
        position: relative;
        overflow: hidden;
    }
    .sw-blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        pointer-events: none;
    }
    .sw-blob-1 { width:320px;height:320px;background:rgba(15, 23, 42,.35);top:-80px;left:-80px; }
    .sw-blob-2 { width:260px;height:260px;background:rgba(15, 23, 42,.25);bottom:40px;right:-60px; }
    .sw-blob-3 { width:180px;height:180px;background:rgba(100, 116, 139,.2);bottom:200px;left:40px; }
    .sw-dots {
        position:absolute;inset:0;
        background-image:rgba(255,255,255,.06) 1px;
        background-size:28px 28px;
        pointer-events:none;
    }
    .sw-brand {
        display:flex;align-items:center;gap:10px;position:relative;z-index:1;
    }

    /* The hero and the step list are one block, centred together between the
       brand and the footnote. `margin-top:auto` on the hero alone dropped it to
       the floor with a third of a screen of empty navy above it; auto on both
       sides centred the hero but left the steps stranded at the bottom. The auto
       pair below belongs to the group, not to either piece. */
    .sw-hero {
        position:relative;z-index:1;margin-top:auto;padding-bottom:8px;
    }
    .sw-steps-side {
        margin-bottom:auto;
    }
    .sw-hero-tag {
        display:inline-flex;align-items:center;gap:6px;
        background:rgba(15, 23, 42,.2);border:1px solid rgba(15, 23, 42,.4);
        color:#cbd5e1;font-size:11px;font-weight:600;letter-spacing:.6px;
        text-transform:uppercase;padding:4px 12px;border-radius:20px;margin-bottom:20px;
    }
    .sw-hero-title {
        font-size:30px;font-weight:800;color:#fff;line-height:1.2;
        letter-spacing:-.5px;margin-bottom:14px;
    }
    .sw-hero-title span { color:#FFFFFF; }
    .sw-hero-desc { font-size:14px;color:#475569;line-height:1.6;margin-bottom:32px; }

    .sw-steps-side {
        display:flex;flex-direction:column;gap:12px;position:relative;z-index:1;
    }
    .sw-step-side {
        display:flex;align-items:center;gap:12px;
        padding:10px 14px;border-radius:10px;
        transition:background .2s;
    }
    .sw-step-side.active { background:rgba(15, 23, 42,.15); }
    .sw-step-side-num {
        width:28px;height:28px;border-radius:50%;
        display:flex;align-items:center;justify-content:center;
        font-size:12px;font-weight:700;flex-shrink:0;
        border:2px solid rgba(255,255,255,.15);color:#475569;
        transition:all .2s;
    }
    .sw-step-side.active .sw-step-side-num {
        background:var(--blue);border-color:var(--blue);color:#fff;
    }
    .sw-step-side.done .sw-step-side-num {
        background:#157a58;border-color:#157a58;color:#fff;
    }
    .sw-step-side-label { font-size:13px;font-weight:600;color:#475569;transition:color .2s; }
    .sw-step-side.active .sw-step-side-label,
    .sw-step-side.done  .sw-step-side-label { color:#e2e8f0; }
    .sw-step-side-sub   { font-size:11px;color:#334155;margin-top:1px; }

    .sw-copy {
        position:relative;z-index:1;font-size:11px;color:#334155;margin-top:40px;
    }

    /* ── Right panel ─────────────────────────────── */
    .sw-right {
        flex:1;background:#fff;display:flex;align-items:center;
        justify-content:center;padding:40px 24px;
    }
    .sw-form-wrap { width:100%;max-width:480px; }

    /* Progress bar (top of form area)
       ---------------------------------------------------------------------
       This is the SMALL-SCREEN step indicator, and only that. The left panel
       carries a fuller version — numbered, labelled, with a sub-line and a tick
       once a step is done — and below 768px that panel collapses and takes the
       stepper with it (see the media query at the foot of this file).

       Showing both at once put the same three steps on one screen twice, in two
       different visual languages, which reads as two different progress states
       rather than one. So this appears only where the other cannot. */
    .sw-progress {
        display:none;align-items:center;margin-bottom:36px;
    }
    @media (max-width:767px) {
        .sw-progress { display:flex; }
    }
    .sw-prog-step {
        display:flex;flex-direction:column;align-items:center;gap:4px;
        flex:1;position:relative;
    }
    .sw-prog-step:not(:last-child)::after {
        content:'';position:absolute;top:14px;left:50%;
        width:100%;height:2px;background:var(--border);z-index:0;
    }
    .sw-prog-step.done::after,
    .sw-prog-step.active::after { background:var(--blue); }
    .sw-prog-circle {
        width:28px;height:28px;border-radius:50%;
        display:flex;align-items:center;justify-content:center;
        font-size:12px;font-weight:700;
        border:2px solid var(--border);color:#475569;
        background:#fff;z-index:1;position:relative;
        transition:all .2s;
    }
    .sw-prog-step.active .sw-prog-circle {
        background:var(--blue);border-color:var(--blue);color:#fff;
    }
    .sw-prog-step.done .sw-prog-circle {
        background:#157a58;border-color:#157a58;color:#fff;
    }
    .sw-prog-label {
        font-size:11px;font-weight:600;color:#475569;letter-spacing:.2px;
        transition:color .2s;
    }
    .sw-prog-step.active .sw-prog-label { color:var(--blue); }
    .sw-prog-step.done  .sw-prog-label { color:#157a58; }

    /* Form header */
    .sw-form-head { margin-bottom:28px; }
    .sw-form-title {
        font-size:24px;font-weight:800;color:var(--slate);
        letter-spacing:-.4px;margin-bottom:6px;
    }
    .sw-form-sub { font-size:14px;color:var(--muted); }

    /* Errors */
    .sw-errors {
        background:var(--red-l);border:1px solid #fecaca;
        border-radius:8px;padding:12px 14px;margin-bottom:20px;
    }
    .sw-errors p {
        display:flex;align-items:flex-start;gap:8px;
        font-size:13px;font-weight:500;color:#991b1b;
        line-height:1.4;
    }
    .sw-errors p + p { margin-top:6px; }

    /* Fields */
    .sw-field { margin-bottom:18px; }
    .sw-field-row { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px; }
    .sw-label {
        display:block;font-size:12px;font-weight:600;
        color:var(--slate);margin-bottom:6px;letter-spacing:.2px;
    }
    .sw-input-wrap { position:relative; }
    .sw-input-icon {
        position:absolute;left:13px;top:50%;transform:translateY(-50%);
        color:#475569;font-size:15px;pointer-events:none;
    }
    .sw-input {
        width:100%;padding:10px 12px 10px 38px;font-size:14px;
        font-family:inherit;color:var(--slate);background:#fff;
        border:1px solid var(--border);border-radius:8px;outline:none;
        transition:border-color .15s,box-shadow .15s;
    }
    .sw-input:focus {
        border-color:var(--blue);
        box-shadow:0 0 0 3px rgba(15, 23, 42,.1);
    }
    .sw-input::placeholder { color:#cbd5e1; }
    .sw-input.is-valid  { border-color:var(--green); }

    .sw-select {
        width:100%;padding:10px 12px 10px 38px;font-size:14px;
        font-family:inherit;color:var(--slate);background:#fff;
        border:1px solid var(--border);border-radius:8px;outline:none;
        appearance:none;cursor:pointer;
        transition:border-color .15s,box-shadow .15s;
    }
    .sw-select:focus {
        border-color:var(--blue);
        box-shadow:0 0 0 3px rgba(15, 23, 42,.1);
    }
    .sw-select-arrow {
        position:absolute;right:12px;top:50%;transform:translateY(-50%);
        color:#475569;font-size:13px;pointer-events:none;
    }

    /* Slug preview */
    .sw-slug-preview {
        font-size:12px;color:var(--muted);margin-top:6px;
        display:flex;align-items:center;gap:6px;
    }
    .sw-slug-preview .slug-val { font-weight:700;color:var(--slate); }
    .sw-slug-badge {
        display:inline-flex;align-items:center;gap:4px;
        font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;
        transition:all .2s;
    }
    .sw-slug-badge.checking { background:#fef9c3;color:#854d0e; }
    .sw-slug-badge.available { background:var(--green-l);color:var(--green); }
    .sw-slug-badge.taken     { background:var(--red-l);color:var(--red); }

    /* Password toggle */
    .sw-pw-toggle {
        position:absolute;right:12px;top:50%;transform:translateY(-50%);
        background:none;border:none;color:#475569;cursor:pointer;
        font-size:16px;padding:0;line-height:1;
    }
    .sw-pw-toggle:hover { color:var(--muted); }
    .sw-input.has-toggle { padding-right:40px; }

    /* Submit */
    .sw-submit {
        width:100%;padding:11px;background:var(--blue);color:#fff;
        font-family:inherit;font-size:14px;font-weight:600;border:none;
        border-radius:8px;cursor:pointer;transition:background .15s;
        display:flex;align-items:center;justify-content:center;gap:8px;
        margin-top:8px;
    }
    .sw-submit:hover { background:var(--blue-d); }
    .sw-submit:disabled { opacity:.65;cursor:not-allowed; }

    /* Back link */
    .sw-back {
        display:inline-flex;align-items:center;gap:6px;
        font-size:13px;font-weight:500;color:var(--muted);
        text-decoration:none;margin-bottom:24px;
        transition:color .15s;
    }
    .sw-back:hover { color:var(--slate); }

    /* Review card */
    .sw-review-card {
        background:var(--bg);border:1px solid var(--border);
        border-radius:12px;padding:20px;margin-bottom:20px;
    }
    .sw-review-row {
        display:flex;align-items:flex-start;gap:10px;
        padding:8px 0;border-bottom:1px solid var(--border);
    }
    .sw-review-row:last-child { border-bottom:none;padding-bottom:0; }
    .sw-review-icon {
        width:32px;height:32px;background:var(--blue-l);border-radius:8px;
        display:flex;align-items:center;justify-content:center;
        color:var(--blue);font-size:14px;flex-shrink:0;
    }
    .sw-review-label { font-size:11px;font-weight:600;color:var(--muted);margin-bottom:2px; }
    .sw-review-val   { font-size:14px;font-weight:600;color:var(--slate); }

    .sw-trial-banner {
        background:#f8fafc;
        border:1px solid #e2e8f0;border-radius:10px;
        padding:14px 16px;margin-bottom:20px;
        display:flex;align-items:flex-start;gap:12px;
    }
    .sw-trial-icon {
        width:36px;height:36px;background:var(--blue);border-radius:8px;
        display:flex;align-items:center;justify-content:center;
        color:#fff;font-size:16px;flex-shrink:0;
    }
    .sw-trial-title  { font-size:13px;font-weight:700;color:var(--slate);margin-bottom:2px; }
    .sw-trial-desc   { font-size:12px;color:var(--muted);line-height:1.4; }

    /* Footer sign-in link */
    .sw-signin {
        text-align:center;margin-top:28px;padding-top:20px;
        border-top:1px solid var(--border);
    }
    .sw-signin p { font-size:13px;color:var(--muted);margin-bottom:10px; }
    .sw-signin a {
        display:inline-flex;align-items:center;gap:8px;
        padding:9px 22px;background:var(--bg);border:1px solid var(--border);
        border-radius:8px;color:var(--slate);font-size:13px;font-weight:600;
        text-decoration:none;transition:all .15s;
    }
    .sw-signin a:hover {
        border-color:var(--blue);color:var(--blue);background:var(--blue-l);
    }

    /* Responsive */
    @media (max-width:767px) {
        .sw-wrap { flex-direction:column; }
        .sw-left {
            width:100%;
            padding: calc(20px + env(safe-area-inset-top, 0px)) 24px 40px;
            flex-direction:row;align-items:center;justify-content:space-between;gap:16px;
        }
        .sw-hero,.sw-copy,.sw-steps-side { display:none; }
        .sw-blob-1 { width:200px;height:200px;top:-60px;left:-60px; }
        .sw-blob-2 { width:160px;height:160px;bottom:-40px;right:-40px; }
        .sw-blob-3 { display:none; }
        /* White form "sheet" with rounded top rising over the dark hero. */
        .sw-right {
            background:#fff;align-items:flex-start;
            padding: 30px 20px calc(40px + env(safe-area-inset-bottom, 0px));
            border-radius: 26px 26px 0 0;
            margin-top: -22px;
            position: relative;
            z-index: 1;
            box-shadow: 0 -10px 30px rgba(15,23,42,.12);
        }
        .sw-form-wrap { max-width:100%; }
        .sw-field-row { grid-template-columns:1fr; }
    }
    @media (max-width:399px) {
        .sw-right { padding:22px 16px 36px; }
        .sw-form-title { font-size:20px; }
    }