/* Hallmark · shape: focused dialog · theme: Kayvia locked brand · signature: one workspace for your next skill · v2.0.0 */
/* Critique: a branded introduction balances a readable action panel; dismissal stays visible. */
:root{--sms-navy:#081b35;--sms-lime:#c6f46b;--sms-white:#f8fbff;--sms-paper:#fffefa;--sms-ink:#0a2a36;--sms-muted:#53676b;--sms-on-dark:#d8e4ec;--sms-overlay:#031125bb;--sms-focus:#a77b20;--sms-border:#d9dfd2;--sms-dark-line:#ffffff29;--sms-shadow:#00000055;--sms-ease:cubic-bezier(.2,0,0,1);--sms-exit-ease:cubic-bezier(.4,0,1,1);--sms-body:var(--product-font-body,'Plus Jakarta Sans',system-ui,sans-serif)}
html,body{overflow-x:clip}
.sms-promotion{box-sizing:border-box;width:min(800px,calc(100% - 32px));max-height:calc(100dvh - 40px);overflow:visible;margin:auto;border:0;border-radius:24px;padding:0;color:var(--sms-ink);background:var(--sms-paper);box-shadow:0 28px 90px var(--sms-shadow);text-align:left;font-family:var(--sms-body)}
.sms-promotion *{box-sizing:border-box}
.sms-promotion::backdrop{background:var(--sms-overlay)}
.sms-promotion[open]{animation:sms-dialog-enter 400ms var(--sms-ease) both}
.sms-promotion[open][data-closing]{animation:sms-dialog-exit 160ms var(--sms-exit-ease) both}
.sms-promotion-shell{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);max-height:calc(100dvh - 42px);overflow-y:auto;border-radius:inherit;min-width:0}
.sms-promotion-brand{padding:36px 28px;color:var(--sms-white);background:var(--sms-navy);min-width:0}
.sms-promotion-logo{display:block;width:80px;height:80px;object-fit:contain;border-radius:50%;background:var(--sms-white);margin:0 0 20px}
.sms-promotion .sms-promotion-brand-name{margin:0 0 32px;color:var(--sms-white);font-size:18px;font-weight:750;line-height:1.5}
.sms-promotion-steps{display:grid;gap:24px;list-style:none;margin:0;padding:0;counter-reset:sms-step}
.sms-promotion-steps li{display:flex;align-items:flex-start;gap:12px;counter-increment:sms-step;min-width:0}
.sms-promotion-steps li::before{content:counter(sms-step);display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border:1px solid var(--sms-dark-line);border-radius:50%;color:var(--sms-lime);font-size:14px;line-height:1}
.sms-promotion-steps strong{display:block;color:var(--sms-white);font-size:16px;font-weight:750;line-height:1.5}
.sms-promotion .sms-promotion-steps p{margin:8px 0 0;color:var(--sms-on-dark);font-size:15px;line-height:1.65}
.sms-promotion-main{padding:56px 32px 32px;min-width:0}
.sms-promotion h2{font-size:clamp(27px,4vw,34px);font-weight:750;line-height:1.24;margin:0 0 20px;color:var(--sms-ink);overflow-wrap:break-word;min-width:0;text-wrap:balance}
.sms-promotion p{font-size:16px;line-height:1.75;margin:0 0 20px;color:var(--sms-ink)}
.sms-promotion .sms-promotion-note{font-size:15px;color:var(--sms-muted);line-height:1.75;margin-bottom:24px}
.sms-promotion-close{position:absolute;z-index:3;right:12px;top:12px;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:1px solid var(--sms-border);border-radius:50%;background:var(--sms-paper);color:var(--sms-ink);font:inherit;font-size:28px;line-height:1;cursor:pointer;transition:transform 100ms var(--sms-ease),background-color 100ms var(--sms-ease)}
.sms-promotion-close:hover{background:var(--sms-lime)}
.sms-promotion-close:active{transform:scale(.96)}
.sms-promotion-action{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;max-width:100%;padding:12px 24px;border:1px solid var(--sms-lime);border-radius:12px;background:var(--sms-lime);color:var(--sms-navy)!important;font-size:16px;font-weight:800;line-height:1.5;text-decoration:none!important;text-align:center;transition:transform 100ms var(--sms-ease),box-shadow 100ms var(--sms-ease)}
.sms-promotion-action svg{width:20px;height:20px;flex-shrink:0}
.sms-promotion-action:hover{transform:translateY(-2px);box-shadow:0 6px 18px var(--sms-shadow)}
.sms-promotion-action:active{transform:translateY(1px)}
.sms-promotion :focus-visible{outline:3px solid var(--sms-focus);outline-offset:4px}
.sms-promotion .sms-promotion-foot{margin:20px 0 0;padding-top:20px;border-top:1px solid var(--sms-border);font-size:15px;color:var(--sms-muted);line-height:1.7}
.sms-promotion[open] .sms-promotion-main{animation:sms-content-enter 350ms 80ms var(--sms-ease) both}
.sms-promotion[open] .sms-promotion-steps li{animation:sms-content-enter 320ms var(--sms-ease) both}
.sms-promotion-steps li:nth-child(2){animation-delay:80ms}.sms-promotion-steps li:nth-child(3){animation-delay:140ms}
@keyframes sms-dialog-enter{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sms-dialog-exit{to{opacity:0;transform:translateY(8px) scale(.99)}}
@keyframes sms-content-enter{from{opacity:.65;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:680px){.sms-promotion-shell{grid-template-columns:minmax(0,1fr)}.sms-promotion-brand{padding:24px 68px 24px 24px;display:flex;align-items:center;gap:16px}.sms-promotion-logo{width:58px;height:58px;flex:0 0 58px;margin:0}.sms-promotion .sms-promotion-brand-name{margin:0;font-size:17px}.sms-promotion-steps{display:none}.sms-promotion-main{padding:28px 24px}.sms-promotion-action{width:100%}.sms-promotion h2{font-size:28px}}
@media(max-width:350px){.sms-promotion{width:calc(100% - 20px);border-radius:20px}.sms-promotion-main{padding:24px 20px}.sms-promotion-brand{padding-left:20px;gap:12px}.sms-promotion h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){.sms-promotion[open],.sms-promotion[open][data-closing],.sms-promotion[open] .sms-promotion-main,.sms-promotion[open] .sms-promotion-steps li{animation:none}.sms-promotion-action,.sms-promotion-close{transition:none}.sms-promotion-action:hover,.sms-promotion-close:active{transform:none}}