/* Explain the product and the first three steps before asking visitors to imagine it. */
.readable .intro-steps{min-width:0;position:relative;scroll-margin-top:150px}
.readable .intro-steps .start-steps{display:grid;grid-template-columns:1fr;gap:26px;margin:0;padding:0;list-style:none}
.readable .intro-steps .start-steps li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;padding:0 0 24px;border:0;border-bottom:1px solid var(--line)}
.readable .intro-steps .start-steps li:last-child{padding-bottom:0;border:0}
.readable .intro-steps .start-steps li>span{font-size:21px;color:var(--orange);padding-top:5px}
.readable .intro-steps .start-steps h3{font-size:30px;line-height:1.3;margin:0 0 10px;letter-spacing:-.8px}
.readable .intro-steps .start-steps p{font-size:21px;line-height:1.65;margin:0;color:var(--muted)}
.readable .first-example{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:65px;align-items:center}
.readable .first-example .hero-product{position:relative;min-width:0;max-width:100%;margin:0;padding:0}
.readable .first-example .example-copy{min-width:0}
.readable .first-example .example-copy>p:not(.eyebrow){font-size:24px;line-height:1.7;color:var(--muted);margin-top:25px}
.readable .first-example .example-copy>.text-link{margin-top:28px}
.readable .first-example .demo-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.readable .first-example .demo-tabs button{white-space:normal;justify-content:center}
.readable .first-example h2{overflow-wrap:anywhere}
@media(min-width:1101px){
 .readable .balanced-hero .intro-steps{position:static;grid-column:2;grid-row:3;align-self:center}
 .readable .balanced-hero h1{max-width:1100px}
}
@media(max-width:1100px){
 .readable .hero.magic-hero .intro-steps{margin-top:32px;padding-top:140px;width:100%;max-width:720px;justify-self:center}
 .readable .hero.magic-hero .intro-steps .core-art.orb-art{top:-15px;right:0;width:260px}
 .readable .first-example{grid-template-columns:1fr;gap:38px}
 .readable .first-example .hero-product{width:100%;max-width:720px;justify-self:center}
}
@media(max-width:700px){
 .readable .intro-steps .start-steps h3{font-size:27px}
 .readable .intro-steps .start-steps li{grid-template-columns:32px minmax(0,1fr);gap:10px}
 .readable .first-example .example-copy>p:not(.eyebrow){font-size:22.5px}
}