/* GoSorted — self-contained tab animations (no JS, pure CSS loops).
   Each scene fills the tab pane (≈940×375, 2.5:1) and is brand-styled. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

.bw {
  --cream:#f3f2ed; --card:#fff; --ink:#383739; --soft:#5b5a5d;
  --coal:#2b2a2d; --orange:#6f7c68; --yellow:#c7b79a; --sky:#cdd7de; --peri:#b7c0cb;
  --hair:rgba(56,55,57,0.08);
  position:relative; width:100%; aspect-ratio:940/375; border-radius:20px;
  overflow:hidden; font-family:'IBM Plex Sans',system-ui,sans-serif; color:var(--ink);
  background:linear-gradient(158deg,#FFFFFF 0%,#FFFCF6 58%,#FAF6FF 100%);
  box-shadow:0 0 0 1px var(--hair), 0 28px 60px -34px rgba(56,55,57,.22);
}
.bw .card{box-shadow:0 1px 2px rgba(56,55,57,.04), 0 14px 34px -16px rgba(56,55,57,.24)}
.bw * { box-sizing:border-box; }
/* The original tab graphics held the flex panes open via their intrinsic
   width; our div has none, so force the pane + wrapper to full width. */
.w-tab-pane:has([class*="tab-image-wrapper"]){flex:1 0 100% !important;width:100% !important}
[class*="tab-image-wrapper"]:has(.bw){width:100% !important;max-width:none !important}
.bw{width:100%;max-width:780px;margin-left:auto;margin-right:auto}
.bw .stage { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:6%; }
.bw .card { background:var(--card); border-radius:14px; box-shadow:0 10px 30px -12px rgba(56,55,57,.22); padding:14px 16px; }
.bw .hub { display:inline-flex; align-items:center; gap:8px; background:var(--coal); color:#fff;
  border-radius:999px; padding:9px 14px; font-weight:600; font-size:15px; }
.bw .hub .dots{display:inline-flex;gap:3px}
.bw .hub i{width:5px;height:5px;border-radius:50%;background:var(--yellow);display:block;animation:bwdot 1.4s infinite}
.bw .hub i:nth-child(2){animation-delay:.2s}.bw .hub i:nth-child(3){animation-delay:.4s}
.bw .hub .tag{background:rgba(111,124,104,.18);color:var(--orange);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:3px 7px;border-radius:999px}
.bw .chk{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  background:var(--yellow);color:var(--ink)}
.bw .chk svg{width:12px;height:12px}
.bw .lbl{font-size:11px;color:var(--soft)}
.bw .h{font-weight:600}
@keyframes bwdot{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes bwfade{0%{opacity:0;transform:translateY(8px)}12%,90%{opacity:1;transform:none}100%{opacity:0;transform:translateY(8px)}}
@keyframes bwpop{0%,40%{opacity:0;transform:scale(.7)}50%,88%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.7)}}
@keyframes bwslideR{0%{opacity:0;transform:translateX(-22px)}18%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-22px)}}
@keyframes bwdrop{0%,30%{opacity:0;transform:translateY(-14px) scale(.8)}45%,90%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-14px) scale(.8)}}
@keyframes bwflow{0%{left:0;opacity:0}10%{opacity:1}55%{opacity:1}66%,100%{left:100%;opacity:0}}
@keyframes bwbar{0%,15%{width:6%}55%,100%{width:var(--w,70%)}}
@keyframes bwring{0%,12%{stroke-dashoffset:251}60%,100%{stroke-dashoffset:var(--off,40)}}
@keyframes bwfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* layout helpers */
.bw .row3{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:3%;width:88%}
.bw .col{display:flex;flex-direction:column;gap:8px}
.bw .pill{display:flex;align-items:center;gap:8px;background:#fff;border-radius:10px;padding:8px 10px;
  box-shadow:0 4px 14px -8px rgba(56,55,57,.2);font-size:12px;font-weight:500}
.bw .ico{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.bw .line{height:2px;background:linear-gradient(90deg,var(--orange),var(--peri));border-radius:2px;position:relative}
.bw .line b{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:var(--orange);
  transform:translate(-50%,-50%);box-shadow:0 0 0 5px rgba(111,124,104,.16);animation:bwflow 5.6s infinite}

/* 1 — VINN OPPDRAG : kanban pipeline (Ny -> Tilbud -> Vunnet) */
.bw[data-a="vinn"] .kanban{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;width:92%}
.bw[data-a="vinn"] .kcol{background:rgba(255,255,255,.45);border:1px solid var(--hair);border-radius:14px;padding:10px;min-height:150px}
.bw[data-a="vinn"] .kh{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--soft);margin-bottom:34px;text-align:center}
.bw[data-a="vinn"] .kcard{display:flex;align-items:center;gap:8px;background:#fff;border-radius:10px;padding:9px 10px;box-shadow:0 6px 16px -10px rgba(56,55,57,.25);position:relative}
.bw[data-a="vinn"] .kn{font-size:11px;font-weight:600;color:var(--ink);line-height:1.2}
.bw[data-a="vinn"] .km{font-size:9.5px;color:var(--soft)}
.bw[data-a="vinn"] .kdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.bw[data-a="vinn"] .kchk{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;border-radius:50%;background:var(--yellow);color:var(--ink)}
.bw[data-a="vinn"] .kchk svg{width:11px;height:11px}
.bw[data-a="vinn"] .ka{animation:bwrise 6s infinite}
.bw[data-a="vinn"] .kb{animation:bwrise 6s infinite;animation-delay:1.1s}
.bw[data-a="vinn"] .kc{animation:bwrise 6s infinite;animation-delay:2.2s}
.bw[data-a="vinn"] .kflow{position:absolute;top:42px;left:8%;right:8%;height:2px;background:linear-gradient(90deg,var(--orange),var(--peri),#6f8a72);border-radius:2px;opacity:.45}
.bw[data-a="vinn"] .kpacket{position:absolute;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(111,124,104,.18);animation:bwtravel 6s infinite}
@keyframes bwrise{0%,6%{opacity:0;transform:translateY(12px)}16%,100%{opacity:1;transform:none}}
@keyframes bwtravel{0%{left:0;opacity:0}10%{opacity:1}88%{left:100%;opacity:1}100%{left:100%;opacity:0}}

/* 2 — PLANLEGG : week grid filling */
.bw[data-a="plan"] .week{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:80%}
.bw[data-a="plan"] .day{background:#fff;border-radius:10px;padding:8px 6px;min-height:120px;box-shadow:0 6px 16px -10px rgba(56,55,57,.18)}
.bw[data-a="plan"] .day .dh{font-size:10px;color:var(--soft);font-weight:600;text-align:center;margin-bottom:6px}
.bw[data-a="plan"] .job{border-radius:7px;padding:5px 4px;font-size:9px;font-weight:600;color:#fff;margin-bottom:4px;text-align:center;animation:bwdrop 5.6s infinite}
.bw[data-a="plan"] .job.o{background:var(--orange)} .bw[data-a="plan"] .job.p{background:var(--peri);color:var(--ink)} .bw[data-a="plan"] .job.s{background:#93a98f}
.bw[data-a="plan"] .day:nth-child(1) .job{animation-delay:.1s}
.bw[data-a="plan"] .day:nth-child(2) .job{animation-delay:.5s}
.bw[data-a="plan"] .day:nth-child(3) .job{animation-delay:.3s}
.bw[data-a="plan"] .day:nth-child(4) .job{animation-delay:.7s}
.bw[data-a="plan"] .day:nth-child(5) .job{animation-delay:.9s}

/* 3 — FAKTURER : invoice lines + counting total */
.bw[data-a="fakt"] .inv{width:60%;max-width:340px}
.bw[data-a="fakt"] .inv .top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--hair);padding-bottom:8px;margin-bottom:8px}
.bw[data-a="fakt"] .inv .il{display:flex;justify-content:space-between;font-size:11px;color:var(--soft);margin:5px 0;animation:bwslideR 5.6s infinite}
.bw[data-a="fakt"] .inv .il:nth-child(2){animation-delay:.15s}.bw[data-a="fakt"] .inv .il:nth-child(3){animation-delay:.3s}
.bw[data-a="fakt"] .inv .tot{display:flex;justify-content:space-between;border-top:1px solid var(--hair);margin-top:7px;padding-top:8px;font-weight:700;font-size:14px}
.bw[data-a="fakt"] .inv .tot b{animation:bwpop 5.6s infinite;animation-delay:.5s}
.bw[data-a="fakt"] .badge{position:absolute;top:-9px;right:-9px;animation:bwpop 5.6s infinite;animation-delay:.6s}

/* 4 — TIMER & LØNN : timesheet bars */
.bw[data-a="timer"] .sheet{width:64%;max-width:360px}
.bw[data-a="timer"] .tr{display:flex;align-items:center;gap:10px;margin:9px 0}
.bw[data-a="timer"] .tr .nm{font-size:11px;width:74px;flex:0 0 auto}
.bw[data-a="timer"] .track{flex:1;height:14px;background:#F2ECE0;border-radius:7px;overflow:hidden}
.bw[data-a="timer"] .fill{height:100%;border-radius:7px;background:linear-gradient(90deg,var(--orange),var(--yellow));animation:bwbar 5.6s infinite}
.bw[data-a="timer"] .tr:nth-child(1) .fill{--w:80%}.bw[data-a="timer"] .tr:nth-child(2) .fill{--w:55%}.bw[data-a="timer"] .tr:nth-child(3) .fill{--w:68%}
.bw[data-a="timer"] .hrs{font-size:11px;font-weight:600;width:42px;text-align:right}

/* 5 — RAPPORTER : checklist -> report sent */
.bw[data-a="rapp"] .doc{width:54%;max-width:300px}
.bw[data-a="rapp"] .ci{display:flex;align-items:center;gap:8px;font-size:11px;margin:8px 0;animation:bwfade 5.6s infinite}
.bw[data-a="rapp"] .ci:nth-child(2){animation-delay:.2s}.bw[data-a="rapp"] .ci:nth-child(3){animation-delay:.4s}.bw[data-a="rapp"] .ci:nth-child(4){animation-delay:.6s}
.bw[data-a="rapp"] .ci .chk{width:18px;height:18px}
.bw[data-a="rapp"] .stamp{position:absolute;bottom:9%;right:9%;background:rgba(199,183,154,.25);color:var(--ink);
  font-size:11px;font-weight:600;padding:6px 12px;border-radius:999px;display:flex;gap:6px;align-items:center;animation:bwpop 5.6s infinite;animation-delay:.7s}

/* 6 — SAMLEFAKTURA : loose receipts slide together into one invoice */
.bw[data-a="samle"] .merge{display:flex;align-items:center;gap:6%;width:90%}
.bw[data-a="samle"] .receipts{position:relative;flex:0 0 42%;height:148px}
.bw[data-a="samle"] .rcpt{position:absolute;left:0;right:8%;display:flex;justify-content:space-between;align-items:center;
  background:#fff;border:1px dashed rgba(111,124,104,.45);border-radius:10px;padding:9px 12px;font-size:11px;box-shadow:0 6px 16px -10px rgba(56,55,57,.2)}
.bw[data-a="samle"] .rcpt span{color:var(--ink);font-weight:500}.bw[data-a="samle"] .rcpt b{color:var(--soft);font-weight:600}
.bw[data-a="samle"] .m1{top:6px;animation:bwmerge 5.6s infinite}
.bw[data-a="samle"] .m2{top:55px;animation:bwmerge 5.6s infinite;animation-delay:.14s}
.bw[data-a="samle"] .m3{top:104px;animation:bwmerge 5.6s infinite;animation-delay:.28s}
.bw[data-a="samle"] .merged{flex:1 1 auto;animation:bwpulse 3.6s infinite}
.bw[data-a="samle"] .mh{font-weight:600;font-size:13px;margin-bottom:8px}
.bw[data-a="samle"] .mr{font-size:11px;color:var(--soft);margin-bottom:8px}
.bw[data-a="samle"] .mtot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--hair);padding-top:8px}
.bw[data-a="samle"] .mtot b{font-size:16px;font-weight:700}
.bw[data-a="samle"] .mtag{display:inline-flex;align-items:center;gap:6px;margin-top:10px;background:rgba(199,183,154,.25);
  color:var(--ink);font-size:10px;font-weight:600;padding:5px 10px;border-radius:999px}
.bw[data-a="samle"] .mtag svg{width:12px;height:12px}
@keyframes bwmerge{0%,22%{transform:translateX(0);opacity:1}72%,100%{transform:translateX(40px);opacity:0}}

/* 7 — FERIE & FRAVÆR : team absence week-timeline (fv* classes, collision-proof) */
.bw[data-a="ferie"] .fvcard{width:100%;max-width:560px;margin:auto;background:#fff;border:1px solid rgba(56,55,57,.07);border-radius:16px;padding:18px 20px;box-shadow:0 18px 40px -22px rgba(56,55,57,.22)}
.bw[data-a="ferie"] .fvtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.bw[data-a="ferie"] .fvh{font-size:14px;font-weight:600;color:var(--ink)}
.bw[data-a="ferie"] .fvwknum{font-size:11px;color:var(--soft);background:#F4EEE2;border-radius:999px;padding:3px 10px}
.bw[data-a="ferie"] .fvdays{display:flex;gap:6px;padding-left:96px;margin-bottom:8px}
.bw[data-a="ferie"] .fvdays b{flex:1;text-align:center;font-size:10px;font-weight:500;color:var(--soft)}
.bw[data-a="ferie"] .fvline{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.bw[data-a="ferie"] .fvline:last-child{margin-bottom:0}
.bw[data-a="ferie"] .fvname{flex:0 0 86px;width:86px;display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink);font-weight:500;min-width:0}
.bw[data-a="ferie"] .fvav{flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;color:#fff;font-style:normal}
.bw[data-a="ferie"] .fvtrack{position:relative;flex:1;min-width:0;height:26px;background:#F7F2E9;border-radius:8px;overflow:hidden}
.bw[data-a="ferie"] .fvbar{position:absolute;top:0;bottom:0;left:var(--l);width:var(--w);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;border-radius:8px;color:var(--ink);white-space:nowrap;clip-path:inset(0 100% 0 0);animation:fvwipe 6.2s infinite}
.bw[data-a="ferie"] .fvfer{background:var(--peri)}
.bw[data-a="ferie"] .fvsyk{background:var(--sky);animation-delay:.3s}
.bw[data-a="ferie"] .fvjob{background:rgba(111,138,114,.28);color:#46604f;animation-delay:.6s}
@keyframes fvwipe{0%{clip-path:inset(0 100% 0 0)}16%,90%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0)}}

/* 8 — REGNSKAP : GoSorted -> Regnskap sync */
.bw[data-a="regn"] .box{background:#fff;border-radius:12px;padding:14px 16px;text-align:center;font-weight:600;font-size:13px;box-shadow:0 8px 22px -12px rgba(56,55,57,.2);min-width:120px}
.bw[data-a="regn"] .box .s{font-size:10px;color:var(--soft);font-weight:500;margin-top:3px}
.bw[data-a="regn"] .conn{position:relative;width:120px;height:36px}
.bw[data-a="regn"] .conn .line{position:absolute;top:50%;left:0;right:0}
.bw[data-a="regn"] .sync{position:absolute;left:50%;top:-26px;transform:translateX(-50%);white-space:nowrap;font-size:10px;font-weight:600;
  color:var(--ink);background:rgba(147,169,143,.25);padding:4px 9px;border-radius:999px;display:flex;gap:5px;align-items:center;animation:bwpop 5.6s infinite;animation-delay:.5s}

/* 9 — KVALITETSKONTROLL : checklist + progress ring */
.bw[data-a="kval"] .wrap{display:flex;align-items:center;gap:7%;width:80%}
.bw[data-a="kval"] .list{flex:1}
.bw[data-a="kval"] .ci{display:flex;align-items:center;gap:8px;font-size:11px;margin:9px 0;animation:bwfade 5.6s infinite}
.bw[data-a="kval"] .ci:nth-child(2){animation-delay:.25s}.bw[data-a="kval"] .ci:nth-child(3){animation-delay:.5s}.bw[data-a="kval"] .ci:nth-child(4){animation-delay:.75s}
.bw[data-a="kval"] .ci .chk{width:18px;height:18px}
.bw[data-a="kval"] .ring{position:relative;width:96px;height:96px;flex:0 0 auto}
.bw[data-a="kval"] .ring svg{transform:rotate(-90deg)}
.bw[data-a="kval"] .ring circle.bg{stroke:#EFE7D8} .bw[data-a="kval"] .ring circle.fg{stroke:var(--orange);stroke-linecap:round;
  stroke-dasharray:251;animation:bwring 5.6s infinite}
.bw[data-a="kval"] .ring .pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}

/* ===== Square feature scenes (≈939/850), side-by-side with text ===== */
.bw.sq{aspect-ratio:939/850;max-width:460px}

/* A — PLATFORM : modules unified by a GoSorted core */
.bw[data-a="platform"] .orbit{display:flex;flex-direction:column;align-items:center;gap:16px;width:88%}
.bw[data-a="platform"] .modrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.bw[data-a="platform"] .mod{display:flex;align-items:center;gap:7px;background:#fff;border-radius:10px;
  padding:8px 12px;font-size:11.5px;font-weight:500;box-shadow:0 6px 16px -8px rgba(56,55,57,.2);animation:bwbreath 3.6s infinite}
.bw[data-a="platform"] .mod i{width:8px;height:8px;border-radius:50%;display:block}
.bw[data-a="platform"] .modrow .mod:nth-child(2){animation-delay:.4s}
.bw[data-a="platform"] .modrow .mod:nth-child(3){animation-delay:.8s}
.bw[data-a="platform"] .core{background:var(--coal);color:#fff;font-weight:600;font-size:16px;padding:14px 28px;
  border-radius:14px;box-shadow:0 14px 32px -10px rgba(56,55,57,.4);animation:bwpulse 3.6s infinite}
@keyframes bwbreath{0%,100%{opacity:.72;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes bwpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* B — FEMSYSTEM : five scattered systems collapse into one GoSorted */
.bw[data-a="femsystem"] .fs{display:flex;flex-direction:column;align-items:center;gap:14px;width:88%}
.bw[data-a="femsystem"] .apps{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;animation:bwscatter 5.6s infinite}
.bw[data-a="femsystem"] .app{font-size:11px;font-weight:600;color:#fff;border-radius:9px;padding:6px 11px;box-shadow:0 5px 14px -8px rgba(56,55,57,.25)}
.bw[data-a="femsystem"] .a1{background:#5e6b58}.bw[data-a="femsystem"] .a2{background:#8e9aae}
.bw[data-a="femsystem"] .a3{background:#93a98f}.bw[data-a="femsystem"] .a4{background:#bfa777}
.bw[data-a="femsystem"] .a5{background:#a98c92}
.bw[data-a="femsystem"] .arrow{color:var(--soft);font-size:18px;animation:bwfloat 2s infinite}
.bw[data-a="femsystem"] .one{display:flex;align-items:center;gap:10px;background:var(--coal);color:#fff;
  border-radius:14px;padding:13px 18px;box-shadow:0 12px 28px -10px rgba(56,55,57,.4);animation:bwpulse 3.4s infinite}
.bw[data-a="femsystem"] .one .h{font-size:15px}.bw[data-a="femsystem"] .one .lbl{color:rgba(255,255,255,.7)}
@keyframes bwscatter{0%,12%{opacity:1;transform:scale(1)}55%,100%{opacity:.28;transform:scale(.86)}}

/* C — KAPASITET : admin time shrinks, time in the field grows */
.bw[data-a="kapasitet"] .kap{width:86%}
.bw[data-a="kapasitet"] .kt{font-size:13px;font-weight:600;margin-bottom:14px}
.bw[data-a="kapasitet"] .bar{display:flex;height:30px;border-radius:9px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--hair);background:#fff;margin-bottom:8px}
.bw[data-a="kapasitet"] .admin{background:linear-gradient(90deg,#7f8b6f,#5e6b58);display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:600;flex:0 0 auto}
.bw[data-a="kapasitet"] .felt{background:linear-gradient(90deg,#93a98f,#6f8a72);display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:600;flex:1 1 auto}
.bw[data-a="kapasitet"] .bar.before .admin{width:60%}
.bw[data-a="kapasitet"] .bar.after .admin{animation:bwshrink 5.6s infinite}
.bw[data-a="kapasitet"] .blab{display:flex;justify-content:space-between;font-size:10px;color:var(--soft);margin:2px 2px 16px}
.bw[data-a="kapasitet"] .kbadge{display:inline-flex;align-items:center;gap:6px;background:rgba(147,169,143,.22);color:#42594a;
  font-size:11px;font-weight:700;padding:6px 12px;border-radius:999px;animation:bwbreath 3.2s infinite}
@keyframes bwshrink{0%,15%{width:60%}60%,100%{width:22%}}

/* 10 — VARSLINGER : notification toasts */
.bw[data-a="varsel"] .toasts{display:flex;flex-direction:column;gap:9px;width:62%;max-width:330px}
.bw[data-a="varsel"] .toast{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:9px 12px;
  box-shadow:0 8px 22px -12px rgba(56,55,57,.22);opacity:1;animation:bwtoast .7s cubic-bezier(.16,1,.3,1) both}
.bw[data-a="varsel"] .toast:nth-child(2){animation-delay:.32s}.bw[data-a="varsel"] .toast:nth-child(3){animation-delay:.64s}
/* transform-only entrance: stays visible even if the animation timeline is paused
   (backgrounded tab) — never rests at opacity 0. */
@keyframes bwtoast{0%{transform:translateY(-10px)}100%{transform:translateY(0)}}
.bw[data-a="varsel"] .toast .t{font-size:11.5px;font-weight:600}.bw[data-a="varsel"] .toast .sub{font-size:10px;color:var(--soft)}
.bw[data-a="varsel"] .toast .ico{width:30px;height:30px}

/* OPPFØLGING : automatic follow-up SMS thread (chat form) */
.bw[data-a="oppfolging"] .chat{width:74%;max-width:430px;background:#fff;border-radius:16px;padding:15px 16px;
  border:1px solid var(--hair);box-shadow:0 16px 38px -18px rgba(56,55,57,.26)}
.bw[data-a="oppfolging"] .chead{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--hair);padding-bottom:10px;margin-bottom:12px}
.bw[data-a="oppfolging"] .cti{font-weight:600;font-size:13px}
.bw[data-a="oppfolging"] .cmeta{font-size:10px;color:var(--soft)}
.bw[data-a="oppfolging"] .cbub{max-width:84%;font-size:11.5px;line-height:1.45;border-radius:14px;padding:10px 13px;margin-bottom:10px}
.bw[data-a="oppfolging"] .cbub.out{margin-left:auto;background:var(--coal);color:#fff;border-bottom-right-radius:4px}
.bw[data-a="oppfolging"] .cwho{font-size:8.5px;color:var(--yellow);font-weight:700;margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em}
.bw[data-a="oppfolging"] .cstat{display:flex;align-items:center;gap:4px;justify-content:flex-end;font-size:9px;color:rgba(255,255,255,.72);margin-top:6px}
.bw[data-a="oppfolging"] .cstat svg{width:10px;height:10px}
.bw[data-a="oppfolging"] .ctyping{display:inline-flex;gap:4px;background:var(--cream);border:1px solid var(--hair);border-radius:12px;padding:9px 11px;margin-bottom:10px;animation:bwtyping 6s infinite}
.bw[data-a="oppfolging"] .ctyping i{width:5px;height:5px;border-radius:50%;background:var(--soft);animation:bwdot 1.2s infinite}
.bw[data-a="oppfolging"] .ctyping i:nth-child(2){animation-delay:.2s}.bw[data-a="oppfolging"] .ctyping i:nth-child(3){animation-delay:.4s}
.bw[data-a="oppfolging"] .cbub.in{background:var(--cream);color:var(--ink);border:1px solid var(--hair);border-bottom-left-radius:4px;animation:bwarrive 6s infinite}
@keyframes bwtyping{0%,40%{opacity:0}48%,62%{opacity:1}68%,100%{opacity:0}}
@keyframes bwarrive{0%,64%{opacity:0;transform:translateY(8px)}74%,100%{opacity:1;transform:none}}

/* ===== Compact 3-up feature cards (Salg / Drift / Økonomi) ≈306/255 ===== */
.bw.c3{aspect-ratio:306/255;max-width:330px}
/* SALG : CRM contact + status list */
.bw[data-a="salg"] .crm{display:flex;flex-direction:column;gap:10px;width:86%}
.bw[data-a="salg"] .crow{display:flex;align-items:center;gap:10px;background:#fff;border-radius:11px;padding:10px 12px;box-shadow:0 6px 16px -10px rgba(56,55,57,.2)}
.bw[data-a="salg"] .cdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.bw[data-a="salg"] .cnm{flex:1;font-size:12px;font-weight:600;color:var(--ink)}
.bw[data-a="salg"] .cst{font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:999px}
.bw[data-a="salg"] .sto{background:rgba(111,124,104,.16);color:#515b46}
.bw[data-a="salg"] .stp{background:rgba(183,192,203,.32);color:#5a6172}
.bw[data-a="salg"] .stg{background:rgba(111,138,114,.22);color:#42594a}
.bw[data-a="salg"] .s1{animation:bwrise 5.6s infinite}
.bw[data-a="salg"] .s2{animation:bwrise 5.6s infinite;animation-delay:.18s}
.bw[data-a="salg"] .s3{animation:bwrise 5.6s infinite;animation-delay:.36s}
/* DRIFT : job list with assignees + status */
.bw[data-a="drift"] .ops{width:88%}
.bw[data-a="drift"] .ohead{font-size:11px;font-weight:700;color:var(--soft);margin-bottom:10px}
.bw[data-a="drift"] .orow{display:flex;align-items:center;gap:9px;background:#fff;border-radius:11px;padding:9px 11px;margin-bottom:9px;box-shadow:0 6px 16px -10px rgba(56,55,57,.2)}
.bw[data-a="drift"] .oav{width:26px;height:26px;border-radius:50%;background:var(--sky);color:var(--ink);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.bw[data-a="drift"] .onm{flex:1;font-size:11px;font-weight:500;color:var(--ink)}
.bw[data-a="drift"] .ost{font-size:9px;font-weight:700;padding:3px 8px;border-radius:999px;flex:0 0 auto}
.bw[data-a="drift"] .done{background:rgba(111,138,114,.22);color:#42594a}
.bw[data-a="drift"] .prog{background:rgba(111,124,104,.16);color:#515b46}
.bw[data-a="drift"] .plan{background:rgba(56,55,57,.06);color:var(--soft)}
.bw[data-a="drift"] .s1{animation:bwrise 5.6s infinite}
.bw[data-a="drift"] .s2{animation:bwrise 5.6s infinite;animation-delay:.18s}
.bw[data-a="drift"] .s3{animation:bwrise 5.6s infinite;animation-delay:.36s}
/* ØKONOMI : invoiced total + up-trend sparkline */
.bw[data-a="okonomi"] .fin{width:82%;background:#fff;border-radius:14px;padding:16px 18px;box-shadow:0 10px 28px -14px rgba(56,55,57,.24)}
.bw[data-a="okonomi"] .finh{font-size:11px;color:var(--soft);font-weight:500}
.bw[data-a="okonomi"] .finn{font-size:24px;font-weight:700;letter-spacing:-0.02em;margin:2px 0 8px}
.bw[data-a="okonomi"] .spark{width:100%;height:48px;display:block;overflow:visible}
.bw[data-a="okonomi"] .sl{fill:none;stroke:var(--orange);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:360;stroke-dashoffset:360;animation:bwdraw 4.5s ease-out infinite}
.bw[data-a="okonomi"] .fintag{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:10px;font-weight:600;color:#42594a;background:rgba(111,138,114,.18);padding:5px 10px;border-radius:999px}
.bw[data-a="okonomi"] .fintag svg{width:12px;height:12px}
@keyframes bwdraw{0%,10%{stroke-dashoffset:360}70%,100%{stroke-dashoffset:0}}

/* Loom #3 — Line Ticker separator: make the marquee run on every page (Webflow IX2
   was stationary on most instances). 3 identical copies -> translate one copy width
   (-33.333%) loops seamlessly. */
.line-ticker-list{animation:bwticker 22s linear infinite;will-change:transform}
@keyframes bwticker{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}