/*
 * Team sign-up (/team-signup/) — step 1 of the public B2B order flow.
 * Modeled on the soofos.nl zakelijk checkout entry, rebuilt with the
 * Calm-Workspace tokens (navy rail instead of the .nl legacy purple).
 *
 * Layout: focused shell (logo header, no marketing chrome) — form column
 * left, navy benefits rail right, testimonial below the form.
 * Responsive at 390 / 768 / 1440. Tokens only; visible focus; 44px targets.
 */

body.soofos-team-signup {
    margin: 0;
    background: var(--page);
    color: var(--body);
    font-family: var(--font);
}

.sf-tsu {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Header ──────────────────────────────────────────────────────────── */

.sf-tsu__header {
    display: flex;
    justify-content: center;
    padding: var(--soofos-space-lg) var(--soofos-space-xl);
    background: var(--white);
    border-bottom: thin solid var(--card-border);
}

.sf-tsu__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--soofos-space-sm);
    text-decoration: none;
}

.sf-tsu__brand:focus-visible {
    outline: var(--soofos-space-2xs) solid var(--deep-blue);
    outline-offset: var(--soofos-space-2xs);
    border-radius: var(--r-btn);
}

.sf-tsu__brandmark {
    display: block;
    height: 34px;
    width: auto;
}

.sf-tsu__brand-suffix {
    color: var(--deep-blue);
    font-size: var(--soofos-player-text-lg);
    font-weight: var(--soofos-font-weight-extrabold);
}

/* ── Main grid ───────────────────────────────────────────────────────── */

.sf-tsu__main {
    flex: 1;
    width: 100%;
    max-width: calc(var(--soofos-space-3xl) * 18);
    margin-inline: auto;
    padding: var(--soofos-space-2xl) var(--soofos-space-xl) var(--soofos-space-3xl);
}

.sf-tsu__grid {
    display: grid;
    gap: var(--soofos-space-2xl);
    align-items: start;
}

.sf-tsu__col {
    min-width: 0;
}

/* ── Step + heading ──────────────────────────────────────────────────── */

.sf-tsu__step {
    margin: 0;
    color: var(--deep-blue);
    font-size: var(--soofos-player-text-sm);
    font-weight: var(--soofos-font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sf-tsu__step strong {
    font-weight: var(--soofos-font-weight-extrabold);
}

.sf-tsu__step-hint {
    color: var(--muted-2);
    text-transform: none;
    letter-spacing: 0;
}

.sf-tsu__title {
    margin: var(--soofos-space-md) 0 0;
    color: var(--ink);
    font-size: var(--soofos-space-xl);
    font-weight: var(--soofos-font-weight-black);
    line-height: 1.15;
    max-width: calc(var(--soofos-space-3xl) * 10);
}

.sf-tsu__lead {
    margin: var(--soofos-space-md) 0 0;
    color: var(--muted);
    font-size: var(--soofos-player-text-lg);
    line-height: 1.65;
    max-width: calc(var(--soofos-space-3xl) * 11);
}

/* ── Alert ───────────────────────────────────────────────────────────── */

.sf-tsu__alert {
    display: flex;
    align-items: flex-start;
    gap: var(--soofos-space-sm);
    margin: var(--soofos-space-lg) 0 0;
    padding: var(--soofos-space-md) var(--soofos-space-lg);
    background: var(--red-fill, var(--blue-fill));
    border: thin solid var(--red);
    border-radius: var(--r-card);
    color: var(--ink);
}

.sf-tsu__alert .sf-icon {
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--red);
    margin-top: var(--soofos-space-2xs);
}

.sf-tsu__alert p {
    margin: 0;
    font-size: var(--soofos-player-text-md);
    line-height: 1.5;
}

.sf-tsu__alert a {
    color: var(--deep-blue);
    font-weight: var(--soofos-font-weight-extrabold);
}

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

.sf-tsu__form {
    margin: var(--soofos-space-xl) 0 0;
    padding: var(--soofos-space-2xl);
    background: var(--white);
    border: thin solid var(--card-border);
    border-radius: var(--r-card-lg);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-lg);
}

.sf-tsu__label {
    display: block;
    margin: 0 0 var(--soofos-space-2xs);
    color: var(--ink);
    font-size: var(--soofos-player-text-md);
    font-weight: var(--soofos-font-weight-extrabold);
}

.sf-tsu__plans {
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: var(--soofos-space-sm);
}

.sf-tsu__plan {
    display: flex;
    align-items: flex-start;
    gap: var(--soofos-space-md);
    padding: var(--soofos-space-md) var(--soofos-space-lg);
    background: var(--white);
    border: thin solid var(--card-border);
    border-radius: var(--r-card);
    cursor: pointer;
}

.sf-tsu__plan:hover {
    border-color: var(--blue);
}

.sf-tsu__plan:has(.sf-tsu__plan-input:checked) {
    background: var(--blue-tint);
    border-color: var(--blue);
}

.sf-tsu__plan:has(.sf-tsu__plan-input:focus-visible) {
    outline: var(--soofos-space-2xs) solid var(--deep-blue);
    outline-offset: var(--soofos-space-2xs);
}

.sf-tsu__plan-input {
    width: 20px;
    height: 20px;
    margin: var(--soofos-space-2xs) 0 0;
    accent-color: var(--deep-blue);
    flex: none;
}

.sf-tsu__plan-body {
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-2xs);
    min-width: 0;
}

.sf-tsu__plan-name {
    color: var(--ink);
    font-size: var(--soofos-player-text-lg);
    font-weight: var(--soofos-font-weight-extrabold);
}

.sf-tsu__plan-note {
    color: var(--muted);
    font-size: var(--soofos-player-text-md);
    line-height: 1.5;
}

.sf-tsu__row {
    display: grid;
    gap: var(--soofos-space-lg);
}

.sf-tsu__field {
    min-width: 0;
}

.sf-tsu__input {
    width: 100%;
    min-height: var(--soofos-control-min-height);
    padding: var(--soofos-space-sm) var(--soofos-space-md);
    background: var(--white);
    color: var(--ink);
    border: thin solid var(--card-border);
    border-radius: var(--r-btn);
    font-family: var(--font);
    font-size: var(--soofos-player-text-lg);
    font-weight: var(--soofos-font-weight-semibold);
    box-sizing: border-box;
}

.sf-tsu__input::placeholder {
    color: var(--muted-2);
    font-weight: var(--soofos-font-weight-semibold);
}

.sf-tsu__input:focus-visible {
    outline: var(--soofos-space-2xs) solid var(--deep-blue);
    outline-offset: var(--soofos-space-2xs);
}

.sf-tsu__hint {
    margin: calc(var(--soofos-space-sm) * -1) 0 0;
    color: var(--muted-2);
    font-size: var(--soofos-player-text-sm);
    line-height: 1.5;
}

.sf-tsu__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--soofos-space-sm);
    width: 100%;
    min-height: var(--soofos-control-min-height);
    padding: var(--soofos-space-md) var(--soofos-space-xl);
    background: var(--red);
    color: var(--white);
    border: 0;
    border-radius: var(--r-btn);
    box-shadow: var(--soofos-shadow-red-cta);
    cursor: pointer;
    font-family: var(--font);
    font-size: var(--soofos-player-text-lg);
    font-weight: var(--soofos-font-weight-extrabold);
    line-height: 1.4;
}

.sf-tsu__submit:hover {
    background: var(--red-hover);
}

.sf-tsu__submit:focus-visible {
    outline: var(--soofos-space-2xs) solid var(--deep-blue);
    outline-offset: var(--soofos-space-2xs);
}

.sf-tsu__submit-icon {
    display: inline-flex;
    line-height: 0;
}

.sf-tsu__submit-icon .sf-icon {
    width: 18px;
    height: 18px;
}

.sf-tsu__aside {
    margin: 0;
    color: var(--muted);
    font-size: var(--soofos-player-text-md);
    text-align: center;
}

.sf-tsu__aside a {
    color: var(--deep-blue);
    font-weight: var(--soofos-font-weight-extrabold);
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: var(--soofos-space-xs);
}

.sf-tsu__aside a:focus-visible {
    outline: var(--soofos-space-2xs) solid var(--deep-blue);
    outline-offset: var(--soofos-space-2xs);
}

/* ── Testimonial ─────────────────────────────────────────────────────── */

.sf-tsu__quote {
    margin: var(--soofos-space-xl) 0 0;
    padding: var(--soofos-space-xl);
    background: var(--blue-tint);
    border: thin solid var(--blue-border);
    border-radius: var(--r-card-lg);
}

.sf-tsu__quote-stars {
    margin: 0;
    color: var(--star);
    font-size: var(--soofos-player-text-md);
    letter-spacing: 0.1em;
}

.sf-tsu__quote-text {
    margin: var(--soofos-space-sm) 0 0;
    color: var(--body);
    font-size: var(--soofos-player-text-lg);
    font-weight: var(--soofos-font-weight-semibold);
    line-height: 1.6;
}

.sf-tsu__quote-meta {
    margin: var(--soofos-space-md) 0 0;
    color: var(--ink);
    font-size: var(--soofos-player-text-sm);
    font-weight: var(--soofos-font-weight-extrabold);
}

/* ── Benefits rail (navy) ────────────────────────────────────────────── */

.sf-tsu__rail {
    background: linear-gradient(160deg, var(--ink-2), var(--ink));
    border-radius: var(--r-card-lg);
    padding: var(--soofos-space-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-2xl);
    text-align: center;
}

.sf-tsu__benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--soofos-control-min-height) + var(--soofos-space-md));
    height: calc(var(--soofos-control-min-height) + var(--soofos-space-md));
    background: var(--player-dark);
    color: var(--blue);
    border-radius: 50%;
}

.sf-tsu__benefit-icon .sf-icon {
    width: 24px;
    height: 24px;
}

.sf-tsu__benefit-title {
    margin: var(--soofos-space-md) 0 0;
    color: var(--white);
    font-size: var(--soofos-player-text-lg);
    font-weight: var(--soofos-font-weight-black);
    line-height: 1.3;
}

.sf-tsu__benefit-copy {
    margin: var(--soofos-space-sm) 0 0;
    color: var(--faint);
    font-size: var(--soofos-player-text-md);
    line-height: 1.6;
}

/* ── Footer ──────────────────────────────────────────────────────────── */

.sf-tsu__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--soofos-space-md) var(--soofos-space-xl);
    padding: var(--soofos-space-xl);
    color: var(--muted-2);
    font-size: var(--soofos-player-text-sm);
}

.sf-tsu__footer a {
    color: var(--muted);
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: var(--soofos-space-xs);
}

.sf-tsu__footer a:hover {
    color: var(--deep-blue);
}

.sf-tsu__footer a:focus-visible {
    outline: var(--soofos-space-2xs) solid var(--deep-blue);
    outline-offset: var(--soofos-space-2xs);
}

.sf-tsu__footer-copy {
    flex-basis: 100%;
    text-align: center;
}

/* ── Tablet / desktop ────────────────────────────────────────────────── */

@media (min-width: 48rem) {
    .sf-tsu__main {
        padding-inline: var(--soofos-space-2xl);
    }

    .sf-tsu__grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        gap: var(--soofos-space-3xl);
    }

    .sf-tsu__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sf-tsu__row .sf-tsu__field--seats {
        max-width: calc(var(--soofos-space-3xl) * 3);
    }

    .sf-tsu__rail {
        position: sticky;
        top: var(--soofos-space-2xl);
    }

    .sf-tsu__title {
        font-size: var(--soofos-space-2xl);
    }
}