/* Homepage-only example, using the existing MGO palette and type. */
.homepage-example{max-width:1000px;margin:30px auto 0;scroll-margin-top:120px;border:1px solid var(--glass-edge,var(--line-strong));border-radius:22px;overflow:hidden;background:var(--glass-surface),var(--surface-800);box-shadow:var(--glass-shadow)}
.homepage-example figcaption{display:flex;justify-content:space-between;gap:16px;padding:16px 24px;border-bottom:1px solid var(--line);color:var(--signal-200);font-size:12px;font-weight:600}
.homepage-example figcaption span{font-weight:400;color:var(--text-60)}
.homepage-example-steps{display:grid;grid-template-columns:1fr 1.4fr 1fr}
.homepage-example-steps>div{padding:24px;min-width:0}
.homepage-example-steps>div+div{border-left:1px solid var(--line)}
.homepage-example .example-step{font-family:var(--mono);font-size:11px;color:var(--text-60)}
.homepage-example p{margin:12px 0 0;color:var(--text-100);font-size:16px;line-height:1.6}
@media(max-width:640px){.homepage-example figcaption{flex-direction:column;gap:4px;padding:16px 20px}.homepage-example-steps{grid-template-columns:1fr}.homepage-example-steps>div{padding:20px}.homepage-example-steps>div+div{border-left:0;border-top:1px solid var(--line)}.homepage-example p{font-size:15px;margin-top:8px}}