/* ============================================================
   LingoNews: animated app showcase (fills the page's ad slots)
   ------------------------------------------------------------
   Two variants from scripts/lib/page-chrome.js renderAppShowcase():
     .asc-phone   a phone walking through the LingoNews method on the
                  app's real screens (article sidebar; in-article on
                  narrow screens). The screen is laid out at the app's
                  own size, 360x740, and scaled by --asc-s.
     .asc-banner  a slim strip: Elliot, the same benefit lines, store
                  buttons (the top slot on news and article pages)
   js/app-showcase.js sets data-scene (0 read, 1 listen, 2 collect,
   3 Word Catch, 4 Flashcards) and .is-on on the caption; each scene's
   motion runs from that. With reduced motion the scenes still change
   but nothing inside them moves.
   ============================================================ */

.app-showcase {
  --asc-navy: #1B3A5C;
  --asc-navy-deep: #14293F;
  --asc-ochre: #EB984E;
  --asc-ochre-text: #B4611A;
  --asc-tuscan: #FAD6A5;
  --asc-page: #FCE9CF;
  --asc-muted: #4F6176;
  --asc-green: #2E8B57;
  font-family: var(--font-sans);
  /* Reset what the article body sets (serif, justified, tall lines),
     since the in-article phone sits inside it. */
  line-height: 1.4;
  text-align: center;
  font-weight: 400;
}

/* ---------- store buttons (both variants) ---------- */
.asc-stores { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.asc-store {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--asc-navy-deep); color: #fff;
  border-radius: 10px; padding: 7px 12px;
  font-size: 0.8rem; font-weight: 700; text-decoration: none;
  transition: transform .15s ease, background-color .15s ease;
}
.asc-store:hover { background: var(--asc-navy); transform: translateY(-1px); text-decoration: none; }
.app-showcase .asc-store svg { width: 17px; height: 17px; min-width: 17px; fill: #fff; flex: none; }

/* ---------- captions (both variants) ---------- */
.asc-caption { position: relative; display: block; margin: 0; }
.asc-cap {
  display: block;
  position: absolute; inset: 0 0 auto 0;
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
}
.asc-cap.is-on { position: relative; opacity: 1; transform: none; }

/* ============================================================
   Banner
   ============================================================ */
.asc-banner {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  width: 100%; min-height: 90px;
  padding: 8px 20px;
  background: linear-gradient(90deg, var(--asc-tuscan), var(--asc-page) 55%, var(--asc-tuscan));
  border-bottom: 1px solid rgba(27, 58, 92, 0.1);
  box-sizing: border-box;
  overflow: hidden;
}
.asc-banner-elliot { width: 54px; height: auto; flex: none; margin-bottom: -8px; align-self: flex-end; }
.asc-banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: start; }
.asc-banner-title {
  font-family: var(--font-serif); font-weight: 900; color: var(--asc-navy);
  font-size: 0.95rem; line-height: 1.25;
}
.asc-banner-title em { font-style: normal; font-family: var(--font-sans); font-weight: 700; color: var(--asc-ochre-text); font-size: 0.82rem; }
.asc-banner .asc-caption { color: var(--asc-navy); font-size: 1.05rem; font-weight: 600; min-height: 1.5em; }
.asc-banner .asc-cap::before { content: "→ "; color: var(--asc-ochre-text); font-weight: 800; }
[dir="rtl"] .asc-banner .asc-cap::before { content: "← "; }
.asc-banner .asc-stores { flex: none; }

@media (max-width: 640px) {
  .asc-banner { gap: 10px; padding: 6px 12px; min-height: 76px; }
  .asc-banner-elliot { width: 44px; }
  .asc-banner-title { font-size: 0.82rem; }
  .asc-banner-title em { display: none; }
  .asc-banner .asc-caption { font-size: 0.9rem; }
  .asc-banner .asc-store span { display: none; }
  .asc-banner .asc-store { padding: 9px; border-radius: 50%; }
  .asc-banner .asc-stores { flex-direction: column; gap: 5px; }
}

/* ============================================================
   Phone
   ============================================================ */
.asc-phone {
  --asc-s: .68;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 18px 12px 20px;
  background: linear-gradient(180deg, var(--asc-tuscan), var(--asc-page));
  border-radius: var(--radius, 16px);
}
.asc-inline { --asc-s: .8; margin: 1.6em 0; }
@media (max-width: 380px) { .asc-inline { --asc-s: .72; } }
.asc-title { margin: 0; font-family: var(--font-serif); font-weight: 900; color: var(--asc-navy); font-size: 1.05rem; }
.asc-phone .asc-caption { color: var(--asc-navy); font-weight: 700; font-size: 1rem; line-height: 1.35; min-height: 2.7em; max-width: 270px; }
.asc-dots { display: flex; gap: 6px; }
.asc-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(27, 58, 92, .25); transition: all .3s ease; }
.asc-dots i.is-on { width: 18px; border-radius: 3px; background: var(--asc-ochre); }

.asc-device {
  padding: 8px; background: #0f1d2e; border-radius: 38px; flex: none;
  box-shadow: 0 18px 40px rgba(20, 41, 63, .28), inset 0 0 0 2px #2a3d55;
}
.asc-viewport {
  position: relative; overflow: hidden; border-radius: 30px; background: #fff;
  width: calc(360px * var(--asc-s)); height: calc(740px * var(--asc-s));
}
.asc-screen {
  position: absolute; top: 0; left: 0; width: 360px; height: 740px;
  transform: scale(var(--asc-s)); transform-origin: 0 0;
  text-align: left; color: #37475a; font-family: Roboto, var(--font-sans);
  line-height: 1.3; overflow: hidden;
}
.asc-screen svg { display: block; }

/* layers: the article (scenes 0-2), Word Catch (3), Flashcards (4) */
.asc-article, .asc-layer { position: absolute; inset: 0; transition: opacity .5s ease; }
.asc-layer { opacity: 0; }
.asc-phone[data-scene="3"] .asc-game, .asc-phone[data-scene="4"] .asc-fc { opacity: 1; }
.asc-phone[data-scene="3"] .asc-article, .asc-phone[data-scene="4"] .asc-article { opacity: 0; }

/* ---------- the article ---------- */
.asc-scroll { position: absolute; left: 0; right: 0; top: 0; transition: transform .8s ease; }
.asc-phone[data-scene="0"] .asc-scroll { animation: asc-scroll 5.2s cubic-bezier(.45, 0, .3, 1) both; }
.asc-phone[data-scene="1"] .asc-scroll, .asc-phone[data-scene="2"] .asc-scroll { transform: translateY(-318px); }
@keyframes asc-scroll { 0%, 18% { transform: none; } 72%, 100% { transform: translateY(-318px); } }
.asc-hero { width: 360px; height: 209px; object-fit: cover; display: block; }
.asc-body { padding: 16px 18px 0; }
.asc-cat {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px; border-radius: 10px;
  background: rgba(226, 145, 75, .10); border: 1px solid rgba(226, 145, 75, .35);
  color: var(--asc-navy); font-size: 11px; font-weight: 700; letter-spacing: 1.3px;
}
.asc-cat i { width: 7px; height: 7px; border-radius: 50%; background: #E2914B; box-shadow: 0 0 6px rgba(226, 145, 75, .8); }
.asc-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.asc-vault {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 12px;
  border-radius: 20px; background: #E9983F; color: #fff; font-weight: 700; font-size: 15px;
}
.asc-vault svg { width: 20px; height: 20px; }
.asc-icons { display: flex; gap: 16px; color: #2a2f36; }
.asc-icons svg { width: 24px; height: 24px; }
.asc-meta { display: flex; align-items: center; gap: 6px; margin: 16px 0 0; font-size: 14px; color: #5d6470; }
.asc-meta span { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; }
.asc-meta svg { width: 17px; height: 17px; color: #8a8f98; }
.asc-headline { margin: 12px 0 0; font-size: 23px; line-height: 1.3; font-weight: 800; color: #16181c; font-family: Roboto, var(--font-sans); }
.asc-headline::after { content: ""; display: block; width: 90px; height: 3px; background: #0d4f7a; margin-top: 12px; }
.asc-text + .asc-text { margin-top: 6px; }
.asc-text {
  margin: 18px 0 0; font-family: var(--font-serif); font-size: 17px; line-height: 2.55;
  color: #3c4a5a; text-align: left;
}
.asc-g {
  position: relative; display: inline-block; line-height: 1.25;
  border: 1px solid #efe4d6; border-radius: 8px; padding: 2px 5px; background: #fff;
}
.asc-g b { font-weight: 900; color: #15191e; }
.asc-g i {
  position: absolute; left: 50%; bottom: calc(100% - 1px); transform: translateX(-50%);
  white-space: nowrap; font-size: 12.5px; color: #B8702F; font-family: var(--font-serif);
}
.asc-pill i {
  font-style: normal; font-family: Roboto, var(--font-sans); font-weight: 700; font-size: 11.5px;
  background: #E9983F; color: #fff; border-radius: 6px; padding: 1px 6px; bottom: calc(100% - 3px);
}
.asc-grp { border-radius: 14px; padding: 3px 0; }
.asc-phone[data-scene="1"] .asc-grp { animation: asc-hl .72s ease calc(.9s + var(--i) * .62s) both; }
@keyframes asc-hl {
  0% { background: rgba(250, 214, 185, 0); }
  15%, 80% { background: rgba(250, 214, 185, .9); box-shadow: 0 0 0 4px rgba(250, 214, 185, .9); }
  100% { background: rgba(250, 214, 185, 0); box-shadow: none; }
}

/* ring: the words caught so far */
.asc-ring {
  position: absolute; right: 16px; bottom: 16px; width: 66px; height: 66px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #25476d, #122A45 75%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .3); transition: bottom .6s cubic-bezier(.34, 1.3, .64, 1);
}
.asc-phone[data-scene="1"] .asc-ring, .asc-phone[data-scene="2"] .asc-ring { bottom: 104px; }
.asc-ring i {
  position: absolute; inset: 6px; border-radius: 50%; border: 5px solid rgba(255, 255, 255, .16);
  clip-path: polygon(50% 50%, 56% 0, 100% 0, 100% 34%);
}
.asc-ring i:nth-child(2) { transform: rotate(72deg); }
.asc-ring i:nth-child(3) { transform: rotate(144deg); }
.asc-ring i:nth-child(4) { transform: rotate(216deg); }
.asc-ring i:nth-child(5) { transform: rotate(288deg); }
.asc-ring i:nth-child(-n+3) { border-color: #E2914B; }
.asc-n { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 900 22px/1 var(--font-serif); }
.asc-n em { grid-area: 1 / 1; font-style: normal; }
.asc-n em + em { opacity: 0; }
.asc-phone[data-scene="2"] .asc-ring i:nth-child(4) { animation: asc-seg 5.2s ease both; }
.asc-phone[data-scene="2"] .asc-ring i:nth-child(5) { animation: asc-seg2 5.2s ease both; }
.asc-phone[data-scene="2"] .asc-n em:nth-child(1) { animation: asc-n1 5.2s both; }
.asc-phone[data-scene="2"] .asc-n em:nth-child(2) { animation: asc-n2 5.2s both; }
.asc-phone[data-scene="2"] .asc-n em:nth-child(3) { animation: asc-n3 5.2s both; }
.asc-phone[data-scene="2"] .asc-ring { animation: asc-pop 5.2s ease both; }
@keyframes asc-seg { 0%, 33% { border-color: rgba(255, 255, 255, .16); } 35%, 100% { border-color: #E2914B; } }
@keyframes asc-seg2 { 0%, 60% { border-color: rgba(255, 255, 255, .16); } 62%, 100% { border-color: #E2914B; } }
@keyframes asc-n1 { 0%, 33% { opacity: 1; } 35%, 100% { opacity: 0; } }
@keyframes asc-n2 { 0%, 33% { opacity: 0; } 35%, 60% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes asc-n3 { 0%, 60% { opacity: 0; } 62%, 100% { opacity: 1; } }
@keyframes asc-pop {
  0%, 33% { transform: none; } 37% { transform: scale(1.18); } 44%, 60% { transform: none; }
  64% { transform: scale(1.22); box-shadow: 0 0 0 10px rgba(226, 145, 75, .3); }
  72%, 100% { transform: none; box-shadow: 0 0 0 5px rgba(226, 145, 75, .35), 0 0 22px rgba(226, 145, 75, .7); }
}
/* a caught word flies from the text into the ring; js/app-showcase.js
   measures both ends into --fx/--fy (start) and --tx/--ty (end) */
.asc-fly {
  position: absolute; left: var(--fx, 60px); top: var(--fy, 300px); opacity: 0;
  background: var(--asc-navy); color: #fff; border: 1.5px solid #E2914B; border-radius: 20px;
  padding: 7px 14px; font-weight: 700; font-size: 15px;
  box-shadow: 0 0 14px rgba(226, 145, 75, .55); white-space: nowrap;
}
.asc-phone[data-scene="2"] .asc-f1 { animation: asc-fly 1.4s .35s cubic-bezier(.55, 0, .45, 1) both; }
.asc-phone[data-scene="2"] .asc-f2 { animation: asc-fly 1.4s 1.75s cubic-bezier(.55, 0, .45, 1) both; }
@keyframes asc-fly {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
  15% { opacity: 1; transform: translate(-50%, calc(-50% - 50px)) scale(1.15); }
  88% { opacity: 1; transform: translate(calc(-50% + var(--tx, 200px)), calc(-50% + var(--ty, 300px))) scale(.45) rotate(10deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx, 200px)), calc(-50% + var(--ty, 300px))) scale(.3); }
}
.asc-phone[data-scene="2"] .asc-c1 { animation: asc-caught 1s .2s ease both; }
.asc-phone[data-scene="2"] .asc-c2 { animation: asc-caught 1s 1.6s ease both; }
@keyframes asc-caught { 30%, 60% { box-shadow: 0 0 0 4px rgba(226, 145, 75, .45); border-color: #E2914B; } }

/* mini player: in while listening and collecting */
.asc-player {
  position: absolute; left: 12px; right: 12px; bottom: 12px; height: 80px;
  display: flex; align-items: center; gap: 12px; padding: 0 10px;
  background: #fff; border: 1px solid #ece6de; border-radius: 22px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  transform: translateY(120px); transition: transform .6s cubic-bezier(.34, 1.3, .64, 1);
}
.asc-phone[data-scene="1"] .asc-player, .asc-phone[data-scene="2"] .asc-player { transform: none; }
/* the player slides in once the first scene has scrolled into the text */
.asc-phone[data-scene="0"] .asc-player { animation: asc-player-in 5.2s both; }
.asc-phone[data-scene="0"] .asc-ring { animation: asc-ring-up 5.2s both; }
@keyframes asc-player-in { 0%, 72% { transform: translateY(120px); } 86%, 100% { transform: none; } }
@keyframes asc-ring-up { 0%, 72% { bottom: 16px; } 86%, 100% { bottom: 104px; } }
.asc-thumb { width: 60px; height: 60px; border-radius: 10px; flex: none; background: url(/assets/showcase/brazil-election.jpg) 40% center / cover; }
.asc-ptext { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.asc-ptext b { font: 900 16px/1.2 var(--font-serif); color: var(--asc-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asc-time { position: relative; height: 16px; font-size: 14px; color: #6b7280; }
.asc-time em { position: absolute; left: 0; top: 0; font-style: normal; opacity: 0; }
.asc-time em:first-child { opacity: 1; }
.asc-phone[data-scene="1"] .asc-time em:nth-child(1) { animation: asc-t1 5.2s steps(1) both; }
.asc-phone[data-scene="1"] .asc-time em:nth-child(2) { animation: asc-t2 5.2s steps(1) both; }
.asc-phone[data-scene="1"] .asc-time em:nth-child(3), .asc-phone[data-scene="2"] .asc-time em:nth-child(3) { animation: asc-t3 5.2s steps(1) both; }
.asc-phone[data-scene="2"] .asc-time em:nth-child(1) { opacity: 0; }
@keyframes asc-t1 { 0% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes asc-t2 { 0% { opacity: 0; } 40% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes asc-t3 { 0% { opacity: 0; } 75%, 100% { opacity: 1; } }
.asc-phone[data-scene="2"] .asc-time em:nth-child(3) { animation: none; opacity: 1; }
.asc-turtle { position: relative; width: 50px; height: 50px; border-radius: 50%; border: 2px solid #1B3A5C; display: grid; place-items: center; flex: none; }
.asc-turtle svg { width: 30px; height: 22px; }
.asc-turtle i { position: absolute; top: -9px; right: -8px; background: #E9983F; color: #fff; font-style: normal; font-weight: 800; font-size: 11px; border-radius: 8px; padding: 1px 5px; }
.asc-play { width: 54px; height: 54px; border-radius: 50%; background: #1B2A48; display: grid; place-items: center; flex: none; }
.asc-play svg { grid-area: 1 / 1; width: 26px; height: 26px; transition: opacity .3s ease; }
.asc-play svg + svg { opacity: 0; }
.asc-phone[data-scene="1"] .asc-play svg:first-child, .asc-phone[data-scene="2"] .asc-play svg:first-child { opacity: 0; }
.asc-phone[data-scene="1"] .asc-play svg + svg, .asc-phone[data-scene="2"] .asc-play svg + svg { opacity: 1; }

/* ---------- Word Catch ---------- */
.asc-game { padding: 38px 18px 0; background: #fff; }
.asc-wc-pill {
  display: inline-block; padding: 5px 12px; border-radius: 20px;
  background: linear-gradient(90deg, #D4883A, #A86628); color: #fff;
  font-size: 12px; font-weight: 900; letter-spacing: 1.2px;
}
.asc-wc-head { margin: 10px 0 0; font: 800 21px/1.3 var(--font-serif); color: #1c232b; }
.asc-wc-bar { display: flex; gap: 6px; margin-top: 14px; }
.asc-wc-bar i { flex: 1; height: 9px; border-radius: 6px; background: #e6e2dc; }
.asc-wc-bar i.done { background: #2D8A4E; }
.asc-wc-hint { margin: 10px 0 0; font-size: 15px; font-weight: 600; color: #6a7078; }
.asc-wc-grid { display: grid; grid-template-columns: 11fr 9fr; gap: 12px; margin-top: 16px; }
.asc-wc-snd, .asc-wc-mean {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 60px; border-radius: 16px; font-weight: 800; font-size: 15px; text-align: center;
  border: 2px solid; padding: 0 8px; box-sizing: border-box;
}
.asc-wc-snd { background: #1B3A5C; border-color: #1B3A5C; box-shadow: 0 4px 0 #0F2439; color: #fff; gap: 8px; }
.asc-wc-snd > svg { width: 24px; height: 24px; }
.asc-wave { display: flex; align-items: center; gap: 3px; height: 26px; }
.asc-wave i { width: 4px; border-radius: 2px; background: #fff; height: 10px; }
.asc-wave i:nth-child(2) { height: 18px; } .asc-wave i:nth-child(3) { height: 26px; }
.asc-wave i:nth-child(4) { height: 14px; } .asc-wave i:nth-child(5) { height: 21px; } .asc-wave i:nth-child(6) { height: 10px; }
.asc-wc-de { position: absolute; inset: 0; display: flex; align-items: center; gap: 6px; padding: 0 10px; opacity: 0; font-size: 15.5px; }
.asc-wc-de svg { width: 18px; height: 18px; flex: none; }
.asc-wc-mean { background: #fff; border-color: #fff; box-shadow: 0 4px 0 #D9DEE4, 0 0 0 1px #e6e9ed; color: #1B3A5C; }
.asc-wc-snd.done { background: #2D8A4E; border-color: #2D8A4E; box-shadow: 0 4px 0 #1F6538; }
.asc-wc-snd.done > svg, .asc-wc-snd.done .asc-wave { opacity: 0; }
.asc-wc-snd.done .asc-wc-de { opacity: 1; }
.asc-wc-mean.done { background: #2D8A4E; border-color: #2D8A4E; box-shadow: 0 4px 0 #1F6538; color: #fff; }
/* three pairs matched in turn: the sound card goes orange (playing),
   then both cards go green and the German shows */
.asc-phone[data-scene="3"] .asc-wc-snd.m1 { animation: asc-sel .75s .5s, asc-ok .3s 1.25s forwards; }
.asc-phone[data-scene="3"] .asc-wc-snd.m2 { animation: asc-sel .75s 2s, asc-ok .3s 2.75s forwards; }
.asc-phone[data-scene="3"] .asc-wc-snd.m3 { animation: asc-sel .75s 3.4s, asc-ok .3s 4.15s forwards; }
.asc-phone[data-scene="3"] .asc-wc-mean.m1, .asc-phone[data-scene="3"] .asc-wc-bar .m1 { animation: asc-ok .3s 1.25s forwards; }
.asc-phone[data-scene="3"] .asc-wc-mean.m2, .asc-phone[data-scene="3"] .asc-wc-bar .m2 { animation: asc-ok .3s 2.75s forwards; }
.asc-phone[data-scene="3"] .asc-wc-mean.m3, .asc-phone[data-scene="3"] .asc-wc-bar .m3 { animation: asc-ok .3s 4.15s forwards; }
.asc-phone[data-scene="3"] .m1 .asc-wave i { animation: asc-bar .25s .5s ease-in-out 3 alternate; }
.asc-phone[data-scene="3"] .m2 .asc-wave i { animation: asc-bar .25s 2s ease-in-out 3 alternate; }
.asc-phone[data-scene="3"] .m3 .asc-wave i { animation: asc-bar .25s 3.4s ease-in-out 3 alternate; }
.asc-phone[data-scene="3"] .m1 .asc-wc-de { animation: asc-show .35s 1.25s forwards; }
.asc-phone[data-scene="3"] .m2 .asc-wc-de { animation: asc-show .35s 2.75s forwards; }
.asc-phone[data-scene="3"] .m3 .asc-wc-de { animation: asc-show .35s 4.15s forwards; }
.asc-phone[data-scene="3"] .m1 > svg, .asc-phone[data-scene="3"] .m1 .asc-wave { animation: asc-hide .2s 1.25s forwards; }
.asc-phone[data-scene="3"] .m2 > svg, .asc-phone[data-scene="3"] .m2 .asc-wave { animation: asc-hide .2s 2.75s forwards; }
.asc-phone[data-scene="3"] .m3 > svg, .asc-phone[data-scene="3"] .m3 .asc-wave { animation: asc-hide .2s 4.15s forwards; }
@keyframes asc-sel { 0%, 100% { background: #D4883A; border-color: #D4883A; box-shadow: 0 1px 0 #A86628; transform: translateY(3px); } }
@keyframes asc-ok {
  0% { transform: scale(1.06); }
  100% { background: #2D8A4E; border-color: #2D8A4E; box-shadow: 0 4px 0 #1F6538; color: #fff; transform: none; }
}
@keyframes asc-bar { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes asc-show { to { opacity: 1; } }
@keyframes asc-hide { to { opacity: 0; } }

/* ---------- Flashcards ---------- */
.asc-fc { padding: 34px 16px 0; background: #F7F3EE; }
.asc-fc-title { margin: 0; font: 900 34px/1.1 var(--font-serif); color: #1B2A48; }
.asc-fc-sub { margin: 6px 0 0; font-size: 16px; font-weight: 600; color: #7c7f85; }
.asc-fc-stats {
  display: flex; margin-top: 18px; background: #fff; border-radius: 20px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .05); overflow: hidden;
}
.asc-stat { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 2px; border-left: 1px solid #efeae3; }
.asc-stat b { font: 900 22px/1.1 var(--font-serif); display: grid; }
.asc-stat b i { grid-area: 1 / 1; font-style: normal; }
.asc-stat span { margin-top: 5px; font-size: 9.5px; font-weight: 600; letter-spacing: .6px; color: #6b7078; text-align: center; }
.asc-saved { flex: 1.25; background: #1B2A48; border: 0; border-radius: 16px; color: #fff; padding: 10px 2px; }
.asc-saved b { color: #fff; }
.asc-saved span { color: rgba(255, 255, 255, .85); }
.asc-saved em { margin-top: 6px; font-style: normal; font-size: 8.5px; font-weight: 800; background: #D4883A; color: #fff; border-radius: 8px; padding: 2px 6px; }
.asc-correct b { color: #2D8A4E; } .asc-needs b { color: #C0602C; } .asc-new b { color: #8a8f98; } .asc-mastered b { color: #1B2A48; }
.asc-correct b i + i { opacity: 0; }
.asc-phone[data-scene="4"] .asc-correct b i:first-child { animation: asc-hide .1s 3s forwards; }
.asc-phone[data-scene="4"] .asc-correct b i + i { animation: asc-show .1s 3s forwards; }
.asc-fc-prog { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.asc-fc-prog span { position: relative; flex: 1; height: 7px; border-radius: 4px; background: #e6e2dc; overflow: hidden; }
.asc-fc-prog span i { position: absolute; left: 0; top: 0; bottom: 0; width: 81%; border-radius: 4px; background: linear-gradient(90deg, #D4883A, #C0602C) , #D4883A; }
.asc-fc-prog span i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%);
  background-size: 250% 100%; animation: asc-charge 3s ease-in-out infinite;
}
@keyframes asc-charge { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.asc-fc-prog em { font-style: normal; font-weight: 700; font-size: 15px; color: #6b7078; }
.asc-fc-card {
  position: relative; margin-top: 20px; background: #fff; border-radius: 28px; padding: 58px 16px 40px;
  text-align: center; box-shadow: 0 10px 28px rgba(0, 0, 0, .08); border-top: 7px solid #D4883A;
}
.asc-fc-eye { position: absolute; top: 14px; right: 14px; width: 50px; height: 50px; border-radius: 50%; background: #f2f3f5; display: grid; place-items: center; }
.asc-fc-eye svg { width: 28px; height: 28px; }
.asc-fc-q { margin: 0; font-size: 15px; font-weight: 600; color: #7c7f85; }
.asc-fc-w { margin: 10px 0 0; font: 900 38px/1.15 var(--font-serif); color: #1B2A48; }
.asc-fc-say { margin: 14px 0 0; font-size: 16px; font-weight: 600; color: #7c7f85; }
.asc-fc-orb {
  display: grid; place-items: center; width: 92px; height: 92px; margin: 34px auto 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #6c7f98, #2b3c55 55%, #4b3a33);
}
.asc-fc-orb svg { width: 36px; height: 36px; }
.asc-phone[data-scene="4"] .asc-fc-orb { animation: asc-listen 1s .4s ease-in-out 3; }
@keyframes asc-listen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 136, 58, .5); transform: none; }
  50% { box-shadow: 0 0 0 16px rgba(212, 136, 58, 0); transform: scale(1.05); }
}
.asc-fc-ans { margin: 16px 0 0; font: 900 24px/1 var(--font-serif); color: #2D8A4E; opacity: 0; transform: scale(.8); }
.asc-phone[data-scene="4"] .asc-fc-ans { animation: asc-pop-in .45s 3s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.asc-phone[data-scene="4"] .asc-fc-card { animation: asc-card-ok .4s 3s forwards; }
@keyframes asc-pop-in { to { opacity: 1; transform: none; } }
@keyframes asc-card-ok { to { border-top-color: #2D8A4E; } }

/* ============================================================
   Placement
   ============================================================ */
/* The in-article phone is for narrow screens, where the sidebar (and
   its phone) sits below the article; on wide screens the sidebar one
   is enough. */
@media (min-width: 901px) { .asc-inline { display: none; } }
@media (max-width: 900px) { .article-sidebar .asc-phone { display: none; } }
.article-sidebar .asc-phone { margin-bottom: 28px; }
.asc-store[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .app-showcase *, .app-showcase *::before, .app-showcase *::after { animation: none !important; transition-duration: .01s !important; }
}