/*! knuff, delad stil för alla sidor. Referensbladet 2 nov 2026 styr varje del.
   Typsnitt: Source Serif 4, Hanken Grotesk, Geist Mono (OFL, Fontsource, självhostade).
   Ikoner: Tabler Icons (MIT), 1,5 px, non-scaling-stroke.
   Typografiregler efter interfaces.dev (Jakub Krehel): balance, pretty, koncentrisk radie. */@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/serif-400.woff2) format("woff2")}@font-face{font-family:Hanken Grotesk;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/sans-400.woff2) format("woff2")}@font-face{font-family:Hanken Grotesk;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/sans-500.woff2) format("woff2")}@font-face{font-family:Hanken Grotesk;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/sans-600.woff2) format("woff2")}@font-face{font-family:Geist Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/mono-500.woff2) format("woff2")}:root{--ink:#14171f;--ink-2:#3d4250;--grey:#5c6270;--deep:#1f3a8a;--bg:#fff;--tint:#f4f6fa;--line:#e4e7ed;--deep-soft:#e8edf8;--sky-soft:#e3f3fa;--sky:#0593c6;--sun:#fc734d;--sun-soft:#fff0ea;--ok:#1b7a4b;--ok-soft:#e4f3ea;--t1:13px;--t2:15px;--t3:17px;--t4:clamp(26px,2.6vw + 12px,38px);--t5:clamp(40px,4.6vw + 12px,72px);--serif:"Source Serif 4",Georgia,serif;--sans:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,Menlo,monospace;--e:cubic-bezier(.23,1,.32,1);--gut:20px;--sec:112px;color-scheme:light}@media (max-width:860px){:root{--sec:72px}}@media (max-width:359px){:root{--gut:16px}}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-padding-top:80px}body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t3)/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}p,li,dd,summary{text-wrap:pretty}p{margin:0}a{color:inherit}img{display:block;max-width:100%;height:auto}button,input,textarea{font:inherit;color:inherit}button,a,summary,[role=tab]{touch-action:manipulation}button,[role=tab]{-webkit-user-select:none;user-select:none}:focus-visible{outline:2px solid var(--deep);outline-offset:3px;border-radius:6px}.wrap{max-width:1180px;margin:0 auto;padding-inline:max(var(--gut),env(safe-area-inset-left,0px)) max(var(--gut),env(safe-area-inset-right,0px))}[hidden]{display:none!important}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.i path{vector-effect:non-scaling-stroke}.i.s{width:16px;height:16px}.mono{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}/*! Rubriker och text */.h1{font-family:var(--serif);font-size:var(--t5);line-height:1;letter-spacing:-.04em}.h2{font-family:var(--serif);font-size:var(--t4);line-height:1.08;letter-spacing:-.03em}.h1 b,.h2 b{font-weight:400;color:var(--deep)}.lead{color:var(--ink-2);max-width:32em;margin-top:16px}.small{font-size:var(--t1);color:var(--grey)}section{padding-top:var(--sec)}/*! Knappar: respons på tryck (apple-design, Response) */.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:0;font:500 var(--t2)/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .1s ease-out,background-color .15s ease-out}.btn:active{transform:scale(.97)}.btn.dark{background:var(--ink);color:#fff}.btn.line{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}.btn.sm{min-height:36px;padding:0 14px}@media (pointer:coarse),(max-width:860px){.btn.sm{min-height:44px}}@media (hover:hover) and (pointer:fine){.btn.dark:hover{background:#2a2f3b}.btn.line:hover{background:var(--tint)}}.lank{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:var(--t2);text-decoration:underline;text-decoration-color:var(--sky);text-decoration-thickness:1.5px;text-underline-offset:5px;padding-block:10px}.lank .i{transition:transform .15s var(--e)}@media (hover:hover) and (pointer:fine){.lank:hover .i{transform:translate(3px)}}/*! Sidhuvud */.hdr{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid transparent;transition:border-color .2s}.hdr[data-s]{border-bottom-color:var(--line)}.bar{display:flex;align-items:center;gap:20px;height:64px}.brand{display:inline-flex;align-items:center;gap:7px;font:400 26px/1 var(--serif);letter-spacing:-.03em;text-decoration:none;padding-block:9px}.brand img{width:24px;height:auto}.brand .ordmarke{height:38px;width:auto;display:block;margin-left:-4px}.ordmarke path{fill:var(--ink)}.ordmarke path[fill="#1f3a8a"]{fill:var(--deep)}.nav{display:flex;gap:22px;margin-inline:auto;font-size:var(--t2);color:var(--ink-2)}.nav a{text-decoration:none;padding-block:10px}.nav a[aria-current]{color:var(--ink);box-shadow:inset 0 -1.5px 0 var(--sky)}@media (hover:hover) and (pointer:fine){.nav a:hover{color:var(--ink)}}.meny{display:none;margin-left:auto}.meny summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:999px;font-size:var(--t2);font-weight:500;cursor:pointer}.meny summary::-webkit-details-marker{display:none}.meny[open] .ia{display:none}.meny:not([open]) .ib{display:none}.meny nav{position:absolute;left:0;right:0;top:64px;background:#fff;border-bottom:1px solid var(--line);padding:8px var(--gut) 16px;display:grid;font-size:var(--t3)}.meny nav a{text-decoration:none;padding:12px 0;border-top:1px solid var(--line)}.meny nav a:first-child{border-top:0}@media (max-width:1080px){.nav{display:none}.meny{display:block}.bar .cta{margin-left:0}}.bar .logga{font-size:var(--t2)}@media (max-width:600px){.bar .logga{display:none}}@media (max-width:380px){.bar{gap:8px}.bar .cta{padding:0 14px}}/*! Brödsmulor på undersidor */.crumbs{font-size:var(--t1);color:var(--grey);padding-top:28px}.crumbs a{text-decoration:none}.crumbs span{margin-inline:6px}/*! Sidans topp på undersidor */.top{padding-top:20px}.top .lead{font-size:var(--t3)}/*! Rader med text och avdelare, i stället för kort */.rows{margin-top:40px;border-top:1px solid var(--ink)}.rad{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;padding-block:32px;border-bottom:1px solid var(--line)}.rad h3{font-size:var(--t3);font-weight:600;letter-spacing:-.01em}.rad p{color:var(--ink-2);max-width:32em}.rad p+p{margin-top:10px}@media (max-width:860px){.rad{grid-template-columns:1fr;gap:8px;padding-block:22px}}/*! Brickan: affectUI Decision Inbox och Email Draft (MIT, Copyright (c) affectUI, https://www.affectui.com).
   Huvud i färg utanför kortet, vitt kort med rader, två svar per rad, besvarad rad fälls ihop. Radie 24 = 18 + 6 */.tray{--c:var(--deep);display:flex;flex-direction:column;background:var(--tint);border-radius:24px;padding:6px}.tray-h{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:var(--t2);font-weight:500;color:var(--ink)}.tray-h .i{color:var(--c)}.tray[data-clear] .tray-h .i{color:var(--ok)}.tray-c{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.dr{display:grid;grid-template-rows:1fr;transition:grid-template-rows .18s var(--e),opacity .18s var(--e)}.dr[data-gone]{grid-template-rows:0fr;opacity:0}.dr>div{min-height:0;overflow:hidden}.dr+.dr .di{border-top:1px solid var(--line)}.di{padding:14px 16px}.di .tt{display:flex;justify-content:space-between;gap:12px;font-size:var(--t2);font-weight:500;cursor:default}.di.fold .tt{cursor:pointer;color:var(--grey);font-weight:400}.di .dt{max-width:32em;margin-top:4px;font-size:var(--t1);line-height:1.45;color:var(--ink-2)}.di .ac{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;min-height:36px;align-items:center}.di.fold .dt,.di.fold .ac{display:none}.b{min-height:36px;padding:0 14px;border:0;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--line);font:500 var(--t1)/1 var(--sans);cursor:pointer;transition:transform .1s ease-out,background-color .15s}.b:active{transform:scale(.97)}.b.p{background:var(--ink);color:#fff;box-shadow:none}@media (pointer:coarse),(max-width:860px){.b{min-height:44px;padding:0 16px}}@media (hover:hover) and (pointer:fine){.b:hover{background:var(--tint)}.b.p:hover{background:#2a2f3b}}.ok{display:inline-flex;align-items:center;gap:6px;font-size:var(--t1);font-weight:500;color:var(--ink)}.ok .i{color:var(--ok)}.tray-e{display:none;padding:14px 16px;font-size:var(--t1);color:var(--ink-2)}.tray[data-clear] .tray-e{display:block}.sc{font:600 var(--t2)/1 var(--sans);font-variant-numeric:tabular-nums}/*! Staplar, tremor Bar List (Apache 2.0): en accent, siffror högerställda */.bl{display:grid;gap:10px;margin-top:6px}.bl div{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:12px;align-items:center;font-size:var(--t2)}.bl span{position:relative;padding:6px 10px;border-radius:8px;z-index:0;white-space:nowrap}.bl span:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;width:var(--w);background:var(--deep-soft);border-radius:8px;z-index:-1;transition:width .18s var(--e)}.bl b{font:500 var(--t1)/1 var(--mono);text-align:right}/*! Chips och segmentväljare, glidande markering (uiarc.dev Tabs, MIT) */.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--tint);border-radius:999px;padding:4px}.seg button{position:relative;z-index:1;min-height:36px;padding:0 14px;border:0;background:none;border-radius:999px;font-size:var(--t1);font-weight:500;color:var(--ink-2);cursor:pointer;white-space:nowrap}.seg button[aria-selected=true],.seg button[aria-pressed=true]{color:var(--ink)}.seg i{position:absolute;z-index:0;top:4px;bottom:4px;left:0;border-radius:999px;background:#fff;box-shadow:0 1px 2px #14171f1a,0 0 0 1px #14171f0a;transition:transform .18s var(--e),width .18s var(--e)}@media (pointer:coarse){.seg button{min-height:44px}}/*! Frågor: details efter base-ui.com FAQ */.faq{margin-top:28px;border-top:1px solid var(--line);max-width:760px}.faq details{border-bottom:1px solid var(--line)}.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;padding:18px 0;font-size:var(--t3);font-weight:500}.faq summary::-webkit-details-marker{display:none}.faq summary .i{color:var(--grey);transition:transform .18s var(--e)}.faq details[open] summary .i{transform:rotate(45deg)}.faq details p{padding:0 0 20px;color:var(--ink-2);max-width:32em}/*! Avslut med räfflat glas (pryzm.design-idén) som stillbild på en enda yta */.end{position:relative;border-radius:28px;overflow:hidden;background:var(--deep-soft) url(/bilder/glas.webp) center/cover;padding:56px 48px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center}.end .vante{width:150px}.end .lead{color:var(--ink-2)}@media (max-width:860px){.end{grid-template-columns:1fr;padding:32px 22px;gap:18px;background-image:url(/bilder/glas-600.webp);background-position:0 50%}.end .vante{width:96px}}/*! E-post med kod */.signup{margin-top:22px;max-width:30em}.signup label{display:block;font-size:var(--t2);font-weight:500;margin-bottom:8px}.field{display:flex;gap:8px}.field input{flex:1;min-width:0;height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:16px}.field input::placeholder{color:var(--grey)}.field input:focus{outline:2px solid var(--deep);outline-offset:1px}.fine{font-size:var(--t1);color:var(--ink-2);margin-top:8px}.err{display:flex;gap:6px;align-items:center;font-size:var(--t1);color:var(--ink);margin-top:8px}.err .i{color:var(--sun)}#kod{font-family:var(--mono);letter-spacing:.2em}.link{background:none;border:0;padding:10px 0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:var(--t1);color:var(--ink-2)}@media (max-width:420px){.field{flex-direction:column}.field input{flex:none;height:44px}.field .btn{width:100%}}/*! Vanten: vinkar när någon trycker, en hälsning när sidan laddas */.vante{cursor:pointer;transform-origin:50% 92%;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 10px 10px rgba(20,23,31,.14))}@keyframes hej{0%,to{transform:none}25%{transform:rotate(-7deg)}60%{transform:rotate(5deg)}}.vante.hej{animation:hej .9s var(--e) .4s 1 both}/*! Sidfot */.foot{margin-top:var(--sec);border-top:1px solid var(--line);padding-block:32px 48px;font-size:var(--t1);color:var(--ink-2)}.foot .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px}.foot nav{display:flex;flex-wrap:wrap;gap:4px 18px}.foot nav a{text-decoration:none;padding-block:8px}.foot p{max-width:32em}@media (max-width:860px){.foot .wrap{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}/*! Färgade ytor bakom produkten, från v8 (Farres val 2 nov 2026): himmelsblått, djupblått och cantaloupe i mjuka toner */.farg{border-radius:28px;padding:28px}.farg.f1{background:linear-gradient(150deg,var(--sky-soft),var(--deep-soft))}.farg.f2{background:linear-gradient(150deg,var(--sun-soft),var(--sky-soft))}.farg.f3{background:linear-gradient(150deg,var(--deep-soft),var(--sun-soft))}.farg .tray{background:#ffffff8c}@media (max-width:860px){.farg{padding:14px;border-radius:22px}}/*! Mjuk och välkomnande: sidans topp på en färgad yta, frågorna på en ljus varm yta */.topp{margin:20px 0 40px;padding:36px 48px 52px;border-radius:32px}.topp .crumbs{padding-top:0}.topp .lead{color:var(--ink-2)}.fragor-y{background:linear-gradient(170deg,#fbf7f4,#f6f8fc);border-radius:32px;padding:48px}.fragor-y .faq{border-top-color:#14171f1a}.fragor-y details{border-bottom-color:#14171f1a}@media (max-width:860px){.topp{padding:22px 20px 30px;border-radius:24px;margin-inline:calc(-1 * var(--gut) + 8px)}.fragor-y{padding:28px 20px;border-radius:24px;margin-inline:calc(-1 * var(--gut) + 8px)}}/*! Mjuk sida: varm grund med färgade ljusfläckar längs hela sidan, vita kort ovanpå. Inget rent vitt fält. */:root{--bg:#f8f5f1}body{background:radial-gradient(900px 620px at 92% 2%,rgba(5,147,198,.2),transparent 70%),radial-gradient(820px 640px at -6% 22%,rgba(252,115,77,.16),transparent 70%),radial-gradient(980px 700px at 104% 46%,rgba(31,58,138,.13),transparent 70%),radial-gradient(820px 640px at -4% 70%,rgba(5,147,198,.15),transparent 70%),radial-gradient(900px 620px at 96% 94%,rgba(252,115,77,.15),transparent 70%),var(--bg)}.hdr{background:#f8f5f1db;-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}.rows{background:#ffffffb8;border:1px solid rgba(20,23,31,.06);border-radius:28px;padding:8px 32px;border-top:0}.rows .rad:last-child{border-bottom:0}.foot{background:linear-gradient(180deg,transparent,rgba(31,58,138,.05));border-top-color:#14171f14}@media (max-width:860px){.rows{padding:4px 20px;border-radius:22px;margin-inline:calc(-1 * var(--gut) + 8px)}}/*! Huvudknappen. boardui (MIT): primärknapp med vertikal gradient och ljuskant upptill. affectUI: skimrande laddläge.
   Ljuset följer pekaren, pilen glider fram vid hover, trycket svarar direkt (100 ms), allt under 200 ms. */.btn.dark{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#2e3445,#14171f 62%);box-shadow:inset 0 1px #ffffff29,inset 0 -1px #0006,0 1px 2px #14171f47,0 10px 22px -12px #1f3a8ab3;transition:transform .12s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease-out,filter .18s ease-out}.btn.dark:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .18s ease-out;background:radial-gradient(120px 80px at var(--x,50%) var(--y,0%),rgba(120,170,255,.38),transparent 70%)}.btn.dark:active{transform:scale(.97);filter:brightness(.92);box-shadow:inset 0 1px #ffffff1a,0 1px 1px #14171f4d}.btn.dark:focus-visible{outline:0;box-shadow:inset 0 1px #ffffff29,0 0 0 3px var(--bg),0 0 0 5px var(--sky)}.btn.pil{padding-right:16px}.btn.pil .i{width:16px;height:16px;margin-left:-2px;transition:transform .18s cubic-bezier(.2,.8,.2,1)}@media (hover:hover) and (pointer:fine){.btn.dark:hover{background:linear-gradient(180deg,#353c50,#181c26 62%);transform:translateY(-1px);box-shadow:inset 0 1px #fff3,inset 0 -1px #0006,0 2px 4px #14171f3d,0 16px 28px -14px #1f3a8ad9}.btn.dark:hover:before{opacity:1}.btn.pil:hover .i{transform:translate(3px)}.btn.dark:hover:active{transform:translateY(0) scale(.97)}}.btn.dark[data-laddar]{pointer-events:none;color:transparent}.btn.dark[data-laddar]:after{content:attr(data-laddar);position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:transparent;background:linear-gradient(90deg,#ffffff8c 0,#fff,#ffffff8c 90%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;animation:skimra 1.1s linear infinite}@keyframes skimra{to{background-position:-200% 0}}.field[data-traff]{animation:traff .5s cubic-bezier(.2,.8,.2,1)}@keyframes traff{0%{box-shadow:0 0 #0593c680}to{box-shadow:0 0 0 12px #0593c600}}.field{border-radius:999px}@media (max-width:420px){.field{border-radius:16px}}@media (prefers-reduced-motion:reduce){.btn.dark,.btn.dark:before,.btn.pil .i{transition:none}.btn.dark:hover{transform:none}.btn.dark[data-laddar]:after{animation:none;color:#fff;background:none}.field[data-traff]{animation:none}}/*! Sidfot: Nolma som avsändare, med märket från nolma.se */.foot{padding-block:40px 56px}.foot .wrap{align-items:end}.fot-v{display:grid;gap:16px;max-width:34em}.nolma{display:inline-flex;align-items:center;gap:12px;justify-self:start;text-decoration:none;color:#111110;background:#ffffffbf;border-radius:18px;padding:10px 16px 10px 12px;box-shadow:inset 0 0 0 1px #14171f12,0 8px 20px -14px #14171f66;transition:transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease-out}.nolma svg:first-child{width:30px;height:33px;flex:none}.nolma span{display:grid;line-height:1.15}.nolma small{font-size:var(--t1);color:var(--grey)}.nolma b{font:600 var(--t3)/1.1 var(--sans);letter-spacing:-.01em}.nolma .i{color:var(--grey);transition:transform .15s cubic-bezier(.2,.8,.2,1),color .15s}.nolma:active{transform:scale(.98)}.nolma:focus-visible{outline:2px solid var(--sky);outline-offset:3px}@media (hover:hover) and (pointer:fine){.nolma:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px #14171f17,0 14px 26px -14px #14171f80}.nolma:hover .i{transform:translate(2px,-2px);color:#d9601c}}.fot-v p{font-size:var(--t1);color:var(--grey);line-height:1.6}
