/* Venrir /guest — reference-matched override (ref/software.webp).
   Original animated backdrop (subtle) + teal swoosh + astronaut + white auth card.
   Mobile-first: single column, auth FIRST in DOM. Desktop >=992px: two columns, auth LEFT.
   Loaded after master.styles.css from themes/default/apps/guest/content.phtml,
   so these rules win on equal specificity. Page scrolls naturally; no clipping. */

/* --- Canvas: flat warm grey; artwork lives in .guest-bg layers --- */
body.cl-app-guest{background-color:#f8f6f1;background-image:none;overflow-x:hidden;overflow-x:clip}
body.cl-app-guest div.welcome-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;position:relative;overflow:hidden}

/* --- Decorative backdrop (aria-hidden) --- */
body.cl-app-guest div.guest-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
body.cl-app-guest div.guest-bg__teal{position:absolute;inset:0}
body.cl-app-guest div.guest-bg__teal svg{width:100%;height:100%;display:block}
/* Original animated backdrop, kept subtle so it mixes with the new design (animations come from master.styles.css keyframes). */
body.cl-app-guest div.guest-bg__anim{position:absolute;inset:0;opacity:.55;-webkit-mask-image:linear-gradient(100deg,#000 52%,transparent 82%);mask-image:linear-gradient(100deg,#000 52%,transparent 82%)}
body.cl-app-guest div.guest-bg__anim div.animated-bg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}
body.cl-app-guest div.guest-bg__anim div.animated-bg svg{width:100%;height:100%;display:block}
/* Neutralize the original SVG's purple/blue gradient wash so the backdrop stays off-white; the animated shapes still drift subtly above it. */
body.cl-app-guest div.guest-bg__anim div.animated-bg rect{fill:#f8f6f1}
/* Soft recolors so the motion reads on the off-white canvas (CSS beats the SVG's white presentation attributes; the shapes' own opacities are untouched). */
body.cl-app-guest div.guest-bg__anim div.animated-bg .cloud path{fill:#dfe5e8}
body.cl-app-guest div.guest-bg__anim div.animated-bg .bird{stroke:#93a8b1}
body.cl-app-guest div.guest-bg__anim div.animated-bg .rain-drop{stroke:#a7c3cb}
body.cl-app-guest div.guest-bg__anim div.animated-bg .star{fill:#7fb3c0}
body.cl-app-guest div.guest-bg__anim div.animated-bg .bubble{fill:#d3e2e7}
body.cl-app-guest div.guest-bg__anim div.animated-bg .rings circle{stroke:#c9d6da}
body.cl-app-guest div.guest-bg__anim div.animated-bg .sparkle{fill:#7fb3c0}
body.cl-app-guest div.guest-bg__anim div.animated-bg .wave{fill:#e3e9e3}
body.cl-app-guest div.guest-bg__anim div.animated-bg .shape{fill:#7fb3c0}
body.cl-app-guest div.guest-bg__dots{position:absolute;inset:0}
body.cl-app-guest div.guest-bg__dots svg{width:100%;height:100%;display:block}

/* --- Footer wave strip: bottom-anchored original waves, whisper-subtle, no background of its own --- */
body.cl-app-guest div.guest-bg__waves{position:absolute;left:0;right:0;bottom:0;height:min(28vh,260px);opacity:.5}
body.cl-app-guest div.guest-bg__waves svg{width:100%;height:100%;display:block}
body.cl-app-guest div.guest-bg__waves .wave{fill:#dfe5e3}

/* --- Content grid --- */
body.cl-app-guest div.welcome-page__body{flex:1;position:relative;z-index:1;display:flex;align-items:center;padding:clamp(18px,3.5vw,52px) clamp(16px,3.5vw,48px);min-width:0}
body.cl-app-guest div.guest-layout{width:100%;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:clamp(16px,3vw,32px);align-items:center;min-width:0}
body.cl-app-guest section.guest-auth{min-width:0;width:100%;max-width:460px;margin:0 auto}
body.cl-app-guest section.guest-art{min-width:0;min-height:0;display:flex;justify-content:center}
body.cl-app-guest section.guest-art img.guest-art__img{width:min(300px,72vw);max-width:100%;height:auto;filter:drop-shadow(0 18px 26px rgba(22,32,43,.35));animation:guest-fall 7s ease-in-out infinite alternate}
@keyframes guest-fall{from{transform:translate(0,0) rotate(0deg)}to{transform:translate(-16px,24px) rotate(-2.5deg)}}

/* --- Auth card --- */
body.cl-app-guest div.welcome-page-form{background:#fff;border:1px solid var(--cl-primary-border-color);border-radius:16px;padding:clamp(20px,2.6vw,30px) clamp(18px,2.4vw,28px);box-shadow:0 20px 55px -20px rgba(22,32,43,.3);min-width:0;overflow-wrap:anywhere}
body.cl-app-guest div.welcome-page-form__header{margin-bottom:20px;text-align:center;min-width:0}
body.cl-app-guest div.welcome-page-form__header a.logo{display:inline-block;text-decoration:none;height:48px;margin-bottom:12px;max-width:100%;animation:guest-rise .6s ease both}
body.cl-app-guest div.welcome-page-form__header a.logo img{height:100%;width:auto;max-width:100%}
body.cl-app-guest div.welcome-page-form__header h1{font-weight:700;font-size:clamp(24px,3.4vw,32px);line-height:1.2;letter-spacing:-.02em;margin:0;overflow-wrap:anywhere;color:var(--cl-primary-text-color);animation:guest-rise .7s ease .08s both}
@keyframes guest-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
body.cl-app-guest div.welcome-page-form__body{max-width:480px;width:100%;min-width:0}
body.cl-app-guest div.auth-form-holder{min-width:0}
body.cl-app-guest div.auth-form-holder form.form{min-width:0}
body.cl-app-guest div.auth-form-holder form.form div.form-title{margin-bottom:16px;text-align:left}
body.cl-app-guest div.auth-form-holder form.form div.form-title h2{color:var(--cl-primary-text-color);font-size:22px;line-height:1.2;padding:0;margin:0;font-weight:500;overflow-wrap:anywhere}
body.cl-app-guest div.auth-form-holder form.form div.form-title p{font-size:14px;line-height:1.4;color:var(--cl-primary-text-color);margin:10px 0 0;padding:0;opacity:.9}
body.cl-app-guest div.auth-form-holder form.form div.form-group{min-width:0;overflow-wrap:anywhere}
body.cl-app-guest div.auth-form-holder form.form input.form-control{min-height:48px;font-size:16px;border-radius:999px;padding:0 18px;max-width:100%}
body.cl-app-guest div.auth-form-holder form.form div.password-ctrl input.form-control{padding-right:48px}
body.cl-app-guest div.auth-form-holder form.form button.btn-block{min-height:48px;border-radius:999px;font-size:15px;font-weight:700;max-width:100%}
body.cl-app-guest div.auth-form-holder div.form-cta-link{text-align:center;line-height:1.4;color:var(--cl-secondary-text-color);font-size:13px}
body.cl-app-guest div.auth-form-holder div.form-cta-link a{color:var(--cl-primary-link-color);font-weight:600;display:inline-flex;align-items:center;min-height:44px}
body.cl-app-guest div.auth-form-holder div.login-or-signup{display:flex;justify-content:center}
body.cl-app-guest div.auth-form-holder div.login-or-signup span{font-size:13px;line-height:13px;position:relative;color:var(--cl-secondary-text-color);white-space:nowrap}
body.cl-app-guest div.auth-form-holder div.login-or-signup span:before{content:"";height:2px;background:var(--cl-primary-border-color);position:absolute;top:4px;left:-70px;width:50px}
body.cl-app-guest div.auth-form-holder div.login-or-signup span:after{content:"";height:2px;background:var(--cl-primary-border-color);position:absolute;top:4px;right:-70px;width:50px}
@media (max-width:767.98px){body.cl-app-guest div.auth-form-holder div.login-or-signup span:before{left:-45px;width:30px}body.cl-app-guest div.auth-form-holder div.login-or-signup span:after{right:-45px;width:30px}}

/* --- Footer: fully transparent so the teal curve completes to the bottom edge --- */
body.cl-app-guest div.welcome-page div.welcome-page__footer{padding:6px clamp(14px,3vw,32px) 10px;flex-shrink:0;background:transparent;border-top:none;position:relative;z-index:1}
body.cl-app-guest div.welcome-page div.welcome-page__footer div.welcome-page__bp div.main-footer ul.footer-nav{align-items:center;min-width:0}
body.cl-app-guest div.welcome-page div.welcome-page__footer div.welcome-page__bp div.main-footer li.footer-nav-item{margin-right:4px;margin-bottom:0}
body.cl-app-guest div.welcome-page div.welcome-page__footer div.welcome-page__bp div.main-footer li.footer-nav-item>a{font-size:13px;color:#46505e;display:inline-flex;align-items:center;min-height:44px;padding:0 10px;overflow-wrap:anywhere;white-space:nowrap;flex:none;text-shadow:0 1px 2px rgba(255,255,255,.65)}
body.cl-app-guest div.welcome-page div.welcome-page__footer div.welcome-page__bp div.main-footer li.footer-nav-item>a:hover{color:var(--cl-primary-text-color);text-decoration:underline}
body.cl-app-guest div.welcome-page div.welcome-page__footer div.welcome-page__bp div.main-footer div.footer-nav-get-apps a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:#46505e}
body.cl-app-guest div.welcome-page div.welcome-page__footer div.welcome-page__bp div.main-footer div.footer-nav-get-apps a:hover{color:var(--cl-primary-text-color)}
@media (max-width:767.98px){body.cl-app-guest div.welcome-page__body{padding-left:16px;padding-right:16px}body.cl-app-guest div.welcome-page div.welcome-page__body{align-items:flex-start;padding-top:clamp(40px,10vh,90px)}body.cl-app-guest section.guest-auth{max-width:100%;margin:0}body.cl-app-guest div.welcome-page div.welcome-page__footer div.welcome-page__bp div.main-footer{flex-wrap:wrap}body.cl-app-guest div.welcome-page div.welcome-page__footer div.welcome-page__bp div.main-footer ul.footer-nav{flex-wrap:wrap;overflow:visible;justify-content:center}}

/* --- Focus --- */
body.cl-app-guest :focus-visible{outline:2px solid #14879a;outline-offset:3px;border-radius:6px}

/* --- Tablet: larger artwork --- */
@media (min-width:768px){body.cl-app-guest section.guest-art img.guest-art__img{width:min(400px,54vw)}}

/* --- Desktop: login docks LEFT, artwork floats RIGHT on the teal --- */
@media (min-width:992px){body.cl-app-guest div.guest-layout{grid-template-columns:minmax(400px,480px) 1fr;column-gap:clamp(20px,4vw,60px)}body.cl-app-guest section.guest-auth{margin:0;justify-self:start;margin-left:clamp(8px,3vw,44px)}body.cl-app-guest section.guest-art{align-self:stretch;display:flex;align-items:center;justify-content:center}body.cl-app-guest section.guest-art img.guest-art__img{width:auto;max-width:100%;height:100%;max-height:720px;rotate:16deg;margin-left:0}}
/* --- RTL mirror: auth docks RIGHT on desktop --- */
body[dir="rtl"].cl-app-guest section.guest-auth{margin-left:auto}
@media (min-width:992px){body[dir="rtl"].cl-app-guest section.guest-auth{margin-left:0;margin-right:clamp(8px,3vw,44px);justify-self:end}}

/* --- Short landscape phones: shrink art so the form is never pushed out --- */
@media (max-height:620px){body.cl-app-guest section.guest-art img.guest-art__img{width:min(200px,40vw)}}

/* --- Reduced motion --- */
@media (prefers-reduced-motion:reduce){body.cl-app-guest section.guest-art img.guest-art__img{animation:none}body.cl-app-guest div.welcome-page-form__header a.logo,body.cl-app-guest div.welcome-page-form__header h1{animation:none}body.cl-app-guest div.guest-bg__waves .wave,body.cl-app-guest div.guest-bg__anim div.animated-bg .sun-glow,body.cl-app-guest div.guest-bg__anim div.animated-bg .star,body.cl-app-guest div.guest-bg__anim div.animated-bg .bubble,body.cl-app-guest div.guest-bg__anim div.animated-bg .cloud,body.cl-app-guest div.guest-bg__anim div.animated-bg .bird,body.cl-app-guest div.guest-bg__anim div.animated-bg .rain-drop,body.cl-app-guest div.guest-bg__anim div.animated-bg .wave,body.cl-app-guest div.guest-bg__anim div.animated-bg .sparkle,body.cl-app-guest div.guest-bg__anim div.animated-bg .shape,body.cl-app-guest div.guest-bg__anim div.animated-bg .rings circle{animation:none}}