/* Layout: Retell-lik vit sida med ett stort rundat hero-kort i djup blå ton, Apple-lika ljusgrå sektioner och stora rundade kort. */
/* Färger, typsnitt, radier, skuggor och kornighet: se tokens.css (B33), länkas före denna fil. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
img,svg{max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding-inline:20px}
h1,h2,h3{color:var(--ink);margin:0;text-wrap:balance}
h1{font:300 clamp(44px,7.4vw,92px)/1 var(--disp);letter-spacing:-.035em}
h2{font:300 clamp(34px,5vw,60px)/1.04 var(--disp);letter-spacing:-.03em}
h3{font:600 20px/1.3 var(--sans);letter-spacing:-.01em}
p{margin:0}
.ingress{font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--mut);max-width:62ch}
.mut{color:var(--mut)}
.liten{font-size:14px;color:var(--mut)}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}

/* knappar */
.knapp{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:12px;font:600 15.5px var(--sans);text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .15s ease,background-color .2s ease}
.knapp:active{transform:scale(.98)}
.knapp.pri{background:var(--knapp);color:var(--knapp-fg)}
.knapp.sek{background:var(--knapp2);color:var(--knapp2-fg)}
.knapp.vit{background:#fff;color:#0b1533}
.knapp.glas{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lank{color:var(--acc);text-decoration:none;font-weight:500}
.lank:hover{text-decoration:underline}
.lank::after{content:" ›"}

/* toppmeny */
.topp{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px)}
.topp .wrap{display:flex;align-items:center;gap:22px;min-height:68px}
.ordmarke{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:600 19px var(--sans);letter-spacing:-.02em;min-height:44px}
.ordmarke svg{flex:none}
.meny{display:flex;gap:2px;font-size:14.5px}
.meny a{text-decoration:none;color:var(--text);padding:8px 10px;border-radius:9px;font-weight:500;white-space:nowrap}
.meny a:hover,.meny a[aria-current="page"]{background:var(--panel)}
.handling{margin-left:auto;display:flex;align-items:center;gap:8px}
.handling .knapp{min-height:40px;padding:0 14px;font-size:14px;border-radius:10px}
.handling .logga{font-size:14.5px;font-weight:500;text-decoration:none;padding:8px 10px;white-space:nowrap}
.menyknapp{display:none;width:44px;height:44px;border-radius:12px;border:0;background:var(--panel);color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
.mobilmeny{position:fixed;inset:68px 0 0;z-index:39;background:var(--bg);padding:12px 20px 32px;overflow:auto;display:grid;align-content:start;gap:2px}
[hidden]{display:none!important}
.mobilmeny a{display:block;padding:14px 4px;font:400 26px/1.2 var(--disp);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--linje)}
.mobilmeny .knappar{display:grid;gap:10px;margin-top:20px}
.mobilmeny .knappar a{font:600 16px var(--sans);border:0;padding:0}
@media (max-width:1240px){.meny,.handling .logga{display:none}.menyknapp{display:inline-flex}}
@media (max-width:640px){.handling .sek{display:none}}
@media (max-width:420px){.handling .pri{display:none}}

/* hero-kortet */
.herokort{margin:8px;border-radius:var(--r1);position:relative;overflow:hidden;color:#fff;background:var(--hero4);isolation:isolate}
.herokort::before{content:"";position:absolute;inset:-20%;z-index:-1;background:
  radial-gradient(40% 50% at 18% 20%,var(--hero2),transparent 70%),
  radial-gradient(35% 45% at 80% 30%,#4a2bd1,transparent 70%),
  radial-gradient(45% 50% at 60% 90%,var(--hero3),transparent 70%),
  radial-gradient(60% 60% at 40% 60%,var(--hero1),transparent 80%);
  filter:blur(30px);animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-4%,3%,0) scale(1.06)}100%{transform:translate3d(3%,-2%,0) scale(1.02)}}
.herokort .inne{padding:clamp(72px,12vw,150px) 20px clamp(48px,7vw,80px);text-align:center;display:grid;justify-items:center;gap:22px}
.herokort .over{font:500 14px var(--sans);letter-spacing:.01em;color:rgba(255,255,255,.82)}
.herokort h1{color:#fff;max-width:13ch}
.herokort .ingress{color:rgba(255,255,255,.82);text-align:center;margin-inline:auto}
.herokort .knappar{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px}
.herokort .spelare{margin-top:18px}
.herokort.sida .inne{padding:clamp(64px,9vw,110px) 20px clamp(44px,6vw,70px)}
.herokort.sida h1{font-size:clamp(40px,6vw,76px);max-width:16ch}

/* spelare */
.spelare{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 18px 6px 6px;color:#fff;cursor:pointer;font:600 15.5px var(--sans);min-height:56px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.spelare .ikon{width:44px;height:44px;border-radius:50%;background:#fff;color:#0b1533;display:grid;place-items:center;flex:none}
.spelare .tid{font-weight:400;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}
.utskrift{width:min(640px,100%);display:grid;gap:8px;text-align:left;margin-top:8px}
.utskrift .rad{padding:10px 14px;border-radius:16px;font-size:15.5px;line-height:1.45;background:rgba(255,255,255,.08);color:rgba(255,255,255,.62);transition:background-color .25s,color .25s;max-width:88%}
.utskrift .rad.kund{justify-self:end;background:rgba(255,255,255,.05)}
.utskrift .rad.nu{background:rgba(255,255,255,.22);color:#fff}
.utskrift .vem{display:block;font-size:12.5px;color:rgba(255,255,255,.6);margin-bottom:2px}
.syntet{font-size:13px;color:rgba(255,255,255,.6)}

/* klot (agentens röst) */
.klot{width:min(300px,64vw);aspect-ratio:1;border-radius:50%;background:
  radial-gradient(60% 55% at 30% 30%,#9fd4ff 0%,transparent 60%),
  radial-gradient(55% 60% at 70% 75%,#f3c6ff 0%,transparent 65%),
  radial-gradient(70% 70% at 50% 50%,#5b7bff 0%,#2a3fb8 70%);
  box-shadow:0 30px 80px -30px rgba(44,92,255,.55),inset 0 -20px 60px rgba(10,20,80,.35);transition:transform .12s ease-out;max-width:100%}
.klot.lugn{animation:andas 6s ease-in-out infinite}
@keyframes andas{50%{transform:scale(1.03)}}

/* sektioner */
.sektion{padding-block:clamp(72px,10vw,128px)}
.sektion.gra{background:var(--panel)}
.rubrik{display:grid;gap:16px;max-width:760px;margin-bottom:clamp(36px,5vw,56px)}
.rubrik.mitt{margin-inline:auto;text-align:center;justify-items:center}
.rubrik .ingress{margin-inline:inherit}

/* stora kort */
.par{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.storkort{background:var(--yta);border-radius:var(--r1);padding:clamp(26px,4vw,44px);display:grid;gap:16px;align-content:start;min-width:0;border:1px solid var(--linje)}
.sektion.gra .storkort{border-color:transparent}
.storkort.mork{background:#0b1533;color:#dfe4f2;border-color:transparent}
.storkort.mork h3,.storkort.mork h2{color:#fff}
.storkort.mork .mut{color:#a6afc8}
.storkort.mork .lank{color:#9db4ff}
.storkort .tagg{font-size:14px;font-weight:600;color:var(--acc)}
.storkort.mork .tagg{color:#9db4ff}
@media (max-width:820px){.par{grid-template-columns:1fr}}

/* minisamtal i kort */
.mini{display:grid;gap:8px;margin-top:6px}
.mini span{padding:9px 13px;border-radius:15px;font-size:15px;line-height:1.4;max-width:90%;background:var(--panel)}
.mini .k{justify-self:end;background:var(--acc);color:#fff}
.storkort.mork .mini span{background:#16214a}
.storkort.mork .mini .k{background:#3d63ff}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.ruta{background:var(--yta);border-radius:var(--r2);padding:28px;display:grid;gap:10px;align-content:start;grid-column:span 2;min-width:0;border:1px solid var(--linje)}
.sektion.gra .ruta{border-color:transparent}
.ruta.bred{grid-column:span 3}
.ruta .stor{font:300 clamp(40px,5vw,56px)/1 var(--disp);color:var(--ink);letter-spacing:-.03em}
.ruta p{color:var(--mut);font-size:16px}
@media (max-width:900px){.ruta,.ruta.bred{grid-column:span 3}}
@media (max-width:620px){.bento{grid-template-columns:1fr}.ruta,.ruta.bred{grid-column:auto}}

/* demo (Retell-lik) */
.demo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.demo .vanster{border:1px solid var(--linje);border-radius:var(--r2);padding:40px 24px;display:grid;justify-items:center;align-content:center;gap:28px;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chips button{border:0;background:var(--panel);color:var(--ink);border-radius:10px;padding:0 14px;min-height:40px;font:600 14px var(--sans);cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--knapp);color:var(--knapp-fg)}
.demo .hoger{background:var(--panel);border-radius:var(--r2);padding:clamp(26px,4vw,48px);display:grid;gap:22px;align-content:start;min-width:0}
.demo .hoger h3{font:400 clamp(26px,3vw,34px)/1.15 var(--disp);letter-spacing:-.02em}
.falt{display:grid;gap:6px}
.falt label{font-size:13.5px;font-weight:600;color:var(--acc)}
.falt input,.falt select,.falt textarea{font:400 19px var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--mut);padding:8px 2px;min-height:48px;width:100%;border-radius:0}
.falt textarea{min-height:96px;resize:vertical;font-size:17px}
.falt input:focus,.falt select:focus,.falt textarea:focus{outline:none;border-bottom:2px solid var(--acc)}
.kvitto{font-size:15px;min-height:1.4em;color:var(--mut)}
.kvitto.ok{color:var(--ok)}
@media (max-width:820px){.demo{grid-template-columns:1fr}}

/* steg */
.steg{display:grid;gap:0;counter-reset:steg}
.steg li{list-style:none;display:grid;grid-template-columns:64px 1fr;gap:20px;padding:26px 0;border-top:1px solid var(--linje)}
.steg li::before{counter-increment:steg;content:counter(steg);width:44px;height:44px;border-radius:50%;background:var(--acc-svag);color:var(--acc);display:grid;place-items:center;font:600 17px var(--sans)}
.steg h3{margin-bottom:6px}
.steg p{color:var(--mut)}
.steg{padding:0;margin:0}
@media (max-width:520px){.steg li{grid-template-columns:44px 1fr;gap:14px}}

/* listor/tabeller */
.lista{list-style:none;margin:0;padding:0;display:grid}
.lista li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--linje)}
.lista li:first-child{border-top:0}
.lista li span:last-child{color:var(--mut);text-align:right}
.tabellram{overflow-x:auto;border:1px solid var(--linje);border-radius:var(--r3);background:var(--yta)}
table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:520px}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--linje);vertical-align:top}
th{font-size:13px;font-weight:600;color:var(--mut)}
tr:last-child td{border-bottom:0}

/* pris */
.priser{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pris{background:var(--yta);border:1px solid var(--linje);border-radius:var(--r1);padding:32px;display:grid;gap:16px;align-content:start}
.pris.fram{background:#0b1533;color:#dfe4f2;border-color:transparent}
.pris.fram h3,.pris.fram .belopp{color:#fff}
.pris.fram .mut,.pris.fram li{color:#b4bcd4}
.belopp{font:300 48px/1 var(--disp);color:var(--ink);letter-spacing:-.03em}
.belopp small{font:400 16px var(--sans);color:var(--mut);letter-spacing:0}
.pris ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:16px}
.pris li::before{content:"✓";color:var(--ok);font-weight:700;margin-right:10px}
.pris.fram li::before{color:#7ee0b0}
@media (max-width:900px){.priser{grid-template-columns:1fr}}
.raknare{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-items:center}
.raknare input[type=range]{width:100%;accent-color:var(--acc);min-height:44px}
@media (max-width:760px){.raknare{grid-template-columns:1fr}}

/* portal-förhandsvisning */
.portal{background:var(--yta);border:1px solid var(--linje);border-radius:var(--r1);overflow:hidden;box-shadow:0 30px 80px -40px rgba(11,21,51,.35)}
.portal .flikar{display:flex;gap:4px;padding:12px;border-bottom:1px solid var(--linje);overflow-x:auto}
.portal .flikar span{padding:8px 14px;border-radius:10px;font-size:14.5px;color:var(--mut);white-space:nowrap}
.portal .flikar span.nu{background:var(--panel);color:var(--ink);font-weight:600}
.portal .inne{padding:22px;display:grid;gap:18px}
.gora{background:var(--acc-svag);border-radius:var(--r3);padding:16px 18px;display:grid;gap:4px}
.gora .r{display:flex;align-items:center;gap:12px;padding:10px 0}
.gora .r+.r{border-top:1px solid color-mix(in srgb,var(--acc) 20%,transparent)}
.gora .r div{flex:1;min-width:0}
.gora small{display:block;color:var(--mut);font-size:14px}
.gora .knapp{min-height:44px;padding:0 16px;font-size:14.5px}
.siffror{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--linje);border-radius:var(--r3)}
.siffror div{padding:16px;border-left:1px solid var(--linje)}
.siffror div:first-child{border-left:0}
.siffror b{display:block;font:300 32px/1.1 var(--disp);color:var(--ink);font-variant-numeric:tabular-nums}
.siffror span{font-size:13.5px;color:var(--mut)}
@media (max-width:620px){.siffror{grid-template-columns:1fr 1fr}.siffror div:nth-child(3){border-left:0}.siffror div:nth-child(n+3){border-top:1px solid var(--linje)}}
.samtalslista{border:1px solid var(--linje);border-radius:var(--r3);overflow:hidden}
.samtalslista button{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--linje);padding:14px 16px;cursor:pointer;color:inherit;font:inherit;min-height:60px}
.samtalslista button:first-child{border-top:0}
.samtalslista button:hover{background:var(--panel)}
.prick{width:9px;height:9px;border-radius:50%;flex:none;background:var(--c,var(--mut))}
.samtalslista .t{flex:1;min-width:0}
.samtalslista b{display:block;font-weight:600;font-size:15.5px}
.samtalslista small{color:var(--mut);font-size:13.5px}
.pil{color:var(--mut);font-size:22px}

/* faq */
.faq details{border-top:1px solid var(--linje)}
.faq details:last-child{border-bottom:1px solid var(--linje)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;font:600 18px var(--sans);color:var(--ink);display:flex;justify-content:space-between;gap:16px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 28px/1 var(--disp);color:var(--mut)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding-bottom:22px;color:var(--mut);max-width:68ch}

/* avslut + sidfot */
.avslut{margin:8px;border-radius:var(--r1);background:#0b1533;color:#fff;text-align:center;padding:clamp(72px,10vw,120px) 20px;display:grid;justify-items:center;gap:20px}
.avslut h2{color:#fff;max-width:16ch}
.avslut .ingress{color:#b4bcd4;text-align:center}
.avslut .knappar{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
footer{padding-block:56px 40px;font-size:14.5px;color:var(--mut)}
footer .kol{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:28px}
footer h4{margin:0 0 12px;font:600 14px var(--sans);color:var(--ink)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}
footer .botten{margin-top:40px;padding-top:20px;border-top:1px solid var(--linje);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}
@media (max-width:760px){footer .kol{grid-template-columns:1fr 1fr}footer .kol>div:first-child{grid-column:1/-1}}

/* övrigt */
.chip{display:inline-flex;align-items:center;font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--acc-svag);color:var(--acc)}
.chip.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.chip.var{background:color-mix(in srgb,var(--var) 16%,transparent);color:var(--var)}
.vaxlar{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.vaxlar div{background:var(--yta);border:1px solid var(--linje);border-radius:var(--r3);padding:16px;font-weight:600;color:var(--ink)}
.vaxlar small{display:block;font-weight:400;color:var(--mut);font-size:13.5px}
.fragor{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.fragor div{background:var(--yta);border-radius:var(--r3);padding:18px;border:1px solid var(--linje)}
.fragor b{display:block;color:var(--ink);margin-bottom:4px}
.fragor span{color:var(--mut);font-size:15.5px}
.blad{position:fixed;inset:0;z-index:60;background:rgba(5,9,29,.45);display:grid;place-items:end center}
.blad>div{background:var(--bg);width:100%;max-width:620px;max-height:88vh;overflow:auto;border-radius:24px 24px 0 0;padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px))}
@media (min-width:700px){.blad{place-items:center}.blad>div{border-radius:24px}}
.blad h3{margin-bottom:4px}
.blad .rad{display:grid;gap:4px;padding:12px 0;border-top:1px solid var(--linje)}
.blad .rad b{font-size:13.5px;color:var(--mut);font-weight:600}
@media (prefers-reduced-motion:reduce){.herokort::before,.klot.lugn{animation:none}.knapp{transition:none}}

/* tabeller blir kort på mobil */
@media (max-width:620px){
  .tabellram{overflow:visible;border:0;background:none}
  .tabellram table{min-width:0}
  .tabellram thead{display:none}
  .tabellram table,.tabellram tbody,.tabellram tr,.tabellram td{display:block;width:100%}
  .tabellram tr{background:var(--yta);border:1px solid var(--linje);border-radius:var(--r3);padding:8px 0;margin-bottom:10px}
  .tabellram td{border:0;padding:6px 16px}
  .tabellram td::before{content:attr(data-label);display:block;font-size:12.5px;font-weight:600;color:var(--mut)}
}

/* ---------- kom igång: steg för steg (flikar + mockskärmar) ---------- */
.visning{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:20px;align-items:start}
.stegval{display:grid;gap:6px;min-width:0}
.stegval [role=tab]{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;align-items:center;text-align:left;width:100%;min-height:64px;padding:12px 14px;border:1px solid transparent;border-radius:var(--r3);background:none;color:var(--text);font:inherit;cursor:pointer;transition:background-color .2s,border-color .2s,box-shadow .2s}
.stegval [role=tab]:hover{background:var(--panel)}
.stegval [role=tab]>span{grid-row:1/3;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:600 15px var(--sans);background:var(--panel2);color:var(--mut);font-variant-numeric:tabular-nums}
.stegval [role=tab] b{font-weight:600;color:var(--ink);font-size:16px;line-height:1.3}
.stegval [role=tab] small{color:var(--mut);font-size:14px;line-height:1.35}
.stegval [role=tab][aria-selected=true]{background:var(--yta);border-color:var(--linje);box-shadow:var(--sk-2)}
.stegval [role=tab][aria-selected=true]>span{background:var(--acc);color:var(--acc-fg)}
.skarm{position:relative;background:var(--yta);border:1px solid var(--linje);border-radius:var(--r1);box-shadow:var(--sk-3);overflow:hidden;min-width:0}
.fonsterlist{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--linje);background:var(--panel)}
.fonsterlist i{width:10px;height:10px;border-radius:50%;background:var(--linje2)}
.fonsterlist span{margin-left:8px;font-size:13px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vy{padding:clamp(20px,3.4vw,36px);display:grid;gap:14px;align-content:start;min-height:420px}
.vy h4{margin:0;font:400 clamp(24px,2.6vw,30px)/1.15 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.framsteg{height:6px;border-radius:var(--rund);background:var(--panel2);overflow:hidden}
.framsteg span{display:block;height:100%;border-radius:inherit;background:var(--acc)}
.valgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.valgrid .v{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:10px 14px;border:1px solid var(--linje);border-radius:var(--r3);font-size:15.5px;color:var(--text);background:var(--yta)}
.valgrid .v.pa{border-color:var(--acc);background:var(--acc-svag);color:var(--ink);font-weight:600}
.valgrid .v em{font-style:normal;flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:var(--acc-fg);font-size:13px;font-weight:600}
.radknappar{display:flex;justify-content:space-between;gap:10px;margin-top:6px}
.radknappar .kn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:12px;font-weight:600;font-size:15px}
.radknappar .kn.pri{background:var(--knapp);color:var(--knapp-fg)}
.radknappar .kn.sek{background:var(--knapp2);color:var(--knapp2-fg)}
.bocklista,.profil,.testlista{list-style:none;margin:0;padding:0;display:grid}
.bocklista li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--linje);color:var(--mut)}
.bocklista li:first-child{border-top:0}
.bocklista li::before{content:"";flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--linje2)}
.bocklista li.pa{color:var(--ink)}
.bocklista li.pa::before{background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;border-color:var(--acc)}
.filer{display:flex;flex-wrap:wrap;gap:8px}
.filer span{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r4);background:var(--panel);font-size:14px;color:var(--text);max-width:100%;overflow-wrap:anywhere}
.filer span::before{content:"";flex:none;width:14px;height:17px;border-radius:3px;background:linear-gradient(135deg,var(--acc) 0 30%,color-mix(in srgb,var(--acc) 35%,transparent) 30%)}
.profil li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--linje)}
.profil li:first-child{border-top:0}
.profil span{color:var(--mut)}
.profil b{font-weight:600;color:var(--ink);text-align:right}
.profil b.fyll{padding:3px 10px;border-radius:var(--rund);background:var(--var-svag);color:var(--var);font-size:14px}
.chatt{display:grid;gap:10px}
.chatt span{padding:11px 14px;border-radius:16px;font-size:15.5px;line-height:1.45;max-width:88%}
.chatt .du{justify-self:end;background:var(--acc);color:var(--acc-fg);border-bottom-right-radius:6px}
.chatt .ai{background:var(--panel);color:var(--text);border-bottom-left-radius:6px}
.chatt .version{justify-self:center;background:none;color:var(--mut);font-size:13px;padding:2px}
.roster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.roster span{display:grid;gap:2px;padding:12px;border:1px solid var(--linje);border-radius:var(--r3);font-weight:600;color:var(--ink);min-width:0}
.roster span.pa{border-color:var(--acc);background:var(--acc-svag)}
.roster small{font-weight:400;color:var(--mut);font-size:13px}
.kontroll{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;padding:18px;border-radius:var(--r2);background:var(--ok-svag)}
.kontroll .stor{font:300 clamp(40px,5vw,56px)/1 var(--disp);color:var(--ok);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kontroll span{color:var(--text)}
.testlista li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--linje)}
.testlista li:first-child{border-top:0}
.testlista li::before{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700}
.testlista li.ok::before{content:"✓";background:var(--ok-svag);color:var(--ok)}
.testlista li.var::before{content:"!";background:var(--var-svag);color:var(--var)}
.live{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--r2);background:var(--natt);color:#fff}
.live b{display:block;font-size:17px}
.live small{color:var(--natt-mut);font-size:14px}
.puls{flex:none;width:14px;height:14px;border-radius:50%;background:#4fd39a;box-shadow:0 0 0 0 rgba(79,211,154,.6);animation:puls 2s ease-out infinite}
@keyframes puls{70%{box-shadow:0 0 0 12px rgba(79,211,154,0)}100%{box-shadow:0 0 0 0 rgba(79,211,154,0)}}
.notis{display:grid;gap:2px;padding:14px 16px;border:1px solid var(--linje);border-radius:var(--r3);box-shadow:var(--sk-1)}
.notis b{color:var(--ink)}
.notis span{color:var(--mut);font-size:15px}
@media (max-width:900px){
  .visning{grid-template-columns:minmax(0,1fr)}
  .stegval{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 10px;margin:0 -2px;scrollbar-width:none}
  .stegval::-webkit-scrollbar{display:none}
  .stegval [role=tab]{flex:none;width:auto;min-height:52px;grid-template-columns:28px auto;column-gap:10px;padding:8px 16px 8px 10px;border-color:var(--linje);border-radius:var(--rund);scroll-snap-align:start}
  .stegval [role=tab]>span{grid-row:auto;width:28px;height:28px;font-size:13.5px}
  .stegval [role=tab] b{font-size:15px;white-space:nowrap}
  .stegval [role=tab] small{display:none}
  .vy{min-height:0}
}
@media (max-width:420px){.roster{grid-template-columns:1fr}.valgrid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.puls{animation:none}}
.tagg-liten{justify-self:start;font-size:13px;font-weight:600;color:var(--acc);background:var(--acc-svag);padding:3px 10px;border-radius:var(--rund)}

/* ---------- S5 premium: kornighet, djup, produktbilder ---------- */
.herokort::after,.avslut::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--korn);opacity:calc(var(--korn-styrka) * 2.4);mix-blend-mode:overlay;pointer-events:none}
.avslut{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(70% 90% at 85% 0%,color-mix(in srgb,var(--hero2) 40%,transparent),transparent 70%),radial-gradient(60% 80% at 0% 100%,color-mix(in srgb,var(--hero3) 28%,transparent),transparent 70%),var(--natt)}
.storkort,.ruta,.pris,.vaxlar div,.fragor div{box-shadow:var(--sk-1),var(--kant-ljus);transition:box-shadow .25s ease,transform .25s ease}
.storkort:hover,.ruta:hover,.pris:hover{box-shadow:var(--sk-2),var(--kant-ljus)}
.storkort.mork,.pris.fram{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(80% 70% at 100% 0%,color-mix(in srgb,var(--hero2) 32%,transparent),transparent 70%),#0b1533;box-shadow:var(--sk-3)}
.storkort.mork::after,.pris.fram::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--korn);opacity:.08;pointer-events:none}
.portal{box-shadow:var(--sk-3)}
.tre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tre .storkort{grid-template-rows:auto auto auto 1fr auto}
@media (max-width:1000px){.tre{grid-template-columns:minmax(0,1fr)}}

.produktyta{padding:clamp(20px,4vw,48px) 0 0}
.produkt{margin:0;position:relative;background:var(--yta);border:1px solid var(--linje);border-radius:var(--r1);box-shadow:var(--sk-3);overflow:hidden;min-width:0}
.produkt::before{content:"";position:absolute;inset:0;background:var(--korn);opacity:var(--korn-styrka);pointer-events:none}
.produkttext{margin-top:12px}
.tva,.bygg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
.tva>*,.bygg>*{padding:clamp(18px,3vw,32px);min-width:0;display:grid;gap:10px;align-content:start}
.tva>*+*,.bygg>*+*{border-left:1px solid var(--linje)}
@media (max-width:760px){.tva,.bygg{grid-template-columns:minmax(0,1fr)}.tva>*+*,.bygg>*+*{border-left:0;border-top:1px solid var(--linje)}}
.bygg-chatt{display:grid;gap:10px;align-content:start}
.bygg-chatt span{padding:11px 14px;border-radius:16px;font-size:15px;line-height:1.45;max-width:90%}
.bygg-chatt .du{justify-self:end;background:var(--acc);color:var(--acc-fg);border-bottom-right-radius:6px}
.bygg-chatt .ai{background:var(--panel);color:var(--text);border-bottom-left-radius:6px}
.bygg-chatt .saknas{background:var(--var-svag);color:var(--text)}
.bygg-chatt .saknas b{display:block;color:var(--var);font-size:13.5px}
.bygg-chatt .skriv{max-width:none;margin-top:6px;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--linje2);background:var(--yta);color:var(--mut);border-radius:14px}
.bygg-chatt .skriv i{flex:none;width:30px;height:30px;border-radius:50%;background:#2c5cff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 15V5M5.5 9.5 10 5l4.5 4.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.bygg-forhand{background:var(--panel)}
.agenthuvud{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.agenthuvud>div{flex:1 1 150px;min-width:0}
.agenthuvud b{display:block;color:var(--ink);font-size:18px}
.agenthuvud small{color:var(--mut);font-size:14px}
.miniklot{flex:none;width:44px;height:44px;border-radius:50%;background:radial-gradient(60% 55% at 30% 30%,#9fd4ff 0%,transparent 60%),radial-gradient(55% 60% at 70% 75%,#f3c6ff 0%,transparent 65%),radial-gradient(70% 70% at 50% 50%,#5b7bff 0%,#2a3fb8 70%);box-shadow:0 8px 20px -8px rgba(44,92,255,.6)}
.pill{flex:none;display:inline-flex;align-items:center;justify-self:start;padding:4px 10px;border-radius:var(--rund);font-size:13px;font-weight:600;background:var(--acc-svag);color:var(--acc);white-space:nowrap}
.pill.ok{background:var(--ok-svag);color:var(--ok)}
.pill.var{background:var(--var-svag);color:var(--var)}
.halsning{font:400 19px/1.4 var(--disp);color:var(--ink);padding:14px 16px;background:var(--yta);border-radius:var(--r3);box-shadow:var(--sk-1)}
.uppgifter{list-style:none;margin:0;padding:0;display:grid}
.uppgifter li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--linje);font-size:15px}
.uppgifter li:first-child{border-top:0}
.uppgifter span{color:var(--mut)}
.uppgifter b{color:var(--ink);font-weight:600;text-align:right}
.provring{justify-self:start;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 8px;border-radius:var(--rund);background:var(--knapp);color:var(--knapp-fg);font-weight:600;font-size:15px}
.provring i{width:30px;height:30px;border-radius:50%;background:#4fd39a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 3.5h-2a1 1 0 0 0-1 1c0 6.6 5.4 12 12 12a1 1 0 0 0 1-1v-2l-3-1.5-1.5 1.5a8 8 0 0 1-4-4L9.5 8z' fill='%230b1533'/%3E%3C/svg%3E") center/16px no-repeat}
.livekort{background:var(--natt);color:var(--natt-text)}
.livetopp{display:flex;align-items:center;gap:10px}
.livetopp b{color:#fff;flex:1}
.livetopp small{color:var(--natt-mut);font-variant-numeric:tabular-nums}
.livekort .rad{padding:10px 13px;border-radius:14px;font-size:15px;line-height:1.45;max-width:90%;background:var(--natt2);color:var(--natt-text)}
.livekort .rad.kund{justify-self:end;background:#3d63ff;color:#fff}
.handelse{font-size:13.5px;color:#7ee0b0;display:flex;align-items:center;gap:8px}
.handelse::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.listrubrik{font-size:13px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.08em}
.srad,.kalla{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--linje)}
.listrubrik+.srad,.listrubrik+.kalla{border-top:0}
.srad .t,.kalla .t{flex:1;min-width:0}
.srad b,.kalla b{display:block;font-weight:600;font-size:15px;color:var(--ink)}
.srad small,.kalla small{color:var(--mut);font-size:13.5px}
.fil{flex:none;width:30px;height:36px;border-radius:6px;background:linear-gradient(135deg,var(--acc) 0 26%,var(--acc-svag) 26%);border:1px solid var(--linje)}
.fil.webb{border-radius:50%;width:34px;height:34px;background:radial-gradient(circle at 50% 50%,transparent 55%,var(--acc) 56% 64%,transparent 65%),linear-gradient(var(--acc),var(--acc)) center/2px 100% no-repeat,linear-gradient(var(--acc),var(--acc)) center/100% 2px no-repeat,var(--acc-svag)}
.fil.regel{background:repeating-linear-gradient(var(--acc-svag) 0 6px,var(--acc) 6px 8px);}
.kampanj{display:grid;gap:10px;align-content:start}
.kampanjnamn{font:400 clamp(22px,2.4vw,27px)/1.2 var(--disp);color:var(--ink);letter-spacing:-.015em}
.kampanj>small{color:var(--mut);font-size:14px}
.framsteg.stor{height:10px}
.staplar{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.staplar li{display:grid;grid-template-columns:minmax(0,7.5em) minmax(0,1fr) 2.5em;align-items:center;gap:10px;font-size:14.5px}
.staplar span{color:var(--mut)}
.staplar i{display:block;height:8px;border-radius:var(--rund);background:linear-gradient(90deg,var(--acc) var(--v),var(--panel2) var(--v))}
.staplar b{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.kontrollrad{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--linje);font-size:15px;color:var(--text)}
.listrubrik+.kontrollrad{border-top:0}
.kontrollrad::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;background:var(--ok-svag);color:var(--ok)}
.vaxel{display:inline-flex;align-items:center;gap:8px}
.vaxel i{width:34px;height:20px;border-radius:var(--rund);background:var(--panel2);position:relative;box-shadow:inset 0 0 0 1px var(--linje2)}
.vaxel i::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--yta);box-shadow:var(--sk-1)}
@media (prefers-reduced-motion:reduce){.storkort,.ruta,.pris{transition:none}}
.tagg-pris{font-size:13.5px;font-weight:600;color:var(--acc)}
.pris.fram .tagg-pris{color:#9db4ff}
.pris .belopp{font-size:clamp(38px,4.4vw,48px)}
/* värden bryts aldrig inuti; får de inte plats flyttas hela värdet till nästa rad */
.profil li,.uppgifter li{flex-wrap:wrap;row-gap:2px}
.profil b,.uppgifter b{white-space:nowrap;margin-left:auto}
/* lista med en kolumn: vänsterställd och läsbar, även i mörka kort */
.lista li span:only-child{text-align:left;color:var(--text)}
.storkort.mork .lista li{border-color:#22305c}
.storkort.mork .lista li span:only-child{color:var(--natt-text)}
/* långa svenska sammansättningar får mjuka bindestreck (­) i källan; här bara skyddsnät */
main p,main li,main h3,main td,main dd{overflow-wrap:break-word}

/* ---------- juridiska sidor (B52) ---------- */
.dok{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,5vw,72px);padding-block:clamp(36px,6vw,80px) clamp(56px,8vw,112px);align-items:start}
.doknav{position:sticky;top:92px;display:grid;gap:2px}
.doknav-t{font-size:13px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.doknav a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r4);text-decoration:none;color:var(--text);font-size:15.5px}
.doknav a:hover{background:var(--panel)}
.doknav a[aria-current=page]{background:var(--yta);color:var(--ink);font-weight:600;box-shadow:var(--sk-1),inset 0 0 0 1px var(--linje)}
.dokinne{max-width:44rem;min-width:0;display:grid;gap:16px;align-content:start}
.dokinne .tagg{font-size:14px;font-weight:600;color:var(--acc)}
.dokinne h1{font-size:clamp(38px,5.4vw,60px);line-height:1.05}
.dokinne h2{font:400 clamp(26px,3.2vw,32px)/1.15 var(--disp);letter-spacing:-.02em;margin:28px 0 10px;scroll-margin-top:90px}
.dokinne section{display:grid;gap:12px}
.dokinne p,.dokinne li{max-width:68ch}
.dokinne ul{margin:0;padding-left:1.25em;display:grid;gap:8px}
.dokinne li::marker{color:var(--acc)}
.dokinne a:not(.lank){color:var(--acc);text-underline-offset:.18em}
.utkast{background:var(--var-svag);border:1px solid color-mix(in srgb,var(--var) 28%,transparent);color:var(--text);border-radius:var(--r3);padding:14px 16px;font-size:15.5px}
.utkast b{color:var(--var)}
.doktoc{background:var(--yta);border:1px solid var(--linje);border-radius:var(--r2);padding:16px 18px 8px;box-shadow:var(--sk-2)}
.doktoc ol{margin:0;padding-left:1.3em;display:grid}
.doktoc a{display:flex;align-items:center;min-height:44px;text-decoration:none;color:var(--ink)}
.doktoc a:hover{color:var(--acc)}
.dokslut{margin-top:24px;padding-top:20px;border-top:1px solid var(--linje)}
.dokinne .tabellram table{min-width:0}
@media (max-width:860px){.dok{grid-template-columns:minmax(0,1fr)}.doknav{position:static;display:flex;overflow-x:auto;gap:6px;padding-bottom:6px;scrollbar-width:none}.doknav::-webkit-scrollbar{display:none}.doknav .doknav-t{display:none}.doknav a{flex:none;border:1px solid var(--linje);border-radius:var(--rund);white-space:nowrap}}

/* ---------- hjälpcenter (B53) ---------- */
.ikon{flex:none;color:var(--acc)}
.ikon.stor{width:28px;height:28px}
.dold{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hsok{width:min(560px,100%);margin-top:6px}
.hsok input{width:100%;min-height:56px;padding:0 20px;border-radius:var(--rund);border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.14);color:#fff;font:400 17px var(--sans);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hsok input::placeholder{color:rgba(255,255,255,.75)}
.hsok input:focus{outline:2px solid #fff;outline-offset:2px}
.hkater{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(124px,100%),1fr));gap:10px;margin-bottom:clamp(36px,5vw,56px)}
.hkat{display:grid;gap:6px;padding:20px;border-radius:var(--r2);background:var(--yta);border:1px solid var(--linje);box-shadow:var(--sk-1);text-decoration:none;color:var(--ink);transition:box-shadow .2s,transform .2s}
.hkat:hover{box-shadow:var(--sk-2);transform:translateY(-2px)}
.hkat b{font-size:17px}
.hkat small{color:var(--mut);font-size:14px}
.hfaq{display:grid;gap:clamp(28px,4vw,44px)}
.hdel h2{display:flex;align-items:center;gap:12px;font-size:clamp(28px,3.4vw,36px);margin-bottom:8px;scroll-margin-top:90px}
.hdel details:last-child{border-bottom:1px solid var(--linje)}
.storkort>.ikon.stor{width:32px;height:32px}
.statuskort{display:flex;gap:16px;align-items:flex-start;padding:clamp(20px,3vw,28px);border-radius:var(--r2);border:1px solid var(--linje);background:var(--yta);box-shadow:var(--sk-1)}
.statuskort h3{margin-bottom:4px}
.statusrad{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.statusrad i{width:8px;height:8px;border-radius:50%;background:var(--var)}
@media (prefers-reduced-motion:reduce){.hkat{transition:none}}

/* tryckytor ≥44 px (B18, K-förbered 19:20): fot, fristående länkar, valchips, källistor */
footer ul{gap:0}
footer a{display:inline-flex;align-items:center;min-height:44px}
.lank{display:inline-flex;align-items:center;min-height:44px}
.chips button{min-height:44px}
.artikel li>a:only-child,.dokinne li>a:only-child{display:inline-block;padding-block:11px;overflow-wrap:anywhere}

/* ---------- B57: Retell/Apple-nivå (knappar, kort, blad, meny) ---------- */
.knapp{transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
.knapp.pri{background:var(--acc);color:var(--acc-fg);box-shadow:0 1px 2px rgba(11,21,51,.12),0 6px 16px -6px color-mix(in srgb,var(--acc) 60%,transparent)}
.knapp.pri:hover{background:color-mix(in srgb,var(--acc) 88%,#000)}
.knapp.sek{background:var(--acc-svag);color:var(--ink)}
.knapp.sek:hover{background:color-mix(in srgb,var(--acc) 16%,var(--acc-svag))}
.knapp.spok{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--linje2)}
.knapp.spok:hover{background:var(--panel)}
.knapp:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.handling .knapp.sek{background:var(--panel);color:var(--ink)}
/* kort: tunn kant + diskret gradient, rundning 20 px */
.storkort,.pris,.ruta,.portal,.produkt,.skarm{border-radius:var(--r2)}
.storkort:not(.mork),.ruta,.pris:not(.fram),.hkat,.vaxlar div,.fragor div{background:linear-gradient(180deg,var(--yta),color-mix(in srgb,var(--panel) 45%,var(--yta)))}
.storkort:hover,.ruta:hover,.pris:hover{transform:translateY(-2px)}
/* blad: dimma + oskärpa, glider in, bottenblad på mobil och centrerat fönster på dator */
.blad{background:rgba(5,9,29,.38);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);opacity:0;transition:opacity .22s ease}
.blad.in{opacity:1}
.blad>div{position:relative;transform:translateY(24px);transition:transform .25s cubic-bezier(.2,.8,.2,1);box-shadow:var(--sk-3);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--linje)}
.blad.in>div{transform:none}
.blad .grepp{display:block;width:40px;height:5px;border-radius:var(--rund);background:var(--linje2);margin:-8px auto 14px}
@media (min-width:700px){.blad .grepp{display:none}.blad>div{transform:scale(.97)}.blad.in>div{transform:none}}
/* mobilmeny: frostat glas */
.mobilmeny{background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4)}
@media (prefers-reduced-motion:reduce){.blad,.blad>div,.knapp{transition:none}.storkort:hover,.ruta:hover,.pris:hover{transform:none}}

/* ===== B62/B63/B60c: hero med levande byggare, spelplats, tre agentkort ===== */
.herokort h1{max-width:18ch}
.herokort .lbygg{margin-top:clamp(20px,4vw,40px);width:min(1040px,100%);text-align:left;color:var(--text);box-shadow:0 2px 4px rgba(0,0,0,.2),0 40px 90px -30px rgba(0,0,0,.6)}
.lbygg .fonsterlist{position:relative;z-index:1}
.live-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);position:relative}
.live-grid>*{padding:clamp(16px,2.6vw,28px);min-width:0;display:grid;gap:10px;align-content:start}
.live-grid>*+*{border-left:1px solid var(--linje);background:linear-gradient(180deg,var(--panel),var(--yta))}
@media (max-width:760px){.live-grid{grid-template-columns:minmax(0,1fr)}.live-grid>*+*{border-left:0;border-top:1px solid var(--linje)}}
.live-chatt span{padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.45;max-width:92%}
.live-chatt .du{justify-self:end;background:var(--acc);color:var(--acc-fg);border-bottom-right-radius:6px}
.live-chatt .ai{background:var(--panel);color:var(--text);border-bottom-left-radius:6px;justify-self:start}
.live-chatt .steg b{display:block;font-size:12.5px;color:var(--ok);margin-bottom:2px}
.live-chatt .skriv{justify-self:stretch;max-width:none;background:var(--yta);border:1px solid var(--linje2);color:var(--mut);display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:14.5px}
.live-chatt .skriv i{width:26px;height:26px;border-radius:50%;background:var(--acc);flex:none}
.lp-huvud{display:flex;align-items:center;gap:12px;min-width:0}
.lp-av{width:44px;height:44px;border-radius:50%;flex:none;background:radial-gradient(60% 55% at 30% 30%,#9fd4ff,transparent 60%),radial-gradient(55% 60% at 70% 75%,#f3c6ff,transparent 65%),radial-gradient(70% 70% at 50% 50%,#5b7bff,#2a3fb8 70%)}
.lp-namn{display:grid;min-width:0;flex:1}.lp-namn b{font-size:17px;color:var(--ink)}.lp-namn small{color:var(--mut);font-size:13px;overflow-wrap:anywhere}
.lp-live{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--acc);background:var(--acc-svag);border-radius:999px;padding:3px 10px;white-space:nowrap}
.lp-live i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:blink 1.4s ease-in-out infinite}
.lp-halsning{margin:0;padding:12px 14px;background:var(--yta);border:1px solid var(--linje);border-radius:14px;font-size:15px;line-height:1.5;box-shadow:var(--sk-1)}
.lp-lista{list-style:none;margin:0;padding:0;display:grid}
.lp-lista li{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--linje);font-size:14.5px}
.lp-lista li:last-child{border-bottom:0}.lp-lista span{color:var(--mut)}.lp-lista b{text-align:right;font-weight:550;color:var(--ink)}
.lp-knapp{display:inline-flex;align-items:center;gap:8px;justify-self:start;background:var(--knapp);color:var(--knapp-fg);border-radius:999px;padding:0 20px;min-height:44px;font-weight:600;font-size:15px;box-shadow:var(--sk-2)}
@keyframes blink{50%{opacity:.25}}
@keyframes inglid{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.live-chatt>span:not(.skriv),.lp-rad{opacity:0;animation:inglid .55s cubic-bezier(.2,.7,.2,1) var(--d,0s) forwards}
@media (prefers-reduced-motion:reduce){.live-chatt>span,.lp-rad{opacity:1!important;animation:none!important}.lp-live i,.klot.lugn{animation:none!important}}
.spelplats{background:linear-gradient(135deg,var(--hero1),var(--hero4));border-radius:var(--r1);padding:clamp(28px,5vw,56px) 20px;display:grid;justify-items:center;gap:14px;color:#fff;text-align:center}
.spelplats .utskrift{text-align:left}
/* tre agentkort: jämn höjd och tydlig tagg */
.tre .tagg{justify-self:start}
.tre .storkort{box-shadow:var(--sk-2);background:linear-gradient(180deg,var(--yta),color-mix(in srgb,var(--yta) 92%,var(--acc)))}
.tre .storkort.mork{background:linear-gradient(180deg,#101c45,#0b1533)}
.tre .storkort{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
@media (hover:hover){.tre .storkort:hover{transform:translateY(-3px);box-shadow:var(--sk-3)}}

.lp-huvud{flex-wrap:wrap}.lp-namn{flex:1 1 140px}.lp-namn small{overflow-wrap:normal}

/* B62: mobilmenyn som bottenblad (greppkant, dimma bakom, rundade hörn) */
.mobilmeny{inset:auto 0 0 0;max-height:min(86dvh,720px);border-radius:24px 24px 0 0;padding:10px 20px calc(24px + env(safe-area-inset-bottom));box-shadow:0 0 0 100vmax rgba(8,12,30,.5),0 -24px 60px -20px rgba(8,12,30,.5);border-top:1px solid var(--linje);animation:blad-upp .28s cubic-bezier(.2,.7,.2,1)}
.mobilmeny::before{content:"";justify-self:center;width:42px;height:5px;border-radius:3px;background:var(--linje2);margin:0 0 8px}
.mobilmeny a{font-size:22px;padding:13px 4px}
.mobilmeny .knappar a{font-size:16px;padding:0}
@keyframes blad-upp{from{transform:translateY(32px);opacity:.3}}
@media (prefers-reduced-motion:reduce){.mobilmeny{animation:none}}
.mobilmeny a{font-size:19px;padding:9px 4px}
.mobilmeny .knappar{margin-top:14px;gap:8px}
.mobilmeny .knappar a{display:flex;align-items:center;justify-content:center;min-height:46px;font-size:16px;padding:0 16px}
/* tryckytor ≥44 i toppmenyn (G-ihop-fynd) */
.meny a,.handling .logga{display:inline-flex;align-items:center;min-height:44px}
.handling .knapp{min-height:44px}

/* tryckytor ≥44 i båda riktningarna (svep 27a85e1) */
footer a{min-width:44px}
main a[href="#lista"]{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.fonsterlist span{white-space:normal;min-width:0;line-height:1.3;overflow-wrap:anywhere}