/* Shared approved brand: auth, the optional first visit, and order receipt. */
:root{--brand-entry-ready:1}
:root{--brand-welcome-ready:1}
.brand-logo{display:inline-flex;align-items:center;gap:11px;color:var(--accent,#225b46);font-size:31px;font-weight:750;letter-spacing:-1.2px;line-height:1}
.brand-logo>svg{width:32px;height:32px;fill:currentColor;stroke:none;flex:none}
.brand-mark{--brand-mark-size:42px;display:block;width:var(--brand-mark-size);height:var(--brand-mark-size);flex:none;object-fit:contain}
.logo .brand-mark{--brand-mark-size:32px}
.auth-entry .auth-brand .brand-mark{--brand-mark-size:42px}
.brand-entry-splash{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;background:var(--bg,#f6f7f2);color:var(--accent,#225b46);pointer-events:none;visibility:hidden;opacity:0;animation:brand-entry-lifetime 1400ms linear forwards}
.brand-splash-content{text-align:center;margin-top:-24px}
.brand-splash-logo{display:flex;flex-direction:column;align-items:center;gap:25px}
.brand-splash-logo .brand-mark{--brand-mark-size:94px}
.brand-splash-word{font-size:52px;letter-spacing:-2.4px;line-height:1;font-weight:750}
.brand-splash-caption{font-size:17px;line-height:1.5;color:var(--muted,#58675d);margin:22px 0 0}
.brand-splash-foot{position:absolute;left:20px;right:20px;bottom:calc(38px + env(safe-area-inset-bottom,0px));margin:0;text-align:center;font-size:14px;line-height:1.4;color:var(--muted,#58675d)}
.brand-splash-logo .brand-mark{animation:brand-symbol-in 700ms both}
.brand-splash-word{animation:brand-word-in 770ms 350ms both}
.brand-splash-caption{animation:brand-word-in 600ms 650ms both}
@keyframes brand-symbol-in{from{opacity:0;scale:.75;translate:0 12px}to{opacity:1;scale:1;translate:0 0}}
@keyframes brand-word-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
/* CSS also expires the decorative screen if JavaScript cleanup is interrupted. */
@keyframes brand-entry-lifetime{0%,85%{visibility:visible;opacity:1}100%{visibility:hidden;opacity:0}}
@media(prefers-reduced-motion:reduce){.brand-entry-splash,.brand-entry-splash *{animation:none!important}.brand-entry-splash{visibility:hidden;opacity:0}}
dialog:has(.brand-order-created){inset:0;margin:auto;width:calc(100% - 40px);max-width:400px;height:fit-content;max-height:88dvh;padding:32px 24px 24px;border-radius:var(--ui-corner)}
dialog:has(.brand-order-created) .dialog-head{position:absolute;top:10px;right:10px;margin:0;display:block}
dialog:has(.brand-order-created) .dialog-head .iconbtn{position:static;width:44px;height:44px;background:transparent;border-color:transparent}
.brand-order-created{text-align:center}
.brand-order-created .brand-logo{font-size:27px;gap:9px;margin:0 auto 24px}
.brand-order-created .brand-mark{--brand-mark-size:32px}
.brand-order-created #dialog-title{font-size:27px;line-height:1.2;letter-spacing:-.7px;font-weight:700;margin:0;overflow-wrap:anywhere}
.brand-order-created>p.brand-created-description{font-size:16px;line-height:1.5;margin:13px 0 23px;color:var(--muted)}
.brand-order-created .primary,.brand-order-created .secondary{font-size:16px;min-height:54px;border-radius:var(--ui-corner);line-height:1.35;padding:12px 14px;gap:10px}
.brand-order-created .secondary{margin-top:10px}
.brand-order-created>p.brand-created-note{font-size:13px;line-height:1.5;color:var(--muted);margin:16px 0 0}
.large-text .brand-order-created #dialog-title{font-size:30px}
.large-text .brand-order-created>p.brand-created-description,.large-text .brand-order-created .primary,.large-text .brand-order-created .secondary{font-size:18px}
.large-text .brand-order-created>p.brand-created-note{font-size:16px}
@media(max-width:360px){dialog:has(.brand-order-created){padding-inline:18px}.brand-order-created #dialog-title{font-size:25px}.large-text .brand-order-created #dialog-title{font-size:28px}}

/* A short, readable first visit. Motion introduces content; never times it out. */
dialog.welcome-dialog{position:fixed;inset:0;width:calc(100% - 32px);max-width:430px;max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));height:fit-content;min-height:0;margin:auto;padding:18px 22px 22px;border:1px solid var(--line,#d9e3eb);border-radius:var(--ui-corner,18px);background:var(--surface,#fff);color:var(--ink,#23394b);box-shadow:0 18px 70px #102c4826;overflow:auto;overscroll-behavior:contain}
dialog.welcome-dialog::backdrop{background:rgb(13 30 44 / .38);backdrop-filter:none;-webkit-backdrop-filter:none}
dialog.welcome-dialog:focus{outline:none}
.welcome-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.welcome-language{min-width:0;max-width:calc(100% - 56px)}
.welcome-close{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:10px;border:0;background:transparent;color:inherit;border-radius:var(--ui-corner,18px);cursor:pointer}
.welcome-close svg{width:24px;height:24px}
.welcome-intro{text-align:center}
.welcome-brand{display:flex;justify-content:center;margin:4px 0 20px}
.welcome-brand .brand-logo{font-size:29px}
.welcome-brand .brand-mark{--brand-mark-size:45px;animation:welcome-mark-in 550ms ease-out both}
.welcome-intro h1{font-size:27px;line-height:1.15;letter-spacing:-.6px;margin:0 0 10px;overflow-wrap:anywhere}
.welcome-intro p{font-size:15px;line-height:1.45;color:var(--muted,#596d7c);margin:0 auto;max-width:330px}
.welcome-steps{list-style:none;display:grid;gap:18px;padding:0;margin:26px 0}
.welcome-steps li{display:flex;gap:13px;align-items:flex-start;animation:welcome-copy-in 420ms ease-out both}
.welcome-steps li:nth-child(2){animation-delay:90ms}.welcome-steps li:nth-child(3){animation-delay:180ms}
.welcome-step-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:var(--ui-corner,14px);background:var(--accent-soft,#e7f0f8);color:var(--accent,#285f88)}
.welcome-step-icon svg{width:24px;height:24px}
.welcome-steps li>div{min-width:0}
.welcome-steps h2{font-size:17px;line-height:1.3;margin:0 0 4px;letter-spacing:0;overflow-wrap:anywhere}
.welcome-steps p{font-size:14px;line-height:1.45;margin:0;color:var(--muted,#596d7c);overflow-wrap:anywhere}
.welcome-start{width:100%;min-height:48px;font-size:17px;line-height:1.3;border-radius:var(--ui-corner,18px)}
.large-text .welcome-intro h1{font-size:29px}.large-text .welcome-intro p,.large-text .welcome-steps p{font-size:17px}.large-text .welcome-steps h2,.large-text .welcome-start{font-size:19px}
@keyframes welcome-mark-in{from{opacity:0;transform:translateY(6px) scale(.88)}to{opacity:1;transform:none}}
@keyframes welcome-copy-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:360px){dialog.welcome-dialog{width:calc(100% - 24px);padding:12px 16px 18px}.welcome-intro h1{font-size:24px}.welcome-steps{gap:16px;margin:20px 0}}
@media(prefers-reduced-motion:reduce){.welcome-dialog *{animation:none!important;transition:none!important}}