/* ---------- Install walkthrough (animated phone) ---------- */
.idm{display:grid;gap:16px;justify-items:center;margin:4px 0 8px}
.idm-inapp{background:var(--sand);border:1px solid var(--sand-line);border-radius:14px;padding:12px 14px;font-size:15px;line-height:1.5;margin:0;justify-self:stretch}
.idm-phone{position:relative;width:212px;height:420px;border-radius:34px;background:#1d1715;padding:9px;box-shadow:0 18px 40px rgba(42,31,26,.18);flex:none}
.idm-notch{position:absolute;top:13px;left:50%;width:62px;height:16px;margin-left:-31px;border-radius:10px;background:#1d1715;z-index:6}
.idm-screen{position:relative;width:100%;height:100%;border-radius:26px;overflow:hidden;background:#FBF7F1;font-family:var(--sans)}
.idm-page{position:absolute;inset:0;padding:34px 14px 0}
.idm-url{font-size:10px;color:#7A6A62;background:#efe7dc;border-radius:8px;padding:5px 8px;text-align:center}
.idm-lines{display:grid;gap:9px;margin-top:18px}
.idm-lines i{display:block;height:9px;border-radius:5px;background:#e9dfd3}
.idm-lines i.s{width:62%;background:#81313E;opacity:.75;height:24px;border-radius:9px;margin-top:6px}
.idm-bar{position:absolute;left:0;right:0;bottom:0;height:46px;background:#f3ece3;border-top:1px solid #e3d8ca;display:flex;justify-content:space-around;align-items:center;color:#2A6FDB}
.idm-bar span{width:22px;height:22px}
.idm-bar svg{width:22px;height:22px}
.idm-sheet{position:absolute;left:0;right:0;bottom:0;height:62%;background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -6px 18px rgba(0,0,0,.12);transform:translateY(105%);animation:idm-sheet 10s infinite;overflow:hidden;z-index:2}
.idm-sheet-head{display:flex;gap:9px;align-items:center;padding:12px;border-bottom:1px solid #eee;background:#fff;position:relative;z-index:1}
.idm-sheet-head img,.idm-add-row img{width:30px;height:30px;border-radius:8px}
.idm-sheet-head b,.idm-add-row b{display:block;font-size:12px;color:#2A1F1A}
.idm-sheet-head small,.idm-add-row small{font-size:10px;color:#7A6A62}
.idm-list{padding:4px 0;animation:idm-scroll 10s infinite}
.idm-list p,.idm-menu p{margin:0;padding:10px 14px;font-size:12px;color:#2A1F1A;border-bottom:1px solid #f1ece6;display:flex;gap:8px;align-items:center}
.idm-list p svg,.idm-menu p svg{width:16px;height:16px;color:#2A1F1A}
.idm-list p.hit{animation:idm-hit-row 10s infinite}
.idm-add{position:absolute;inset:0;background:#f4f1ed;opacity:0;animation:idm-add 10s infinite;z-index:3;padding-top:30px}
.idm-add-top{display:flex;justify-content:space-between;align-items:center;padding:0 12px 12px;font-size:11px;color:#2A6FDB}
.idm-add-top b{color:#2A1F1A;font-size:11px}
.idm-add-top .hit{font-weight:700;border-radius:8px;padding:3px 6px;animation:idm-hit-add 10s infinite}
.idm-add-row{display:flex;gap:10px;align-items:center;background:#fff;margin:0 12px;border-radius:12px;padding:12px}
.idm-home{position:absolute;inset:0;opacity:0;background:linear-gradient(160deg,#c9b8a6,#8f6f62);animation:idm-home 10s infinite;z-index:4;padding:44px 16px}
.idm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 12px}
.idm-grid i{display:block;aspect-ratio:1;border-radius:11px;background:rgba(255,255,255,.35)}
.idm-grid b{display:grid;justify-items:center;gap:3px;animation:idm-pop 10s infinite}
.idm-grid b img{width:100%;aspect-ratio:1;border-radius:11px;animation:idm-glow 10s infinite}
.idm-grid em{font-style:normal;font-size:8px;color:#fff}
.idm-finger{position:absolute;left:0;top:0;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:rgba(129,49,62,.35);border:2px solid rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.2);z-index:9;animation:idm-finger-ios 10s infinite;pointer-events:none}

/* Android */
.idm-phone.android{border-radius:26px}
.idm-phone.android .idm-screen{border-radius:18px}
.idm-phone.android .idm-page{padding-top:40px}
.idm-top{position:absolute;top:0;left:0;right:0;height:30px;display:flex;justify-content:flex-end;align-items:center;padding:0 8px;background:#f3ece3}
.idm-top svg{width:18px;height:18px;color:#2A1F1A}
.idm-menu{position:absolute;top:26px;right:6px;width:150px;background:#fff;border-radius:10px;box-shadow:0 8px 22px rgba(0,0,0,.18);transform-origin:top right;transform:scale(.2);opacity:0;animation:idm-menu 10s infinite;z-index:2}
.idm-menu p.hit{animation:idm-hit-row-a 10s infinite}
.idm-dialog{position:absolute;left:14px;right:14px;top:140px;background:#fff;border-radius:16px;padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;animation:idm-dialog 10s infinite;z-index:3;font-size:12px;color:#2A1F1A}
.idm-dialog .idm-add-row{margin:10px 0;padding:8px;background:#f6f2ee}
.idm-dialog-actions{display:flex;justify-content:flex-end;gap:16px;color:#1a73e8;font-weight:600}
.idm-dialog-actions .hit{border-radius:8px;padding:3px 8px;animation:idm-hit-add 10s infinite}
.idm-phone.android .idm-finger{animation-name:idm-finger-and}

/* Steps under the phone, lit in time with the animation */
.idm-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;justify-self:stretch}
.idm-steps li{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.45;padding:10px 12px;border-radius:12px;color:var(--ink);opacity:.45;animation:idm-step1 10s infinite}
.idm-steps li span{flex:0 0 24px;height:24px;border-radius:50%;background:var(--wine);color:var(--button-ink);font-size:13px;font-weight:700;display:grid;place-items:center}
.idm-steps li.s2{animation-name:idm-step2}
.idm-steps li.s3{animation-name:idm-step3}
@keyframes idm-step1{0%,28%{opacity:1;background:var(--sand)}31%,100%{opacity:.45;background:transparent}}
@keyframes idm-step2{0%,28%{opacity:.45;background:transparent}31%,58%{opacity:1;background:var(--sand)}61%,100%{opacity:.45;background:transparent}}
@keyframes idm-step3{0%,58%{opacity:.45;background:transparent}61%,97%{opacity:1;background:var(--sand)}100%{opacity:.45;background:transparent}}

/* iPhone timeline */
@keyframes idm-sheet{0%,18%{transform:translateY(105%)}26%,52%{transform:translateY(0)}56%,100%{transform:translateY(105%)}}
@keyframes idm-scroll{0%,30%{transform:translateY(0)}40%,100%{transform:translateY(-34px)}}
@keyframes idm-hit-row{0%,43%{background:#fff}45%,52%{background:#efe2e4}56%,100%{background:#fff}}
@keyframes idm-add{0%,50%{opacity:0;transform:translateY(12px)}54%,66%{opacity:1;transform:none}70%,100%{opacity:0}}
@keyframes idm-hit-add{0%,61%{background:transparent}62%,66%{background:#dbe7fb}70%,100%{background:transparent}}
@keyframes idm-home{0%,66%{opacity:0}70%,96%{opacity:1}100%{opacity:0}}
@keyframes idm-pop{0%,71%{transform:scale(0);opacity:0}76%{transform:scale(1.15);opacity:1}80%,100%{transform:scale(1);opacity:1}}
@keyframes idm-glow{0%,78%{box-shadow:0 0 0 0 rgba(255,255,255,.8)}88%{box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@keyframes idm-finger-ios{
  0%{transform:translate(170px,330px);opacity:0}
  6%{opacity:1}
  13%{transform:translate(97px,377px) scale(1)}
  16%{transform:translate(97px,377px) scale(.75)}
  19%{transform:translate(97px,377px) scale(1)}
  28%{transform:translate(110px,330px)}
  36%{transform:translate(110px,330px)}
  40%{transform:translate(110px,330px)}
  44%{transform:translate(96px,326px) scale(1)}
  46%{transform:translate(96px,326px) scale(.75)}
  48%{transform:translate(96px,326px) scale(1)}
  58%{transform:translate(172px,36px) scale(1)}
  62%{transform:translate(172px,36px) scale(.75)}
  64%{transform:translate(172px,36px) scale(1);opacity:1}
  70%,100%{transform:translate(172px,60px);opacity:0}}

/* Android timeline */
@keyframes idm-menu{0%,18%{transform:scale(.2);opacity:0}24%,48%{transform:scale(1);opacity:1}52%,100%{transform:scale(.2);opacity:0}}
@keyframes idm-hit-row-a{0%,42%{background:#fff}44%,50%{background:#efe2e4}54%,100%{background:#fff}}
@keyframes idm-dialog{0%,50%{opacity:0;transform:scale(.92)}54%,66%{opacity:1;transform:none}70%,100%{opacity:0}}
@keyframes idm-finger-and{
  0%{transform:translate(120px,250px);opacity:0}
  6%{opacity:1}
  13%{transform:translate(184px,15px) scale(1)}
  16%{transform:translate(184px,15px) scale(.75)}
  19%{transform:translate(184px,15px) scale(1)}
  36%{transform:translate(110px,161px)}
  42%{transform:translate(110px,161px) scale(1)}
  44%{transform:translate(110px,161px) scale(.75)}
  46%{transform:translate(110px,161px) scale(1)}
  58%{transform:translate(160px,246px) scale(1)}
  62%{transform:translate(160px,246px) scale(.75)}
  64%{transform:translate(160px,246px) scale(1);opacity:1}
  70%,100%{transform:translate(160px,270px);opacity:0}}
@media (prefers-reduced-motion:reduce){.idm *{animation:none!important}.idm-home{opacity:1}.idm-grid b{transform:none;opacity:1}}