.utility-shell {
    padding-bottom: 100px;
}

.entry-flow {
    display: block;
}

/* Entry screens are the sign-in form and nothing else. A full-height editorial
   masthead used to sit ABOVE the form here, pushing the first input below the
   fold (257px down on a 1920x911 desktop for /device-login) and getting TALLER
   under 820px, where it collapsed to one column and the bullets stacked. That
   is the worst case for this page in particular, which people reach by scanning
   a QR with a phone. Don't reintroduce a hero in front of an input. */

.utility-form-copy {
    max-width: 58ch;
    margin: 22px 0 0;
    color: var(--text-soft);
    line-height: 1.72;
}

.entry-form {
    display: grid;
    width: min(100%, 720px);
    gap: 22px;
    margin: clamp(32px, 5vw, 56px) auto 0;
}

.utility-form-kicker,
.summary-eyebrow {
    margin: 0;
    color: var(--accent-link);
    font-family: var(--font-mono);
    font-size: var(--fs-mono-eyebrow);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* See the note in billing-checkout.css — same duplicate override, same fix.
   This page is reached by scanning a QR with a phone, so an oversized title
   pushed the pairing-code field further down the screen that matters most. */
.utility-form-title {
    margin: 0 0 6px;
    color: var(--text-strong);
    font-size: var(--portal-title);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.lookup-form,
.auth-form,
.otp-shell,
.otp-actions {
    display: grid;
    gap: 14px;
}

.stepper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-block: 1px solid var(--line-strong);
}

.stepper-step {
    padding: 15px 16px;
    border-right: 1px solid var(--line);
    color: var(--text-faint);
}

.stepper-step:last-child {
    border-right: 0;
}

.stepper-step[data-state='current'],
.stepper-step[data-state='done'] {
    color: var(--text-strong);
}

.stepper-step[data-state='current'] {
    box-shadow: inset 0 2px 0 var(--accent);
}

.stepper-bubble {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid currentColor;
    font-family: var(--font-mono);
    font-size: var(--portal-micro);
}

.stepper-label {
    display: block;
    margin-top: 7px;
    font-size: 0.7rem;
}

.summary-card,
.help-card,
.success-card {
    padding: 22px 0;
    border-block: 1px solid var(--line);
}

.summary-device {
    margin-top: 8px;
    color: var(--text-strong);
    font-size: 1.25rem;
    font-weight: 650;
}

.summary-code,
.code-chip {
    display: inline-block;
    margin-top: 12px;
    padding: 9px 12px;
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    color: var(--accent-link);
    font-family: var(--font-mono);
    font-size: 1.05rem;
    letter-spacing: 0.18em;
}

.code-input input {
    font-family: var(--font-mono);
    font-size: 1.35rem;
    letter-spacing: 0.26em;
    text-align: center;
    text-transform: uppercase;
}

@media (max-width: 620px) {
    .entry-form {
        margin-top: 28px;
    }

    .stepper {
        grid-template-columns: 1fr;
    }

    .stepper-step {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .stepper-step:last-child {
        border-bottom: 0;
    }
}