/* ============================================================
   XAI-RAMEN — menyn, foten och popup-rutorna för den nya (x.ai-) designen,
   delad av alla sidor i designen som inte har dem inbakade (lösningssidorna,
   kundportalen, bloggen, villkoren …). Utdrag ur xai-hero-skelett.html — ändras
   menyn där: kopiera markupen med  node scripts/xai-ram-synk.js  och CSS:en hit.
   ============================================================ */
/* ============================================================
   MENYN — kopierad från default-skelett.html (tokens, knappar, nav, dropdowns)
   ============================================================ */
:root{
  /* färger ur ZAAI Design System (brand_assets/zaai-design-system/tokens) */
  --bg:#f8f6fc; --card:#FFFFFF; --line:#e9e4f2; --line-h:#d8d2e4;
  --ink:#211e28; --muted:#655f73; --tone:#f2eff8; --tone2:#fcfbfe;
  --blue:#8b5cf6; --orange:#e2a03f; --lime:#2fae7f; --pink:#e879a8; --gray:#8b8599;
  --violet-50:#f6f2ff; --violet-200:#dccbff; --violet-600:#7546dd; --violet-700:#5f36b4;
  --aurora:radial-gradient(60% 60% at 20% 10%,rgba(139,92,246,.20) 0%,rgba(139,92,246,0) 70%),radial-gradient(55% 55% at 82% 8%,rgba(192,132,252,.18) 0%,rgba(192,132,252,0) 72%),radial-gradient(50% 50% at 65% 78%,rgba(232,121,168,.14) 0%,rgba(232,121,168,0) 70%),radial-gradient(45% 45% at 8% 82%,rgba(157,201,233,.20) 0%,rgba(157,201,233,0) 72%);
  --shadow-glow:0 12px 32px -8px rgba(139,92,246,.36);
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  --e-in:cubic-bezier(.22,1,.36,1); --e-quart:cubic-bezier(.25,1,.5,1);
  --e-strong:cubic-bezier(.23,1,.32,1); --e-blur:cubic-bezier(.45,.05,.25,1);
  --e-svep:cubic-bezier(.4,0,.2,1); --e-bana:cubic-bezier(.45,0,.25,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink)}
body{min-width:1440px;overflow-x:hidden;font-family:"Inter",system-ui,sans-serif;font-optical-sizing:auto;font-size:14px;line-height:20px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.wrap{width:1240px;margin:0 auto;position:relative}

/* ---------- gemensamma småbitar ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;font-size:14px;line-height:20px;font-weight:500;white-space:nowrap;transition:background-color 120ms ease,color 120ms ease,transform 100ms ease}
.btn-dark{background:var(--blue);color:#fff;box-shadow:var(--shadow-glow)}
.btn-dark:hover{background:var(--violet-600)}
.btn-dark:active{transform:translateY(1px)}
.btn-ghost{color:var(--muted)}
.btn-ghost:hover{color:var(--ink);background:var(--tone)}
.btn-sm{height:34px;font-size:13px;line-height:16px;padding:0 14px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--gray);flex:none;display:inline-block}
.dot.blue{background:var(--blue)} .dot.orange{background:var(--orange)} .dot.lime{background:var(--lime)} .dot.pink{background:var(--pink)}
.chip{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 8px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:11px;line-height:14px;color:var(--ink);white-space:nowrap}
.count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--tone);font-size:11px;font-weight:500;color:var(--ink)}
.av{display:inline-grid;place-items:center;border-radius:50%;background:var(--tone);color:var(--muted);font-weight:500;flex:none}

/* ============================================================
   0 · NAV + DROPDOWNS
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;height:72px;z-index:50;transition:background-color 200ms ease,box-shadow 200ms ease}
.nav.scrolled{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 -1px 0 var(--line)}
.nav-in{width:1240px;height:72px;margin:0 auto;position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:20px;line-height:24px;font-weight:600;letter-spacing:-.4px}
.brand img{width:30px;height:30px;border-radius:8px;background:#fff;border:1px solid var(--line);object-fit:cover}
.nav-links{display:flex;align-items:center;gap:4px}
.nl{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 12px;border-radius:8px;font-size:14px;line-height:20px;font-weight:450;letter-spacing:-.2px;color:rgba(33,30,40,.82);transition:color 120ms ease,background-color 120ms ease}
.nl:hover,.nl[aria-expanded="true"]{color:var(--ink)}
.nl svg.i{width:14px;height:14px;transition:transform 200ms var(--e-strong)}
.nl[aria-expanded="true"] svg.i{transform:rotate(180deg)}
.nav-right{justify-self:end;display:flex;align-items:center;gap:8px}

.dd{position:absolute;top:64px;left:0;width:var(--w,250px);height:var(--h,160px);transform:translate(var(--x,0px),-6px);opacity:0;pointer-events:none;
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 48px -16px rgba(109,74,156,.20),0 4px 12px rgba(109,74,156,.06);overflow:hidden;contain:layout paint;
  transition:opacity 140ms var(--e-strong),transform 140ms var(--e-strong)}
.dd.open{opacity:1;pointer-events:auto;transform:translate(var(--x,0px),0);
  transition:opacity 200ms var(--e-strong),transform 260ms var(--e-strong),width 260ms var(--e-strong),height 260ms var(--e-strong)}
.dd.noanim,.dd.noanim .dd-pane{transition:none!important}
.dd-pane{position:absolute;top:0;left:0;padding:8px;opacity:0;pointer-events:none;transition:opacity 120ms linear,transform 120ms var(--e-strong)}
.dd-pane.on{opacity:1;pointer-events:auto;transform:none;transition:opacity 200ms linear 60ms,transform 200ms var(--e-strong) 60ms}
.dd-label{font-size:12px;line-height:16px;font-weight:500;color:var(--muted);padding:8px 12px}
.dd-feature{background:var(--bg);border-radius:12px;padding:20px;display:flex;flex-direction:column}
.dd-feature h4{font-size:17px;line-height:24px;font-weight:500;letter-spacing:-.2px}
.dd-feature p{font-size:13px;line-height:20px;color:var(--muted);margin-top:6px}
.dd-item{display:block;border-radius:12px;padding:16px;transition:background-color 120ms ease}
.dd-item:hover{background:var(--tone)}
.dd-item .ttl{display:flex;align-items:center;gap:10px;font-size:15px;line-height:20px;font-weight:500}
.dd-item .ttl svg.i{width:18px;height:18px}
.dd-item p{font-size:13px;line-height:20px;color:var(--muted);margin-top:6px}
/* Tjänster */
.p-tjanster{width:1248px}
.p-tjanster .cols{display:grid;grid-template-columns:520px 1fr;gap:8px}
.p-tjanster .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.p-tjanster .dd-item{min-height:120px}
.wz-label{margin-top:4px;border-top:1px solid rgba(0,0,0,.055);padding-top:12px}
.wz-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 4px}
.wz-item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;border-radius:10px;transition:background-color 120ms ease}
.wz-item:hover{background:var(--tone)}
.wz-item svg.i{width:16px;height:16px;margin-top:2px;color:var(--muted)}
.wz-item b{display:block;font-size:14px;line-height:20px;font-weight:500}
.wz-item small{display:block;font-size:12px;line-height:18px;color:var(--muted);margin-top:1px}
/* --- Kundportal-bento i Tjänster-menyn ---
   Bygger på 21st.dev-komponenten "bento-card" (React + motion), omskriven till vanilla.
   Utseendet följer kundportalens riktiga tokens (--ny-* i ZAAI Kundportal/hosting/index.html). */
.kp-card{--kp-ink:#17151E;--kp-ink2:#3D3A47;--kp-muted:#8A8794;--kp-muted2:#A5A2AE;--kp-accent:#6B5391;--kp-line:rgba(23,20,32,.07);--kp-line2:rgba(23,20,32,.045);
  --kp-rail:#FCFBFD;--kp-grad:linear-gradient(118deg,#EDE6FA 0%,#E9E9FB 48%,#E7F1FA 100%);--kp-grad-stark:linear-gradient(118deg,#E0D4F6 0%,#DDDFF7 52%,#D8E9F8 100%);
  --kp-grad-svag:linear-gradient(118deg,#F7F4FD 0%,#F5F6FD 52%,#F2F8FD 100%);--kp-ease:cubic-bezier(.23,1,.32,1);
  position:relative;overflow:hidden;border-radius:28px;border:1px solid var(--kp-line);background:#fff;color:var(--kp-ink);
  box-shadow:0 25px 50px -12px rgba(107,83,145,.10);transition:transform 500ms var(--kp-ease),box-shadow 500ms var(--kp-ease)}
.kp-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -14px rgba(107,83,145,.18)}
.kp-head{position:relative;z-index:2;padding:22px 24px 0}
.kp-eyebrow{font-size:11px;line-height:16px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--kp-muted)}
.kp-title{margin-top:6px;max-width:400px;font-size:21px;line-height:28px;font-weight:500;letter-spacing:-.3px;color:var(--kp-ink)}
.kp-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;font-weight:500;color:var(--kp-accent)}
.kp-link svg.i{width:14px;height:14px;transition:transform 200ms var(--kp-ease)}
.kp-link:hover svg.i{transform:translateX(3px)}
.kp-stage{position:relative;height:366px;margin-top:18px;overflow:hidden}
.kp-sheet{position:absolute;left:56px;top:56px;width:100%;height:100%;border-radius:22px;background:var(--kp-grad-svag);border:1px solid var(--kp-line)}
.kp-win{position:absolute;left:88px;top:28px;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:#fff;border-top-left-radius:22px;
  box-shadow:0 0 0 6px rgba(107,83,145,.07),0 20px 40px -12px rgba(107,83,145,.18)}
.kp-bar{position:relative;display:flex;align-items:center;height:40px;padding:0 16px;border-bottom:1px solid var(--kp-line)}
.kp-dots{display:flex;gap:6px}
.kp-dots i{width:8px;height:8px;border-radius:50%;background:rgba(23,20,32,.12)}
.kp-bar-label{position:absolute;left:0;right:0;text-align:center;padding-right:88px;font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--kp-muted2);pointer-events:none}
.kp-body{flex:1;display:flex;min-height:0}
/* Sidomenyn följer portalens nya vita meny (ZAAI Kundportal, 2026-09-19): vit kolumn, ljusblå vald flik, neutral hover och badge. */
/* Sidomenyn speglar kundportalens nya meny (2026-09-23): varmgrå yta, vald flik som vit platta, neutral text */
.kp-side{position:relative;width:148px;flex:none;padding:8px 7px;background:oklch(0.9706 0.0017 67.8);border-right:1px solid oklch(0.9254 0.0017 67.8)}
.kp-sec{display:flex;align-items:center;height:26px;padding:0 7px;font-size:9.5px;line-height:14px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:oklch(0.2645 0 0 / .6)}
.kp-pill{position:absolute;left:7px;right:7px;top:0;height:30px;border-radius:5.4px;background:#fff;pointer-events:none}
.rorelse .kp-pill{transition:transform 560ms cubic-bezier(.3,1.18,.4,1),height 560ms cubic-bezier(.3,1.18,.4,1)}
.kp-tab{position:relative;z-index:1;display:flex;align-items:center;gap:7px;width:100%;height:30px;padding:0 7px;border-radius:5.4px;font-size:12px;line-height:16px;font-weight:400;color:oklch(0.2645 0 0);text-align:left;cursor:pointer;transition:background-color 120ms ease}
.kp-tab[aria-selected="false"]:hover{background:oklch(0.2645 0 0 / .04)}
.kp-tab svg{width:13.5px;height:13.5px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kp-tab[aria-selected="true"]{font-weight:500}
.kp-tab:focus-visible{outline:2px solid oklch(0.6769 0.1777 249.9);outline-offset:-2px}
.kp-badge{margin-left:auto;display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 3px;border-radius:5.4px;font-size:10px;line-height:14px;font-weight:500;font-variant-numeric:tabular-nums;color:oklch(0.2645 0 0)}
.kp-main{position:relative;flex:1;min-width:0;padding:18px 18px 0;overflow:hidden;background:#fff}
.kp-mhead p{font-size:10px;line-height:14px;color:var(--kp-muted)}
.kp-mhead h5{margin-top:2px;font-size:17px;line-height:22px;font-weight:300;letter-spacing:-.2px;color:var(--kp-ink)}
.kp-panes{position:relative;height:240px;margin-top:12px}
.kp-pane{position:absolute;left:0;top:0;width:230px;display:grid;gap:8px;align-content:start;opacity:0;transform:translateY(8px);filter:blur(4px);pointer-events:none}
.kp-pane.on{opacity:1;transform:none;filter:none;pointer-events:auto}
.kp-pane.ut{transform:translateY(-8px)}
.rorelse .kp-pane{transition:opacity 300ms var(--kp-ease),transform 300ms var(--kp-ease),filter 300ms var(--kp-ease)}
.kp-fade{position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(to top,#fff,rgba(255,255,255,0));pointer-events:none;z-index:2}
.kp-kpi{position:relative;padding:11px 12px 8px;border-radius:12px;background:var(--kp-grad-stark);border:1px solid rgba(107,83,145,.16)}
.kp-kpi .l{font-size:11px;line-height:14px;font-weight:500;color:var(--kp-ink2)}
.kp-kpi .v{display:block;margin-top:2px;font-size:26px;line-height:30px;font-weight:300;letter-spacing:-.5px;color:var(--kp-accent);font-variant-numeric:tabular-nums}
.kp-kpi .s{display:block;font-size:10px;line-height:14px;color:var(--kp-muted)}
.kp-spark{display:block;width:100%;height:24px;margin-top:4px;overflow:visible}
.kp-spark path{fill:none;stroke:var(--kp-accent);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
@keyframes kp-rita{from{stroke-dashoffset:1}}
.rorelse .kp-pane.on .kp-spark path{stroke-dasharray:1;animation:kp-rita 900ms var(--kp-ease) 120ms backwards}
.kp-mini{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kp-mini div{padding:9px 10px;border-radius:10px;border:1px solid var(--kp-line);background:#fff}
.kp-mini .l{display:flex;align-items:center;gap:5px;font-size:10px;line-height:14px;color:var(--kp-muted)}
.kp-mini .v{display:block;margin-top:2px;font-size:15px;line-height:20px;font-weight:500;color:var(--kp-ink);font-variant-numeric:tabular-nums}
.kp-dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--kp-accent)}
.kp-dot.amber{background:#F0A868} .kp-dot.klar{background:#9FC7A8} .kp-dot.gra{background:var(--kp-muted2)}
.kp-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;border:1px solid var(--kp-line);background:#fff}
.kp-ico{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:7px;background:var(--kp-grad-svag);border:1px solid var(--kp-line2);color:var(--kp-accent)}
.kp-ico svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kp-row .t{flex:1;min-width:0}
.kp-row b{display:block;font-size:11px;line-height:15px;font-weight:600;color:var(--kp-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-row small{display:flex;align-items:center;gap:5px;font-size:10px;line-height:14px;color:var(--kp-muted);white-space:nowrap}
.kp-check{width:13px;height:13px;flex:none;border-radius:4px;border:1.5px solid rgba(107,83,145,.35);background:#fff}
/* ekonomi: prognoskortet ur Ekonomi-demon */
/* ekonomi: speglar Ekonomi-vyn i demon (Wb6mWhTtEL) i liten skala */
.kp-main{transition:background-color 300ms var(--kp-ease)}
.kp-main.eko{background:#F6F5F4}
.kp-main.todo{background:#FAFAFB}
.kp-main.sida .kp-fade{opacity:0}
.kp-main.sida .kp-mhead{display:flex;flex-direction:column-reverse}
.kp-main.sida .kp-mhead h5{margin-top:0;font-size:18px;line-height:22px;font-weight:400;letter-spacing:-.3px}
.kp-main.sida .kp-mhead p{margin-top:2px;font-size:7.5px;line-height:10px;color:#6E6B78;white-space:nowrap}
/* Ekonomi: showcase-vyn som bild, i samma skala som Mina system (1208 px, zoom .56) */
#kp-p-ekonomi{width:1208px;display:block;zoom:.56;padding:8px 20px 0}
#kp-p-ekonomi img{display:block;width:1168px;height:auto}
.kp-main.full:has(#kp-p-ekonomi.on){background:#f5f4f2}
.kp-eko{display:grid;grid-template-columns:146px 132px;gap:6px}
.kp-eko>div{padding:8px 9px 8px;border-radius:7px;border:1px solid #E7E6E5;background:#fff;min-width:0}
.kp-eko .l{display:flex;align-items:center;justify-content:space-between;font-size:7px;line-height:9px;color:#252525}
.kp-wallet{width:7px;height:7px;fill:none;stroke:#7A7880;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kp-eko .v{display:block;margin-top:4px;font-size:14px;line-height:17px;font-weight:300;letter-spacing:-.1px;color:#252525;font-variant-numeric:tabular-nums;white-space:nowrap}
.kp-eko .s{display:block;margin-top:4px;font-size:5.5px;line-height:7px;color:#4A4852;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-fc{width:246px;padding:9px 10px 8px;border-radius:7px;border:1px solid #E7E6E5;background:#fff}
.kp-fc-eb{font-size:5.5px;line-height:7px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#4A4852;white-space:nowrap}
.kp-fc-row{display:flex;align-items:flex-end;justify-content:space-between;margin-top:2px}
.kp-fc-v{display:flex;align-items:baseline;gap:4px}
.kp-fc-v b{font-size:11px;line-height:14px;font-weight:600;letter-spacing:-.1px;color:#252525;font-variant-numeric:tabular-nums;white-space:nowrap}
.kp-fc-v span{font-size:6px;line-height:8px;font-weight:500;color:#E8A04F;white-space:nowrap}
.kp-fc-b{font-size:6px;line-height:8px;color:#4A4852;white-space:nowrap;transform:translateY(-1px)}
.kp-fc-cap{margin-top:4px;font-size:5.5px;line-height:7.5px;color:#4A4852}
.kp-prog{display:block;width:100%;height:auto;margin-top:4px;overflow:visible;font-family:inherit}
.kp-prog .gr line{stroke:rgba(23,20,32,.07);stroke-width:.5;stroke-dasharray:1 2}
.kp-prog text{font-size:4.2px;fill:#A5A2AE}
.kp-prog .nu{stroke:rgba(23,20,32,.12);stroke-width:.5;stroke-dasharray:1 1.6}
.kp-prog .fan{fill:rgba(111,161,218,.08)}
.kp-prog .hist{fill:none;stroke:#3D3A47;stroke-width:.8;stroke-linejoin:round;stroke-linecap:round}
.kp-prog .pr{fill:none;stroke-width:.7;stroke-dasharray:1.2 1.4}
.kp-prog .pr.hog{stroke:#F0B37A} .kp-prog .pr.med{stroke:#8DB3E6} .kp-prog .pr.lag{stroke:#C2DA84}
.kp-prog .nu-dot{fill:#17151E}
.kp-prog circle.m{fill:#fff;stroke-width:.9}
.kp-prog circle.hog{stroke:#F0A868} .kp-prog circle.med{stroke:#6FA1DA} .kp-prog circle.lag{stroke:#B7D46A}
.kp-prog .lb{font-size:3.8px;fill:#A5A2AE}
.kp-prog .val{font-size:5.2px;font-weight:600}
.kp-prog .val.hog{fill:#E8A04F} .kp-prog .val.med{fill:#5F95DA} .kp-prog .val.lag{fill:#9DC24A}
.rorelse .kp-pane.on .kp-prog .hist{stroke-dasharray:1;animation:kp-rita 900ms var(--kp-ease) 120ms backwards}
@keyframes kp-in{from{opacity:0}}
.rorelse .kp-pane.on .kp-prog :is(.fan,.pr,.m,.lb,.val){animation:kp-in 400ms var(--kp-ease) 700ms backwards}
/* att göra: speglar Att göra-vyn i kundportalen i liten skala */
/* Mina system + Att göra: kundportalens riktiga vy (1440 px, innehållsbredd 1120 px) förminskad i
   samma proportion som fönstret — inget trycks ihop, det som inte får plats klipps av. Ingen scroll. */
.kp-main.full{padding:0;overflow:hidden;
  background:radial-gradient(120% 70% at 0% 0%,rgba(107,83,145,.075) 0%,rgba(107,83,145,0) 62%),radial-gradient(90% 55% at 100% 0%,rgba(140,120,200,.05) 0%,rgba(140,120,200,0) 58%),#FBFAFD}
.kp-main.full .kp-mhead,.kp-main.full .kp-fade{display:none}
.kp-main.full .kp-panes{height:auto;margin-top:0}
.kp-main.full .kp-pane.on{position:relative}
#kp-p-system,#kp-p-todo{width:1208px;display:block;letter-spacing:0;zoom:.56}
/* Mina system */
#kp-p-system{padding:36px 44px 60px}
/* Mina system: speglar kundportalens vy (2026-09-23) — varmgrå yta, vita kort radie 24, neutral text, mjuka statusbrickor */
.kp-main.full:is(:has(#kp-p-system.on),:has(#kp-p-todo.on)){background:oklch(0.9706 0.0017 67.8)}
#kp-p-system{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;color:oklch(0.2645 0 0)}
#kp-p-system .kq-gal-head{margin-bottom:24px}
#kp-p-system .kq-title{margin:0;font-size:32px;line-height:40px;font-weight:400;letter-spacing:-.01em;color:oklch(0.2645 0 0);white-space:nowrap}
#kp-p-system .kq-sub{max-width:80ch;margin-top:4px;font-size:14px;line-height:20px;color:oklch(0.51 0.024 274.5)}
.kq-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.kq-chips span{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:999px;border:1px solid oklch(0.9254 0.0017 67.8);background:#fff;font-size:12.8px;line-height:1;color:oklch(0.2645 0 0);white-space:nowrap}
.kq-chips em{font-style:normal;color:oklch(0.51 0.024 274.5);font-variant-numeric:tabular-nums}
.kq-chips .on{background:oklch(0.2645 0 0);border-color:oklch(0.2645 0 0);color:oklch(0.985 0 0)}
.kq-chips .on em{color:oklch(0.985 0 0 / .6)}
.kq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.kq-card{display:flex;flex-direction:column;min-height:200px;padding:22px 24px 20px;border-radius:24px;border:1px solid oklch(0.9254 0.0017 67.8);background:#fff;transition:border-color 150ms ease}
.kq-card:hover{border-color:oklch(0.87 0.003 67.8)}
.kq-top{display:flex;align-items:center;gap:10px}
.kq-ico{display:grid;place-items:center;width:20px;height:20px;flex:none;color:oklch(0.2645 0 0)}
.kq-ico svg,.kq-cta svg,.kq-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kq-name{flex:1;min-width:0;font-size:17px;line-height:24px;font-weight:400;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kq-status{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12px;line-height:1;background:#ecf4e4;color:#3f6a26;white-space:nowrap}
.kq-status.paus{background:#fdf1e2;color:#96560f}
.kq-desc{min-height:40px;margin:12px 0 20px;font-size:14px;line-height:20px;color:oklch(0.51 0.024 274.5);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kq-foot{display:flex;align-items:center;gap:8px;margin-top:auto}
.kq-cat{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:oklch(0.9612 0 0);font-size:12px;line-height:1;white-space:nowrap}
.kq-tag{font-size:12px;line-height:16px;color:oklch(0.51 0.024 274.5);white-space:nowrap}
.kq-cta{display:inline-flex;align-items:center;gap:6px;height:32px;margin-left:auto;padding:0 14px;border-radius:999px;background:oklch(0.9612 0 0);font-size:12.8px;line-height:1;white-space:nowrap;transition:background-color 150ms ease}
.kq-cta svg{width:14px;height:14px}
.kq-card:hover .kq-cta{background:oklch(0.935 0 0)}
.kq-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;padding:22px 24px;border-radius:24px;border:1px solid oklch(0.9254 0.0017 67.8);background:#fff}
.kq-banner b{display:block;font-size:17px;line-height:24px;font-weight:400;color:oklch(0.2645 0 0)}
.kq-banner small{display:block;max-width:72ch;margin-top:2px;font-size:12px;line-height:16px;color:oklch(0.51 0.024 274.5)}
.kq-btns{display:flex;gap:8px;flex:none}
.kq-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 20px;border-radius:999px;font-size:13px;line-height:1;font-weight:500;white-space:nowrap;background:linear-gradient(120deg,#6B5391 0%,#8a70b3 100%);color:#fff}
.kq-btn svg{width:14px;height:14px}
.kq-btn.sek{padding:0 18px;background:oklch(0.9612 0 0);color:oklch(0.2645 0 0)}
/* Att göra */
/* Att göra: speglar kundportalens vy (2026-09-23) — varmgrå yta, vita ytor radie 24, pillerformade reglage, tonade rader */
#kp-p-todo{padding:32px 44px 60px;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;color:oklch(0.2645 0 0)}
#kp-p-todo .kq-title{margin:0;font-size:32px;line-height:40px;font-weight:400;letter-spacing:-.01em;color:oklch(0.2645 0 0);white-space:nowrap}
#kp-p-todo .kq-sub{max-width:80ch;margin-top:4px;font-size:14px;line-height:20px;color:oklch(0.51 0.024 274.5)}
.kq-td{display:flex;flex-direction:column;gap:24px;margin-top:24px}
.kq-yta{border-radius:24px;border:1px solid oklch(0.9254 0.0017 67.8);background:#fff}
.kq-mets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.kq-met{position:relative;display:block;min-height:130px;padding:20px}
.kq-met>span:last-child{display:flex;flex-direction:column;gap:12px;height:100%}
.kq-met-ico{position:absolute;top:20px;right:20px;width:18px;height:18px;color:oklch(0.51 0.024 274.5)}
.kq-met-ico svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.kq-met .l{order:-1;padding-right:40px;font-size:14px;line-height:20px;font-weight:500;color:oklch(0.2645 0 0)}
.kq-met .v{font-size:32px;line-height:40px;font-weight:400;letter-spacing:-.01em;color:oklch(0.2645 0 0);font-variant-numeric:tabular-nums}
.kq-met .n{margin-top:auto;font-size:12px;line-height:16px;color:oklch(0.51 0.024 274.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kq-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;padding:12px 16px;border-radius:999px}
.kq-tabs{display:flex;gap:8px}
.kq-tabs span{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;border:1px solid oklch(0.9254 0.0017 67.8);background:#fff;font-size:12.8px;line-height:1;font-weight:400;color:oklch(0.2645 0 0);white-space:nowrap}
.kq-tabs .on{background:oklch(0.2645 0 0);border-color:oklch(0.2645 0 0);color:oklch(0.985 0 0)}
.kq-tools{display:flex;gap:10px;min-width:min(450px,46%)}
.kq-sok{position:relative;flex:1;min-width:210px;display:flex;align-items:center;height:38px;padding:0 12px 0 40px;border-radius:999px;border:1px solid oklch(0.9254 0.0017 67.8);background:#fff;font-size:13px;color:#8e8e8e}
.kq-sok svg,.kq-filt svg{position:absolute;width:16px;height:16px;fill:none;stroke:#7a8191;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.kq-sok svg{left:14px}
.kq-filt{position:relative;display:flex;align-items:center;min-width:128px;height:38px;padding:0 34px 0 12px;border-radius:999px;border:1px solid oklch(0.9254 0.0017 67.8);background:#fff;font-size:13px;font-weight:400;color:oklch(0.2645 0 0)}
.kq-filt svg{right:12px;width:15px;height:15px;stroke:#5f6470;stroke-width:2}
.kq-lista{overflow:hidden}
.kq-grp{--t:oklch(0.9612 0 0);--x:oklch(0.51 0.024 274.5);--dot:#737987;--dotbg:#eef0f5}
.kq-grp:nth-of-type(1){--t:#fdf1e2;--x:#96560f;--dot:#d88906;--dotbg:#fff0d8}
.kq-grp:nth-of-type(2){--t:#ecf4e4;--x:#3f6a26;--dot:#209b63;--dotbg:#dff5e9}
.kq-grp+.kq-grp{border-top:1px solid rgba(17,24,39,.075)}
.kq-grp-h{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px;padding:0 16px;font-size:17px;line-height:24px;font-weight:400;color:oklch(0.69 0 0)}
.kq-grp-h>span{display:inline-flex;align-items:center;gap:8px}
.kq-grp-h em{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:oklch(0.9612 0 0);font-style:normal;font-size:12px;line-height:1;color:oklch(0.2645 0 0)}
.kq-grp-h>span>svg{width:13px;height:13px;padding:1.5px;box-sizing:border-box;border-radius:999px;background:var(--dotbg);fill:none;stroke:var(--dot)!important;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.kq-grp-h svg.chev{width:17px;height:17px;fill:none;stroke:#343947;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kq-row{display:grid;grid-template-columns:minmax(340px,1.45fr) minmax(118px,.42fr) minmax(148px,.55fr) minmax(114px,.42fr) auto auto 34px;gap:18px;align-items:center;min-height:72px;padding:12px 16px;border-top:1px solid oklch(0.9254 0.0017 67.8);
  background:linear-gradient(90deg,color-mix(in srgb,var(--t),var(--x) 7%) 0%,var(--t) 30%,color-mix(in srgb,var(--t),#fff 55%) 62%,#fff 92%)}
.kq-row:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--t),var(--x) 12%) 0%,color-mix(in srgb,var(--t),var(--x) 4%) 30%,color-mix(in srgb,var(--t),#fff 45%) 62%,#fff 92%)}
.kq-row-m{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;min-width:0}
.kq-row-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:oklch(0.9612 0 0);color:oklch(0.2645 0 0)}
.kq-row-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kq-row-c{min-width:0}
.kq-row-tl{display:flex;align-items:center;gap:8px;min-width:0}
.kq-row-tl b{overflow:hidden;font-size:14px;line-height:20px;font-weight:450;color:oklch(0.2645 0 0);white-space:nowrap;text-overflow:ellipsis}
.kq-row-c small{display:block;margin-top:5px;overflow:hidden;font-size:12px;line-height:16px;color:oklch(0.69 0 0);white-space:nowrap;text-overflow:ellipsis}
.kq-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;line-height:1;font-weight:400;white-space:nowrap;flex:none;background:oklch(0.9612 0 0);color:oklch(0.2645 0 0)}
.kq-pill.hog{background:#fbeeed;color:#9e423b}
.kq-pill.vant{background:#fdf1e2;color:#96560f}
.kq-pill.klar{background:#ecf4e4;color:#3f6a26}
.kq-lv .l{display:block;margin-bottom:4px;font-size:12px;line-height:16px;color:oklch(0.51 0.024 274.5)}
.kq-lv .v{display:block;font-size:12px;line-height:1.35;font-weight:500;color:#151821;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kq-open{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:999px;background:oklch(0.9612 0 0);font-size:12px;font-weight:400;color:oklch(0.2645 0 0);white-space:nowrap;transition:background-color 150ms ease}
.kq-open:hover{background:oklch(0.935 0 0)}
.kq-open svg{width:14px;height:14px;fill:none;stroke:#555b68;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kq-meny{display:grid;place-items:center;width:32px;height:32px;font-size:20px;line-height:1;color:#6a7180}
.kq-hjalp{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:58px;padding:12px 16px;border-radius:999px}
.kq-hjalp-c{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:center}
.kq-hjalp-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:oklch(0.9612 0 0);color:oklch(0.2645 0 0)}
.kq-hjalp-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kq-hjalp b{display:block;font-size:13px;line-height:18px;font-weight:500;color:#151821}
.kq-hjalp small{display:block;margin-top:3px;font-size:12px;line-height:16px;color:#697084;white-space:nowrap}
.kq-hjalp .kq-open svg{stroke:currentColor}
.kp-time{flex:none;font-size:10px;color:var(--kp-muted2);font-variant-numeric:tabular-nums}
/* Översikt = "Min dag"-briefen från kundportalen, nedskalad. Gråvit överyta med
   stilla blå/persika/lila gradient, tre rader där bindord är grå och fakta svarta,
   vit bottenrad med nästa möte och en svart Förbered-pill. Mjukhet via gradientstopp,
   aldrig filter:blur. */
.kp-main.brief .kp-mhead h5,.kp-main.brief .kp-fade{display:none}
.kp-main.brief .kp-panes{margin-top:8px}
#kp-p-oversikt{width:658px;gap:10px}
.kp-brief{overflow:hidden;border:1px solid rgba(0,0,0,.09);border-radius:20px;background:#fff;color:#202020}
.kp-brief-topp{min-height:148px;padding:20px 20px 20px;background-color:#f6f6f6;background-image:
  radial-gradient(34% 70% at 22% 116%,rgb(176 214 250 / .42) 0%,rgb(176 214 250 / 0) 72%),
  radial-gradient(40% 70% at 62% 118%,rgb(250 197 150 / .62) 0%,rgb(250 197 150 / 0) 74%),
  radial-gradient(36% 66% at 86% 2%,rgb(196 194 244 / .42) 0%,rgb(196 194 244 / 0) 76%)}
.kp-brief-hej{font-size:9px;line-height:12px;color:#666}
.kp-brief-lista{margin-top:9px;font-size:23px;line-height:30px;font-weight:400;letter-spacing:-.02em;white-space:nowrap}
.kp-brief-lista li{display:block}
.kp-brief-lista .m{color:#8f8f8f}
.kp-brief-lista svg{display:inline-block;margin:0 .32em 0 .4em}
.kp-brief-lista .folk{vertical-align:3px}
.kp-brief-lista .sol{vertical-align:-3px}
.kp-brief-fot{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:56px;padding:0 18px 0 20px;border-top:1px solid rgba(0,0,0,.055)}
.kp-brief-fot .t{min-width:0}
.kp-brief-fot b{display:block;font-size:12px;line-height:15px;font-weight:500;letter-spacing:-.01em;white-space:nowrap}
.kp-brief-fot small{display:block;margin-top:2px;font-size:8px;line-height:10px;color:#8e8e8e;white-space:nowrap}
.kp-brief-h{display:flex;flex:none;align-items:center;gap:12px}
.kp-brief-h em{font-style:normal;font-size:8px;line-height:10px;color:#dd6f68;white-space:nowrap}
.kp-brief-h span{display:inline-flex;align-items:center;justify-content:center;height:25px;padding:0 20px;border-radius:999px;background:#202020;color:#fff;font-size:9px;line-height:1}
.kp-upm{margin-top:4px;border:1px solid rgba(0,0,0,.09);border-radius:14px;background:#fff;color:#202020;overflow:hidden}
.kp-upm-h{display:flex;align-items:center;gap:6px;padding:9px 16px;border-bottom:1px solid rgba(0,0,0,.055);font-size:10px;line-height:13px;font-weight:500}
.kp-upm-h i{width:5px;height:5px;border-radius:50%;background:#F0A868}
.kp-upm-h em{font-style:normal;min-width:16px;padding:1px 5px;border-radius:999px;background:#f1f1f1;font-size:8.5px;line-height:11px;text-align:center;font-variant-numeric:tabular-nums}
.kp-upm-g{display:grid;grid-template-columns:1fr 1fr}
.kp-upm-r{display:flex;align-items:center;gap:9px;padding:10px 16px;min-width:0}
.kp-upm-r+.kp-upm-r{border-left:1px solid rgba(0,0,0,.055)}
.kp-upm-r svg{width:14px;height:14px;flex:none;fill:none;stroke:#202020;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.kp-upm-r .t{flex:1;min-width:0}
.kp-upm-r b{display:block;font-size:10px;line-height:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-upm-r small{display:block;font-size:8.5px;line-height:11px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-upm-r span.k{flex:none;padding:4px 9px;border:1px solid rgba(0,0,0,.09);border-radius:8px;font-size:8.5px;line-height:11px;font-weight:500}
.rorelse .kp-pane.on .kp-upm{animation:kp-upp 220ms cubic-bezier(.2,0,0,1) 260ms backwards}
/* under uppmärksamhetsremsan: Dagens plan + Prioriterad inkorg, som i showcasens Min dag — klipps av nertill */
.kp-dag{display:grid;grid-template-columns:7fr 5fr;gap:10px;align-items:start}
.kp-dag .kp-upm{margin-top:0}
.kp-upm-h .not{margin-left:auto;font-size:8.5px;font-weight:400;color:#8e8e8e}
.kp-plan{padding:6px 16px 8px}
.kp-nu{display:flex;align-items:center;gap:8px;height:16px}
.kp-nu span{width:28px;font-size:8.5px;line-height:11px;font-weight:500;color:#D9534F;font-variant-numeric:tabular-nums}
.kp-nu i{flex:1;height:1px;background:#D9534F;opacity:.5}
.kp-pr{display:flex;align-items:center;gap:8px;min-height:30px;border-top:1px solid rgba(0,0,0,.055)}
.kp-pr .tid{width:28px;flex:none;font-size:8.5px;line-height:11px;color:#8e8e8e;font-variant-numeric:tabular-nums}
.kp-pr .chip{min-width:0;padding:3px 8px;border-radius:6px;background:#EEF3FB;color:#2A4E86;font-size:9.5px;line-height:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-pr .t{flex:1;min-width:0}
.kp-pr b{display:block;font-size:10px;line-height:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-pr small{display:block;font-size:8.5px;line-height:11px;color:#666}
.kp-pr .av{display:flex;margin-left:auto}
.kp-pr .av i{display:grid;place-items:center;width:16px;height:16px;margin-left:-4px;border-radius:50%;border:1.5px solid #fff;background:#ECE8F4;color:#5B4A7A;font-style:normal;font-size:6.5px;line-height:1;font-weight:600}
.kp-pr .k{flex:none;padding:4px 9px;border:1px solid rgba(0,0,0,.09);border-radius:8px;font-size:8.5px;line-height:11px;font-weight:500}
.kp-ink{padding:0 16px}
.kp-ir{display:grid;grid-template-columns:1fr auto;column-gap:8px;padding:7px 0}
.kp-ir+.kp-ir{border-top:1px solid rgba(0,0,0,.055)}
.kp-ir b{font-size:10px;line-height:13px;font-weight:500}
.kp-ir small{grid-row:1;grid-column:2;font-size:8.5px;line-height:13px;color:#8e8e8e}
.kp-ir span{grid-column:1/-1;font-size:8.5px;line-height:11px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rorelse .kp-pane.on .kp-dag{animation:kp-upp 220ms cubic-bezier(.2,0,0,1) 320ms backwards}
@keyframes kp-upp{from{opacity:0;transform:translateY(4px)}}
.rorelse .kp-pane.on :is(.kp-brief-hej,.kp-brief-lista li,.kp-brief-fot>*){animation:kp-upp 220ms cubic-bezier(.2,0,0,1) backwards}
.rorelse .kp-pane.on .kp-brief-hej{animation-delay:60ms}
.rorelse .kp-pane.on .kp-brief-lista li:nth-child(1){animation-delay:100ms}
.rorelse .kp-pane.on .kp-brief-lista li:nth-child(2){animation-delay:140ms}
.rorelse .kp-pane.on .kp-brief-lista li:nth-child(3){animation-delay:180ms}
.rorelse .kp-pane.on .kp-brief-fot>*{animation-delay:220ms}
/* Lösningar: tre samlingsrubriker. */
.p-systemen{width:350px}
.p-systemen .dd-item{min-height:80px}
.lz-top{display:block}
.p-systemen .lz-kat{flex:none}
.lz-list{display:flex;flex-direction:column;gap:4px;padding:4px 0}
.lz-kat{position:relative;display:block;flex:1;padding:22px 20px;border-radius:12px;transition:background-color 160ms ease}
.lz-kat b{display:block;font-size:17px;line-height:24px;font-weight:500;letter-spacing:-.3px;color:#8e8a96;transition:color 160ms ease}
.lz-kat span{display:block;margin-top:4px;font-size:13px;line-height:20px;color:#a29eaa;transition:color 160ms ease}
.lz-kat em{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-style:normal;font-size:13px;line-height:20px;font-weight:500;color:var(--ink);opacity:0;transform:translateX(-4px);transition:opacity 180ms cubic-bezier(.2,0,0,1),transform 180ms cubic-bezier(.2,0,0,1)}
.lz-kat em svg.i{width:14px;height:14px}
.lz-kat[data-on]{background:var(--tone)}
.lz-kat[data-on] b{color:var(--ink)}
.lz-kat[data-on] span{color:var(--muted)}
.lz-kat[data-on] em{opacity:1;transform:none}
.lz-kat:focus-visible{outline:2px solid var(--violet-600);outline-offset:-2px}
.ls-fot{display:flex;align-items:center;gap:16px;padding:14px 20px;margin:8px -8px -8px;border-top:1px solid rgba(0,0,0,.055)}
.ls-fot-txt{font-size:13px;line-height:20px;color:var(--muted);white-space:nowrap}
.ls-fot .tool-chips{margin:0;padding:0;max-width:none;flex-wrap:nowrap;gap:14px}
.ls-fot .tool-chips span{height:auto;padding:0;border:0;background:none;font-size:13px;color:var(--ink)}
.ls-fot-lank{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:20px;color:var(--muted);white-space:nowrap;transition:color 120ms ease}
.ls-fot-lank svg.i{width:14px;height:14px;transition:transform 160ms cubic-bezier(.2,0,0,1)}
.ls-fot:hover .ls-fot-lank{color:var(--ink)}
.ls-fot:hover .ls-fot-lank svg.i{transform:translateX(3px)}
.tool-chips{margin:0;padding:0;max-width:none;flex-wrap:nowrap}
.ls-fot-lank{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:20px;color:var(--muted);white-space:nowrap;transition:color 120ms ease}
.ls-fot-lank svg.i{width:14px;height:14px;transition:transform 160ms cubic-bezier(.2,0,0,1)}
.ls-fot:hover .ls-fot-lank{color:var(--ink)}
.ls-fot:hover .ls-fot-lank svg.i{transform:translateX(3px)}
.tool-chips{margin-top:auto;padding-top:20px;display:flex;flex-wrap:wrap;gap:6px;max-width:300px}
.tool-chips span{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12px}
.tool-chips img{width:14px;height:14px;object-fit:contain}
.tool-chips img.app{object-fit:cover;border-radius:4px}
/* Resurser */
.p-resurser{width:250px}
.p-resurser .dd-item{min-height:80px}


/* ============================================================
   MENYN UTAN ROSA/LILA — neutrala tokens ovanpå default-skelettets
   ============================================================ */
:root{
  --bg:#FDFCFC; --line:#ececec; --line-h:#dcdcdc; --ink:#202020; --muted:#666666; --tone:#f4f4f5; --tone2:#fafafa;
  --shadow-glow:none;
}
.nav.scrolled{background:rgba(253,252,252,.8);box-shadow:inset 0 -1px 0 rgba(0,0,0,.055)}
.nav .btn{border-radius:6px}
.nav .btn-ghost:hover{background:#f4f4f5}
.dd{border-color:rgba(0,0,0,.09);box-shadow:0 20px 48px -16px rgba(0,0,0,.14),0 4px 12px rgba(0,0,0,.04)}
.lz-kat:focus-visible{outline-color:#202020}

/* ============================================================
   X.AI-SKELETT — endast desktop (1440 px)
   Former/mått/rörelse: x.ai (uppmätt 2026-09-24, se xai-clone-RESEARCH.md)
   Knappar: AI-bloggens (.b-dark / .b-ljus)
   Text i komponenter: ZAAI Quiet Interface
   ============================================================ */
:root{
  --bg:#FFFFFF;
  --x-kort:#F9F8F6; --x-kort2:#F2F0EC;
  --txt:#202020; --sek:#666666; --dim:#8e8e8e; --dim2:#b3b3b3;
  --night:#1C1628; --zaai-shimmer:linear-gradient(120deg,#8b5cf6 0%,#c084fc 50%,#e879a8 100%); --edge:rgba(0,0,0,.09); --soft:rgba(0,0,0,.055);
  --ui:cubic-bezier(.2,0,0,1); --ut:cubic-bezier(.16,1,.3,1); --ut2:cubic-bezier(.22,1,.36,1);
}
html,body{background:#fff;color:var(--txt)}
.nav.scrolled{background:rgba(255,255,255,.85)}

/* ---------- menyn går ihop vid scroll, som på zaai.se (uppmätt live 2026-09-24) ----------
   Överst: full bredd (max 1320), genomskinlig, loggan 96 px.
   Efter 50 px: en rundad kapsel 980 bred, 8 px från toppen, frostat vitt, loggan 70 px. 350 ms cubic-bezier(.16,1,.3,1). */
.nav,.nav.scrolled{height:auto;padding:0 8px;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
/* Layouten står still i utfällt läge; ihopdragningen görs bara med transform + opacity (inga omräkningar av layout per bildruta = ingen lagg).
   --d = halva skillnaden mellan full bredd och det ihopdragna lägets 780 px, sätts av skriptet vid start och storleksändring. */
.nav-in{--kurva:cubic-bezier(.16,1,.3,1);--d:170px;width:100%;max-width:1320px;height:auto;margin:8px auto 0;padding:14px 24px 14px 32px;isolation:isolate}
/* Vid scroll: menyn ligger i en avgränsad rektangel med lätt rundade hörn, frostad (blur) innanför kanten.
   Rutan följer det ihopdragna läget: --d in från varje sida, 74 px hög runt loggan och knapparna. */
.nav-in::before{content:"";position:absolute;z-index:-1;top:8px;left:calc(var(--d) + 8px);right:var(--d);height:74px;border-radius:12px;
  background:rgba(255,255,255,.78);border:1px solid rgba(28,22,40,.08);box-shadow:0 10px 30px -14px rgba(28,22,40,.14);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  opacity:0;transition:opacity 260ms cubic-bezier(.2,0,0,1);pointer-events:none;will-change:opacity}
.nav.scrolled .nav-in::before{opacity:1}
.brand,.nav-links,.nav-right{transition:transform 350ms var(--kurva)}
.nav.scrolled .brand{transform:translate(calc(var(--d) - 12px),-17px)}
.nav.scrolled .nav-links{transform:translateY(-17px)}
.nav.scrolled .nav-right{transform:translate(calc(8px - var(--d)),-17px)}
.brand{gap:0}
.brand img.logga{display:block;width:auto;height:96px;border:0;border-radius:0;background:none;object-fit:contain;transform-origin:left center;transition:transform 350ms var(--kurva)}
.nav.scrolled .brand img.logga{transform:scale(.7292)}
.nav-right .btn-ghost{transition:opacity 200ms var(--ui)}
.nav.scrolled .nav-right .btn-ghost{opacity:0;pointer-events:none}
.dd{top:calc(100% + 2px)}
.nav.scrolled .dd{top:calc(100% - 32px)}
main{padding-top:72px}
.x-wrap{width:1232px;margin:0 auto;position:relative}

/* ---------- knappar: AI-bloggens ---------- */
.b-dark,.b-ljus{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:6px;font:500 14px/1 "Inter",sans-serif;white-space:nowrap;cursor:pointer;
  transition:background-color 160ms var(--ui),border-color 160ms var(--ui),transform 120ms var(--ui)}
/* Svarta knappar = kundportalens inloggningsknapp (standard sedan 2026-10-05):
   mörk fyllning med ZAAI-shimmern som löpande 2 px kontur. Gradienten ritas under fyllningen
   (border-box) och syns bara i den genomskinliga kanten. Gäller .b-dark och menyns .btn-dark. */
@property --b-fyll{syntax:'<color>';inherits:true;initial-value:#2b2b2b}
@keyframes b-shimmer{to{background-position:0 0,200% 0}}
.b-dark,.nav .btn-dark{--b-fyll:#2b2b2b;color:#fafafa;border:2px solid transparent;border-radius:10px;box-shadow:none;
  background:linear-gradient(var(--b-fyll),var(--b-fyll)) padding-box,
    linear-gradient(100deg,#9f80da 0%,#c8b0f5 25%,#e879a8 50%,#B1D8F2 75%,#9f80da 100%) border-box;
  background-size:100% 100%,200% 100%;animation:b-shimmer 6s linear infinite;
  transition:--b-fyll 160ms ease,transform 140ms cubic-bezier(.23,1,.32,1)}
.b-dark{padding:0 14px 0 16px}
@media (hover:hover) and (pointer:fine){ .b-dark:hover,.nav .btn-dark:hover{--b-fyll:#1a1a1a;box-shadow:none} }
.b-dark:active,.nav .btn-dark:active{transform:scale(.97)}
/* Chattbubblan (stängd) = samma svarta knapp: mörk fyllning + löpande shimmerkontur, ikonen vit.
   Konturen ritas med 2 px padding (fyllningen klipps till innehållsytan) så storleken inte ändras. */
html .zw-hornet .zw-yta:not(.is-oppen){--b-fyll:#2b2b2b;padding:2px;
  background:linear-gradient(var(--b-fyll),var(--b-fyll)) content-box,
    linear-gradient(100deg,#9f80da 0%,#c8b0f5 25%,#e879a8 50%,#B1D8F2 75%,#9f80da 100%) border-box;
  background-size:100% 100%,200% 100%;animation:b-shimmer 6s linear infinite}
@media (hover:hover) and (pointer:fine){ html .zw-hornet .zw-yta:not(.is-oppen):hover{--b-fyll:#1a1a1a} }
@media (prefers-reduced-motion:reduce){ html .zw-hornet .zw-yta:not(.is-oppen){animation:none} }
/* Egen ikon i bubblan (rosa figur med headset) i stället för pratbubblan. */
html .zw-hornet .zw-bubbla svg{display:none}
html .zw-hornet .zw-bubbla::before{content:"";width:30px;height:30px;background:url(/brand_assets/chatt-ikon.png?v=2) center/contain no-repeat}
/* Startvyn i chattfönstret: figuren tittar fram från fönstrets högra kant. Bilden är beskuren
   exakt i kroppens raka kant och dras ut över flödets 16 px padding så kanten möter fönsterkanten.
   Multiply gör bildens nästan vita bakgrund osynlig mot fönstrets vita yta. Följer rubrikens inträde. */
html .zw-hornet .zw-start > .zw-in:first-child::before{content:"";display:block;align-self:flex-end;width:114px;height:136px;margin:0 -16px 6px auto;
  background:url(/brand_assets/chatt-gubbe-kant.webp?v=2) right bottom/contain no-repeat;mix-blend-mode:multiply}
.zw-fingrar{position:fixed;left:0;top:0;z-index:2147483647;width:7.2px;height:26.8px;pointer-events:none;opacity:0}
/* Hover: ikonen vickar till en gång, dämpat (som en vinkning), och står sedan still. */
@keyframes zw-vicka{0%{transform:rotate(0)}18%{transform:rotate(-14deg)}38%{transform:rotate(10deg)}56%{transform:rotate(-6deg)}74%{transform:rotate(3deg)}100%{transform:rotate(0)}}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html .zw-hornet .zw-yta:not(.is-oppen):hover .zw-bubbla::before{animation:zw-vicka 560ms cubic-bezier(.36,.07,.19,.97) both;transform-origin:50% 60%} }
@media (prefers-reduced-motion:reduce){ .b-dark,.nav .btn-dark{animation:none} .b-dark:active,.nav .btn-dark:active{transform:none} }
.b-ljus:active{transform:translateY(1px)}
.b-dark svg,.b-ljus svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:transform 160ms var(--ui)}
.b-dark:hover svg,.b-ljus:hover svg{transform:translateX(2px)}
/* Vita knappar: vit fyllning med en grå gradient som löpande 2 px kontur. Gäller .b-ljus och menyns "Logga in" (.btn-ghost). */
.b-ljus,.nav .btn-ghost{--b-fyll:#fff;color:var(--txt);border:2px solid transparent;border-radius:10px;box-shadow:none;
  background:linear-gradient(var(--b-fyll),var(--b-fyll)) padding-box,
    linear-gradient(100deg,#d6d6d6 0%,#f4f4f4 25%,#a9a9a9 50%,#e8e8e8 75%,#d6d6d6 100%) border-box;
  background-size:100% 100%,200% 100%;animation:b-shimmer 6s linear infinite;
  transition:--b-fyll 160ms ease,transform 140ms cubic-bezier(.23,1,.32,1),opacity 200ms var(--ui)}
.b-ljus{padding:0 16px 0 14px}
.b-ljus.utan-pil{padding:0 16px}
@media (hover:hover) and (pointer:fine){ .b-ljus:hover,.nav .btn-ghost:hover{--b-fyll:#fafafa;border-color:transparent;box-shadow:none} }
.nav .btn-ghost:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){ .b-ljus,.nav .btn-ghost{animation:none} }
:is(.b-dark,.b-ljus):focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #2b2b2b}
.b-full{width:100%}

/* ---------- Prisgarantins villkor — popup (samma innehåll och form som startsidan, knappen i nya stilen) ---------- */
#garanti-overlay{--g-txt:#1C1628;--g-sek:#77747f;--g-lila:#6B5391;position:fixed;inset:0;z-index:9000;background:rgba(28,22,40,.65);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity 180ms ease}
#garanti-overlay.open{opacity:1;pointer-events:auto;transition:opacity 300ms ease}
#garanti-modal{background:#fff;border-radius:22px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;overscroll-behavior:contain;
  box-shadow:0 24px 80px rgba(107,83,145,.28),0 4px 24px rgba(0,0,0,.1);transform:translateY(24px) scale(.97);transition:transform 200ms cubic-bezier(.4,0,1,1)}
#garanti-overlay.open #garanti-modal{transform:translateY(0) scale(1);transition:transform 380ms cubic-bezier(.16,1,.3,1)}
.garanti-head{position:sticky;top:0;z-index:2;background:#fff;padding:22px 26px 14px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.garanti-eyebrow{font-size:11.5px;line-height:1.3;font-weight:600;color:var(--g-lila);letter-spacing:.09em;text-transform:uppercase;padding-top:6px}
.garanti-close-btn{width:30px;height:30px;flex-shrink:0;border-radius:8px;border:1px solid rgba(107,83,145,.15);background:rgba(107,83,145,.04);color:var(--g-lila);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color 200ms,border-color 200ms}
.garanti-close-btn:hover{background:rgba(107,83,145,.1);border-color:rgba(107,83,145,.3)}
.garanti-body{padding:0 26px 26px}
.garanti-title{font-size:22px;font-weight:300;line-height:1.1;letter-spacing:-.025em;color:var(--g-txt);text-wrap:balance;margin-bottom:10px}
.garanti-lead{font-size:14.5px;line-height:1.65;color:var(--g-sek);max-width:64ch;text-wrap:pretty}
.garanti-list{margin-top:20px}
.garanti-item{padding:14px 0;border-top:1px solid rgba(107,83,145,.10)}
.garanti-item:first-child{border-top:none;padding-top:0}
.garanti-item:last-child{padding-bottom:0}
.garanti-item b{display:block;font-size:14.5px;line-height:1.4;font-weight:600;color:var(--g-txt);letter-spacing:-.005em;margin-bottom:5px}
.garanti-item p{font-size:13.5px;line-height:1.65;color:var(--g-sek);max-width:68ch;text-wrap:pretty}
.garanti-foot{margin-top:22px;padding-top:16px;border-top:1px solid rgba(107,83,145,.10);display:flex;align-items:center;justify-content:space-between;gap:16px}
.garanti-fine{font-size:12.5px;line-height:1.55;color:var(--g-sek)}
.garanti-foot .b-dark{flex-shrink:0}
@media (prefers-reduced-motion:reduce){
  #garanti-overlay,#garanti-overlay.open{transition:opacity 140ms linear}
  #garanti-modal,#garanti-overlay.open #garanti-modal{transition:none;transform:none} }


/* Guide-popup: guiden öppnas ovanpå sidan, med sidan suddad bakom */
.guide-pop{position:fixed;inset:0;z-index:2147482000;background:rgba(250,248,252,.28);-webkit-backdrop-filter:blur(14px) saturate(1.05);backdrop-filter:blur(14px) saturate(1.05);
  opacity:0;transition:opacity 220ms cubic-bezier(.2,0,0,1)}
.guide-pop.oppen{opacity:1}
.guide-pop iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;color-scheme:normal;
  transform:translateY(8px) scale(.985);transition:transform 260ms cubic-bezier(.2,0,0,1)}
.guide-pop.oppen iframe{transform:none}
html.guide-las,html.guide-las body{overflow:hidden}
html.guide-las #zw{display:none!important}
@media (prefers-reduced-motion:reduce){ .guide-pop,.guide-pop iframe{transition:none} }

/* ── Foten med CTA-ruta (dither-bilder) — förlaga: Gigcep-foten ── */
.zaai-fot{
  --f1:rgba(255,255,255,.92); --f2:rgba(255,255,255,.62); --f3:rgba(255,255,255,.42); --fk:rgba(255,255,255,.08);
  background:#17121f;
  color:var(--f2); padding:40px 32px 36px; font-family:"Inter",-apple-system,system-ui,sans-serif; font-size:14px; line-height:20px;
}
.fcta{position:relative;width:1168px;height:440px;margin:0 auto;border-radius:24px;overflow:hidden;isolation:isolate;
  background:#3d6fd1 url("brand_assets/fot-dither/fot-skylt.webp?v=2") center/cover no-repeat;
  box-shadow:0 30px 80px -30px rgba(40,20,90,.55)}
/* mjuk skugga bakom texten så att den läses mot himlen */
.fcta::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(42% 58% at 50% 40%,rgba(12,22,58,.42) 0%,rgba(12,22,58,0) 100%),
    linear-gradient(to top,rgba(10,16,40,.72) 0%,rgba(10,16,40,.38) 26%,rgba(10,16,40,0) 46%)}
.fcta-rad,.fcta-mitt{text-shadow:0 1px 12px rgba(8,14,40,.45)}
.fcta-mitt{position:relative;z-index:3;width:640px;margin:0 auto;padding-top:64px;text-align:center}
.fcta-mitt h2{font-size:44px;line-height:48px;font-weight:600;letter-spacing:-1.2px;color:#fff;text-wrap:balance}
.fcta-mitt p{margin:14px auto 0;max-width:460px;font-size:15px;line-height:22px;color:rgba(255,255,255,.86)}
.fcta-knappar{display:flex;justify-content:center;gap:10px;margin-top:28px}
.fcta-knappar a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;font-size:14px;font-weight:500;transition:background-color 160ms var(--ui),transform 120ms var(--ui)}
.fcta-knappar a:active{transform:translateY(1px)}
.fcta-knappar svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:transform 160ms var(--ui)}
.fcta-knappar a:hover svg{transform:translateX(2px)}
.fk-vit{background:#fff;color:#202020}
.fk-vit:hover{background:#f3efff}
.fk-glas{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.fk-glas:hover{background:rgba(255,255,255,.22)}
.fcta-rad{position:absolute;z-index:3;left:50%;bottom:44px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,168px)}
.fcta-rad div{text-align:center}
.fcta-rad b{display:block;font-size:30px;line-height:36px;font-weight:600;color:#fff;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.fcta-rad span{display:block;margin-top:6px;font-size:13px;line-height:18px;font-weight:500;color:rgba(255,255,255,.78)}
/* foten */
.fot-grid{width:1008px;margin:88px auto 0;display:grid;grid-template-columns:1fr 180px 180px 180px;gap:24px}
.fot-brand img{height:72px;width:auto;display:block}
.fot-brand p{margin-top:16px;max-width:260px;font-size:14px;line-height:21px;color:var(--f2)}
.fot-socialt{display:flex;gap:8px;margin-top:20px}
.fot-socialt a{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:var(--f1);transition:background-color 160ms var(--ui)}
.fot-socialt a:hover{background:var(--fk)}
.fot-socialt svg{width:17px;height:17px;fill:currentColor}
.fot-li{width:17px;height:17px;background:currentColor;-webkit-mask:url(brand_assets/linkedin-in.png) center/contain no-repeat;mask:url(brand_assets/linkedin-in.png) center/contain no-repeat}
.fot-mejlikon{-webkit-mask-image:url(brand_assets/mejl-ikon.png);mask-image:url(brand_assets/mejl-ikon.png)}
.fot-kol h5{font-size:13px;line-height:18px;font-weight:600;color:var(--f1);margin-bottom:16px}
.fot-kol ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.fot-kol a{font-size:14px;line-height:20px;color:var(--f2);transition:color 160ms var(--ui)}
.fot-kol a:hover{color:var(--f1)}
.fot-botten{width:1008px;margin:56px auto 0;padding-top:24px;border-top:1px solid var(--fk);display:flex;justify-content:space-between;align-items:center;font-size:12px;line-height:16px;color:var(--f3)}
.fot-botten nav{display:flex;align-items:center;gap:24px}
.fot-botten a{color:var(--f3);transition:color 160ms var(--ui)}
.fot-botten a:hover{color:var(--f1)}
.fot-botten .fot-mejl{display:inline-flex;align-items:center;gap:8px;color:var(--f2);font-weight:500}
.fot-mejl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}