/* One screen guide: stable selector rows beside the original, unboxed app image. */
.app-carousel{margin:0;min-width:0;color:var(--body);font-family:inherit}
.app-carousel-heading{margin-bottom:24px}
.app-carousel-heading .section-heading>p{margin-top:12px}
.app-carousel-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;align-items:start;gap:96px;max-width:1040px;margin-inline:auto}
.app-carousel-copy{min-width:0}
.app-carousel-selectors{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.app-carousel button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:rgba(23,47,59,.15)}
.app-carousel button:focus-visible{outline:3px solid var(--brand-ink);outline-offset:3px}
.app-carousel-selectors button{display:flex;align-items:flex-start;gap:16px;width:100%;min-height:44px;margin:0;padding:20px;border:0;border-radius:8px;background:transparent;color:var(--body);text-align:left;text-decoration:none}
.app-carousel-selectors button[aria-current="true"]{background:#fff;color:var(--brand-ink)}
.step-number{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:#fff;color:var(--body);font-size:13px;font-weight:800;line-height:1}
[aria-current="true"] .step-number{background:var(--brand-button);color:#fff}
.step-copy{min-width:0}.step-copy strong{display:block;color:var(--ink);font-size:18px;line-height:1.5;font-weight:800}
.step-description{display:block;margin-top:4px;font-size:16px;line-height:1.75;font-weight:400}
.app-carousel-stage{min-width:0;margin:0}
.app-carousel-current-description{display:none}
.app-carousel-phone{width:min(100%,280px);margin-inline:auto;border:1px solid #142d381f;border-radius:20px;background:#fff;overflow:hidden}
.app-carousel-viewport{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--brand-ink) var(--brand-soft);-webkit-overflow-scrolling:touch;outline-offset:-4px}
.app-carousel-viewport:focus-visible{outline:3px solid var(--brand-ink);outline-offset:-4px}
.app-carousel.is-enhanced .app-carousel-viewport{scrollbar-width:none}
.app-carousel.is-enhanced .app-carousel-viewport::-webkit-scrollbar{display:none}
.app-carousel-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.app-carousel-slide img{display:block;width:100%;height:auto;max-width:100%;margin:0;user-select:none}
.app-carousel-toolbar{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:12px;max-width:280px;margin:16px auto 0}
.app-carousel [hidden]{display:none}
.app-carousel-arrow{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--brand-ink);font-size:22px!important;line-height:1}
.app-carousel-position{display:flex;align-items:center;justify-content:center;gap:12px;margin:0;text-align:center;font-size:13px;font-weight:700;line-height:1.4;color:var(--brand-ink)}
.app-carousel-position [data-carousel-count]{font-size:12px;font-weight:600;color:var(--body);font-variant-numeric:tabular-nums;white-space:nowrap}
.app-carousel-playback{display:inline-flex;align-items:center;justify-content:center;min-height:44px;flex-shrink:0;margin:8px 0 0;padding:8px 0;border:0;border-radius:4px;background:transparent;color:var(--brand-ink);font-size:14px!important;font-weight:700!important;line-height:1.5;text-decoration:none;white-space:nowrap}
.app-carousel-stage>figcaption{max-width:280px;margin:16px auto 0;font-size:13px;line-height:1.65;color:var(--body);text-align:center}
.app-carousel-fallback{margin:16px 0 0;text-align:center;font-size:14px;line-height:1.6;color:var(--body)}
.app-carousel.is-enhanced .app-carousel-fallback{display:none}
.app-carousel:not(.is-enhanced) .app-carousel-layout{display:block}.app-carousel:not(.is-enhanced) .app-carousel-stage{max-width:360px;margin-inline:auto}
.app-carousel-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Hover is not selection. Pressed feedback is color-only; focus keeps its own ring. */
@media(hover:hover){
 .app-carousel-selectors button:hover .step-copy strong{color:var(--brand-ink)}
 .app-carousel-playback:hover,.app-carousel-arrow:hover{color:#172f3b}
}
.app-carousel button:active,.app-carousel-selectors button:active .step-copy strong{color:#071e29}
@media(max-width:1050px){.app-carousel-layout{grid-template-columns:minmax(0,1fr) 320px;gap:48px}.app-carousel-selectors button{padding:16px;gap:12px}.step-copy strong{font-size:17px}}
@media(max-width:900px){.app-carousel-layout{grid-template-columns:minmax(0,1fr) 280px;gap:32px}.app-carousel-selectors button{gap:10px}}
@media(max-width:760px){
 .app-carousel-heading{margin-bottom:16px}
 .app-carousel-layout{display:block}.app-carousel-navigation{margin-bottom:20px}
 .app-carousel-selectors{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .app-carousel-selectors button{align-items:center;min-height:48px;margin:0;padding:10px 12px;gap:8px}
 .step-number{width:24px;height:24px;flex-basis:24px;font-size:12px}.step-copy strong{font-size:14px;line-height:1.4}.step-description{display:none}
 .app-carousel-stage{max-width:380px;margin-inline:auto}
 .app-carousel.is-enhanced .app-carousel-current-description{display:block;max-width:380px;min-height:112px;margin:16px auto 0;font-size:16px;line-height:1.75}
}
@media(max-width:370px){.app-carousel-selectors button{padding:10px 8px;gap:6px}.step-copy strong{font-size:13px}}
@media(prefers-reduced-motion:reduce){.app-carousel-viewport{scroll-behavior:auto}}