/* ==========================================================================
   Talkify - live phone screens for the landing "Steps" section
   Standalone: no dependencies. Screens authored at the app's real 402x874
   and scaled with --s to match the existing .step__mockup sizes.
   ========================================================================== */

.tkp{
  --ink:#14140F; --t2:#6F6B65; --t3:#A8A39C; --hair:#ECE8E1;
  --cream:#FFFFFF; --surf:#FFFFFF; --fill:#F5F4F2; --dot:#DCD7CF;
  --grad:linear-gradient(98.8deg,#FEA062 0%,#F45E7C 100%);
  --gradsoft:linear-gradient(140deg,rgba(254,160,98,.16),rgba(244,94,124,.13));
  --artbg:linear-gradient(160deg,#F7F6F4 0%,#EFEDEA 100%);
  --salmon:#F45E7C; --salmon6:#E8486A; --ok:#1AC877; --ok-d:#0F8F5B;
  --card:0 8px 24px -8px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.03);
  --cta:0 12px 28px -12px rgba(244,94,124,.5);
  --ctaS:0 6px 12px -5px rgba(244,94,124,.45);
  --ease:cubic-bezier(.32,.72,0,1);
  --s:1;
  position:absolute; inset:0;
  width:402px; height:874px;
  transform:scale(var(--s)); transform-origin:0 0;
  font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink); background:var(--cream);
  overflow:hidden; -webkit-font-smoothing:antialiased;
  /* l'interieur de l'ecran ne peut plus invalider la mise en page de la
     landing : quatre telephones animes en permanence dans une section
     epinglee et parcourue par ScrollTrigger, c'est le meme fil d'execution */
  contain:layout paint;
}
.tkp *{box-sizing:border-box;margin:0;padding:0}

/* Hors champ, un ecran ne coute plus rien. Le minuteur d'etapes s'arretait
   deja, mais les animations CSS (points, onde, reflet, pulsation) tournaient
   sans fin sur les quatre ecrans a la fois, visibles ou non. */
.tkp[data-live="0"] *,
.tkp[data-live="0"]{animation-play-state:paused!important}

/* ---- shell ---------------------------------------------------------- */
.tkp-scr{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--cream)}
.tkp-sb{flex:none;display:flex;align-items:center;justify-content:space-between;height:54px;padding:0 26px 0 32px;font-size:16px;font-weight:600;letter-spacing:.01em;color:var(--ink)}
.tkp-sb i{display:flex;align-items:flex-end;gap:7px;font-style:normal}
/* signal: 4 ascending bars */
.tkp-sb s{display:flex;align-items:flex-end;gap:2px;height:11px;text-decoration:none}
.tkp-sb s b{display:block;width:3px;border-radius:1px;background:var(--ink)}
.tkp-sb s b:nth-child(1){height:4px}
.tkp-sb s b:nth-child(2){height:6px}
.tkp-sb s b:nth-child(3){height:8.5px}
.tkp-sb s b:nth-child(4){height:11px}
/* wifi + battery live in .tkp-sb i as inline svg */
.tkp-sb i svg{display:block}
.tkp-sb u{text-decoration:none;display:block;position:relative;width:27px;height:13px;border-radius:4px;box-shadow:inset 0 0 0 1.4px rgba(20,20,15,.35)}
.tkp-sb u::before{content:"";position:absolute;left:2px;top:2px;bottom:2px;width:17px;border-radius:2px;background:var(--ink)}
.tkp-sb u::after{content:"";position:absolute;right:-3.5px;top:4px;width:2px;height:5px;border-radius:0 2px 2px 0;background:rgba(20,20,15,.35)}
.tkp-body{flex:1;min-height:0;overflow:hidden;position:relative}
.tkp-pad{padding:0 20px}

/* nav */
.tkp-nav{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;justify-content:space-around;height:84px;padding-bottom:18px;background:#fff;border-top:1px solid var(--hair)}
.tkp-nav b{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--t3)}
.tkp-nav b em{width:23px;height:23px;font-style:normal;display:flex;align-items:center;justify-content:center;color:var(--t3)}
.tkp-nav b em svg{width:22px;height:22px}
.tkp-nav b.on{color:var(--salmon)}
.tkp-nav b.on em{color:var(--salmon)}

/* ---- type ----------------------------------------------------------- */
.tkp-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--t3)}
.tkp-h{font-size:24px;font-weight:800;letter-spacing:-.02em}
.tkp-card-t{font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.tkp-price{font-size:14.5px;font-weight:800;color:var(--salmon6);letter-spacing:-.01em}

/* ---- pieces --------------------------------------------------------- */
.tkp-card{border-radius:18px;background:var(--surf);box-shadow:var(--card)}
.tkp-cta{height:52px;border-radius:15px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:15px;box-shadow:var(--cta)}
.tkp-quiet{height:48px;border-radius:14px;background:var(--fill);color:var(--ink);display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:13.5px}
.tkp-pill{display:inline-flex;align-items:center;gap:6px;height:27px;padding:0 12px;border-radius:100px;font-size:11.5px;font-weight:800}
.tkp-online{background:rgba(26,200,119,.12);color:var(--ok-d)}
.tkp-online i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.tkp-alive{animation:tkpAlive 3.6s ease-in-out infinite}
@keyframes tkpAlive{0%,100%{opacity:.72}50%{opacity:1}}

/* service card - mirrors the app's real card */
.tkp-svc{position:relative;border-radius:18px;overflow:hidden;background:var(--surf);box-shadow:var(--card)}
.tkp-svc>i{display:block;height:96px;background-position:center;background-repeat:no-repeat}
.tkp-svc>div{padding:13px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.tkp-svc em{position:absolute;right:9px;top:9px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.86);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);color:var(--t2);font-style:normal;font-size:15px;letter-spacing:1px;line-height:0}
.tkp-svc b{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;box-shadow:var(--ctaS)}
.tkp-svc b svg{width:16px;height:16px}

/* add-a-service bar */
.tkp-add{grid-column:1/-1;position:relative;overflow:hidden;border-radius:18px;height:66px;display:flex;align-items:center;gap:13px;padding:0 15px;background:radial-gradient(120% 160% at 12% 0%,rgba(254,160,98,.16),transparent 62%),radial-gradient(120% 160% at 92% 100%,rgba(244,94,124,.14),transparent 60%),var(--surf);box-shadow:inset 0 0 0 1.5px rgba(244,94,124,.22)}
.tkp-add>span{position:relative;width:40px;height:40px;flex:none;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;box-shadow:var(--ctaS);font-size:22px;font-weight:600;line-height:0}
.tkp-add>div{position:relative;flex:1;min-width:0}
.tkp-add>div u{display:block;font-size:11px;line-height:1.4;color:var(--t3);margin-top:2px;text-decoration:none}
.tkp-add>i{position:absolute;top:0;bottom:0;width:26%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);animation:tkpShim 4.5s ease-in-out infinite}
@keyframes tkpShim{0%{transform:translateX(-160%) skewX(-14deg)}100%{transform:translateX(360%) skewX(-14deg)}}

/* sheet */
.tkp-scrim{position:absolute;inset:0;z-index:5;background:rgba(20,20,15,.45);opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.tkp-sheet{position:absolute;left:0;right:0;bottom:0;z-index:6;border-radius:34px 34px 0 0;background:var(--surf);box-shadow:0 -20px 60px -10px rgba(0,0,0,.18);padding:12px 20px 30px;transform:translateY(102%);transition:transform .58s var(--ease)}
.tkp-grip{width:38px;height:4px;border-radius:2px;background:#D9D5CE;margin:0 auto 16px}

/* chat */
.tkp-bub{max-width:80%;padding:12px 15px;font-size:14px;line-height:1.55;border-radius:18px 18px 18px 5px;background:var(--surf);box-shadow:var(--card)}
.tkp-bub--me{align-self:flex-end;border-radius:18px 18px 5px 18px;background:var(--ink);color:#fff;box-shadow:none}
.tkp-av{border-radius:10px;background-size:cover;background-position:center;flex:none}

/* ---- motion: ONE primitive, calm ------------------------------------ */
.tkp-in{opacity:0;transform:translateY(9px);transition:opacity .46s ease-out,transform .46s var(--ease)}
.tkp-in.on{opacity:1;transform:none}
.tkp-fade{opacity:0;transition:opacity .4s ease-out}
.tkp-fade.on{opacity:1}
/* typing row: collapses to zero height when done, so the avatar cannot ghost
   through the next bubble or get clipped by the flex-end column. */
.tkp-typing{opacity:0;max-height:0;overflow:hidden;transform:translateY(6px);
  transition:opacity .28s ease-out,max-height .4s var(--ease),transform .4s var(--ease)}
.tkp-typing.on{opacity:1;max-height:64px;transform:none}
/* Les echanges se font en RELAIS, jamais en fondu croise. Quand un enfant
   perd sa classe il repasse en absolu INSTANTANEMENT, donc il saute par
   dessus celui qui arrive pendant que son opacite descend : les deux textes
   se lisaient l'un sur l'autre, et la meme phrase apparaissait en double.
   Ce qui part s'en va en 180ms, ce qui arrive attend ces 180ms. */
.tkp-pane{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .18s ease-out}
.tkp-pane.on{opacity:1;position:relative;height:100%;transition:opacity .26s ease-out .18s}
/* swap container: only the active child takes up space */
.tkp-swap{position:relative}
.tkp-swap>.tkp-fade{position:absolute;left:0;right:0;top:0;transition:opacity .18s ease-out}
.tkp-swap>.tkp-fade.on{position:relative;transition:opacity .26s ease-out .18s}
/* grow-in: takes no vertical space until it is shown */
.tkp-grow{opacity:0;max-height:0;overflow:hidden;transform:translateY(9px);transition:opacity .42s ease-out,max-height .54s var(--ease),transform .46s var(--ease),margin-top .54s var(--ease)}
.tkp-grow.on{opacity:1;max-height:240px;transform:none}
.tkp-scrim.on{opacity:1}
.tkp-sheet.on{transform:none}

/* typing dots */
.tkp-dots{display:inline-flex;gap:5px;align-items:center}
.tkp-dots s{width:6px;height:6px;border-radius:50%;background:var(--t3);text-decoration:none;animation:tkpDot 1.25s ease-in-out infinite}
.tkp-dots s:nth-child(2){animation-delay:.16s}
.tkp-dots s:nth-child(3){animation-delay:.32s}
@keyframes tkpDot{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* live waveform */
.tkp-wave{display:flex;align-items:center;gap:3px;height:26px;overflow:visible;min-width:0}
.tkp-wave s{width:3px;height:22px;flex:none;border-radius:2px;background:var(--salmon);text-decoration:none;transform-origin:center;animation:tkpWave 1s ease-in-out infinite}
@keyframes tkpWave{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
.tkp-wave--still s{animation:none;background:rgba(255,255,255,.85)}

/* toast */
.tkp-toast{position:absolute;left:20px;right:20px;bottom:104px;z-index:7;display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:15px;background:#14140F;color:#fff;font-size:13px;font-weight:600;box-shadow:0 16px 34px -14px rgba(0,0,0,.5)}
.tkp-toast i{width:20px;height:20px;flex:none;border-radius:50%;background:var(--ok);display:flex;align-items:center;justify-content:center;font-style:normal}
.tkp-toast i svg{width:11px;height:11px}

@media (prefers-reduced-motion:reduce){
  .tkp-in,.tkp-fade,.tkp-typing,.tkp-pane,.tkp-sheet,.tkp-scrim{transition:none!important}
  .tkp-add>i,.tkp-dots s,.tkp-wave s{animation:none!important}
}

/* ─────────────────────────────────────────────────
   INTEGRATION DANS LE BENTO DE LA LANDING
   L'echelle suit la LARGEUR D'ECRAN, jamais l'etape.

   .step__mockup n'a qu'une taille par palier responsif, la meme pour les
   quatre etapes : 300x652 par defaut, 280x609 sous 768px, 220x478 sous 400px.
   Les trois valeurs de --s du README correspondent a ces paliers, pas aux
   etapes. Posees en attribut style, elles gagnaient sur toute regle CSS et
   les ecrans 002 a 004 restaient ancres en haut a gauche dans une boite trop
   grande, donc decentres et rognes.

   Verification : 402 x .7463 = 300 et 874 x .7463 = 652
                  402 x .6965 = 280 et 874 x .6965 = 609
                  402 x .5473 = 220 et 874 x .5473 = 478
   ───────────────────────────────────────────────── */
.step__mockup .tkp { --s: .7463; }
@media (max-width: 768px) { .step__mockup .tkp { --s: .6965; } }
@media (max-width: 400px) { .step__mockup .tkp { --s: .5473; } }