/* Three-step product explanation, scoped independently from the Hero. */
.steps-section { position: relative; isolation: isolate; overflow: hidden; padding: 45px 28px 0; margin: 4px 0 28px; border: 1px solid #e4dcf5; border-radius: 28px; color: #0b0c16; background: radial-gradient(ellipse at 50% 0%,#e7dcff85,transparent 55%),linear-gradient(140deg,#fbfaff,#f5f2fc 60%,#fbfaff); box-shadow: inset 0 1px #fff,0 18px 45px #61429207; }
.steps-section::before { content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: linear-gradient(90deg,transparent,#a786ef90,transparent); }
.steps-heading > p { display: inline-block; padding: 8px 15px; border-radius: 30px; border: 1px solid #dac9fb; background: #ffffff90; }
.steps-card { background: #ffffffb8; border-color: #e5def2; box-shadow: 0 7px 22px #44326406; }
.steps-heading { text-align: center; margin-bottom: 49px; }
.steps-heading > p { margin: 0 0 23px; color: #7040ff; font-size: 14px; font-weight: 600; letter-spacing: 4px; }
.steps-heading h2 { font-size: clamp(32px,3.5vw,52px); line-height: 1.2; margin: 0 0 15px; letter-spacing: -1.8px; font-weight: 750; }
.steps-heading h2 span { color: #7444f7; }
.steps-heading > div { font-size: 23px; color: #56566b; letter-spacing: -.6px; }
.steps-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; }
.steps-card { padding: 25px 34px 34px; position: relative; border: 1px solid #e9e4fb; border-radius: 19px; background: linear-gradient(130deg,#fdfcff,#faf9ff); box-shadow: 0 12px 30px #6043a805; transition: transform .25s, box-shadow .25s; }
.steps-card:hover { transform: translateY(-5px); box-shadow: 0 18px 35px #6043a810; }
.steps-panel { pointer-events: none; user-select: none; }
.steps-card:not(:last-child)::after { content: '→'; position: absolute; right: -28px; top: 48%; color: #7143ff; font-size: 30px; z-index: 2; }
.steps-number { display: inline-grid; place-items: center; width: 49px; height: 37px; border-radius: 12px; background: #eee8ff; color: #7444ff; font-size: 17px; font-weight: 600; }
.steps-card h3 { margin: 15px 0 10px; font-size: 27px; line-height: 1.2; letter-spacing: -.9px; }
.steps-card > p { margin: 0; color: #56566b; font-size: 18px; line-height: 1.5; letter-spacing: -.35px; min-height: 54px; }
.steps-panel { margin-top: 24px; min-height: 307px; border: 1px solid #e5e0f4; border-radius: 15px; background: #fff; box-shadow: 0 9px 22px #67549b08; overflow: hidden; }
.steps-create { padding: 25px; }
.steps-create h4 { margin: 0 0 22px; font-size: 20px; letter-spacing: -.6px; }
.steps-create label { display: block; margin-bottom: 10px; color: #646277; font-size: 15px; }
.steps-create input,.steps-copy input { width: 100%; min-width: 0; height: 46px; border: 1px solid #dcd8eb; border-radius: 9px; padding: 0 13px; color: #24232c; background: #fff; font-size: 15px; }
.steps-save { display: flex; gap: 12px; align-items: center; height: 49px; padding: 0 13px; margin: 15px 0; border: 1px solid #ded9eb; border-radius: 9px; font-size: 14px; color: #75748a; }
.steps-save b { font-weight: 400; color: #282730; }.steps-save > span:last-child { margin-left: auto; }
.steps-folder-icon { display: inline-block; flex: 0 0 25px; height: 19px; border-radius: 3px; position: relative; background: linear-gradient(#7bd4ff,#36b8fb); box-shadow: inset 0 1px #b9edff; }
.steps-folder-icon::before { content: ''; position: absolute; left: 0; top: -4px; width: 11px; height: 5px; background: #38b3f6; border-radius: 3px 4px 0 0; }
.steps-create button,.steps-copy button { height: 49px; width: 100%; border: 0; border-radius: 10px; background: linear-gradient(120deg,#9160ff,#6b40fa); color: #fff; font-size: 16px; transition: filter .2s, transform .2s; }
.steps-create button:hover,.steps-copy button:hover { filter: brightness(1.06); }.steps-create button:active,.steps-copy button:active { transform: scale(.98); }
.steps-share { padding: 22px 20px 16px; }
.steps-share > p { display: flex; align-items: center; gap: 12px; margin: 0 0 13px; color: #454457; font-size: 15px; }.steps-share > p span { color: #7644ff; font-size: 25px; line-height: 20px; }
.steps-copy { display: flex; gap: 8px; }.steps-copy input { height: 40px; font-size: 12px; padding: 0 10px; }.steps-copy button { width: 92px; flex-shrink: 0; height: 40px; border-radius: 8px; font-size: 14px; }
.steps-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 22px; height: 113px; }.steps-photos img { width: 100%; height: 113px; object-fit: cover; border-radius: 9px; }.steps-photos > div { position: relative; }.steps-photos small { position: absolute; bottom: 8px; right: 9px; color: #fff; font-size: 12px; }.steps-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: #0009; color: #fff; font-size: 14px; }
.steps-ready { display: grid; justify-items: center; gap: 4px; margin-top: 14px; font-size: 13px; color: #8a87a1; }.steps-ready span { font-size: 26px; line-height: 25px; }
.steps-mac { background: #fdfefe; }
.steps-traffic { display: flex; gap: 7px; align-items: center; height: 35px; padding: 0 16px; border-bottom: 1px solid #eae7ef; background: linear-gradient(#f8f8fa,#f1f1f4); }.steps-traffic i { width: 13px; height: 13px; border-radius: 50%; background: #ff615a; border: 1px solid #0001; }.steps-traffic i:nth-child(2) { background: #ffbe2f; }.steps-traffic i:nth-child(3) { background: #25c740; }
.steps-toolbar { display: flex; align-items: center; gap: 12px; height: 51px; padding-inline: 18px; border-bottom: 1px solid #eeeaf3; font-size: 15px; }.steps-toolbar > span { color: #b0aec1; font-size: 26px; }.steps-toolbar b { font-weight: 600; }
.steps-files { padding: 0 25px; }.steps-files > div { display: flex; align-items: center; gap: 13px; height: 78px; font-size: 14px; }.steps-files > div + div { border-top: 1px solid #eceaf1; }.steps-files img { width: 57px; height: 55px; object-fit: cover; border-radius: 6px; }.steps-files b,.steps-synced b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #2bbc55; color: white; font-weight: 400; }.steps-files b { margin-left: auto; }
.steps-synced { display: flex; justify-content: center; align-items: center; gap: 12px; height: 47px; margin: 10px 16px 15px; border-radius: 9px; background: #e8f8ef; color: #187335; font-size: 14px; }
.steps-agent { display: flex; align-items: center; justify-content: center; gap: 15px; margin: 48px 0 34px; color: #606077; font-size: 17px; letter-spacing: -.3px; }.steps-agent span { font-size: 32px; line-height: 25px; }
.steps-bottom { border-top: 1px solid #e3e1ed; padding: 29px 0 36px; text-align: center; }.steps-bottom a { color: #713fff; font-size: 16px; }.steps-bottom a span { margin-left: 8px; }
.steps-section :focus-visible { outline: 3px solid #b99aff; outline-offset: 3px; }
@media(max-width:1250px) { .steps-card { padding: 23px; }.steps-card h3 { font-size: 23px; }.steps-card > p { font-size: 16px; }.steps-card > p br { display: none; }.steps-create { padding: 20px; }.steps-share { padding: 20px 13px; }.steps-copy { flex-wrap: wrap; }.steps-copy button { width: 100%; }.steps-panel { min-height: 350px; }.steps-toolbar { gap: 8px; font-size: 13px; }.steps-files { padding: 0 15px; }.steps-files > div { gap: 8px; font-size: 12px; } }
@media(max-width:900px) { .steps-grid { grid-template-columns: 1fr; max-width: 460px; margin: auto; gap: 30px; }.steps-panel { min-height: 307px; }.steps-card:not(:last-child)::after { content: '↓'; top: auto; bottom: -30px; right: calc(50% - 12px); }.steps-heading > div { font-size: 18px; }.steps-heading h2 { font-size: 36px; }.steps-copy { flex-wrap: nowrap; }.steps-copy button { width: 92px; }.steps-card h3 { font-size: 27px; }.steps-card > p { font-size: 18px; }.steps-agent { text-align: center; font-size: 14px; line-height: 1.6; }.steps-agent span { flex-shrink: 0; }.steps-section { padding-top: 40px; } }
@media(prefers-reduced-motion:reduce) { .steps-card,.steps-create button,.steps-copy button { transition: none; } }
@media(max-width:1250px) { .steps-card > p br { display: initial; } }
.steps-card { background: #ffffffb8; border-color: #e5def2; box-shadow: 0 7px 22px #44326406; }
@media(max-width:700px) { .steps-section { padding: 30px 14px 0; border-radius: 21px; }.steps-heading { margin-bottom: 30px; }.steps-heading h2 { font-size: 29px; letter-spacing: -1px; }.steps-heading > div { font-size: 16px; }.steps-card { padding: 22px 18px; }.steps-agent { margin-top: 30px; } }
.steps-share > p svg { display: block; width: 20px; height: 20px; }
.steps-agent svg { display: block; width: 29px; height: 25px; }