/* ============================================================================
   EFA www — signup page (application form + success state). The design has
   no signup artboard; this sheet applies its vocabulary (cyan hairlines,
   wheat pill, light cyan panels) to the existing form.
   ========================================================================== */

.signup-section { padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 8vw, 100px); }
.signup-section .section-head { margin-bottom: clamp(28px, 4vw, 52px); }
.signup-section .section-title { font-size: var(--fs-h1); }

.signup-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
    max-width: 1180px;
    margin: 0 auto;
}

/* ── Form panel ──────────────────────────────────────────────────────────── */

.signup-form-panel {
    background: var(--white);
    border: 3px solid var(--cyan);
    border-radius: 28px;
    box-shadow: calc(6 * var(--u)) calc(6 * var(--u)) 0 calc(5 * var(--u)) var(--cyan);
    padding: clamp(24px, 3.4vw, 44px);
    margin-right: calc(11 * var(--u));
}
.form-required-note { margin: 0 0 1.4em; font-size: var(--fs-small); font-weight: 700; color: var(--ink-black); } /* one line replaces per-field 必須 badges */
.signup-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1em;
}
.field-terms { margin-top: 1.6em; }
.terms-check {
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: var(--fs-small);
    font-weight: 700;
    cursor: pointer;
}
.terms-check > span { line-height: 22px; transform: translateY(-1px); } /* Plex JP glyphs sit low in their box */
.terms-check input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--cyan);
    flex: none;
}

/* Honeypot: parked far off-canvas; never display:none so naive bots keep
   filling it, never focusable for real users. */
.signup-hp-wrap {
    position: absolute;
    left: -8000px;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Proof-of-work widget ────────────────────────────────────────────────── */

.pow-box {
    position: relative;
    background: var(--cyan-tint);
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 0.9em 1.1em;
    margin: 1.6em 0;
    transition: border-color 200ms ease-out, background 200ms ease-out;
}
.pow-box.pow-done { background: var(--ok-bg); border-color: var(--gain); }
.pow-box.pow-failed { background: var(--warn-bg); border-color: var(--loss); }
.pow-title { font-size: var(--fs-small); font-weight: 700; margin: 0 0 0.5em; }
.pow-bar {
    height: 8px;
    background: var(--white);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.5em;
}
.pow-bar-fill {
    width: 100%;
    height: 100%;
    background: var(--cyan);
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 200ms ease-out;
}
.pow-box.pow-done .pow-bar-fill { background: var(--gain); }
.pow-status { font-size: var(--fs-tiny); margin: 0; font-weight: 400; }
.pow-box.pow-done .pow-status { color: var(--ok-ink); }
.pow-box.pow-failed .pow-status { color: var(--warn-ink); }

.signup-submit { margin: 1.6em 0 0; }

/* ── Benefits rail ───────────────────────────────────────────────────────── */

.signup-rail { display: grid; gap: 1.4em; }
.signup-rail-panel {
    background: var(--cyan-tint);
    border-radius: 20px;
    padding: clamp(20px, 2.6vw, 30px);
}
.signup-rail-panel h2 { font-size: var(--fs-body); font-weight: 700; margin-bottom: 0.7em; }
.slash-list-sm > li { padding-left: 56px; margin-bottom: 0.8em; font-size: var(--fs-small); font-weight: 400; }
.slash-list-sm > li::before { width: 40px; height: 16.7px; top: 0.4em; clip-path: polygon(16.7px 0, 100% 0, calc(100% - 16.7px) 100%, 0 100%); }

.signup-rail-steps { position: relative; background: var(--white); border: 2px solid transparent; }
.signup-rail-steps .dash-frame rect, .pow-box .dash-frame rect { rx: 12px; }
.rail-steps { list-style: none; margin: 0; padding: 0; counter-reset: rail; }
.rail-steps li {
    counter-increment: rail;
    position: relative;
    padding: 0 0 1.1em 44px;
    font-size: var(--fs-small);
}
.rail-steps li:last-child { padding-bottom: 0; }
.rail-steps li::before {
    content: counter(rail);
    position: absolute;
    left: 0;
    top: -0.1em;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--cyan);
    color: var(--white);
    font-weight: 700;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rail-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 13px;
    top: 30px;
    bottom: 4px;
    width: 2px;
    background: var(--cyan-soft);
}
.signup-login-hint { font-size: var(--fs-small); margin: 0; text-align: center; }

/* ── Success state ───────────────────────────────────────────────────────── */

.signup-done {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    background: var(--white);
    border: 3px solid var(--cyan);
    border-radius: 28px;
    box-shadow: calc(6 * var(--u)) calc(6 * var(--u)) 0 calc(5 * var(--u)) var(--cyan);
    padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px);
}
.signup-done-mark { width: 104px; height: 104px; margin-bottom: 1em; }
.signup-done-title { font-size: var(--fs-h2); margin-bottom: 0.3em; }
.signup-done-lead { max-width: 34em; margin: 0 auto 1.4em; }
.signup-done-ref {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--cyan-tint);
    border-radius: 999px;
    padding: 0.4em 1.4em;
    font-size: var(--fs-small);
    font-weight: 700;
    margin-bottom: 1.6em;
}
.signup-done-ref code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.125rem;
    letter-spacing: 0.12em;
    color: var(--teal);
}
.signup-done-next {
    text-align: left;
    background: var(--cyan-tint);
    border-radius: 16px;
    padding: 1.2em 1.4em;
    margin-bottom: 1.6em;
}
.signup-done-next h2 { font-size: var(--fs-body); margin-bottom: 0.4em; }
.signup-done-next ol { margin: 0; padding-left: 1.4em; }
.signup-done-next li { margin-bottom: 0.3em; font-size: var(--fs-small); }
.signup-done-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1em; margin: 0; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .signup-grid { grid-template-columns: 1fr; }
    .signup-section .wrap { padding: 0 5%; }
    .signup-form-row { grid-template-columns: 1fr; }
    .signup-form-panel { margin-right: calc(11 * var(--u)); }
}