/* ============================================================
   Predict Health rebrand — inGAGE portal public / login pages
   Added for HTH-441 (Insightin Health -> Predict Health).
   Scope: the shared public login landing (applies to all clients).

   Assets: hero background = landing-page-background.png (from the PM).
   The logo transition uses the vector logos on white cards and the
   banner icon is an inline SVG — the PM's raster logo/icon PNGs had the
   transparency grid baked in (fully opaque), so they are not used.
   ============================================================ */
:root {
    --ph-navy: #0a1e42;
    --ph-blue: #1c9bf0;
    --ph-blue-strong: #0d7fd4;
    --ph-green: #6fb92e;
    --ph-green-strong: #5ea625;
    --ph-ink: #152744;
    --ph-slate: #5c6b82;
    --ph-line: #e4e9f1;
}

.ph-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #ffffff;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ph-ink);
}

/* ---- announcement banner ---- */
.ph-announcement { background: var(--ph-navy); color: #fff; font-size: 14px; }
.ph-announcement__inner {
    max-width: 1180px; margin: 0 auto; padding: 10px 24px;
    display: flex; align-items: center; justify-content: center;
    gap: 10px; flex-wrap: wrap; text-align: center;
}
.ph-announcement__icon { width: 20px; height: 20px; flex: none; fill: #fff; opacity: .95; }
.ph-announcement__text strong { font-weight: 600; }
.ph-announcement__link { color: var(--ph-green); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ph-announcement__link:hover { text-decoration: underline; color: var(--ph-green); }

/* ---- header ---- */
.ph-header { background: #fff; border-bottom: 1px solid var(--ph-line); }
.ph-header__inner {
    max-width: 1180px; margin: 0 auto; padding: 18px 24px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.ph-header__logo { text-decoration: none; display: inline-flex; }
.ph-header__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ph-header__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border: 1px solid #cfe0f2; border-radius: 8px;
    color: var(--ph-blue-strong); background: #fff;
    font-size: 14px; font-weight: 600; text-decoration: none;
    transition: background .15s, border-color .15s;
}
.ph-header__btn:hover { background: #f2f8fe; border-color: var(--ph-blue); color: var(--ph-blue-strong); }
.ph-header__btn svg { width: 16px; height: 16px; fill: currentColor; }

/* ---- logos ---- */
.ph-logo-img { display: block; height: auto; }
.ph-header__logo .ph-logo-img { height: 30px; }
.ph-brand-card .ph-logo-img { width: 230px; max-width: 100%; }

/* ---- hero ---- */
.ph-hero { flex: 1 0 auto; background: #eef4fb url('../../assets-new/src/images/landing-page-background.png') center / cover no-repeat; }
.ph-hero__grid {
    max-width: 1180px; margin: 0 auto; padding: 44px 24px 64px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}

/* brand transition (left) — vector logos on white cards */
.ph-hero__brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.ph-brand-card {
    background: #fff; border-radius: 40px; box-shadow: 0 18px 50px rgba(19,52,90,.10);
    padding: 34px 46px; min-width: 300px; display: flex; align-items: center; justify-content: center;
}
.ph-brand-card__from { max-width: 230px; height: auto; display: block; }
.ph-brand-arrow { width: 34px; height: 34px; color: var(--ph-green); }
.ph-brand-arrow svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* content (right) */
.ph-hero__content { max-width: 540px; }
.ph-eyebrow { color: var(--ph-green-strong); font-weight: 700; font-size: 13px; letter-spacing: .08em; margin: 0 0 10px; }
.ph-title { font-size: 42px; line-height: 1.08; font-weight: 800; margin: 0 0 16px; color: var(--ph-ink); }
.ph-title span { color: var(--ph-blue); }
.ph-title__rule { display: block; width: 54px; height: 4px; background: var(--ph-green); border-radius: 2px; margin: 0 0 22px; }
.ph-lede { font-size: 17px; font-weight: 700; line-height: 1.5; margin: 0 0 14px; color: var(--ph-ink); }
.ph-copy { font-size: 15px; line-height: 1.6; color: var(--ph-slate); margin: 0 0 26px; }

/* sign-in card — wraps the existing Login/ForgetPassword partials */
.ph-signin {
    background: #fff; border: 1px solid var(--ph-line); border-radius: 14px;
    box-shadow: 0 16px 44px rgba(19,52,90,.10); padding: 26px 26px 22px; max-width: 440px;
}
/* neutralize any card styling on the inner box so we don't double-card */
.ph-signin .inv-user-login-box { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; }
.ph-signin #loginInfo h3, .ph-signin h3 { font-size: 18px; font-weight: 700; margin: 0 0 16px; color: var(--ph-ink); }
/* green primary SIGN IN button to match the mockup */
.ph-signin .inv-button--primary { background: var(--ph-green); border-color: var(--ph-green); }
.ph-signin .inv-button--primary:hover { background: var(--ph-green-strong); border-color: var(--ph-green-strong); }
/* right-align "Forgot password?" under the sign-in button (per HTH-441 review) */
.ph-signin .inv-forgot-password-button { float: none; display: block; text-align: right; margin-top: 14px; cursor: pointer; }

.ph-announce-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: var(--ph-blue-strong); font-weight: 700; text-decoration: underline; }
.ph-announce-link:hover { color: var(--ph-blue); }
.ph-announce-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---- responsive ---- */
@media (max-width: 900px) {
    .ph-hero__grid { grid-template-columns: 1fr; gap: 32px; }
    .ph-hero__brand { order: -1; }
    .ph-title { font-size: 32px; }
    .ph-header__inner { justify-content: center; }
}
@media (max-width: 480px) {
    .ph-brand-card { min-width: 0; width: 100%; padding: 26px; }
    .ph-signin { padding: 20px; }
    .ph-header__btn { padding: 8px 12px; font-size: 13px; }
}