@import url(https://fonts.googleapis.com/css2?family=Mukta:wght@400;600;700;800&family=Roboto:wght@400;500;700&display=swap);.sd-step-demo{--sd-text:#101915;--sd-title:#132E45;--sd-blue:#397D98;--sd-light:#F1F6F9;--sd-yellow:#F5C54F;width:100%;max-width:none;margin:0;padding:0;background:#fff0;color:var(--sd-text);font-family:"Roboto",sans-serif;font-size:18px;line-height:1.5;-webkit-text-size-adjust:100%}.sd-step-demo,.sd-step-demo *,.sd-step-demo *::before,.sd-step-demo *::after{box-sizing:border-box}.sd-step-demo .ssd-symbols{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}.sd-step-demo .ssd-layout{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);grid-template-areas:"preview content";align-items:center;gap:clamp(24px, 3vw, 48px);width:100%;max-width:none;margin:0;padding:0}.sd-step-demo .ssd-preview{grid-area:preview;min-width:0}.sd-step-demo .ssd-content{grid-area:content;min-width:0}.sd-step-demo .ssd-label{margin:0 0 14px;padding:0;color:var(--sd-blue);font-family:"Mukta",sans-serif;font-size:30px;font-weight:400;font-style:normal;line-height:1.2;letter-spacing:0;text-transform:uppercase}.sd-step-demo .ssd-title{margin:0 0 16px;color:var(--sd-title);font-family:"Mukta",sans-serif;font-size:45px;font-weight:800;line-height:1.12}.sd-step-demo .ssd-description{margin:0 0 22px;color:var(--sd-text);font-size:18px;line-height:1.5}.sd-step-demo .ssd-stage{display:grid;place-items:center;width:100%;max-width:520px;aspect-ratio:1;margin:0 auto;border-radius:50%;background:rgb(57 125 152 / 8%)}.sd-step-demo .ssd-scene{grid-area:1 / 1;width:76%;min-width:0;padding:8px 0;animation:ssd-appear 320ms ease both}.sd-step-demo [hidden]{display:none!important}.sd-step-demo .ssd-card{width:100%;padding:20px;border:1px solid rgb(57 125 152 / 25%);border-radius:20px;background:#fff;box-shadow:0 12px 30px rgb(19 46 69 / 6%)}.sd-step-demo .ssd-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.sd-step-demo .ssd-icon{display:block;width:25px;height:25px;flex:0 0 25px;color:var(--sd-blue);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.sd-step-demo .ssd-card-title{margin:0 0 12px;color:var(--sd-title);font-family:"Mukta",sans-serif;font-size:25px;font-weight:700;line-height:1.2}.sd-step-demo .ssd-field{margin:0 0 9px;padding:9px 12px;border-radius:10px;background:var(--sd-light);font-size:18px;line-height:1.3}.sd-step-demo .ssd-field-label{display:block;margin-bottom:3px;color:var(--sd-blue);font-size:18px}.sd-step-demo .ssd-fake-button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:10px;background:var(--sd-yellow);color:var(--sd-title);font-size:18px;font-weight:700;text-align:center}.sd-step-demo .ssd-phone-circle{display:grid;place-items:center;width:94px;height:94px;margin:0 auto 16px;border-radius:50%;background:#fff}.sd-step-demo .ssd-phone-circle .ssd-icon{width:43px;height:43px}.sd-step-demo .ssd-contact{display:flex;align-items:center;gap:12px}.sd-step-demo .ssd-contact p,.sd-step-demo .ssd-note{margin:0;font-size:18px;line-height:1.4}.sd-step-demo .ssd-contact strong{display:block;color:var(--sd-title);font-weight:500}.sd-step-demo .ssd-contact span{color:var(--sd-blue)}.sd-step-demo .ssd-note{margin-top:14px;padding-top:12px;border-top:1px solid rgb(57 125 152 / 20%)}.sd-step-demo .ssd-check{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--sd-light)}.sd-step-demo .ssd-line{height:7px;margin:10px 0;border-radius:10px;background:rgb(57 125 152 / 15%)}.sd-step-demo .ssd-line-short{width:68%}.sd-step-demo .ssd-line-medium{width:85%}.sd-step-demo .ssd-badge{display:flex;align-items:center;gap:9px;margin-top:18px;padding:10px;border-radius:10px;background:var(--sd-light);font-size:18px;line-height:1.35}.sd-step-demo .ssd-dots{display:flex;justify-content:center;gap:0;margin:10px 0 0}.sd-step-demo .ssd-dot{display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:#fff0;cursor:pointer;appearance:none}.sd-step-demo .ssd-dot::before{content:"";width:9px;height:9px;border-radius:50%;background:rgb(57 125 152 / 30%);transition:background-color 180ms ease,transform 180ms ease}.sd-step-demo .ssd-dot[aria-pressed="true"]::before{background:var(--sd-blue);transform:scale(1.25)}.sd-step-demo .ssd-steps{display:flex;flex-direction:column;gap:10px}.sd-step-demo .ssd-step{display:block;width:100%;margin:0;padding:14px;border:1px solid #fff0;border-radius:20px;background:#fff0;color:var(--sd-text);font-family:"Roboto",sans-serif;font-size:18px;text-align:left;cursor:pointer;appearance:none;transition:background-color 180ms ease,border-color 180ms ease}.sd-step-demo .ssd-step:hover{background:rgb(241 246 249 / 65%)}.sd-step-demo .ssd-step[aria-pressed="true"]{border-color:rgb(57 125 152 / 35%);background:#fff}.sd-step-demo .ssd-step-row{display:flex;align-items:center;gap:12px}.sd-step-demo .ssd-step-circle{display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px;border-radius:50%;background:#fff;transition:background-color 180ms ease}.sd-step-demo .ssd-step[aria-pressed="true"] .ssd-step-circle{background:var(--sd-yellow)}.sd-step-demo .ssd-step-heading{flex:1;min-width:0}.sd-step-demo .ssd-number{display:block;color:var(--sd-blue);font-family:"Mukta",sans-serif;font-size:18px;line-height:1.15}.sd-step-demo .ssd-step-title{display:block;color:var(--sd-title);font-family:"Mukta",sans-serif;font-size:24px;font-weight:700;line-height:1.2}.sd-step-demo .ssd-chevron{visibility:hidden;width:19px;height:19px;flex-basis:19px}.sd-step-demo .ssd-step[aria-pressed="true"] .ssd-chevron{visibility:visible}.sd-step-demo .ssd-step-detail{display:block;margin-top:10px;font-size:18px;line-height:1.45}.sd-step-demo .ssd-step[aria-pressed="false"] .ssd-step-detail{display:none}.sd-step-demo button:focus-visible{outline:3px solid var(--sd-blue);outline-offset:3px}@keyframes ssd-appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (max-width:1024px){.sd-step-demo .ssd-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"content" "preview";gap:28px}.sd-step-demo .ssd-stage{max-width:380px}}@media (max-width:767px){.sd-step-demo .ssd-label{font-size:20px}.sd-step-demo .ssd-title{font-size:30px}}@media (max-width:480px){.sd-step-demo .ssd-stage{max-width:340px}.sd-step-demo .ssd-scene{width:84%}.sd-step-demo .ssd-card{padding:16px}.sd-step-demo .ssd-phone-circle{width:72px;height:72px;margin-bottom:12px}.sd-step-demo .ssd-phone-circle .ssd-icon{width:34px;height:34px}.sd-step-demo .ssd-step{padding:12px}.sd-step-demo .ssd-step-title{font-size:23px}}@media (prefers-reduced-motion:reduce){.sd-step-demo *,.sd-step-demo *::before{animation:none!important;transition:none!important}}