.flow-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% 15%, rgba(46, 210, 125, .13), transparent 24%),
        linear-gradient(145deg, #075b55, #03443f);
}
.flow-shell { min-height: 100vh; padding: 34px 22px 26px; display: flex; flex-direction: column; align-items: center; }
.flow-brand { align-self: flex-start; transform: scale(.72); transform-origin: left top; }
.flow-card {
    width: min(100%, 480px);
    margin: auto 0;
    padding: 40px 42px 33px;
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 16px;
    text-align: center;
    background: #fff;
    box-shadow: 0 35px 85px rgba(0, 34, 31, .3);
}
.flow-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 19px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #20b86a, #07864a);
    box-shadow: 0 0 0 9px #e8f9ef, 0 13px 25px rgba(14, 145, 78, .2);
    font-size: 25px;
    font-weight: 750;
}
.flow-card[data-state="invalid"] .flow-icon { background: linear-gradient(145deg, #df6666, #bd3838); box-shadow: 0 0 0 9px #fff0f0; }
.flow-eyebrow { margin: 0 0 8px !important; color: #138f53 !important; font-size: 10px !important; font-weight: 800; letter-spacing: .15em; }
.flow-card h1 { margin: 0 0 10px; font-size: 29px; letter-spacing: -.04em; }
.flow-card > p:not(.flow-eyebrow):not(.flow-help):not(.local-note) { max-width: 350px; margin: 0 auto 23px; color: #687773; font-size: 13px; line-height: 1.6; }
.email-pill { margin: 0 auto 13px; padding: 10px 14px; border: 1px solid #dce6e2; border-radius: 8px; color: #31443e; background: #f7faf9; font-size: 12px; font-weight: 650; }
.flow-help, .local-note { color: #81908b; font-size: 10px; }
.flow-help { margin: 0 0 22px; }
.local-note { margin: 10px 0 15px; }
.flow-primary {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    min-height: 53px;
    margin-top: 12px;
    padding: 0 20px;
    border: 0;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: #fff;
    background: linear-gradient(90deg, #075b55, #00645a);
    box-shadow: 0 10px 23px rgba(5, 88, 79, .18);
    font-size: 14px;
    font-weight: 700;
}
.flow-primary:hover { transform: translateY(-1px); text-decoration: none; }
.flow-secondary { width: 100%; min-height: 48px; margin-top: 12px; border: 1px solid #cfdbd7; border-radius: 7px; color: #31514a; background: #fff; font-size: 12px; font-weight: 650; }
.flow-secondary:hover { border-color: #91ada4; background: #f8fbfa; }
.text-link { display: block; margin-top: 22px; font-size: 11px; }
.flow-form { margin-top: 24px; text-align: left; }
.flow-form label { display: block; margin-bottom: 15px; }
.flow-form label > span { display: block; margin-bottom: 7px; color: #263832; font-size: 12px; font-weight: 650; }
.flow-form input { width: 100%; height: 52px; padding: 0 14px; border: 1px solid #ccd8d4; border-radius: 7px; outline: 0; color: #1a2925; background: #fff; }
.flow-form input:focus { border-color: #139258; box-shadow: 0 0 0 4px rgba(32,184,106,.1); }
.flow-form label.invalid input { border-color: #dc6666; background: #fffafa; }
.flow-form label small { display: block; min-height: 0; margin-top: 5px; color: #bd3838; font-size: 10px; }
.flow-result { margin-top: 25px; }
.flow-result strong { display: block; margin: 12px 0 7px; font-size: 18px; }
.flow-result p { margin: 0 0 18px; color: #6c7a76; font-size: 12px; line-height: 1.6; }
.mini-success { width: 45px; height: 45px; margin: auto; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #14a25a; box-shadow: 0 0 0 7px #e9f9ef; }
.flow-message { margin-top: 15px; padding: 10px 12px; border-radius: 7px; color: #8b2d2d; background: #fff0f0; font-size: 11px; }
.flow-message.success { color: #126d42; background: #eaf9f0; }
.flow-rules { margin: -5px 0 15px; display: flex; gap: 7px; }
.flow-rules span { flex: 1; padding: 7px 4px; border: 1px solid #dae3e0; border-radius: 5px; color: #8a9793; background: #fafcfb; text-align: center; font-size: 9px; }
.flow-rules span.valid { color: #0d8249; border-color: #bce2ca; background: #f0faf4; }
.flow-shell footer { margin-top: auto; padding-top: 24px; color: rgba(255,255,255,.58); font-size: 10px; }
@media (max-width: 560px) {
    .flow-shell { padding: 22px 15px; }
    .flow-brand { transform: scale(.6); }
    .flow-card { padding: 34px 22px 28px; }
    .flow-card h1 { font-size: 26px; }
    .flow-rules { flex-direction: column; }
}