/* Animerad demo: en telefon som visar Frists fyra steg i loop. Ren CSS, inga bilder. */
.dm { display:flex; justify-content:center; --dm-bg:#f2f0ea; --dm-card:#fff; --dm-ink:#1c1a17; --dm-soft:#77726a; --dm-accent:#e0553d; --dm-sage:#5b6b58; --dm-hair:rgba(28,26,23,.09); --dm-amber-soft:#f1e7d1; --dm-sage-soft:#e4eae0; --dm-accent-soft:#f9e4dd; --dm-amber:#b1832e; }
.dm-fon { width:250px; aspect-ratio:9/19; border-radius:38px; background:#0f1512; padding:10px; box-shadow:0 40px 80px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.08); }
.dm-skarm { position:relative; width:100%; height:100%; border-radius:30px; background:var(--dm-bg); overflow:hidden; font-family:'Inter',-apple-system,sans-serif; color:var(--dm-ink); }
.dm-top { display:flex; justify-content:space-between; padding:14px 18px 0; font-size:12px; font-weight:700; }
.dm-brand { font-family:'Bricolage Grotesque','Inter',sans-serif; font-weight:600; font-size:15px; }
.dm-tid { opacity:.5; font-weight:600; }
.dm-sc { position:absolute; left:14px; right:14px; top:48px; bottom:14px; opacity:0; animation:dmScen 16s infinite; }
.dm-s2 { animation-delay:4s; } .dm-s3 { animation-delay:8s; } .dm-s4 { animation-delay:12s; }
@keyframes dmScen { 0%{opacity:0; transform:translateY(10px)} 4%{opacity:1; transform:none} 23%{opacity:1; transform:none} 26%{opacity:0; transform:translateY(-8px)} 100%{opacity:0} }
.dm-cap { position:absolute; left:0; right:0; bottom:0; text-align:center; font-size:11px; font-weight:600; color:var(--dm-soft); }
.dm-dok { position:relative; background:var(--dm-card); border-radius:14px; padding:18px 16px; margin-top:10px; box-shadow:0 1px 3px rgba(0,0,0,.06); overflow:hidden; }
.dm-rad { height:7px; border-radius:4px; background:#e6e2d9; margin-top:9px; }
.dm-rad.dm-rub { height:10px; background:#cfcac0; margin-top:0; }
.w40{width:40%} .w50{width:50%} .w60{width:60%} .w70{width:70%} .w80{width:80%} .w85{width:85%} .w90{width:90%}
.dm-scan { position:absolute; left:0; right:0; height:34px; top:-40px; background:linear-gradient(to bottom, rgba(224,85,61,0), rgba(224,85,61,.18) 60%, rgba(224,85,61,.55)); border-bottom:2px solid var(--dm-accent); animation:dmScan 4s infinite; }
@keyframes dmScan { 0%{top:-40px} 10%{top:-40px} 70%{top:100%} 100%{top:100%} }
.dm-kort { background:var(--dm-card); border-radius:14px; padding:14px; margin-top:8px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.dm-namn { font-family:'Bricolage Grotesque','Inter',sans-serif; font-weight:600; font-size:16px; letter-spacing:-.2px; }
.dm-lev { font-size:10.5px; color:var(--dm-soft); margin-top:2px; }
.dm-kv { display:flex; justify-content:space-between; font-size:11px; padding:7px 0; border-top:1px solid var(--dm-hair); margin-top:0; }
.dm-kv span { color:var(--dm-soft); } .dm-kv b { font-weight:600; }
.dm-kv.dm-frist { color:var(--dm-accent); } .dm-kv.dm-frist span { color:var(--dm-accent); }
.dm-kort .dm-kv:first-of-type { margin-top:10px; }
.dm-s2 .dm-kv, .dm-s2 .dm-cit { opacity:0; animation:dmRad 16s infinite; }
.dm-s2 .dm-kv:nth-of-type(1){animation-delay:4.5s} .dm-s2 .dm-kv:nth-of-type(2){animation-delay:4.9s} .dm-s2 .dm-kv:nth-of-type(3){animation-delay:5.3s} .dm-s2 .dm-kv:nth-of-type(4){animation-delay:5.7s} .dm-s2 .dm-cit{animation-delay:6.2s}
@keyframes dmRad { 0%{opacity:0; transform:translateX(-6px)} 3%{opacity:1; transform:none} 20%{opacity:1} 22%{opacity:0} 100%{opacity:0} }
.dm-cit { font-size:9.5px; color:var(--dm-soft); font-style:italic; margin-top:8px; }
.dm-notis { display:flex; gap:10px; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-radius:16px; padding:11px 12px; font-size:10.5px; box-shadow:0 8px 24px rgba(0,0,0,.12); transform:translateY(-70px); animation:dmNotis 16s infinite; animation-delay:8s; }
.dm-notis b { font-size:10px; display:block; margin-bottom:2px; }
.dm-nik { width:26px; height:26px; border-radius:8px; background:#0f1512; flex:none; position:relative; }
.dm-nik::after { content:''; position:absolute; left:8px; top:6px; width:10px; height:14px; border:2px solid #f2f0ea; border-radius:2px; clip-path:polygon(0 0,100% 0,50% 50%,100% 100%,0 100%,50% 50%); background:var(--dm-accent); }
@keyframes dmNotis { 0%{transform:translateY(-70px)} 5%{transform:none} 100%{transform:none} }
.dm-mejl { margin-top:14px; }
.dm-knapp { margin-top:12px; background:var(--dm-ink); color:#fff; font-size:10.5px; font-weight:600; text-align:center; padding:8px; border-radius:9px; }
.dm-stor { font-family:'Bricolage Grotesque','Inter',sans-serif; font-weight:600; font-size:30px; letter-spacing:-1px; color:var(--dm-sage); line-height:1.1; margin-top:6px; }
@media (prefers-reduced-motion: reduce) {
  .dm-sc, .dm-s2 .dm-kv, .dm-s2 .dm-cit, .dm-notis,   .dm-s2 { opacity:1; } .dm-s2 .dm-kv, .dm-s2 .dm-cit { opacity:1; } }

/* Scener som speglar appens gränssnitt */
.dm-hero { padding:6px 2px 4px; }
.dm-stor span { font-size:11px; font-weight:500; color:var(--dm-soft); letter-spacing:0; font-family:'Inter',sans-serif; }
.dm-catl { font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--dm-soft); margin:10px 2px 5px; }
.dm-lista { background:var(--dm-card); border-radius:14px; padding:2px 10px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.dm-lrow { display:flex; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--dm-hair); opacity:0; animation:dmRad 16s infinite; }
.dm-lrow:first-child { border-top:none; }
.dm-lrow:nth-child(1){animation-delay:.6s} .dm-lrow:nth-child(2){animation-delay:.9s} .dm-lrow:nth-child(3){animation-delay:1.2s} .dm-lrow:nth-child(4){animation-delay:1.5s}
.dm-lrow i, .dm-todo i { width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-style:normal; font-size:12px; flex:none; background:var(--dm-hair); }
.dm-lrow div { flex:1; min-width:0; } .dm-lrow b { display:block; font-size:10.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dm-lrow span, .dm-todo span { display:block; font-size:9px; color:var(--dm-soft); }
.dm-lrow em { font-style:normal; font-size:10.5px; font-weight:600; white-space:nowrap; } .dm-lrow small { font-size:8px; font-weight:500; color:var(--dm-soft); }
.dm-todo { display:flex; gap:8px; align-items:flex-start; background:var(--dm-card); border-radius:12px; padding:10px; margin-top:10px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.dm-todo > div { flex:1; } .dm-todo b { font-size:10.5px; font-weight:600; display:block; } .dm-todo span { margin-top:1px; }
.dm-s2 .dm-todo { opacity:0; animation:dmRad 16s infinite; animation-delay:6.6s; }
.dm-ark { position:absolute; left:-4px; right:-4px; bottom:16px; background:var(--dm-card); border-radius:18px 18px 12px 12px; padding:8px 12px 12px; box-shadow:0 -8px 30px rgba(0,0,0,.14); transform:translateY(110%); animation:dmArk 16s infinite; }
.dm-s3 .dm-ark { animation-delay:8.3s; }
@keyframes dmArk { 0%{transform:translateY(110%)} 4%{transform:none} 100%{transform:none} }
.dm-ark-grepp { width:34px; height:4px; border-radius:2px; background:#d6d2c9; margin:0 auto 10px; }
.dm-ark-rub { font-family:'Bricolage Grotesque','Inter',sans-serif; font-size:14px; font-weight:600; }
.dm-ark-sub { font-size:9.5px; color:var(--dm-sage); font-weight:600; margin-top:2px; }
.dm-ark-kontakt .dm-knapp { margin-top:10px; }
.dm-amber { background:var(--dm-amber-soft); color:var(--dm-ink); border-radius:10px; padding:8px 10px; font-size:9.5px; margin-top:8px; line-height:1.4; }
.dm-amber b { display:block; color:var(--dm-amber); font-size:9px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:2px; }
.dm-ark-kontakt .dm-kv { font-size:9.5px; padding:6px 0; } .dm-ark-kontakt .dm-kv:first-of-type { margin-top:6px; border-top:none; }
.dm-ins-hero { background:var(--dm-sage); color:#fff; border-radius:14px; padding:12px; margin-top:8px; }
.dm-ins-hero .dm-lev { color:rgba(255,255,255,.85); } .dm-ins-hero .dm-stor { color:#fff; font-size:26px; } .dm-ins-hero .dm-stor span { color:rgba(255,255,255,.8); }
.dm-ins { margin-top:0; padding:8px 10px; } .dm-ins .dm-todo { background:transparent; box-shadow:none; padding:0; margin:0; }
.dm-chip { display:inline-block; font-style:normal; font-size:8.5px; font-weight:600; padding:2px 7px; border-radius:99px; margin-top:5px; }
.dm-chip-amber { background:var(--dm-amber-soft); color:var(--dm-amber); } .dm-chip-green { background:var(--dm-sage-soft); color:var(--dm-sage); }
.dm-s4 .dm-catl, .dm-s4 .dm-ins { opacity:0; animation:dmRad 16s infinite; }
.dm-s4 .dm-d1{animation-delay:12.6s} .dm-s4 .dm-d2{animation-delay:12.8s} .dm-s4 .dm-d3{animation-delay:13.3s} .dm-s4 .dm-d4{animation-delay:13.5s}
@media (prefers-reduced-motion: reduce) { .dm-lrow, .dm-s2 .dm-todo, .dm-s4 .dm-catl, .dm-s4 .dm-ins { animation:none; opacity:1; } .dm-ark { animation:none; transform:none; } }