/* Shisen layout with Aoo artwork and the Flutter app brand purple. */
.hero-art:before{background-image:url('/assets/shadowing-backdrop-light.svg')}
.screen-preview{display:block;width:100%;height:100%;object-fit:contain}
.learning-nav{letter-spacing:-.03em;color:#777}
.learning-nav a:hover{color:#111}
.learning-nav span{color:#111}
@media(max-width:740px){.learning-header .brand{font-size:16px}.learning-header .learning-nav{font-size:12px;gap:16px}}


:root{--brand-accent:#b478ff;--brand-accent-hover:#a660f5;--brand-focus:#783bc0}
.outcome-copy mark,.vocabulary-inner mark,.vocabulary-arrow,.free-trial-button,.start-now-button{background:var(--brand-accent)}
.free-trial-button:hover,.start-now-button:hover{background:var(--brand-accent-hover)}
.metric-card strong,.recommended-check,.review-stars{color:var(--brand-accent)}
.start-now-button{box-shadow:0 10px 36px #b478ff33}
a:focus-visible,button:focus-visible,summary:focus-visible{outline-color:var(--brand-focus)}
.app-download-button:focus-visible,.download-modal-close:focus-visible{outline-color:var(--brand-accent)}
.benefits-intro img,.download-modal-card>img{border-radius:24%}

/* Supporting hero copy keeps the existing desktop/mobile composition. */
.hero-description{margin:0;font-size:18px;line-height:1.7;letter-spacing:-.03em;color:#555;word-break:keep-all}
.hero-copy .app-label{white-space:normal;height:auto;gap:12px;line-height:1.5}
.benefit-copy h3{word-break:keep-all}
@media(max-width:740px){.hero-description{font-size:14px;margin:0 0 20px}.hero-copy .app-label{font-size:14px}.hero{height:auto;min-height:calc(100svh - 90px);gap:28px;padding:40px 0}.hero-art{min-height:330px}}

/* Keep the screenshot untouched and reserve bezel space above the app toolbar. */
.real-app-phone{padding-top:26px;background:#000}
.real-app-phone img{display:block;width:100%;height:auto}

.video-phone.real-app-phone{height:auto;aspect-ratio:auto}.video-phone.real-app-phone .screen-preview{height:auto;object-fit:contain}

/* Preserve the complete three-panel artwork; stack readable panels on phones. */
.shadowing-comic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1400px;margin:auto}
.shadowing-comic-panel{margin:0;overflow:hidden;aspect-ratio:1;clip-path:inset(0 2%)}
.shadowing-comic-panel img{display:block;width:300%;max-width:none;height:auto}
.shadowing-comic-panel:nth-child(2) img{transform:translateX(-33.333333%)}
.shadowing-comic-panel:nth-child(3) img{transform:translateX(-66.666667%)}
@media(max-width:740px){.shadowing-comic{grid-template-columns:1fr;gap:24px;max-width:480px}}

/* Store availability is shown explicitly until the iOS release is approved. */
.download-stores{display:grid;gap:12px;width:100%}
.store-link{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:16px;background:#111;color:#fff;text-decoration:none;text-align:left}
.store-link img{width:28px;height:28px;object-fit:contain}
.store-link span{display:grid;gap:4px}.store-link strong{font-size:18px}.store-link small{font-size:13px;color:#ddd}
a.store-link:hover{background:#333}.store-link-pending{background:#eee;color:#777}.store-link-pending img{filter:brightness(0);opacity:.4}.store-link-pending small{color:#777}