:root {
    color-scheme: light;
    --ink: #3b2936;
    --ink-strong: #361f31;
    --muted: #776a76;
    --muted-light: #9c8796;
    --rose: #b13f70;
    --rose-strong: #a32b5f;
    --rose-2: #ea7199;
    --pink-soft: #fff0f5;
    --mint: #2b937b;
    --line: #eedfe7;
    --surface: #fff;
    --back: #fcf6f8;
    --shadow:
        0 24px 70px rgba(108, 56, 83, 0.085), 0 2px 10px rgba(108, 56, 83, 0.03);
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    min-width: 320px;
    scroll-behavior: smooth;
}
body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: hidden;
    background: var(--back);
    color: var(--ink);
    font-family:
        Manrope,
        "Segoe UI",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
    font-size: 15px;
    line-height: 1.48;
    -webkit-font-smoothing: antialiased;
}
button,
input {
    font: inherit;
}
button {
    cursor: pointer;
}
img,
svg {
    max-width: 100%;
}
button:disabled {
    cursor: wait;
}
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 3px solid #315bb3 !important;
    outline-offset: 3px;
}
.ico {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.skip-link {
    position: fixed;
    top: -72px;
    left: 20px;
    background: #fff;
    color: var(--ink);
    z-index: 200;
    padding: 11px 17px;
    border-radius: 12px;
    box-shadow: var(--shadow);
    text-decoration: none;
}
.skip-link:focus {
    top: 12px;
}
.ambient-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    background:
        radial-gradient(ellipse 24% 36% at 0% 75%, #ffdce657, transparent 86%),
        radial-gradient(ellipse 30% 34% at 98% 14%, #f6dce657, transparent 86%);
}
.ambient-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    mix-blend-mode: multiply;
    opacity: 0.28;
    animation: ambientBreath 18s ease-in-out infinite alternate;
}
.glow-one {
    width: 420px;
    height: 440px;
    top: -160px;
    left: -105px;
    background: #f7a8c5;
}
.glow-two {
    width: 490px;
    height: 370px;
    bottom: -140px;
    right: -50px;
    background: #d9d0f7;
    animation-duration: 22s;
    animation-delay: -10s;
}
.glow-three {
    width: 380px;
    height: 300px;
    left: 38%;
    top: 44%;
    background: #f6d8b9;
    opacity: 0.14;
    animation-duration: 25s;
    animation-delay: -8s;
}
.petal {
    position: absolute;
    left: var(--left);
    top: -8vh;
    width: var(--size);
    height: calc(var(--size) * 1.45);
    background: linear-gradient(125deg, #ed91b0 4%, #ffe8f0 83%);
    border: 1px solid #d97a9c66;
    box-shadow: 0 1px 8px #e09ca33d;
    border-radius: 70% 8% 66% 7%;
    opacity: 0.28;
    transform: rotate(24deg);
    animation: petalFall var(--duration) linear var(--delay) infinite;
}
@keyframes petalFall {
    0% {
        transform: translate3d(0, -14vh, 0) rotate(0deg);
        opacity: 0;
    }
    8% {
        opacity: 0.26;
    }
    45% {
        transform: translate3d(44px, 53vh, 0) rotate(calc(var(--turn) * 0.48));
        opacity: 0.35;
    }
    85% {
        opacity: 0.24;
    }
    100% {
        transform: translate3d(-30px, 115vh, 0) rotate(var(--turn));
        opacity: 0;
    }
}
@keyframes ambientBreath {
    from {
        transform: translate3d(-8px, 0, 0) scale(1);
    }
    to {
        transform: translate3d(28px, 18px, 0) scale(1.12);
    }
}
.page-shell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    padding: 15px clamp(16px, 2.75vw, 44px) 13px;
}
.topbar {
    width: min(1364px, 100%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 75px;
    gap: 18px;
}
.brand-lockup {
    display: flex;
    align-items: center;
    gap: 19px;
    min-width: 0;
}
.brand-logo {
    width: 207px;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}
.brand-divider {
    width: 1px;
    height: 30px;
    background: linear-gradient(to bottom, transparent, #d3bdc8, transparent);
}
.brand-caption {
    font-size: 12px;
    color: #836778;
    letter-spacing: 0.012em;
    white-space: nowrap;
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}
.language-switch {
    display: inline-flex;
    padding: 3px;
    border-radius: 100px;
    background: #fff;
    border: 1px solid #e9dce4;
    box-shadow: 0 3px 14px #6b314910;
}
.lang-choice {
    min-width: 43px;
    min-height: 36px;
    border: 0;
    border-radius: 100px;
    background: transparent;
    color: #8a6578;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.025em;
    transition:
        background 0.18s,
        box-shadow 0.18s,
        color 0.18s;
}
.lang-choice.active {
    background: #a72e62;
    color: #fff;
    box-shadow: 0 3px 10px #a72e6232;
}
.lang-choice:hover:not(.active) {
    background: #fff1f6;
    color: #a72e62;
}
.help-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #765164;
    background: none;
    border: none;
    min-height: 43px;
    font-weight: 700;
    font-size: 12px;
}
.help-link:hover,
.footer-help:hover {
    color: var(--rose-strong);
}
.experience {
    width: min(1364px, 100%);
    margin: 18px auto 0;
    display: grid;
    grid-template-columns: minmax(0, 1.13fr) minmax(400px, 0.87fr);
    gap: 21px;
    flex: 1;
    align-items: stretch;
}
.showcase {
    isolation: isolate;
    position: relative;
    min-height: 644px;
    max-height: 830px;
    border-radius: 34px;
    overflow: hidden;
    background: linear-gradient(143deg, #fff1f6 0%, #fbedf2 48%, #fae9eb 100%);
    border: 1px solid #ffffffb8;
    box-shadow: 0 20px 60px #a54b6d12;
}
.showcase::before {
    content: "";
    position: absolute;
    width: 530px;
    height: 530px;
    right: -150px;
    top: 4%;
    border: 1px solid #e7a8bb5c;
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
}
.showcase::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    left: -130px;
    bottom: -130px;
    background: radial-gradient(circle, #fffefeb0, transparent 65%);
    z-index: 2;
    pointer-events: none;
}
.showcase-bloom {
    position: absolute;
    z-index: 1;
    inset: -20px 0 0;
    opacity: 0.54;
    background:
        url("login-botanical.svg") right -10px bottom -6px / 275px auto
            no-repeat,
        radial-gradient(
            ellipse 180px 120px at 9% 91%,
            #edc2c8a8,
            transparent 90%
        );
}
.showcase-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid #df9bb744;
    z-index: 1;
}
.orbit-one {
    width: 395px;
    height: 395px;
    right: -150px;
    top: -155px;
}
.orbit-two {
    width: 210px;
    height: 210px;
    left: 43%;
    bottom: -150px;
}
.showcase-photography {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    top: 0;
    width: 65%;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.portrait-image {
    position: absolute;
    right: -3%;
    bottom: 0;
    width: 98%;
    height: 98%;
    object-fit: cover;
    object-position: 50% 43%;
    opacity: 0.92;
    filter: saturate(0.97) contrast(1.025);
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, #000 23%, #000 97%),
        linear-gradient(to top, #000 59%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 23%, #000 97%);
    animation: portraitBreath 16s ease-in-out infinite alternate;
    transform-origin: 78% 62%;
}
@keyframes portraitBreath {
    from {
        transform: scale(1.01) translateY(1%);
    }
    to {
        transform: scale(1.055) translateY(0);
    }
}
.showcase-fade {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            #fff1f5 0%,
            #fff1f5e6 22%,
            #fff1f588 44%,
            transparent 66%
        ),
        linear-gradient(0deg, #ffebf1 0%, #ffebf126 22%, transparent 53%);
}
.showcase-copy {
    position: relative;
    z-index: 3;
    padding: clamp(45px, 5vw, 72px) 0 0 clamp(30px, 4vw, 61px);
    max-width: 62%;
}
.eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.21em;
    color: #a43b64;
    white-space: nowrap;
}
.eyebrow-star {
    font-size: 19px;
    line-height: 1;
    color: #d68b9b;
}
.showcase h1 {
    font-family: "DM Serif Text", Georgia, serif;
    font-weight: 400;
    font-size: clamp(42px, 4.45vw, 65px);
    letter-spacing: -0.045em;
    line-height: 1.105;
    margin: 23px 0 17px;
    color: #65304f;
    text-wrap: balance;
}
.showcase h1 span {
    display: block;
    white-space: nowrap;
}
.showcase h1 .accent-line {
    color: #c24e81;
    font-style: italic;
    font-size: 0.91em;
    letter-spacing: -0.049em;
}
.showcase-copy p {
    max-width: 288px;
    color: #695269;
    font-size: 14px;
    line-height: 1.78;
    margin: 0;
}
.experience-pill {
    position: absolute;
    z-index: 4;
    right: 26px;
    top: 33px;
    display: flex;
    align-items: center;
    gap: 7px;
    border-radius: 100px;
    background: #fffefaed;
    border: 1px solid #fff;
    box-shadow: 0 12px 24px #9d4c6530;
    color: #965475;
    font-family: Georgia, serif;
    font-size: 12px;
    font-style: italic;
    padding: 10px 15px;
    max-width: 240px;
}
.experience-pill .ico {
    width: 16px;
    height: 16px;
    color: #bd5b7e;
}
.care-card {
    position: absolute;
    left: clamp(29px, 3.5vw, 51px);
    bottom: 45px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 326px;
    background: #fffef9e9;
    padding: 9px 16px 9px 9px;
    border: 1px solid #fff;
    box-shadow: 0 15px 32px #7a364326;
    border-radius: 20px;
    backdrop-filter: blur(8px);
    animation: careRise 7s ease-in-out infinite alternate;
}
.care-card-image {
    flex-shrink: 0;
    width: 91px;
    height: 82px;
    border-radius: 14px;
    overflow: hidden;
    background: #efd5d5;
}
.care-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.care-card-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    color: #8f4263;
    font-family: Georgia, serif;
    font-style: italic;
    line-height: 1.3;
}
.care-card .care-lead {
    font-size: 17px;
}
.care-card strong {
    font-size: 18px;
    font-weight: 400;
    white-space: nowrap;
}
.care-underline {
    width: 45px;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, #bd4973, #f4a9c5);
    margin-top: 9px;
}
@keyframes careRise {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-8px);
    }
}
.bottom-flourish {
    position: absolute;
    z-index: 2;
    right: 24px;
    bottom: 23px;
    width: 112px;
    opacity: 0.6;
}
.auth-zone {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    min-width: 0;
}
.auth-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 644px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 34px;
    padding: 52px clamp(34px, 4.05vw, 66px) 30px;
    background: linear-gradient(
        145deg,
        #fffefef5 0%,
        #fffffff0 62%,
        #fff8fbf7 100%
    );
    border: 1px solid #fff;
    box-shadow: var(--shadow);
}
.auth-card::after {
    position: absolute;
    z-index: -1;
    content: "";
    inset: auto -74px -92px auto;
    width: 240px;
    height: 230px;
    background: radial-gradient(circle, #ffe5edbf, transparent 69%);
    pointer-events: none;
}
.card-topline {
    position: absolute;
    top: 20px;
    right: 26px;
    display: flex;
    gap: 5px;
}
.card-topline span {
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background: #f3c6d4;
}
.card-topline span:nth-child(2) {
    background: #c3e8dd;
}
.card-topline span:nth-child(3) {
    background: #e7d7f1;
}
.card-ornament {
    position: absolute;
    top: -74px;
    right: -80px;
    width: 240px;
    height: 240px;
    opacity: 0.11;
    color: #d05b89;
    transform: rotate(16deg);
    pointer-events: none;
}
.auth-head {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
    margin-bottom: 18px;
}
.auth-symbol {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(130deg, #fff0f5, #fbdce8);
    color: #b94372;
    box-shadow: 0 7px 15px #b9437217;
}
.auth-symbol svg {
    width: 26px;
    height: 26px;
}
.tiny-heading {
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.21em;
    color: #a54970;
}
.auth-card h2 {
    font-family: "DM Serif Text", Georgia, serif;
    font-weight: 400;
    color: #4b2740;
    font-size: clamp(37px, 3.3vw, 49px);
    letter-spacing: -0.045em;
    line-height: 1.14;
    margin: 0 0 10px;
    position: relative;
}
.auth-description {
    font-size: 14px;
    color: #846f7c;
    line-height: 1.58;
    margin: 0 0 29px;
    max-width: 370px;
}
#signin-view,
#reset-view {
    position: relative;
    z-index: 1;
}
.field {
    margin-bottom: 16px;
}
.field label {
    display: block;
    font-size: 13px;
    font-weight: 800;
    margin: 0 0 9px;
    color: #493342;
}
.input-shell {
    height: 56px;
    border: 1px solid #e8dfe5;
    border-radius: 14px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 16px;
    transition:
        border-color 0.18s,
        box-shadow 0.18s,
        background 0.18s;
}
.input-shell:hover {
    border-color: #dcb4c6;
}
.input-shell:focus-within {
    border-color: #bb5781;
    box-shadow: 0 0 0 4px #f9e7f0;
    background: #fff;
}
.input-shell input {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 100%;
    border: 0 !important;
    outline: 0 !important;
    background: transparent;
    color: #382d39;
    font-size: 14px;
    font-weight: 550;
    letter-spacing: 0.01em;
    padding: 0;
}
.input-shell input::placeholder {
    color: #aca2ac;
    font-size: 13px;
    font-weight: 400;
}
.input-icon {
    color: #b68b9f;
}
.field.has-error .input-shell {
    border-color: #ce5268;
    box-shadow: 0 0 0 3px #fce9ed;
}
.field-error {
    font-size: 12px;
    color: #b5364c;
    line-height: 1.4;
    margin: 7px 3px 0;
    min-height: 0;
}
.field-error:empty {
    display: none;
}
.password-toggle {
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    color: #965774;
    font-size: 12px;
    font-weight: 750;
    padding: 8px 4px;
    margin-right: -4px;
    min-height: 38px;
}
.password-toggle:hover {
    color: #ac315f;
}
.password-toggle .ico {
    width: 17px;
    height: 17px;
}
.caps-hint {
    font-size: 12px;
    color: #a0691c;
    margin: 6px 0 0;
}
.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
    margin-bottom: 25px;
}
.remember-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    color: #6a5b67;
    font-weight: 550;
}
.remember-control input {
    width: 17px;
    height: 17px;
    accent-color: #ac3768;
    margin: 0;
}
.text-link {
    background: none;
    border: 0;
    padding: 8px 0;
    color: #a83766;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}
.text-link:hover {
    text-decoration: underline;
}
.primary-button {
    border: 0;
    border-radius: 14px;
    width: 100%;
    height: 57px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    background: linear-gradient(105deg, #a52d60 0%, #cb4f7d 63%, #df658e 100%);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.01em;
    box-shadow: 0 13px 24px #bc48734b;
    transition:
        transform 0.18s,
        box-shadow 0.18s,
        filter 0.18s;
}
.primary-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 17px 25px #bc487354;
    filter: saturate(1.06);
}
.primary-button:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 5px 10px #bc487335;
}
.primary-button .ico {
    width: 19px;
    height: 19px;
    transition: transform 0.2s;
}
.primary-button:hover .ico {
    transform: translateX(3px);
}
.primary-button:disabled {
    opacity: 0.7;
}
.auth-feedback {
    margin: 0 0 14px;
    border-radius: 12px;
    border: 1px solid #eed5e0;
    background: #fff5f8;
    color: #814263;
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.5;
}
.auth-feedback.good {
    border-color: #c5e2d9;
    background: #f2fbf7;
    color: #21725d;
}
.auth-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding: 17px 0 0;
    border-top: 1px solid #efe8ec;
    position: relative;
    z-index: 1;
}
.trust-icon {
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    border-radius: 12px;
    background: #eef9f5;
    color: #3e9b7c;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trust-icon .ico {
    width: 20px;
    height: 20px;
}
.auth-footer p {
    font-size: 11px;
    color: #857782;
    margin: 0;
    line-height: 1.55;
}
.auth-below {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    color: #a77187;
    font-family: Georgia, serif;
    font-size: 13px;
    font-style: italic;
}
.auth-below .ico {
    width: 16px;
    height: 16px;
    color: #ca7692;
}
.auth-below-rule {
    height: 1px;
    flex: 1;
    max-width: 50px;
    background: #e7cbd5;
}
.tenant-badge {
    position: absolute;
    right: 50px;
    top: 35px;
    max-width: 92px;
}
.tenant-badge img {
    display: block;
    max-width: 100%;
    height: auto;
}
.tenant-badge[hidden] {
    display: none;
}
.reset-header {
    margin: -6px 0 15px;
}
.back-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    background: transparent;
    border: 0;
    color: #a73765;
    font-weight: 700;
    font-size: 12px;
}
.back-button:hover {
    color: #652544;
}
.back-button .ico {
    width: 18px;
    height: 18px;
}
.page-footer {
    width: min(1364px, 100%);
    margin: 4px auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: #a18a99;
    font-size: 11px;
    padding: 8px 10px;
}
.page-footer span:nth-child(2) {
    text-align: center;
    letter-spacing: 0.025em;
}
.footer-help {
    border: 0;
    background: transparent;
    color: #946a81;
    font-size: 11px;
    font-weight: 700;
    min-height: 36px;
    padding: 0 4px;
}
.help-dialog {
    position: fixed;
    inset: 0;
    border: 1px solid #f3e4ea;
    border-radius: 24px;
    background: #fffefefb;
    max-width: min(440px, calc(100% - 30px));
    width: 100%;
    padding: 30px;
    box-shadow: 0 30px 80px #2d193c34;
    color: var(--ink);
}
.help-dialog::backdrop {
    background: #33213266;
    backdrop-filter: blur(5px);
}
.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.help-glyph {
    background: #eff9f5;
    color: #2d9a7e;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
}
.help-glyph svg {
    width: 25px;
}
.close-help {
    border: 0;
    background: #faf2f5;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #6d5366;
}
.close-help svg {
    width: 20px;
}
.help-dialog h2 {
    font-family: Georgia, serif;
    font-size: 30px;
    font-weight: normal;
    color: #632f4b;
    margin: 20px 0 10px;
}
.help-dialog p {
    color: #736573;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 23px;
}
.motion-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 0;
    border-top: 1px solid #f1e6ea;
    color: #63485a;
    font-size: 13px;
    font-weight: 700;
}
.motion-option input {
    width: 18px;
    height: 18px;
    accent-color: #a63564;
}
.dialog-done {
    margin-top: 10px;
    width: 100%;
    border: 0;
    background: #a73868;
    color: white;
    min-height: 47px;
    border-radius: 12px;
    font-weight: 800;
}
.splash {
    position: fixed;
    z-index: 300;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(
        circle at 40% 30%,
        #fff 0%,
        #fff4f8 45%,
        #fdeaf0 100%
    );
    transition:
        opacity 0.45s ease,
        visibility 0.45s ease;
}
.splash.dismissed {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.splash-bloom {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 88%, #f8cdda 0%, transparent 22%),
        radial-gradient(circle at 90% 20%, #ecd8eb 0%, transparent 26%);
    opacity: 0.65;
    animation: ambientBreath 9s infinite alternate;
}
.splash-inner {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    z-index: 1;
}
.splash-icon {
    width: 110px;
    height: 110px;
    border-radius: 34px;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 14px 36px #d3709c1b;
    animation: splashFloat 2.2s ease-in-out infinite;
}
.splash-icon img {
    width: 92px;
    height: auto;
}
.splash-name {
    font-family: Georgia, serif;
    font-size: 38px;
    color: #ae3b6b;
    margin-top: 19px;
}
.splash-name em {
    font-size: 0.8em;
}
.splash-quote {
    color: #91677c;
    font-size: 12px;
    letter-spacing: 0.04em;
    margin-top: 8px;
}
.splash button {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #b36386;
    color: #9b5373;
    font-size: 12px;
    padding: 7px 4px;
    margin-top: 32px;
    font-weight: 650;
}
@keyframes splashFloat {
    50% {
        transform: translateY(-8px) scale(1.035);
    }
}
@media (max-width: 1190px) {
    .brand-caption {
        display: none;
    }
    .brand-divider {
        display: none;
    }
    .experience {
        grid-template-columns: minmax(0, 1fr) minmax(390px, 0.98fr);
    }
    .showcase h1 {
        font-size: clamp(38px, 4.1vw, 53px);
    }
    .showcase-copy {
        max-width: 68%;
    }
    .auth-card {
        padding-left: 40px;
        padding-right: 40px;
    }
    .showcase-copy {
        padding-left: 35px;
    }
    .care-card {
        left: 26px;
    }
}
@media (max-width: 960px) {
    .experience {
        grid-template-columns: minmax(0, 1fr);
        width: min(610px, 100%);
        gap: 16px;
        margin-top: 10px;
    }
    .topbar {
        width: min(610px, 100%);
    }
    .showcase {
        min-height: 202px;
        max-height: none;
        border-radius: 25px;
    }
    .showcase-copy {
        padding: 27px 15px 20px 27px;
        max-width: 66%;
    }
    .showcase h1 {
        font-size: 31px;
        margin: 10px 0 4px;
        line-height: 1.1;
    }
    .showcase-copy p {
        font-size: 11px;
        max-width: 245px;
        line-height: 1.45;
    }
    .eyebrow {
        font-size: 9px;
        letter-spacing: 0.16em;
    }
    .showcase-photography {
        width: 55%;
    }
    .portrait-image {
        right: -8%;
        width: 110%;
        height: 110%;
        object-position: center 30%;
    }
    .showcase-fade {
        background: linear-gradient(
            90deg,
            #fff1f5 0%,
            #fff1f5bb 33%,
            transparent 84%
        );
    }
    .experience-pill,
    .care-card,
    .bottom-flourish {
        display: none;
    }
    .auth-card {
        min-height: 0;
        padding: 35px clamp(25px, 7vw, 58px) 25px;
        border-radius: 26px;
    }
    .auth-head {
        margin-bottom: 13px;
    }
    .auth-card h2 {
        font-size: 43px;
    }
    .auth-description {
        margin-bottom: 24px;
    }
    .auth-below {
        height: 42px;
    }
    .page-shell {
        padding: 8px 16px 6px;
    }
    .page-footer {
        width: min(610px, 100%);
    }
}
@media (max-width: 580px) {
    .topbar {
        min-height: 67px;
    }
    .brand-logo {
        width: 154px;
    }
    .header-actions {
        gap: 8px;
    }
    .header-help {
        display: none;
    }
    .language-switch {
        padding: 3px;
    }
    .lang-choice {
        min-width: 36px;
        min-height: 31px;
        font-size: 11px;
    }
    .experience {
        margin-top: 7px;
        gap: 12px;
    }
    .showcase {
        height: 152px;
        min-height: 152px;
        border-radius: 22px;
    }
    .showcase-copy {
        padding: 20px 7px 12px 19px;
        max-width: 72%;
    }
    .showcase h1 {
        font-size: clamp(24px, 6.65vw, 32px);
        margin: 5px 0 3px;
    }
    .showcase h1 .accent-line {
        font-size: 0.85em;
    }
    .showcase-copy p {
        font-size: 10px;
        line-height: 1.4;
        max-width: 205px;
    }
    .eyebrow {
        font-size: 7px;
        letter-spacing: 0.12em;
        gap: 4px;
    }
    .eyebrow-star {
        font-size: 13px;
    }
    .showcase-photography {
        width: 58%;
    }
    .portrait-image {
        width: 128%;
        right: -18%;
        height: 115%;
        object-position: center 36%;
    }
    .showcase-fade {
        background: linear-gradient(
            90deg,
            #fff1f5 0%,
            #fff1f5ed 26%,
            #fff1f5a3 57%,
            transparent 100%
        );
    }
    .auth-card {
        padding: 27px 21px 22px;
        border-radius: 22px;
    }
    .auth-symbol {
        width: 39px;
        height: 39px;
        border-radius: 13px;
    }
    .auth-symbol svg {
        width: 22px;
    }
    .tiny-heading {
        font-size: 9px;
    }
    .auth-card h2 {
        font-size: 37px;
        margin-bottom: 5px;
    }
    .auth-description {
        font-size: 12px;
        line-height: 1.5;
        margin-bottom: 23px;
    }
    .field {
        margin-bottom: 15px;
    }
    .input-shell {
        height: 54px;
    }
    .form-options {
        margin: 2px 0 19px;
    }
    .primary-button {
        height: 54px;
    }
    .auth-footer {
        margin-top: 19px;
    }
    .auth-below {
        height: 40px;
        font-size: 11px;
    }
    .page-footer {
        font-size: 10px;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
    .page-footer > span:nth-child(2) {
        display: none;
    }
    .footer-help {
        font-size: 11px;
    }
    .tenant-badge {
        right: 25px;
        top: 29px;
        max-width: 72px;
    }
    .card-ornament {
        width: 170px;
        top: -58px;
        right: -58px;
    }
}
@media (max-width: 365px) {
    .showcase-copy p {
        max-width: 185px;
        font-size: 9px;
    }
    .showcase h1 {
        font-size: 23px;
    }
    .auth-card {
        padding-left: 16px;
        padding-right: 16px;
    }
    .brand-logo {
        width: 143px;
    }
    .form-options {
        gap: 4px;
    }
    .remember-control,
    .text-link {
        font-size: 11px;
    }
    .auth-symbol {
        width: 37px;
        height: 37px;
    }
    .auth-card h2 {
        font-size: 35px;
    }
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}
body.motion-off .ambient-glow,
body.motion-off .petal,
body.motion-off .portrait-image,
body.motion-off .care-card,
body.motion-off .splash-bloom,
body.motion-off .splash-icon,
body.motion-paused .ambient-glow,
body.motion-paused .petal,
body.motion-paused .portrait-image,
body.motion-paused .care-card {
    animation-play-state: paused !important;
}

/* Backend integration: accessible controls, optional local QA and recovery states. */
[hidden] {
    display: none !important;
}
.lang-choice {
    min-height: 44px;
    min-width: 44px;
}
.password-toggle {
    min-height: 44px;
}
.input-shell input {
    font-size: 16px;
}
.text-link,
.remember-control {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.remember-control input {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.back-button {
    text-decoration: none;
    min-height: 44px;
}
.public-link {
    align-self: center;
    color: var(--rose-strong);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.public-link:hover {
    text-decoration: underline;
}
.password-help {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
}
.refresh-link {
    color: var(--rose-strong);
    font-weight: 750;
}
.demo-panel {
    border-top: 1px solid var(--line);
    margin-top: 20px;
    padding-top: 8px;
}
.demo-panel summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #806278;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    list-style: none;
}
.demo-panel summary::after {
    content: "+";
    margin-left: auto;
    font-size: 20px;
}
.demo-panel[open] summary::after {
    content: "−";
}
.demo-panel p {
    margin: 3px 0 12px;
    font-size: 12px;
    color: var(--muted);
}
.demo-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mint);
}
.demo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.demo-button {
    border: 1px solid var(--line);
    background: #fffafc;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    min-height: 48px;
    width: 100%;
    padding: 8px;
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
}
.demo-button:hover {
    background: #fff0f5;
    border-color: #dca0b8;
}
.demo-button > span:nth-child(2) {
    flex: 1;
}
.demo-role-icon {
    background: #f6e8f0;
    border-radius: 8px;
    width: 25px;
    height: 28px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--rose);
}
.demo-form {
    min-width: 0;
}
.demo-panel .auth-feedback {
    margin-top: 12px;
}
.auth-card:has(.demo-panel[open]) {
    justify-content: flex-start;
}
.splash-icon {
    width: 132px;
    height: 132px;
}
.splash-icon img {
    width: 112px;
}
body.motion-paused .splash-bloom,
body.motion-paused .splash-icon {
    animation-play-state: paused !important;
}
@media (min-width: 961px) {
    .showcase {
        max-height: none;
    }
    .auth-card {
        padding-top: 40px;
    }
    .auth-description {
        margin-bottom: 22px;
    }
    .form-options {
        margin-bottom: 16px;
    }
    .auth-footer {
        margin-top: 20px;
    }
}
@media (max-width: 580px) {
    .lang-choice {
        min-width: 42px;
        min-height: 42px;
    }
    .auth-card {
        padding-top: 25px;
    }
    .form-options {
        gap: 8px;
    }
    .remember-control,
    .text-link {
        font-size: 12px;
    }
    .tenant-badge {
        max-width: 66px;
    }
    .demo-button {
        font-size: 12px;
    }
    .showcase-copy p {
        font-size: 11px;
    }
    .showcase h1 {
        font-size: 28px;
    }
}
@media (max-width: 365px) {
    .form-options {
        flex-wrap: wrap;
        gap: 0;
    }
    .remember-control,
    .text-link {
        font-size: 12px;
    }
    .showcase h1 {
        font-size: 24px;
    }
    .showcase-copy p {
        font-size: 10px;
    }
}

/* Equal visible cards, with an atmospheric image across the complete sign-in. */
.ambient-layer{background:radial-gradient(ellipse at 8% 12%,#fbd8e396,transparent 40%),radial-gradient(ellipse at 95% 85%,#dcf1e899,transparent 40%),linear-gradient(100deg,#fff8f3d9,#faf5ffd4),url('wellness-garden-v4.webp') right center/cover no-repeat}
.experience{flex:0 0 auto;margin:22px auto;min-height:660px;grid-template-columns:minmax(0,1.05fr) minmax(400px,.95fr)}
.page-shell{min-height:100vh;min-height:100svh}.page-shell>.experience{margin-top:auto;margin-bottom:auto}
.showcase{min-height:660px;max-height:none}.auth-zone{align-self:stretch}.auth-card{min-height:660px;background:linear-gradient(135deg,#fffffff7,#fffffff5 70%,#f2faf4f7);padding-top:40px;padding-bottom:20px}.auth-below{height:auto;min-height:36px;margin-top:10px;padding-top:12px;font-size:13px}.auth-footer{margin-top:22px;padding-top:18px}.page-footer{padding-top:22px}.public-link{padding:12px 0 0}
.auth-card::after{background:radial-gradient(circle,#e9d9f7b5,transparent 69%)}
.demo-button:nth-child(3n+1){background:#f0f8f3}.demo-button:nth-child(3n+2){background:#f1f4fd}.demo-button:nth-child(3n){background:#fff5e9}.demo-role-icon{background:#fff}
@media(min-width:961px){.page-shell{gap:18px}.experience{min-height:min(780px,calc(100svh - 185px))}.showcase,.auth-card{min-height:660px}.showcase h1{font-size:clamp(44px,4vw,62px)}.auth-below-rule{max-width:36px}}
@media(max-width:960px){.page-shell>.experience{margin:12px auto 0;min-height:0;grid-template-columns:1fr;gap:14px}.showcase{min-height:160px;max-height:none;height:160px}.showcase-copy{padding:21px 25px;max-width:76%}.showcase h1{font-size:29px;margin:8px 0}.showcase h1 .accent-line{display:inline}.showcase-copy p,.care-card,.bottom-flourish,.experience-pill,.orbit-two{display:none}.showcase-photography{width:43%;height:100%;top:0;right:0}.portrait-image{height:100%;width:100%;object-fit:cover;object-position:center 30%}.showcase-fade{background:linear-gradient(90deg,#fff1f6 43%,#fff1f6d9 64%,transparent 87%)}.auth-card{min-height:0;flex:none;padding:29px 34px 22px}.auth-below{display:none}.auth-footer{margin-top:20px}.page-footer{padding-top:20px}.brand-caption{display:none}}
@media(max-width:580px){.page-shell{padding:8px 14px 10px}.topbar{min-height:66px}.brand-logo{width:150px}.showcase{height:125px;min-height:125px;border-radius:22px}.showcase-copy{padding:15px 17px;max-width:83%}.showcase .eyebrow{font-size:8px;letter-spacing:1.1px}.showcase h1{font-size:25px;margin:8px 0}.showcase h1 .accent-line{display:block}.showcase-photography{width:42%}.auth-card{padding:25px 23px 20px;border-radius:24px}.auth-card h2{font-size:35px}.auth-description{margin-bottom:20px}.auth-head{margin-bottom:15px}.auth-footer{padding-top:14px;margin-top:17px}.page-footer{padding-top:18px}.form-options{margin-bottom:16px}.public-link{font-size:12px}.demo-button{min-height:48px}.auth-description{font-size:13px}}