/* AIRI homepage A, phones only (<= 767px). Requested 17.10.2026: no "Näite eeldused"
   info pill in the phone demo, and a clearer start/stop button for the demo. The runtime
   writes ▶ / Ⅱ into #home-a-demo-play; home-a.js mirrors that into data-state, which picks
   the play or pause icon below (the text glyph itself is not shown, so iOS cannot render
   it as an emoji). Desktop and tablet keep the reviewed look. */
@media (max-width: 767px) {
  .airi-home-a .home-a-mobile-slot .info-button { display: none; }

  .airi-home-a .home-a-scrubber { gap: 14px; }
  .airi-home-a .home-a-scrubber .home-a-demo-play {
    /* The icon is positioned absolutely: iOS Safari does not centre grid/flex content
       inside <button>, and the hidden ▶/Ⅱ text still takes a line box there. */
    position: relative; display: inline-block; overflow: hidden; -webkit-appearance: none; appearance: none;
    flex: none; width: 48px; height: 48px; padding: 0;
    border: 0; border-radius: 50%; background: linear-gradient(180deg, #2f87e7 0%, #1d73d0 100%);
    box-shadow: 0 8px 22px rgba(24, 109, 187, .22); color: transparent; font-size: 0; line-height: 0;
    cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .14s ease, box-shadow .14s ease;
  }
  .airi-home-a .home-a-scrubber .home-a-demo-play::before {
    content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
    background: center / contain no-repeat;
    /* play: the demo is stopped (triangle nudged 1px right for optical centring) */
    margin-left: -8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 4.8v14.4a1 1 0 0 0 1.5.86l11.6-7.2a1 1 0 0 0 0-1.72L9.5 3.94A1 1 0 0 0 8 4.8z'/%3E%3C/svg%3E");
  }
  .airi-home-a .home-a-scrubber .home-a-demo-play[data-state="playing"]::before {
    /* pause: the demo is playing */
    margin-left: -9px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Crect x='5.5' y='4' width='4.6' height='16' rx='1.3'/%3E%3Crect x='13.9' y='4' width='4.6' height='16' rx='1.3'/%3E%3C/svg%3E");
  }
  .airi-home-a .home-a-scrubber .home-a-demo-play:active { transform: scale(.95); box-shadow: 0 4px 12px rgba(24, 109, 187, .2); }
  .airi-home-a .home-a-scrubber .home-a-demo-play:focus-visible { outline: 3px solid #81b6e3; outline-offset: 3px; }
  .airi-home-a .home-a-scrubber .home-a-demo-play:focus:not(:focus-visible) { outline: none; }
  .airi-home-a .home-a-scrubber .home-a-demo-play[disabled] { opacity: .5; box-shadow: none; cursor: default; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .airi-home-a .home-a-scrubber .home-a-demo-play { transition: none; }
}