/* Original homepage motion, finite and progressively enhanced. No scroll hijacking. */
/* See product gallery overrides below for the supplied September app views. */
.home-race-path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0 0 32px; padding: 0; }
.home-race-path li { --stage: #ffe500; position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #ffffff38; border-radius: 16px; font-size: 14px; color: #fff; background: #10111a; }
.home-race-path li:nth-child(2) { --stage: #b13cff; }
.home-race-path li:nth-child(3) { --stage: #00cfff; }
.home-race-path li:nth-child(4) { --stage: #ff2ca3; }
.home-race-path li span { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--stage); color: #080c0f; font: 700 15px/1 'JetBrains Mono', monospace; }
.home-race-path li[aria-current] { border-color: var(--stage); box-shadow: inset 0 -3px var(--stage); }
.home-app-showcase { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 5vw, 80px); padding: clamp(24px, 5vw, 64px); margin-bottom: 32px; border: 1px solid #e4e4e8; border-radius: 28px; background: #fff; color: #14141b; }
.home-app-showcase .home-app-showcase__eyebrow { font: 500 11px/1.5 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .12em; color: #62576d; margin: 0 0 20px; }
.home-app-showcase h3 { font-size: clamp(32px, 3.5vw, 50px); line-height: 1.06; letter-spacing: -.045em; font-weight: 700; color: #14141b; margin: 0 0 24px; }
.home-app-showcase__copy > p:not(.home-app-showcase__eyebrow) { font-size: 16px; line-height: 1.7; color: #55515e; max-width: 410px; }
.home-app-selector { margin: 28px 0; }
.home-app-selector[hidden], .home-app-screen[hidden] { display: none; }
.home-app-selector button { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 18px 12px; border: 0; border-bottom: 1px solid #dedce2; background: #fff; border-radius: 0; color: #62576d; font: 500 12px/1.4 'JetBrains Mono', monospace; cursor: pointer; }
.home-app-selector button span:first-child { color: #24202c; flex: 1; font: 600 15px/1.4 'Unbroken Inter', Inter, sans-serif; }
.home-app-selector button[aria-pressed="true"] { background: #f5f4f8; border-bottom-color: #28242e; box-shadow: inset 3px 0 #ffe500; }
.home-app-selector button:focus-visible { outline: 3px solid #4533ff; outline-offset: 3px; }
.home-app-showcase__link { display: inline-flex; gap: 16px; align-items: center; min-height: 48px; font-size: 14px; font-weight: 600; color: #14141b; text-underline-offset: 5px; }
.home-app-showcase__stage { min-width: 0; text-align: center; }
.home-app-screen { margin: 0; }
.home-app-screen img { display: block; width: min(100%, 260px); height: auto; aspect-ratio: 760 / 1551; object-fit: contain; margin: 0 auto; border-radius: 30px; box-shadow: 0 20px 40px #12102016; }
.home-app-screen figcaption { min-height: 44px; margin-top: 24px; font-size: 13px; line-height: 1.6; color: #514a5c; }
.home-app-showcase .home-app-showcase__note { max-width: 320px; margin: 12px auto 0; font-size: 11px; line-height: 1.6; color: #62576d; }
/* Text never depends on animation to become visible. Small distances, no looping. */
@media (prefers-reduced-motion: no-preference) {
  .ai-home-hero.home-motion-seen .ai-home-copy { animation: home-arrive .75s ease-out both; }
  .ai-home-hero.home-motion-seen .ai-home-art img { animation: home-art-arrive 1.1s cubic-bezier(.22, 1, .36, 1) both; }
  .home-motion-reveal.home-motion-seen { animation: home-arrive .65s cubic-bezier(.22, 1, .36, 1) both; }
  .home-race-path.home-motion-seen li { animation: home-arrive .55s ease-out both; }
  .home-race-path.home-motion-seen li:nth-child(2) { animation-delay: .1s; }
  .home-race-path.home-motion-seen li:nth-child(3) { animation-delay: .2s; }
  .home-race-path.home-motion-seen li:nth-child(4) { animation-delay: .3s; }
  .home-app-screen.is-changing img { animation: home-screen-arrive .45s ease-out both; }
  .home-app-selector button { transition: background .2s, box-shadow .2s; }
  .ai-home-pill, .home-signals__footer a, .home-app-showcase__link { transition: transform .2s; }
  .ai-home-pill:active, .home-signals__footer a:active, .home-app-showcase__link:active { transform: scale(.98); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ai-home-pill:hover, .home-signals__footer a:hover { transform: translateY(-2px); }
  .home-app-selector button:hover { background: #f5f4f8; }
}
@keyframes home-arrive { from { opacity: .7; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes home-art-arrive { from { opacity: .85; transform: scale(1.025); } to { opacity: 1; transform: scale(1); } }
@keyframes home-screen-arrive { from { opacity: .5; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
/* Large product views in a code-native titanium-style frame. */
#inside-app .home-app-showcase { overflow: hidden; }
#inside-app .home-app-showcase h3 { font-size: clamp(36px, 4.6vw, 64px); }
#inside-app .home-app-selector:not([hidden]) { display: flex; flex-wrap: wrap; gap: 10px; }
#inside-app .home-app-selector button { width: auto; min-height: 46px; padding: 12px 18px; border: 1px solid #d9d6df; border-radius: 999px; background: #f5f4f7; box-shadow: none; }
#inside-app .home-app-selector button[aria-pressed="true"] { background: #ffe500; border-color: #ffe500; }
#inside-app .home-app-selector button span { color: #17131d; font-size: 14px; }
#inside-app .home-app-showcase__stage { padding: 20px 8px; border-radius: 28px; background: radial-gradient(ellipse at 50% 42%, #eee5fa 0%, #f6f7fa 48%, #fff 72%); }
.home-phone { position: relative; width: min(100%, 320px); margin: auto; padding: 7px; border: 2px solid #817d78; border-radius: 48px; background: #111; box-shadow: inset 0 0 0 2px #d3cec7, inset 0 0 0 4px #44413e, 0 28px 42px -20px #19122466; }
#inside-app .home-phone img { width: 100%; max-width: none; height: auto; aspect-ratio: 1206 / 2622; object-fit: contain; border-radius: 39px; box-shadow: none; animation: none; }
.home-phone::before, .home-phone::after { content: ''; position: absolute; width: 3px; background: linear-gradient(#bab5ae, #514e49, #bab5ae); border-radius: 2px; }
.home-phone::before { left: -4px; top: 19%; height: 14%; }
.home-phone::after { right: -4px; top: 24%; height: 9%; }
.home-phone__island { position: absolute; top: 2.2%; left: 35%; width: 30%; height: 3.2%; border-radius: 999px; background: #080808; }
#inside-app .home-app-screen figcaption { font-size: 14px; margin-top: 28px; }
@media (prefers-reduced-motion: no-preference) { .home-app-screen.is-changing .home-phone { animation: home-screen-arrive .45s ease-out both; } }
@media (max-width: 700px) {
  .home-race-path { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-race-path li { padding: 12px; font-size: 13px; }
  .home-app-showcase { grid-template-columns: 1fr; padding: 28px 22px; gap: 36px; }
  .home-app-screen img { width: min(75%, 240px); }
  #inside-app .home-app-showcase { padding: 30px 18px; }
  #inside-app .home-app-showcase__stage { padding: 8px 0; }
  .home-phone { width: min(100%, 300px); border-radius: 42px; }
  #inside-app .home-phone img { border-radius: 33px; }
  #inside-app .home-app-selector button { padding: 11px 15px; }
}