/* Alweo - formsprak A: Alweos farger och typsnitt, lugnare ton an mail.alweo.se */

:root{
  --bg:#080a14;
  --card:#0e1222;
  --card-2:#131830;
  --text:#eaf2ff;
  --muted:#8a94b8;
  --dim:#7d87ab;
  --line:rgba(140,160,255,.16);
  --line-2:rgba(140,160,255,.09);
  --cyan:#22d3ee;
  --violet:#8b5cf6;
  --ok:#34d399;
  --warn:#fbbf24;
  --crit:#f87171;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --code:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --tint:255,255,255;
  --grid:rgba(120,150,255,.04);
  --header-bg:rgba(8,10,20,.86);
  --shadow:0 30px 80px -40px rgba(0,0,0,.9);
  --s--1:.8125rem; --s-0:1rem; --s-1:1.125rem; --s-2:1.4rem;
  --s-3:1.9rem; --s-4:2.6rem; --s-5:3.5rem;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:var(--s-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(#000,transparent 65%);
  -webkit-mask-image:linear-gradient(#000,transparent 65%);
}

h1,h2,h3,h4{font-family:var(--sans); font-weight:600; line-height:1.12; margin:0; text-wrap:balance}
p{margin:0}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}

html.lang-sv [lang="en"]{display:none!important}
html.lang-en [lang="sv"]{display:none!important}

.wrap{position:relative; z-index:2; width:100%; max-width:1120px; margin:0 auto; padding-inline:24px}
@media (max-width:560px){.wrap{padding-inline:18px}}

/* ---------- topplist ---------- */
.bar{
  position:sticky; top:0; z-index:30;
  background:var(--header-bg);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-2);
}
.bar-in{display:flex; align-items:center; gap:16px; height:66px}
.mark{display:flex; align-items:baseline; gap:10px; text-decoration:none; margin-right:auto}
.wordmark{display:flex; align-items:baseline; gap:2px}
/* hojden = versalhojden i ordmarket, sa AL laser som tva bokstaver i Alweo */
.wordmark .logo{height:19px; width:auto; flex:none}
.mark b{font-size:1.3rem; font-weight:700; letter-spacing:-.03em}
.mark span{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim);
}
nav{display:flex; gap:18px; font-family:var(--mono); font-size:.8125rem}
nav a{
  text-decoration:none; color:var(--muted); padding-bottom:4px;
  border-bottom:1.5px solid transparent; white-space:nowrap;
}
nav a:hover{color:var(--text)}
nav a[aria-current="page"]{color:var(--text); border-bottom-color:var(--cyan)}
.webmail{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-family:var(--mono); font-size:.7rem; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:5px 13px;
  white-space:nowrap;
}
.webmail:hover{color:var(--text); border-color:var(--cyan)}
.panel-link{
  display:inline-flex; align-items:center; text-decoration:none;
  font-family:var(--mono); font-size:.7rem; color:var(--text);
  border:1px solid rgba(34,211,238,.45); border-radius:999px; padding:5px 14px;
  white-space:nowrap; background:rgba(34,211,238,.08);
}
.panel-link:hover{border-color:var(--cyan); background:rgba(34,211,238,.16)}
.webmail span[aria-hidden]{color:var(--cyan)}

.lang{
  display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.06em;
}
.lang button{border:0; background:transparent; color:var(--dim); padding:5px 11px; cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--text); color:var(--bg)}
@media (max-width:1600px){.mark > span:not(.wordmark){display:none!important}}
/* Knapparna längst till höger får aldrig tryckas ihop (de klipptes vid 1300–1600 px). */
.bar-in > .webmail,.bar-in > .panel-link,.bar-in > .tema-knappar,.bar-in > .lang{flex-shrink:0}
/* Brytpunkten ligger på 1320 px: i Teknisk/sv behöver raden med nav, temaval och språk cirka 1310 px. */
@media (max-width:1320px){
  .bar-in{height:auto; flex-wrap:wrap; padding-block:12px; gap:14px 20px}
  nav{order:3; width:100%; gap:16px; overflow-x:auto; padding-bottom:2px}
}

/* ---------- sidor ---------- */
.page{display:none; padding-bottom:96px}
.page.on{display:block}

.eyebrow{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); display:block; margin-bottom:20px;
}
.lede{font-size:var(--s-1); color:var(--muted); max-width:58ch; line-height:1.6}

.hero{padding-block:76px 8px; display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:54px; align-items:end}
@media (max-width:900px){.hero{grid-template-columns:1fr; gap:34px; padding-block:52px 0}}
.hero h1{font-size:var(--s-5); letter-spacing:-.035em}
@media (max-width:640px){.hero h1{font-size:var(--s-4)}}
.hero .lede{margin-top:20px}
.grad{
  background:linear-gradient(100deg,var(--cyan),var(--violet) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.spec{border:1px solid var(--line); background:var(--card); border-radius:4px; padding:18px 20px}
.spec dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:9px 16px; font-family:var(--mono); font-size:var(--s--1)}
.spec dt{color:var(--dim)}
.spec dd{margin:0; text-align:right; font-variant-numeric:tabular-nums}

.section{border-top:1px solid var(--line-2); padding-top:40px; margin-top:64px}
.section-head{display:grid; grid-template-columns:172px 1fr; gap:30px; align-items:start}
@media (max-width:760px){.section-head{grid-template-columns:1fr; gap:14px}}
.section-head h2{font-size:var(--s-2)}
.rail{font-family:var(--mono); font-size:var(--s--1); color:var(--dim); line-height:1.5}

/* ---------- tjanstelista ---------- */
.services{display:grid}
.svc{
  display:grid; grid-template-columns:172px 1fr auto; gap:30px; align-items:baseline;
  padding:26px 0; border-top:1px solid var(--line-2); text-decoration:none;
}
.svc:hover{background:rgba(var(--tint),.02)}
.svc:hover .go{color:var(--cyan); transform:translateX(3px)}
.svc .tag{font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.svc.primary .tag{color:var(--cyan)}
.svc h3{font-size:var(--s-2); letter-spacing:-.02em}
.svc.primary h3{font-size:var(--s-3)}
.svc p{color:var(--muted); margin-top:8px; max-width:58ch}
.go{font-family:var(--mono); color:var(--dim); transition:transform .18s, color .18s}
@media (max-width:760px){
  .svc{grid-template-columns:1fr auto; gap:6px 16px}
  .svc .tag{grid-column:1/-1}
}

/* ---------- steg ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); margin-top:28px}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:var(--bg); padding:22px}
.step .n{font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; color:var(--cyan); display:block; margin-bottom:12px}
.step h4{font-size:var(--s-1); margin-bottom:7px}
.step p{color:var(--muted); font-size:.94rem}

.stack{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.chip{
  font-family:var(--mono); font-size:var(--s--1); color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:4px 12px; background:rgba(var(--tint),.02);
}

/* ---------- kort och listor ---------- */
.prose{max-width:66ch; display:grid; gap:18px; margin-top:22px; color:var(--muted)}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:26px}
@media (max-width:760px){.grid2{grid-template-columns:1fr}}
.card{background:var(--card); border:1px solid var(--line); border-radius:4px; padding:22px}
.card h4{font-size:var(--s-1); margin-bottom:8px}
.card p{color:var(--muted); font-size:.95rem}
.card .k{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan); display:block; margin-bottom:12px;
}

ul.ticks{list-style:none; padding:0; margin:0; display:grid; gap:11px}
ul.ticks li{padding-left:22px; position:relative; color:var(--muted)}
ul.ticks li::before{content:"\2192"; position:absolute; left:0; top:0; color:var(--cyan); font-family:var(--mono); font-size:.9rem}

.note{
  border-left:2px solid var(--cyan); background:rgba(34,211,238,.06);
  padding:14px 18px; border-radius:0 3px 3px 0; color:var(--muted); font-size:.95rem; margin-top:26px;
}

/* ---------- knappar ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
  text-decoration:none; border:1px solid transparent; border-radius:3px;
  font-family:var(--mono); font-size:var(--s--1); padding:12px 20px;
  color:#04121a; background:linear-gradient(100deg,var(--cyan),#5eb8ff); font-weight:500;
}
.btn:hover{background:linear-gradient(100deg,#7cf3ff,var(--violet)); color:#fff}
.btn.ghost{background:rgba(var(--tint),.04); border-color:var(--line); color:var(--text)}
.btn.ghost:hover{background:rgba(var(--tint),.07); color:var(--text)}
.btn.full{width:100%; margin-top:18px}

/* ---------- bestallningssidan ---------- */
.order{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:40px; align-items:start; margin-top:8px}
@media (max-width:980px){.order{grid-template-columns:minmax(0,1fr)}}
.block{margin-top:44px}
.block:first-child{margin-top:0}
.block > h2{font-size:var(--s-2); margin-bottom:6px}
.block > .sub{color:var(--muted); font-size:.95rem; margin-bottom:20px}

.tbl-scroll{overflow-x:auto}
.tbl{width:100%; border-collapse:collapse; font-size:.95rem}
.tbl th{
  text-align:left; font-family:var(--mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); font-weight:400;
  padding:0 12px 10px 0; border-bottom:1px solid var(--line); white-space:nowrap;
}
.tbl th.r,.tbl td.r{text-align:right; font-variant-numeric:tabular-nums; padding-right:0}
.tbl td{padding:12px 12px 12px 0; border-bottom:1px solid var(--line-2); color:var(--muted)}
.tbl td.tld{font-family:var(--mono); color:var(--text)}

.opt{display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line-2)}
.opt input{margin-top:5px; accent-color:var(--cyan); width:16px; height:16px; flex:none}
.opt label{flex:1; cursor:pointer}
.opt .t{display:block; color:var(--text)}
.opt .d{display:block; color:var(--dim); font-size:.88rem; margin-top:2px}
.opt .p{font-family:var(--mono); font-size:var(--s--1); white-space:nowrap; padding-top:2px; font-variant-numeric:tabular-nums}
.opt.off{opacity:.5}
/* Priset får en egen rad på smal skärm (t.ex. "195 kr engång/konto exkl. moms" fick inte plats). */
@media (max-width:560px){.opt{flex-wrap:wrap}.opt .p{white-space:normal; flex-basis:100%; padding-left:30px}}
.opt.off label{cursor:not-allowed}

.tiers{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
@media (max-width:820px){.tiers{grid-template-columns:1fr}}
.tier{border:1px solid var(--line); background:var(--card); border-radius:4px; padding:18px; cursor:pointer; display:block; position:relative}
.tier input{position:absolute; opacity:0; pointer-events:none}
.tier:has(input:checked){border-color:var(--cyan); box-shadow:inset 0 0 0 1px var(--cyan)}
.tier .n{font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.tier .amt{font-size:var(--s-3); letter-spacing:-.025em; display:block; margin:9px 0 2px; font-weight:600}
.tier .per{font-family:var(--mono); font-size:var(--s--1); color:var(--dim)}
.tier ul{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:6px; font-size:.9rem; color:var(--muted)}
.tier ul li::before{content:"\00B7  "; color:var(--dim)}

.field{display:grid; gap:7px; margin-bottom:18px}
.field > span{font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.field input,.field select{
  font:inherit; font-size:.95rem; color:var(--text); background:rgba(var(--tint),.03);
  border:1px solid var(--line); border-radius:3px; padding:10px 12px; width:100%;
}
.row2{display:grid; grid-template-columns:1fr 130px; gap:14px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}

.summary{
  position:sticky; top:88px; border:1px solid var(--line); background:var(--card);
  border-radius:4px; padding:22px; box-shadow:var(--shadow);
}
.summary h3{font-size:var(--s-1); margin-bottom:16px}
.sum-lines{display:grid; gap:9px; font-size:.92rem; margin-bottom:16px}
.sum-lines div{display:flex; justify-content:space-between; gap:16px; color:var(--muted)}
.sum-lines .v{font-family:var(--mono); color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap}
.sum-total{border-top:1px solid var(--line); padding-top:14px; display:grid; gap:9px}
.sum-total div{display:flex; justify-content:space-between; gap:16px; align-items:baseline}
.sum-total .lbl{font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.sum-total .big{font-size:var(--s-3); letter-spacing:-.025em; font-variant-numeric:tabular-nums; font-weight:600}
.sum-total .v{font-family:var(--mono); font-variant-numeric:tabular-nums}
.vat{font-family:var(--mono); font-size:.7rem; color:var(--dim); margin-top:14px; line-height:1.6}

/* ---------- kontakt och sidfot ---------- */
.contact{display:grid; grid-template-columns:1fr 320px; gap:44px; margin-top:32px}
@media (max-width:860px){.contact{grid-template-columns:1fr; gap:28px}}

footer{border-top:1px solid var(--line-2); padding-block:26px 40px; color:var(--dim); position:relative; z-index:2}
.foot-in{display:flex; flex-wrap:wrap; gap:14px 28px; align-items:baseline; font-family:var(--mono); font-size:var(--s--1)}
.foot-in a{text-decoration:none}
.foot-in a:hover{color:var(--text)}
.foot-in .sp{margin-left:auto}

.draft{
  background:rgba(251,191,36,.1); border-bottom:1px solid rgba(251,191,36,.25);
  color:var(--warn); font-family:var(--mono); font-size:.7rem; letter-spacing:.06em;
  text-align:center; padding:7px 18px; position:relative; z-index:31;
}

/* momsval och momsetiketter */
.momsval{display:inline-flex; margin-top:18px}
.momsetikett{font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; color:var(--dim); font-weight:400; white-space:nowrap}
.tier .momsetikett{display:block; margin-top:2px}
.tbl-moms{display:block; text-align:right; margin:0 0 6px}
.sum-total .momsetikett{display:block}
.tiers3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){.tiers3{grid-template-columns:1fr}}
.sum-total .big, .sum-total .v{white-space:nowrap}

/* kodexempel och tre kort i rad */
.kod{font-family:var(--code); font-size:.8rem; line-height:1.6; background:var(--card); border:1px solid var(--line); border-radius:4px; padding:16px 18px; margin:22px 0 0; overflow-x:auto; white-space:pre; color:var(--text)}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.grid3 .card h4{overflow-wrap:anywhere}
@media (max-width:820px){.grid3{grid-template-columns:1fr}}
.section-head > div{min-width:0}

/* Testa din e-post */
.testa-form{display:flex; gap:10px; margin-top:26px; max-width:560px}
.testa-form input{flex:1; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:4px; color:inherit; font:inherit; padding:12px 14px}
.testa-fel{color:#ff8a80; margin-top:10px}
.testa-betyg{display:flex; gap:18px; align-items:center; margin-bottom:22px}
.testa-betyg p{color:var(--muted); margin:4px 0 0}
.testa-bokstav{display:grid; place-items:center; width:64px; height:64px; border-radius:50%; font-size:2rem; font-weight:700; border:2px solid var(--line); flex:none}
.testa-bokstav.b-A{border-color:#3fb950; color:#3fb950}
.testa-bokstav.b-B,.testa-bokstav.b-C{border-color:#d29922; color:#d29922}
.testa-bokstav.b-D,.testa-bokstav.b-E,.testa-bokstav.b-F{border-color:#f85149; color:#f85149}
.testa-lista{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.testa-lista li{display:flex; gap:14px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:4px; padding:14px 16px}
.testa-lista p{color:var(--muted); margin:4px 0 0; font-size:.95rem}
.testa-mark{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; font-weight:700; flex:none; font-size:.9rem}
.t-ok .testa-mark{background:rgba(63,185,80,.15); color:#3fb950}
.t-varn .testa-mark{background:rgba(210,153,34,.15); color:#d29922}
.t-fel .testa-mark{background:rgba(248,81,73,.15); color:#f85149}
.t-okand .testa-mark{background:rgba(139,148,158,.15); color:#8b949e}
@media (max-width:520px){.testa-form{flex-direction:column}}
.testa-not{color:var(--muted); font-size:.85rem; margin-top:14px}
.testa-del{font-size:1.05rem; margin:28px 0 12px}
.testa-last{font-size:.85rem; color:var(--muted); margin:6px 0 0}
.testa-last::before{content:"🔒 "}
.testa-exempel{margin-top:18px; border:1px dashed var(--line); border-radius:6px; padding:16px}
.testa-exempel h4{margin:4px 0 12px}
.testa-vantar{color:var(--muted); margin-top:10px}
.testa-exempel-etikett{font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.badges .inl-badge{margin-top:0}
.inl-badge{display:inline-block;margin-top:22px;border-radius:20px;line-height:0}.inl-badge img{display:block;max-width:100%;height:auto}

/* Testdrift för e-posten */
.testdrift{border:1px solid rgba(251,191,36,.35);border-left:3px solid var(--warn);background:rgba(251,191,36,.06);border-radius:10px;padding:14px 18px;margin:18px 0}
.testdrift p{margin:0 0 6px;color:var(--muted)}
.testdrift p:last-child{margin-bottom:0}
.testdrift .td-rubrik{color:var(--text);font-weight:600;font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.testdrift strong{color:var(--text)}

.utv{display:inline-block;margin-left:8px;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--warn);border:1px solid rgba(251,191,36,.4);border-radius:4px;padding:1px 6px;vertical-align:middle}
.faq details{border-bottom:1px solid var(--line-2);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--cyan);font-family:var(--mono)}
.faq details[open] summary::after{content:"–"}
.faq details p,.faq details ul{color:var(--muted);margin:10px 0 0}
.faq h3{margin:34px 0 4px;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:500}

/* ---------- Teman: Utvecklare (standard, ovan), Företag och Enkel ---------- */
/* Rullistor ritas i sidans tema (mörkt i Teknisk, ljust i Enkel). */
html{color-scheme:dark}
select option,select optgroup{background-color:var(--bg);color:var(--text)}
/* Enkel: samma formspråk som kundpanelens Enkel – ljust, lugnt, vanlig text. Teknisk är grundstilen ovan. */
html[data-tema="enkel"]{
  color-scheme:light;
  --bg:#f3f6fa; --card:#ffffff; --card-2:#eef2f7;
  --text:#1b2340; --muted:#3f4966; --dim:#56607c;
  --line:rgba(27,35,64,.13); --line-2:rgba(27,35,64,.08);
  --cyan:#0b6b74; --violet:#5b3fc4; --ok:#1f6a43; --warn:#8a4b06; --crit:#a3260f;
  --mono:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sans:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --tint:27,35,64; --grid:transparent; --header-bg:rgba(243,246,250,.94); --shadow:0 1px 2px rgba(27,35,64,.06);
  --s--1:.95rem; --s-0:1.125rem; --s-1:1.25rem;
}
html[data-tema="enkel"] body{font-size:1.125rem; line-height:1.7}
html[data-tema="enkel"] .grad{background:none; -webkit-text-fill-color:currentColor; color:var(--cyan)}
html[data-tema="enkel"] p a,html[data-tema="enkel"] li a{text-decoration:underline}
html[data-tema="enkel"] .btn,html[data-tema="enkel"] nav a,html[data-tema="enkel"] .lang button{text-decoration:none}
html[data-tema="enkel"] .btn{color:#fff; background:#0b6b74; border-radius:10px}
html[data-tema="enkel"] .btn:hover{background:#084e55; color:#fff}
html[data-tema="enkel"] .card,html[data-tema="enkel"] .tier{border-radius:16px}
html[data-tema="enkel"] .tek-knapp{border-radius:10px}
html[data-tema="enkel"] .eyebrow,html[data-tema="enkel"] .rail,html[data-tema="enkel"] .tag{letter-spacing:.04em; text-transform:none; font-size:.9rem}
/* Enkel: tekniska detaljer fälls ihop */
html[data-tema="enkel"] .kod,html[data-tema="enkel"] .chips{display:none}
html[data-tema="enkel"].visa-tek .kod{display:block}
html[data-tema="enkel"].visa-tek .chips{display:flex}
.tek-knapp{display:none}
html[data-tema="enkel"] .tek-knapp{display:inline-block; margin-top:14px; font:inherit; font-size:1rem; background:none; border:1px solid var(--line); border-radius:4px; padding:8px 14px; cursor:pointer; color:var(--text)}
/* Temaväljaren */
.tema-val{font:inherit; font-family:var(--mono); font-size:.68rem; color:var(--text); background:transparent; border:1px solid var(--line); border-radius:999px; padding:5px 10px; cursor:pointer}
.tema-val option{color:#000; background:#fff}
html[data-tema="enkel"] .mark,html[data-tema="enkel"] .webmail,html[data-tema="enkel"] .panel-link,html[data-tema="enkel"] .faq summary{text-decoration:none}
html[data-tema="enkel"] nav{font-size:.875rem}

/* ---------- försäljning öppnar snart (2026-10-10) ---------- */
.tier.statisk{cursor:default}
.saljsnart{max-width:62ch}
.bestallrad{margin-top:22px}
.btn.avvaktar{opacity:.5; cursor:not-allowed; pointer-events:none}
.kopplingar{width:100%; max-width:420px; border-collapse:collapse; margin-top:22px; font-size:.92rem}
.kopplingar caption{text-align:left; font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); padding-bottom:8px}
.kopplingar td{padding:7px 0; border-top:1px solid var(--line); color:var(--muted)}
.kopplingar td.r{text-align:right; color:var(--text); white-space:nowrap}
@media (max-width:1320px){nav{flex-wrap:wrap; overflow-x:visible; gap:8px 16px}}

/* ---------- jämförelse och juridik (2026-10-10) ---------- */
.jmf{display:grid; gap:0}
.jmf-rad{padding:18px 0; border-top:1px solid var(--line)}
.jmf-rad h4{margin:0 0 10px}
.jmf-celler{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.jmf-cell{color:var(--muted); font-size:.93rem; overflow-wrap:anywhere}
.jmf-namn{display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:3px}
.jmf-alweo{color:var(--text)}
.jmf-alweo .jmf-namn{color:var(--cyan)}
@media (max-width:640px){.jmf-celler{grid-template-columns:1fr; gap:8px}}
.paket-tier{border-color:var(--cyan); box-shadow:inset 0 0 0 1px var(--cyan)}
.juridik{max-width:70ch}
.juridik h3{margin:28px 0 8px; font-size:var(--s-1)}
.juridik p,.juridik li{color:var(--muted); line-height:1.65}
.juridik .ticks li{margin-bottom:6px}
.jur-bolag{border-left:3px solid var(--warn); padding:8px 14px; background:rgba(251,191,36,.06)}
.hero h1{overflow-wrap:anywhere; hyphens:auto}

/* ---------- ansökan om återförsäljare (2026-10-11) ---------- */
.afa-form{max-width:760px}
.afa-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px}
@media (max-width:640px){.afa-grid{grid-template-columns:1fr}}
.afa-form textarea{font:inherit; font-size:.95rem; color:var(--text); background:rgba(var(--tint),.03); border:1px solid var(--line); border-radius:3px; padding:10px 12px; width:100%; resize:vertical}
.afa-checks{display:flex; flex-wrap:wrap; gap:8px 18px}
.afa-check{display:flex; gap:8px; align-items:flex-start; color:var(--muted); font-size:.95rem; margin-bottom:12px}
.afa-check input{margin-top:4px; flex:none}
.afa-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.afa-form .field{min-width:0; grid-template-columns:minmax(0,1fr)}
.afa-form .field select{min-width:0; max-width:100%; text-overflow:ellipsis}
.afa-check input,.afa-checks input{width:auto; padding:0}
.afa-checks .afa-check{margin-bottom:0}

/* ---------- temaväljaren som knappar (2026-10-11) ---------- */
.tema-val[hidden]{display:none}
.tema-knappar{display:flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden; font-family:var(--mono); font-size:.66rem; letter-spacing:.04em}
.tema-rubrik{padding:5px 8px 5px 12px; color:var(--dim); text-transform:uppercase; letter-spacing:.12em; font-size:.6rem}
.tema-knappar button{border:0; background:transparent; color:var(--muted); padding:5px 10px; cursor:pointer; font:inherit}
.tema-knappar button[aria-pressed="true"]{background:var(--text); color:var(--bg)}
@media (max-width:420px){.tema-rubrik{padding-left:10px; padding-right:6px}}
.afa-hint{align-self:end; margin:0 0 18px}

/* Vakt: bilder från panelen och mejlen */
.vaktbilder{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start}
.vaktbilder figure{margin:0; min-width:0}
.vaktbilder figure.bred{grid-column:1 / -1}
.vaktbilder figure.mejl{max-width:560px}
.vaktbilder img{display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:6px; box-shadow:0 10px 30px rgba(0,0,0,.18)}
.vaktbilder figcaption{color:var(--muted); font-size:.92rem; margin-top:10px; line-height:1.5}
@media (max-width:760px){.vaktbilder{grid-template-columns:1fr}}

/* Vakt: larmen i hero, bilder i zickzack, jämförelse */
.larmstack{display:flex; flex-direction:column; gap:10px; align-self:center}
.larm{display:flex; gap:12px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; box-shadow:0 10px 28px rgba(0,0,0,.18)}
.larm i{flex:0 0 auto; width:10px; height:10px; border-radius:50%; margin-top:6px; background:var(--dim)}
.larm b{display:block; font-size:.92rem; line-height:1.35}
.larm span{display:block; color:var(--muted); font-size:.8rem; font-family:var(--mono); margin-top:2px}
.larm.crit i{background:var(--crit, #ef4444); box-shadow:0 0 0 4px rgba(239,68,68,.18)}
.larm.ok i{background:var(--ok, #22c55e)}
.larm.warn i{background:var(--warn, #f59e0b)}
.larm.fix i{background:var(--cyan)}
.larm.info i{background:var(--violet)}
.larm:nth-child(2){margin-left:18px} .larm:nth-child(4){margin-left:18px}
@media (prefers-reduced-motion:no-preference){.larm{animation:larmIn .5s ease both}.larm:nth-child(2){animation-delay:.12s}.larm:nth-child(3){animation-delay:.24s}.larm:nth-child(4){animation-delay:.36s}.larm:nth-child(5){animation-delay:.48s}}
@keyframes larmIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
@media (max-width:900px){.larm:nth-child(2),.larm:nth-child(4){margin-left:0}}
.vaktchips{list-style:none; padding:0; margin:18px 0 0; display:flex; flex-wrap:wrap; gap:8px}
.vaktchips li{font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; border:1px solid var(--line); border-radius:99px; padding:5px 11px; color:var(--muted); background:rgba(var(--tint),.03)}
.zigar{display:flex; flex-direction:column; gap:44px}
.zig{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:30px; align-items:center}
.zig.vand{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.zig.vand > figure{order:2}
.zig figure{margin:0}
.zig figure.smal{max-width:460px}
.zig img{display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:8px; box-shadow:0 18px 44px rgba(0,0,0,.22)}
.zig h3{font-size:var(--s-1); margin:6px 0 8px}
.zig p{color:var(--muted)}
.zig .k{font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan)}
@media (max-width:760px){.zig,.zig.vand{grid-template-columns:1fr; gap:14px}.zig.vand > figure{order:0}}
.tblscroll{overflow-x:auto}
table.jamfor{width:100%; border-collapse:collapse; font-size:.95rem}
table.jamfor th,table.jamfor td{padding:12px 14px; border-bottom:1px solid var(--line-2); text-align:left}
table.jamfor th{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan)}
table.jamfor td:not(:first-child),table.jamfor th:not(:first-child){text-align:center; width:22%}
table.jamfor td.ja{color:var(--ok, #22c55e); font-weight:700}

/* E-post: inkorgen i hero och prisjämförelsen */
.inkorg{align-self:center; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 18px 44px rgba(0,0,0,.22)}
.ink-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line-2)}
.ink-top b{font-size:.95rem}
.ink-top span{font-family:var(--mono); font-size:.72rem; color:var(--muted)}
.ink-rad{display:flex; gap:10px; align-items:flex-start; padding:11px 14px; border-bottom:1px solid var(--line-2)}
.ink-rad:last-child{border-bottom:0}
.ink-rad i{flex:0 0 auto; width:8px; height:8px; border-radius:50%; margin-top:7px; background:var(--dim)}
.ink-rad i.ok{background:var(--ok)} .ink-rad i.fix{background:var(--cyan)} .ink-rad i.info{background:var(--violet)} .ink-rad i.warn{background:var(--warn)}
.ink-rad div{flex:1; min-width:0}
.ink-rad b{display:block; font-size:.86rem; line-height:1.3}
.ink-rad span{display:block; color:var(--muted); font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ink-rad em{font-style:normal; font-family:var(--mono); font-size:.68rem; color:var(--dim); white-space:nowrap}
@media (prefers-reduced-motion:no-preference){.ink-rad{animation:larmIn .5s ease both}.ink-rad:nth-child(3){animation-delay:.1s}.ink-rad:nth-child(4){animation-delay:.2s}.ink-rad:nth-child(5){animation-delay:.3s}}
.prisstapel{display:flex; flex-direction:column; gap:12px; margin-top:22px}
.ps-rad{display:grid; grid-template-columns:minmax(150px,240px) 1fr auto; gap:14px; align-items:center}
.ps-namn{font-size:.92rem; color:var(--muted)}
.ps-rad.alweo .ps-namn{color:var(--text); font-weight:600}
.ps-bar{height:12px; border-radius:6px; background:linear-gradient(90deg,rgba(var(--tint),.18) var(--w),transparent var(--w)); border:1px solid var(--line-2)}
.ps-rad.alweo .ps-bar{background:linear-gradient(90deg,var(--cyan) 0,var(--violet) var(--w),transparent var(--w))}
.ps-kr{font-family:var(--mono); font-size:.9rem; min-width:84px; text-align:right}
@media (max-width:560px){.ps-rad{grid-template-columns:1fr auto}.ps-bar{grid-column:1 / -1; order:3}}

/* Hemsidor: flödet i hero. Domäner: DNS-kortet i hero */
.flode{align-self:center; display:flex; flex-direction:column; gap:0; position:relative}
.fl-steg{display:flex; gap:12px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:11px 14px; position:relative; margin-bottom:14px; box-shadow:0 10px 28px rgba(0,0,0,.16)}
.fl-steg:not(:last-child)::after{content:""; position:absolute; left:19px; bottom:-15px; width:2px; height:14px; background:var(--line)}
.fl-steg i{flex:0 0 auto; width:10px; height:10px; border-radius:50%; margin-top:5px; background:var(--cyan)}
.fl-steg i.b{background:var(--violet)} .fl-steg i.c{background:var(--ok)} .fl-steg i.d{background:var(--warn)} .fl-steg i.e{background:var(--cyan)}
.fl-steg b{display:block; font-size:.9rem}
.fl-steg span{display:block; color:var(--muted); font-size:.78rem; font-family:var(--mono); margin-top:2px}
@media (prefers-reduced-motion:no-preference){.fl-steg{animation:larmIn .5s ease both}.fl-steg:nth-child(2){animation-delay:.12s}.fl-steg:nth-child(3){animation-delay:.24s}.fl-steg:nth-child(4){animation-delay:.36s}.fl-steg:nth-child(5){animation-delay:.48s}}
.dnskort{align-self:center; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 18px 44px rgba(0,0,0,.22)}
.dns-rad{display:grid; grid-template-columns:42px 54px 1fr; gap:8px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line-2); font-size:.8rem}
.dns-rad em{font-style:normal; font-family:var(--mono); font-size:.68rem; color:var(--cyan); border:1px solid var(--line); border-radius:4px; text-align:center; padding:1px 0}
.dns-rad span{font-family:var(--mono); color:var(--muted)}
.dns-rad code{font-family:var(--mono); color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.76rem}
.dns-hist{padding:10px 14px; font-family:var(--mono); font-size:.7rem; color:var(--dim)}
.hero:has(.flode),.hero:has(.larmstack),.hero:has(.inkorg),.hero:has(.dnskort){align-items:center}

[data-oppen][hidden],[data-api-oppen][hidden],#saknadSida[hidden],[data-stangd][hidden],[data-knapp][hidden],#nyDomanDel[hidden],#egenDomanFalt[hidden],#orderNot[hidden],#orderNotEn[hidden]{display:none!important}
.domanval .opt{margin-bottom:8px}

/* ---------- mobil: sidhuvud, klickytor och jämförelsetabell (2026-10-17) ---------- */
@media (max-width:760px){
  /* Sidhuvudet är 180–190 px högt på mobil – det får följa med sidan i stället för att täcka innehållet. */
  .bar{position:static}
  .summary{position:static}
  /* Klickytor minst 40 px höga */
  .mark{min-height:40px; align-items:center}
  nav a{display:inline-flex; align-items:center; min-height:40px; padding-bottom:0}
  .webmail,.panel-link{min-height:40px}
  .lang button,.tema-knappar button{min-height:40px; min-width:40px}
  .foot-in{align-items:center; gap:4px 24px}
  .foot-in a{display:inline-flex; align-items:center; min-height:40px}
  .faq summary{padding-block:8px; align-items:center}
  .faq details{padding-block:6px}
  .opt input{width:22px; height:22px; margin-top:2px}
  .opt .p{padding-left:36px}
  .afa-check{min-height:40px; padding-block:8px}
  .afa-check input{width:22px; height:22px; margin-top:2px}
  .afa-checks{gap:0 18px}
}
@media (max-width:480px){
  /* Jämförelsetabellerna (Vakt Bas/Pro och "Gratis test eller Vakt?") staplas: radens rubrik överst,
     de två värdena sida vid sida under – utan sidledsscroll och utan att ord bryts mitt i. */
  table.jamfor,table.jamfor thead,table.jamfor tbody{display:block}
  table.jamfor tr{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-bottom:1px solid var(--line-2)}
  table.jamfor th,table.jamfor td{border-bottom:0; padding:8px 6px; overflow-wrap:break-word}
  table.jamfor thead th:first-child{display:none}
  table.jamfor td:nth-child(-n+2){grid-column:1 / -1; padding-bottom:0; color:var(--text); font-weight:600}
  table.jamfor td:not(:first-child),table.jamfor th:not(:first-child){width:auto}
}