/* Sofia authentication: campaign-led brand panel and a focused form surface. */
html body.sfa-page { background:#eef2ed; padding:20px; color:#20352a; }
.sfa-frame { display:grid; grid-template-columns:1fr 1fr; min-height:calc(100vh - 40px); max-width:1580px; margin:auto; border:1px solid #dfe7dc; border-radius:20px; overflow:hidden; background:white; }
.sfa-story { position:relative; display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; background:var(--theme-accent,#193f36); padding:32px 40px 25px; color:#fff; overflow:hidden; }
.sfa-story-brand { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:15px; position:relative; z-index:1; }
.sfa-story-brand > span { color:#98bda6; font-size:7px; letter-spacing:1.1px; max-width:115px; line-height:1.7; text-align:end; }
.sfa-story-brand .sf-brand-image { width:174px; height:40px; }
.sfa-story-content { position:relative; padding-top:38px; }
.sfa-story-label { display:flex; align-items:center; gap:11px; font-size:8px; color:#b3cdb9; letter-spacing:1.25px; font-weight:500; }
.sfa-story-label > span { color:#d5e6ab; font-size:25px; line-height:1; }
.sfa-story h2 { font-size:clamp(36px,3.65vw,54px); line-height:1.12; font-weight:550; letter-spacing:-1.9px; margin:20px 0 20px; }
.sfa-story h2 em { font-style:normal; color:#d4e5b8; }
.sfa-story-content > p { font-size:13px; line-height:1.9; color:#b8d0c0; max-width:370px; }
.sfa-campaign-art { position:relative; height:265px; margin-top:25px; max-width:435px; }
.sfa-art-ring { position:absolute; width:250px; height:250px; border:1px solid #a4c29722; border-radius:50%; right:-8px; top:20px; }
.sfa-art-ring::before { content:''; position:absolute; inset:-20px; border:1px solid #a4c29715; border-radius:50%; }
.sfa-review-card { position:absolute; left:18px; top:10px; width:236px; border:1px solid #e1e9d8; border-radius:13px; background:#f9fcf5; box-shadow:0 15px 28px -20px #051d1870; padding:20px; transform:rotate(-6deg); display:flex; flex-direction:column; align-items:center; color:#284b34; }
.sfa-card-icon { display:grid; place-items:center; width:33px; height:33px; background:#e9f0dc; border-radius:9px; color:#8b9d60; font-size:18px; margin-bottom:12px; }
.sfa-card-label { color:#90a27d; font-size:6px; letter-spacing:1px; }
.sfa-review-card strong { font-size:15px; letter-spacing:-.45px; font-weight:600; margin-top:10px; }
.sfa-card-stars { font-size:25px; color:#b2a365; margin:9px 0 15px; }
.sfa-card-button { width:100%; padding:10px 7px; font-size:8px; text-align:center; color:white; background:#28543a; border-radius:6px; }
.sfa-booking-card { position:absolute; top:15px; right:-3px; transform:rotate(5deg); display:flex; align-items:center; gap:9px; padding:12px; background:#e5eddc; color:#37583b; border-radius:9px; border:1px solid #d5e2ca; }
.sfa-booking-icon { width:30px; height:30px; border:1px solid #bacfb0; border-radius:8px; display:grid; place-items:center; font-size:17px; }
.sfa-booking-card strong { font-size:9px; font-weight:600; }
.sfa-booking-card div > span { display:block; margin-top:5px; color:#7b916d; font-size:7px; }
.sfa-qr-card { position:absolute; right:-6px; bottom:9px; transform:rotate(5deg); display:flex; align-items:center; gap:12px; background:#f2e6cf; border:1px solid #e1d5bf; padding:16px 18px; color:#726843; border-radius:10px; }
.sfa-qr-card > i { font-size:34px; }
.sfa-qr-card > span { font-size:10px; line-height:1.6; }
.sfa-qr-card strong { font-weight:600; }
.sfa-art-caption { display:block; margin:7px 0 20px; font-size:7px; color:#9cb9a4; }
.sfa-story-bottom { border-top:1px solid #ffffff1c; display:flex; justify-content:space-between; gap:12px; padding-top:20px; color:#9bbca8; font-size:9px; line-height:1.5; }
.sfa-main { display:flex; flex-direction:column; align-items:center; background:white; padding:27px 42px 24px; min-width:0; }
.sfa-main-top { display:flex; width:100%; justify-content:space-between; align-items:center; gap:15px; }
.sfa-main-top > a { font-size:11px; color:#7a8e7b; }
.sfa-main-top button { border-radius:8px!important; height:34px; font-size:11px; }
.sfa-mobile-brand { display:none; }
.sfa-form-wrap { max-width:390px; width:100%; margin-block:auto; padding:30px 0; }
.sfa-form-emblem { display:grid; place-items:center; width:42px; height:42px; border:1px solid #dce7d8; background:#f2f7ed; color:#789065; border-radius:11px; font-size:20px; margin-bottom:20px; }
.sfa-form-wrap h1 { font-size:31px; line-height:1.2; font-weight:650; letter-spacing:-1.15px; color:#233b2a; text-align:start; }
.sfa-form-wrap > div > .text-center, .sfa-form-wrap > div > .space-y-2 { text-align:start; }
.sfa-form-wrap .lb-copy { color:#7a8d77; font-size:12px; line-height:1.85; }
.sfa-form-wrap form label { font-size:12px; font-weight:550; }
.sfa-form-wrap input:not([type=checkbox]):not([type=radio]) { height:45px; background:#fcfdfb!important; border:1px solid #dce5d7!important; border-radius:8px!important; box-shadow:none; color:#29402d; font-size:13px; }
.sfa-form-wrap input:not([type=checkbox]):not([type=radio]):focus { border-color:#86a277!important; outline:2px solid #b5caaa38; outline-offset:2px; }
.sfa-form-wrap input::placeholder { color:#a1ad98; font-size:12px; }
.sfa-form-wrap form button[type=submit] { border-radius:8px!important; min-height:45px; box-shadow:none; font-size:12px; background:var(--theme-accent); }
.sfa-form-wrap form .space-y-2\.5 { margin-top:0; }
.sfa-form-wrap form { gap:20px; }
.sfa-form-wrap a[href*="auth/login/"] { border-radius:8px!important; font-size:12px; box-shadow:none; border-color:#e0e7da; }
.sfa-form-wrap .rounded-2xl { border-radius:9px; }
.sfa-main-bottom { width:100%; display:flex; align-items:center; justify-content:space-between; gap:15px; font-size:9px; color:#91a089; padding-top:18px; }
.sfa-main-bottom > div { display:flex; gap:18px; }
.sfa-main-bottom a { color:#7e9275; }
@media(min-width:1450px) { .sfa-story { padding-inline:62px; } .sfa-story-content { padding-block:50px 25px; } .sfa-campaign-art { margin-top:35px; } }
@media(max-width:1100px) { .sfa-story { padding:28px; } .sfa-main { padding-inline:30px; } .sfa-story h2 { font-size:42px; } .sfa-story-brand > span { display:none; } .sfa-review-card { left:0; width:215px; } .sfa-booking-card { right:-10px; padding:10px; } .sfa-booking-card strong { font-size:8px; } .sfa-story-bottom { flex-direction:column; gap:6px; } .sfa-qr-card { right:-8px; padding:13px; } }
@media(max-width:850px) { html body.sfa-page { padding:12px; } .sfa-frame { grid-template-columns:.85fr 1fr; min-height:calc(100vh - 24px); } .sfa-story { padding:25px; } .sfa-main { padding:25px; } .sfa-story h2 { font-size:35px; letter-spacing:-1.4px; } .sfa-campaign-art { height:280px; } .sfa-booking-card { display:none; } .sfa-review-card { width:205px; } .sfa-qr-card { padding:11px; right:-15px; bottom:-4px; } .sfa-story-content > p { font-size:12px; } .sfa-form-wrap h1 { font-size:28px; } }
@media(max-width:640px) { html body.sfa-page { padding:0; background:white; } .sfa-frame { display:block; border:0; border-radius:0; min-height:100vh; } .sfa-story { display:none; } .sfa-main { min-height:100vh; padding:22px 25px; } .sfa-main-top { order:0; } .sfa-main-top > a { font-size:10px; } .sfa-mobile-brand { display:block; width:100%; max-width:390px; margin-top:28px; } .sfa-mobile-brand .sf-brand-image { width:165px; height:38px; } .sfa-form-wrap { padding:27px 0 30px; } .sfa-form-wrap h1 { font-size:30px; } .sfa-form-emblem { width:37px; height:37px; font-size:18px; margin-bottom:16px; } .sfa-main-bottom { margin-top:auto; } }