/* Mella feature spot illustrations: feature-247.svg, feature-booking.svg, feature-languages.svg.
   Inline the SVG markup; every colour comes from the app tokens so dark mode follows automatically.
   Native size 80 x 80 (viewBox units); shown from 64px to 96px square (72px on phones, 80px on desktop). */

.ma-ft-svg{display:block;width:100%;height:auto;overflow:visible}

/* Shared drawing vocabulary */
.ma-ft-disc{fill:var(--surface-2)}
.ma-ft-body{fill:var(--surface);stroke:var(--ink-2);stroke-width:2;stroke-linejoin:round}
.ma-ft-ln{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ma-ft-thin{stroke-width:1.75}
.ma-ft-ink{stroke:var(--ink-2)}
.ma-ft-mute{stroke:var(--muted)}
.ma-ft-soft{stroke:var(--line-strong)}
.ma-ft-hair{stroke:var(--line-strong);stroke-width:1.75}
.ma-ft-butt{stroke-linecap:butt}
.ma-ft-knock{stroke:var(--surface)}
.ma-ft-brand{fill:var(--brand)}
.ma-ft-good{fill:var(--good)}
.ma-ft-ringed{stroke:var(--surface);stroke-width:3;paint-order:stroke}

.ma-ft-ring,.ma-ft-answer,.ma-ft-halo,.ma-ft-sun,.ma-ft-moon,.ma-ft-slot,.ma-ft-badge,.ma-ft-word{
  transform-box:fill-box;transform-origin:center}

/* (a) Answers every call, 24/7 — the phone rings twice, is answered; day turns to night and back. 8 s */
.ma-ft-handset{fill:var(--surface)}
.ma-ft-ring{animation:ma-ft-ring 8s cubic-bezier(.2,.8,.2,1) infinite both}
.ma-ft-ring-2{animation-delay:.16s}
.ma-ft-answer{animation:ma-ft-press 8s ease-in-out infinite both}
.ma-ft-halo{fill:none;stroke:var(--brand);stroke-width:1.75;opacity:0;animation:ma-ft-halo 8s cubic-bezier(.2,.8,.2,1) infinite both}
.ma-ft-sun{animation:ma-ft-sun 8s ease-in-out infinite both}
.ma-ft-moon{opacity:0;animation:ma-ft-moon 8s ease-in-out infinite both}

@keyframes ma-ft-ring{
  0%{opacity:0;transform:scale(.9)}
  5%{opacity:1;transform:scale(1)}
  13%{opacity:0;transform:scale(1.06)}
  15%{opacity:0;transform:scale(.9)}
  20%{opacity:1;transform:scale(1)}
  28%{opacity:0;transform:scale(1.06)}
  50%{opacity:0;transform:scale(.9)}
  55%{opacity:1;transform:scale(1)}
  63%{opacity:0;transform:scale(1.06)}
  65%{opacity:0;transform:scale(.9)}
  70%{opacity:1;transform:scale(1)}
  78%{opacity:0;transform:scale(1.06)}
  100%{opacity:0;transform:scale(.9)}
}
@keyframes ma-ft-press{
  0%,29%,37%,79%,87%,100%{transform:scale(1)}
  32%,82%{transform:scale(.92)}
}
@keyframes ma-ft-halo{
  0%,31%,50%,81%,100%{opacity:0;transform:scale(1)}
  33%,83%{opacity:.8;transform:scale(1.08)}
  46%,96%{opacity:0;transform:scale(1.45)}
}
@keyframes ma-ft-sun{
  0%,36%{opacity:1;transform:translateY(0)}
  44%,92%{opacity:0;transform:translateY(3px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes ma-ft-moon{
  0%,44%{opacity:0;transform:translateY(3px)}
  52%,84%{opacity:1;transform:translateY(0)}
  92%,100%{opacity:0;transform:translateY(3px)}
}

/* (b) Books and takes messages — a slot fills, a tick confirms it, holds, resets. 8 s */
.ma-ft-cells rect{fill:var(--line)}
.ma-ft-slot{animation:ma-ft-slot 8s cubic-bezier(.2,.8,.2,1) infinite both}
.ma-ft-slot-fill{fill:var(--brand-50);stroke:var(--brand);stroke-width:1.75}
.ma-ft-badge{animation:ma-ft-badge 8s cubic-bezier(.2,.8,.2,1) infinite both}
.ma-ft-tick{stroke-dasharray:1 2;stroke-dashoffset:0;animation:ma-ft-tick 8s ease-in-out infinite both}

@keyframes ma-ft-slot{
  0%,10%{opacity:0;transform:scale(.9)}
  18%,84%{opacity:1;transform:scale(1)}
  92%{opacity:0;transform:scale(.96)}
  100%{opacity:0;transform:scale(.9)}
}
@keyframes ma-ft-badge{
  0%,22%{opacity:0;transform:scale(.8)}
  30%,84%{opacity:1;transform:scale(1)}
  92%{opacity:0;transform:scale(.92)}
  100%{opacity:0;transform:scale(.8)}
}
@keyframes ma-ft-tick{
  0%,30%{stroke-dashoffset:1.05}
  40%,92%{stroke-dashoffset:0}
  100%{stroke-dashoffset:1.05}
}

/* (c) Speaks 38 languages — one greeting at a time, a soft fade between five, 2 s each. 10 s */
.ma-ft-word{
  font-family:'Outfit','Nirmala UI','Noto Sans Tamil','Tamil Sangam MN','Noto Sans Devanagari','Kohinoor Devanagari',
    'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;
  font-size:14px;font-weight:600;fill:var(--ink);text-anchor:middle;letter-spacing:-.01em;
  opacity:0;animation:ma-ft-word 10s ease-in-out infinite both}
.ma-ft-ta{font-size:10px}
.ma-ft-zh{font-size:13px}
.ma-ft-w1{opacity:1;animation-delay:-.5s}
.ma-ft-w2{animation-delay:1.5s}
.ma-ft-w3{animation-delay:3.5s}
.ma-ft-w4{animation-delay:5.5s}
.ma-ft-w5{animation-delay:7.5s}
/* Bars shorten from both ends with a dash (pathLength 1), so their round caps keep their shape. */
.ma-ft-bar{stroke-dasharray:1 2;stroke-dashoffset:0;animation:ma-ft-bar 2s ease-in-out infinite both}
.ma-ft-bar-1{animation-delay:-.67s}
.ma-ft-bar-3{animation-delay:-1.33s}

@keyframes ma-ft-word{
  0%{opacity:0;transform:translateY(2px)}
  3.5%,16.5%{opacity:1;transform:translateY(0)}
  20%,100%{opacity:0;transform:translateY(-2px)}
}
@keyframes ma-ft-bar{
  0%,100%{stroke-dasharray:1 2;stroke-dashoffset:0}
  50%{stroke-dasharray:.5 2;stroke-dashoffset:-.25}
}

/* Reduced motion: a complete still — phone ringing by day, slot booked and ticked, "Hello". */
@media (prefers-reduced-motion:reduce){
  .ma-ft-svg *{animation:none!important}
}