/* Rx.ai login — Onward / landing arrow hero */

html,
body.rx-v2-login-onward {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: #ffffff;
    color: #161618;
    font-family: "Instrument Sans", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial,
        sans-serif;
    -webkit-font-smoothing: antialiased;
}

#rxLoginRoot {
    min-height: 100svh;
}

.rx-login-root {
    --rx-deep: #1a0c08;
    --rx-mid: #c45d3c;
    --rx-light: #f0c4b4;
    --rx-muted: #686c75;
    --rx-ink: #161618;
    --rx-nav-offset: 0px;
}

/* Nav — matches landing */
.rx-login-nav {
    position: fixed;
    top: var(--rx-nav-offset, 0px);
    left: 0;
    right: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 56px;
    padding: 0 clamp(16px, 4.6vw, 56px);
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(22, 22, 24, 0.09);
}

.rx-login-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: inherit;
    text-decoration: none;
    justify-self: start;
}

.rx-login-brand img {
    width: 22px;
    height: 22px;
    border-radius: 6px;
}

.rx-login-nav-center {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #000000;
    letter-spacing: -0.01em;
}

.rx-login-nav-dot {
    opacity: 0.45;
    user-select: none;
}

.rx-login-nav-back {
    justify-self: end;
    font-size: 14px;
    font-weight: 500;
    color: var(--rx-muted);
    text-decoration: none;
}

.rx-login-nav-back:hover {
    color: var(--rx-ink);
}

/* Hero + arrow field */
.rx-login-hero {
    position: relative;
    min-height: max(560px, 72svh);
    padding: calc(56px + var(--rx-nav-offset, 0px) + clamp(28px, 5vw, 48px)) clamp(16px, 4.6vw, 56px)
        clamp(40px, 6vw, 64px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    cursor: crosshair;
}

.rx-login-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(
            ellipse 38% 34% at 50% 52%,
            color-mix(in srgb, var(--rx-mid) 55%, var(--rx-light)) 0%,
            transparent 100%
        ),
        linear-gradient(
            180deg,
            var(--rx-deep) 0%,
            color-mix(in srgb, var(--rx-deep) 45%, var(--rx-mid)) 18%,
            var(--rx-mid) 42%,
            color-mix(in srgb, var(--rx-mid) 50%, var(--rx-light)) 62%,
            var(--rx-light) 78%,
            color-mix(in srgb, var(--rx-light) 35%, #ffffff) 92%,
            #ffffff 100%
        );
}

.rx-login-hero .ows-field {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.rx-login-hero .ows-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.rx-login-hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
    gap: clamp(28px, 5vw, 56px);
    width: min(1080px, 100%);
    align-items: center;
    pointer-events: none;
}

.rx-login-hero-inner a,
.rx-login-hero-inner button {
    pointer-events: auto;
}

.rx-login-copy {
    color: #ffffff;
    text-shadow: 0 8px 32px color-mix(in srgb, var(--rx-deep) 55%, transparent);
}

.rx-login-kicker {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, #ffffff 78%, var(--rx-light));
}

.rx-login-kicker--card {
    color: var(--rx-muted);
}

.rx-login-title {
    margin: 0;
    font-size: clamp(48px, 8vw, 88px);
    font-weight: 600;
    letter-spacing: -0.055em;
    line-height: 0.95;
}

.rx-login-title-main {
    display: inline;
    color: #ffffff;
}

.rx-login-title-accent {
    display: inline;
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 600;
    color: #ffffff;
}

.rx-login-lede {
    margin: 16px 0 0;
    max-width: 34rem;
    font-size: clamp(15px, 1.7vw, 17px);
    line-height: 1.5;
    color: color-mix(in srgb, #ffffff 88%, var(--rx-light));
}

.rx-login-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.rx-login-tags li {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
    background: color-mix(in srgb, #ffffff 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 22%, transparent);
}

/* Sign-in card */
.rx-login-card {
    padding: clamp(22px, 3vw, 28px);
    border-radius: 14px;
    background: #ffffff;
    color: var(--rx-ink);
    box-shadow: 0 28px 70px -28px color-mix(in srgb, var(--rx-deep) 75%, transparent),
        0 0 0 1px color-mix(in srgb, var(--rx-ink) 8%, transparent);
}

.rx-login-card-title {
    margin: 4px 0 0;
    font-size: clamp(22px, 2.4vw, 26px);
    font-weight: 600;
    letter-spacing: -0.03em;
}

.rx-login-card-text {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--rx-muted);
}

.rx-login-status {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
}

.rx-login-status.is-error {
    color: #8b2e26;
    background: #fdecea;
}

.rx-login-status.is-ok {
    color: #1e5c38;
    background: #e8f5ee;
}

.rx-login-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    margin-top: 18px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--rx-ink);
    text-decoration: none;
    background: #fdf0eb;
    border: 1px solid color-mix(in srgb, var(--rx-mid) 25%, transparent);
    box-sizing: border-box;
    transition: background-color 0.2s, border-color 0.2s;
}

.rx-login-google:hover {
    background: color-mix(in srgb, #fdf0eb 65%, var(--rx-mid));
    border-color: color-mix(in srgb, var(--rx-mid) 45%, transparent);
}

.rx-login-google-icon {
    display: flex;
    width: 22px;
    height: 22px;
}

.rx-login-google-icon svg {
    width: 100%;
    height: 100%;
}

.rx-login-note {
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--rx-muted);
}

.rx-login-legal {
    margin: 14px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--rx-muted);
}

.rx-login-legal a {
    color: var(--rx-mid);
    font-weight: 500;
}

/* Steps strip */
.rx-login-steps {
    padding: clamp(36px, 5vw, 56px) clamp(16px, 4.6vw, 56px);
    background: #ffffff;
    border-top: 1px solid rgba(22, 22, 24, 0.08);
}

.rx-login-steps ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 3vw, 28px);
    max-width: 1080px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.rx-login-steps li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.rx-login-step-num {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--rx-mid);
    background: #fdf0eb;
}

.rx-login-steps strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.rx-login-steps p {
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--rx-muted);
}

.rx-login-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 24px clamp(16px, 4.6vw, 56px) 32px;
    font-size: 13px;
    color: var(--rx-muted);
    border-top: 1px solid rgba(22, 22, 24, 0.08);
}

.rx-login-foot p {
    margin: 0;
}

.rx-login-foot nav {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.rx-login-foot a {
    color: var(--rx-muted);
    text-decoration: none;
}

.rx-login-foot a:hover {
    color: var(--rx-ink);
}

@media (max-width: 900px) {
    .rx-login-hero-inner {
        grid-template-columns: 1fr;
    }

    .rx-login-copy {
        text-align: center;
    }

    .rx-login-lede {
        margin-left: auto;
        margin-right: auto;
    }

    .rx-login-tags {
        justify-content: center;
    }

    .rx-login-steps ol {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .rx-login-nav {
        grid-template-columns: auto 1fr;
    }

    .rx-login-nav-center {
        display: none;
    }

    .rx-login-nav-back {
        grid-column: 2;
        justify-self: end;
    }

    .rx-login-hero {
        cursor: default;
        min-height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rx-login-hero {
        cursor: auto;
    }
}