/* Spanlys startsida. Fristående: laddar inga andra stilmallar. */
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-display: swap; font-weight: 400 900; src: url(../fonts/schibsted-grotesk-latin-wght-normal.woff2?v=f5a306f465) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-display: swap; font-weight: 400 900; src: url(../fonts/schibsted-grotesk-latin-ext-wght-normal.woff2?v=3af21f587a) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/ibm-plex-mono-latin-500-normal.woff2?v=425916c873) format('woff2'); }
:root {
--bg: #FBFAF7;
--papper: #F3F1EA;
--vit: #FFFFFF;
--black: #0D1411;
--text: #2B3430;
--dov: #66706B;
--linje: #E5E2D8;
--linje-2: #D6D2C6;
--gron: #1F5A41;
--gron-m: #184A35;
--gron-d: #0F2E21;
--gron-l: #E7F0EA;
--orange: #F57C22;
--sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
--ram: 1200px;
--kant: clamp(20px, 4vw, 40px);
--r: 10px;
--r-kort: 18px;
--r-stor: 28px;
--r-yta: clamp(26px, 3.4vw, 44px);
--ut: cubic-bezier(.2, .7, .2, 1);
--skugga-1: 0 1px 2px rgba(13, 20, 17, .05), 0 4px 12px -4px rgba(13, 20, 17, .08);
--skugga-2: 0 1px 2px rgba(13, 20, 17, .04), 0 12px 28px -12px rgba(13, 20, 17, .16), 0 40px 80px -32px rgba(13, 20, 17, .22);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { color: var(--black); font-weight: 650; text-wrap: balance; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gron); outline-offset: 3px; border-radius: 6px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.dold { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hoppa { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--black); color: #fff; padding: 10px 16px; border-radius: 8px; transition: top .15s; }
.hoppa:focus { top: 12px; }
.ram { width: 100%; max-width: calc(var(--ram) + 2 * var(--kant)); margin-inline: auto; padding-inline: var(--kant); }
.ik { width: 1em; height: 1em; flex: none; }
/* Knappar */
.knapp { display: inline-flex; align-items: center; justify-content: center; gap: .55em; height: 46px; padding: 0 20px; border-radius: var(--r); font: 600 16px/1 var(--sans); letter-spacing: -.005em; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transition: background .2s, border-color .2s, transform .2s var(--ut), box-shadow .2s; }
.knapp .ik { transition: transform .25s var(--ut); }
.knapp:hover .ik { transform: translateX(3px); }
.knapp:active { transform: translateY(1px); }
.knapp-stor { height: 54px; padding: 0 26px; font-size: 17px; border-radius: 12px; }
.knapp-liten { height: 40px; padding: 0 16px; font-size: 15px; }
.knapp-bred { width: 100%; }
.knapp-gron { background: var(--gron); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(15, 46, 33, .3), 0 8px 18px -8px rgba(15, 46, 33, .5); }
.knapp-gron:hover { background: var(--gron-m); }
.knapp-mork { background: var(--black); color: #fff; }
.knapp-mork:hover { background: #1c2622; }
.knapp-ljus { background: var(--vit); color: var(--black); border-color: var(--linje-2); box-shadow: 0 1px 2px rgba(13, 20, 17, .04); }
.knapp-ljus:hover { border-color: #b9b5a8; background: #fdfdfb; }
.knapp-vit { background: #fff; color: var(--gron-d); }
.knapp-vit:hover { background: #f1f6f3; }
.knapp-glas { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .26); }
.knapp-glas:hover { background: rgba(255, 255, 255, .15); }
.knapprad { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.lank { display: inline-flex; align-items: center; gap: .5em; color: var(--gron); font-weight: 600; }
.lank .ik { transition: transform .25s var(--ut); }
.lank:hover .ik { transform: translateX(3px); }
.lank-u { color: var(--gron); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Etiketter */
.etikett { font: 500 12.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gron); margin-bottom: 18px; }
.etikett-ljus { color: #9fd0b6; }
.etikett-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border: 1px solid var(--linje); border-radius: 999px; background: var(--vit); font-size: 14.5px; font-weight: 500; color: var(--text); box-shadow: 0 1px 2px rgba(13, 20, 17, .04); }
.prick { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(245, 124, 34, .16); }
/* Sidhuvud */
.topp { position: sticky; top: 0; z-index: 50; padding-top: 10px; }
.topp-rad { position: relative; display: flex; align-items: center; height: 64px; gap: 28px; width: min(100% - 2 * clamp(10px, 2.4vw, 40px), 1800px); margin-inline: auto; padding: 0 10px 0 clamp(16px, 2vw, 26px);
background: rgba(237, 240, 232, .9); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border: 1px solid rgba(13, 20, 17, .04); border-radius: 18px; transition: box-shadow .25s var(--ut), background-color .25s; }
.topp.rullad .topp-rad { background: rgba(244, 242, 237, .92); box-shadow: 0 1px 2px rgba(13, 20, 17, .05), 0 12px 30px -16px rgba(13, 20, 17, .28); }
.topp-nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.nv { position: relative; }
.nv-knapp, .topp-logga, .topp-prata { display: inline-flex; align-items: center; gap: 5px; padding: 8px 13px; border: 0; border-radius: 10px; background: none; font: 500 15.5px/1.2 var(--sans); color: var(--text); cursor: pointer; transition: background .15s, color .15s; }
.nv-knapp:hover, .topp-logga:hover, .topp-prata:hover, .nv-knapp[aria-expanded="true"] { background: rgba(13, 20, 17, .055); color: var(--black); }
.nv-pil { width: 12px; height: 12px; color: var(--dov); transition: transform .2s var(--ut); }
.nv-knapp[aria-expanded="true"] .nv-pil { transform: rotate(180deg); }
.nv-panel { position: absolute; left: -8px; top: calc(100% + 12px); z-index: 2; display: grid; gap: 2px; width: 340px; padding: 8px; background: #fff; border: 1px solid var(--linje); border-radius: 16px; box-shadow: 0 2px 4px rgba(13, 20, 17, .04), 0 24px 48px -20px rgba(13, 20, 17, .3);
opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s var(--ut), transform .18s var(--ut), visibility 0s .18s; }
.nv-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nv-tva { grid-template-columns: 1fr 1fr; width: 600px; }
.nv-knapp[aria-expanded="true"] + .nv-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) { .nv:hover > .nv-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .nv:hover > .nv-knapp { background: rgba(13, 20, 17, .055); color: var(--black); } .nv:hover .nv-pil { transform: rotate(180deg); } }
.nv-lank { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--text); transition: background .15s; }
.nv-lank:hover, .nv-lank:focus-visible { background: var(--papper); }
.nv-lank b { display: block; font-weight: 600; font-size: 14.5px; color: var(--black); }
.nv-lank small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--dov); }
.nv-ik { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--gron-l); color: var(--gron); }
.nv-ik svg { width: 17px; height: 17px; }
.topp-prata { gap: 9px; }
.topp-prata-ik { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: #fff; box-shadow: 0 0 0 2px rgba(237, 240, 232, .9); }
.topp-prata-ik svg { width: 14px; height: 14px; }
.topp .knapp-liten { border-radius: 11px; }
.topp-knappar { display: flex; align-items: center; gap: 8px; }
.meny { display: none; position: relative; }
.meny summary { list-style: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; cursor: pointer; }
.meny summary::-webkit-details-marker { display: none; }
.meny summary span, .meny summary span::before, .meny summary span::after { display: block; width: 18px; height: 1.5px; background: var(--black); border-radius: 2px; transition: transform .2s var(--ut), opacity .2s; }
.meny summary span { position: relative; }
.meny summary span::before, .meny summary span::after { content: ''; position: absolute; left: 0; }
.meny summary span::before { top: -6px; }
.meny summary span::after { top: 6px; }
.meny[open] summary span { background: transparent; }
.meny[open] summary span::before { transform: translateY(6px) rotate(45deg); }
.meny[open] summary span::after { transform: translateY(-6px) rotate(-45deg); }
.meny-lista { position: absolute; right: 0; top: 50px; width: min(280px, calc(100vw - 40px)); display: grid; padding: 8px; background: var(--vit); border: 1px solid var(--linje); border-radius: 14px; box-shadow: var(--skugga-2); }
.meny-lista a { padding: 12px 14px; border-radius: 8px; font-weight: 500; }
.meny-lista a:hover { background: var(--papper); }
/* 1. Hjälte */
.hjalte { position: relative; padding: 14px 0 0; text-align: center; }
.hj-kort { --land: clamp(250px, 37.5vw, 540px); position: relative; overflow: hidden; width: min(100% - 2 * clamp(10px, 2.4vw, 40px), 1800px); margin-inline: auto; border-radius: var(--r-yta); padding: clamp(22px, 2.6vw, 34px) clamp(16px, 3vw, 40px) clamp(190px, 33vw, 470px); isolation: isolate;
background: radial-gradient(48% 62% at 82% 30%, rgba(31, 90, 65, .10), transparent 72%), radial-gradient(40% 50% at 10% 90%, rgba(245, 124, 34, .07), transparent 70%), linear-gradient(180deg, #F1F3EC 0%, #ECEFE6 100%); }
.hj-kort::after { content: ''; position: absolute; inset: 0; z-index: -1; background: url(/assets/img/korn.png?v=80545a3dd5); opacity: .07; border-radius: inherit; pointer-events: none; }
.hj-moln { position: absolute; top: 0; left: -3%; width: 106%; height: 46%; z-index: -3; animation: hj-moln 70s ease-in-out infinite alternate; }
.hj-land { position: absolute; inset: auto 0 0; width: 100%; height: var(--land); z-index: -3; }
.hj-trad { position: absolute; bottom: clamp(40px, 6vw, 100px); height: clamp(280px, 46vw, 720px); width: auto; z-index: -2; }
.hj-trad-v { left: clamp(-200px, -9vw, -70px); }
.hj-trad-h { right: clamp(-230px, -10vw, -80px); transform: scaleX(-1) scale(1.1); transform-origin: 50% 100%; bottom: clamp(20px, 3vw, 56px); }
.hj-sten { position: absolute; right: 9%; bottom: clamp(54px, 8vw, 130px); width: clamp(90px, 12vw, 190px); height: auto; z-index: -2; }
.hj-inne { display: flex; flex-direction: column; align-items: center; }
.hj-pill { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px; background: #fff; border: 1px solid rgba(15, 46, 33, .08); font: 500 14.5px/1 var(--sans); color: var(--gron-d); box-shadow: 0 1px 2px rgba(15, 46, 33, .12); transition: background .2s; }
.hj-pill:hover { background: #fff; }
.hj-pill b { white-space: nowrap; padding: 6px 10px; border-radius: 999px; background: var(--gron); color: #fff; font-weight: 700; font-size: 13px; }
.hj-pill .ik { width: 13px; height: 13px; opacity: .6; }
.hjalte h1 { margin-top: clamp(26px, 3.4vw, 44px); font-size: clamp(1.9rem, 4.6vw, 3.9rem); line-height: 1.16; letter-spacing: -.04em; font-weight: 760; color: var(--black); text-wrap: balance; }
.hj-streck { position: relative; display: inline-block; }
.hj-streck svg { position: absolute; left: -4%; bottom: -.12em; width: 108%; height: .26em; color: var(--orange); z-index: -1; }
.hj-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin-top: clamp(28px, 3.6vw, 48px); }
.hj-chips li { display: flex; align-items: center; gap: 13px; padding: 7px 26px 7px 7px; border-radius: 999px; background: #fff; border: 1px solid rgba(15, 46, 33, .07); box-shadow: 0 1px 2px rgba(15, 46, 33, .1), 0 10px 24px -14px rgba(15, 46, 33, .35); text-align: left; }
.hj-chips li > span:last-child { display: grid; gap: 4px; font-size: 14.5px; line-height: 1.15; color: #56645d; white-space: nowrap; }
.hj-chips b { font-size: 16.5px; font-weight: 700; color: var(--black); letter-spacing: -.01em; }
.hj-ik { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .7); }
.hj-ik svg { width: 21px; height: 21px; }
.hj-ik-gron { background: var(--gron-l); color: var(--gron); }
.hj-ik-orange { background: #FDE6D2; color: #B4530D; }
.hj-ik-bla { background: var(--gron-l); color: var(--gron); }
.hj-cta { margin-top: clamp(32px, 4.4vw, 60px); }
.hj-knapp { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: min(350px, 78vw); height: 56px; padding: 0 30px; border-radius: 999px; background: linear-gradient(180deg, #2A7453, #1A4E38); color: #fff; font: 700 17px/1 var(--sans); box-shadow: 0 0 0 4px #fff, 0 18px 34px -10px rgba(15, 46, 33, .55), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .2s var(--ut), filter .2s; }
.hj-knapp:hover { transform: translateY(-1px); filter: brightness(1.08); }
.hj-knapp span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.hj-knapp .ik { width: 12px; height: 12px; }
.hj-not { margin-top: 26px; font-size: 14.5px; color: #33505a; }
.hj-not b { color: var(--black); font-weight: 700; }
.hj-not i { font-style: normal; opacity: .6; margin: 0 4px; }
.hj-skarm { position: relative; max-width: calc(1040px + 2 * var(--kant)); margin-top: calc(clamp(190px, 33vw, 470px) * -1 + clamp(30px, 3.6vw, 52px)); }
.skarm { position: relative; }
.skarm picture { display: block; padding: 10px 10px 0; background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .7); border-radius: 22px 22px 0 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 30px 70px -30px rgba(15, 46, 33, .5); max-height: clamp(420px, 44vw, 640px); overflow: hidden; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.skarm img { width: 100%; border-radius: 13px 13px 0 0; }
.skarm figcaption { margin-top: 16px; font: 500 11.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dov); }
/* 2. Siffror */
.siffror { padding: clamp(56px, 7vw, 88px) 0 0; }
.siffer-rad { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--linje); }
.siffer-rad > div { padding: 30px 28px 28px; border-left: 1px solid var(--linje); }
.siffer-rad > div:first-child { border-left: 0; padding-left: 0; }
.siffer-rad dt { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dov); }
.siffer-rad dd { margin-top: 14px; font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1; letter-spacing: -.035em; font-weight: 650; color: var(--black); font-variant-numeric: tabular-nums; }
.siffer-rad > div:last-child dd { color: var(--gron); }
.siffer-rad p { margin-top: 10px; font-size: 15px; color: var(--dov); }
.fotnot { margin-top: 14px; font: 500 11.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dov); }
/* Sektioner */
.del { padding: clamp(80px, 10vw, 136px) 0; }
.del-papper { background: var(--papper); }
.del-huvud { max-width: 46rem; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.del-huvud h2, .fragor h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.04; letter-spacing: -.035em; }
.del-ingress { margin-top: 20px; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.55; color: var(--dov); }
.del-lank { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; align-items: center; font-size: 15.5px; color: var(--dov); }
.bockar { display: grid; gap: 12px; }
.bockar li { display: flex; gap: 12px; align-items: flex-start; }
.bockar .ik { margin-top: .28em; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--gron-l); color: var(--gron); }
/* 3. Prova */
#prova { padding-top: clamp(64px, 8vw, 104px); }
.prova { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(28px, 4vw, 64px); padding: clamp(28px, 4.6vw, 64px); border-radius: var(--r-stor); color: #dcebe3; background:
radial-gradient(70% 90% at 100% 0%, rgba(74, 150, 113, .28), transparent 60%),
linear-gradient(160deg, #174633, var(--gron-d) 70%); box-shadow: var(--skugga-2); }
.prova-v { align-self: center; }
.prova h2 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.06; letter-spacing: -.03em; }
.prova-ingress { margin-top: 16px; color: #b9d3c6; max-width: 30em; }
.prova-form { margin-top: 32px; display: grid; gap: 18px; }
.falt-par { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.falt label, .falt legend { display: block; margin-bottom: 8px; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #9fd0b6; }
.valj { position: relative; }
.valj::after { content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.6px solid #cfe3d8; border-bottom: 1.6px solid #cfe3d8; transform: rotate(45deg); pointer-events: none; }
.valj select { width: 100%; height: 50px; padding: 0 40px 0 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07); color: #fff; font: 500 16px/1 var(--sans); -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color .2s, background .2s; }
.valj select:hover { border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .1); }
.valj select:focus-visible { outline-color: #fff; }
.valj option { color: var(--black); background: #fff; }
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chips label { margin: 0; position: relative; }
.chips input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.chips span { display: grid; place-items: center; height: 48px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07); color: #fff; font: 600 15.5px/1 var(--sans); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; transition: background .2s, color .2s, border-color .2s; }
.chips input:hover + span { border-color: rgba(255, 255, 255, .34); }
.chips input:checked + span { background: #fff; color: var(--gron-d); border-color: #fff; }
.chips input:focus-visible + span { outline: 2px solid #fff; outline-offset: 3px; }
.prova-kort { height: 100%; display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 32px); border-radius: 20px; background: var(--vit); color: var(--text); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .5); }
.prova-antal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.prova-antal b { font-size: clamp(3rem, 6vw, 4.6rem); line-height: .95; letter-spacing: -.045em; font-weight: 680; color: var(--black); font-variant-numeric: tabular-nums; }
.prova-antal span { font-size: 17px; color: var(--dov); }
.prova-lista { margin-top: 22px; border-top: 1px solid var(--linje); flex: 1; }
.prova-lista li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--linje); min-height: 66px; }
.prova-lista i { width: 38px; height: 38px; border-radius: 10px; background: var(--gron-l); color: var(--gron); display: grid; place-items: center; font: 600 13px/1 var(--sans); font-style: normal; }
.prova-lista span { display: grid; min-width: 0; }
.prova-lista b { font-weight: 600; color: var(--black); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prova-lista em { font-style: normal; font-size: 14px; color: var(--dov); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prova-lista u { text-decoration: none; font-size: 14px; color: var(--dov); white-space: nowrap; }
.prova-lista .tom b, .prova-lista .tom em { height: 12px; border-radius: 6px; background: var(--papper); }
.prova-lista .tom b { width: 62%; margin-bottom: 8px; }
.prova-lista .tom em { width: 40%; }
.prova-lista .inget { display: block; padding: 28px 0; color: var(--dov); }
.prova-las { display: flex; gap: 10px; align-items: center; margin: 18px 0; font-size: 14.5px; color: var(--dov); }
.prova-las .ik { width: 18px; height: 18px; color: var(--gron); }
.prova[aria-busy="true"] .prova-antal b { opacity: .45; }
.prova-antal b { transition: opacity .2s; }
/* 4. Så funkar det */
.steg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--linje-2); counter-reset: s; }
.steg li { padding: 30px 36px 8px 0; position: relative; }
.steg li + li { padding-left: 36px; border-left: 1px solid var(--linje); }
.steg li::before { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--gron); box-shadow: 0 0 0 5px var(--bg); }
.steg li + li::before { left: 36px; }
.steg-nr { font: 500 12.5px/1 var(--mono); letter-spacing: .1em; color: var(--gron); }
.steg h3 { margin-top: 16px; font-size: 1.45rem; letter-spacing: -.02em; line-height: 1.15; }
.steg p { margin-top: 10px; color: var(--dov); }
.visa { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; margin-top: clamp(72px, 9vw, 128px); scroll-margin-top: 110px; }
.visa-vand .visa-text { order: 2; }
.visa-text h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.06; letter-spacing: -.03em; }
.visa-text > p:not(.etikett) { margin-top: 18px; font-size: 1.1rem; color: var(--dov); max-width: 30em; }
.visa-text .bockar { margin-top: 26px; }
.visa-bild { padding: clamp(18px, 3vw, 44px); border-radius: var(--r-stor); background: var(--papper); border: 1px solid var(--linje); }
.visa-bild img { width: 100%; border-radius: 14px; border: 1px solid var(--linje); box-shadow: var(--skugga-2); background: #fff; }
.visa-bild-smal { padding-inline: clamp(18px, 4.6vw, 72px); }
.visa-bild-klipp picture { display: block; aspect-ratio: 652 / 258; overflow: hidden; border-radius: 14px; border: 1px solid var(--linje); box-shadow: var(--skugga-2); background: #fff; }
.visa-bild-klipp img { height: 100%; object-fit: cover; object-position: top; border: 0; border-radius: 0; box-shadow: none; }
/* 5. Verktyg */
.verktyg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linje-2); border: 1px solid var(--linje-2); border-radius: var(--r-kort); overflow: hidden; }
.verktyg li { background: var(--bg); padding: 28px 26px 30px; transition: background .2s; scroll-margin-top: 110px; }
.verktyg li:hover { background: var(--vit); }
.verktyg li:target { background: var(--gron-l); }
.v-ik { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--gron-l); color: var(--gron); }
.v-ik svg { width: 20px; height: 20px; }
.verktyg h3 { margin-top: 20px; font-size: 1.08rem; letter-spacing: -.01em; font-weight: 620; }
.verktyg p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--dov); }
/* 6. För vem */
.vem { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.vem picture { display: block; overflow: hidden; border-radius: var(--r-kort); aspect-ratio: 4 / 3; background: var(--papper); }
.vem img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .8s var(--ut); }
.vem article:hover img { transform: scale(1.035); }
.vem h3 { margin-top: 22px; font-size: 1.3rem; letter-spacing: -.02em; }
.vem p { margin-top: 8px; color: var(--dov); }
/* 7. Jämförelse */
.jamfor-ram { background: var(--vit); border: 1px solid var(--linje); border-radius: var(--r-kort); box-shadow: var(--skugga-1); overflow: hidden; }
.jamfor { width: 100%; border-collapse: collapse; text-align: left; font-size: 16px; }
.jamfor th, .jamfor td { padding: 22px 26px; vertical-align: top; border-top: 1px solid var(--linje); }
.jamfor thead th { border-top: 0; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dov); padding-block: 20px; }
.jamfor tbody th { width: 17%; font-weight: 620; color: var(--black); }
.jamfor td { color: var(--dov); width: 26%; }
.jamfor .jamfor-vi { width: 31%; background: var(--gron-l); color: var(--gron-d); font-weight: 550; border-top-color: rgba(31, 90, 65, .14); }
.jamfor thead .jamfor-vi { color: var(--gron); font-weight: 500; }
/* 8. Priser */
.planer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 30px 26px 26px; border-radius: var(--r-kort); background: var(--vit); border: 1px solid var(--linje); box-shadow: var(--skugga-1); transition: transform .3s var(--ut), box-shadow .3s; }
.plan:hover { transform: translateY(-3px); box-shadow: var(--skugga-2); }
.plan h3 { font-size: 1.1rem; font-weight: 620; }
.plan-pris { margin-top: 20px; color: var(--dov); font-size: 15px; }
.plan-pris b { font-size: 2.9rem; line-height: 1; letter-spacing: -.04em; font-weight: 660; color: var(--black); font-variant-numeric: tabular-nums; margin-right: 4px; }
.plan-antal { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--linje); color: var(--text); }
.plan-antal b { color: var(--black); font-weight: 650; font-variant-numeric: tabular-nums; }
.plan-not { margin-top: 4px; font-size: 15px; color: var(--dov); }
.plan-vem { margin: 18px 0 26px; font-size: 15px; color: var(--dov); flex: 1; }
.plan-vald { background: linear-gradient(165deg, #1b513b, var(--gron-d)); border-color: transparent; color: #cfe3d8; box-shadow: var(--skugga-2); }
.plan-vald h3, .plan-vald .plan-pris b, .plan-vald .plan-antal b { color: #fff; }
.plan-vald .plan-pris, .plan-vald .plan-not, .plan-vald .plan-vem { color: #a9c9b9; }
.plan-vald .plan-antal { color: #dcebe3; border-top-color: rgba(255, 255, 255, .16); }
.plan-tagg { position: absolute; top: 26px; right: 22px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
/* 9. Frågor */
.fragor { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.fragor-v { position: sticky; top: 108px; }
.gdpr { margin-top: 36px; padding: 26px; border-radius: var(--r-kort); background: var(--vit); border: 1px solid var(--linje); box-shadow: var(--skugga-1); }
.gdpr h3 { font-size: 1.08rem; font-weight: 620; margin-bottom: 16px; }
.gdpr .bockar { font-size: 15.5px; margin-bottom: 20px; }
.fragor-h { border-top: 1px solid var(--linje-2); }
.fragor-h details { border-bottom: 1px solid var(--linje-2); }
.fragor-h summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; list-style: none; cursor: pointer; font-size: 1.15rem; font-weight: 600; color: var(--black); letter-spacing: -.01em; }
.fragor-h summary::-webkit-details-marker { display: none; }
.fragor-h summary::after { content: ''; flex: none; width: 13px; height: 13px; background: linear-gradient(var(--black), var(--black)) center / 13px 1.6px no-repeat, linear-gradient(var(--black), var(--black)) center / 1.6px 13px no-repeat; transition: transform .25s var(--ut); }
.fragor-h details[open] summary::after { transform: rotate(45deg); }
.fragor-h summary:hover { color: var(--gron); }
.fragor-h details p { padding: 0 48px 26px 0; color: var(--dov); max-width: 38em; }
/* 10. Avslut */
.avslut { padding: clamp(96px, 12vw, 176px) 0 clamp(88px, 11vw, 160px); text-align: center; }
.avslut-inne { display: flex; flex-direction: column; align-items: center; }
.avslut h2 { font-size: clamp(2.6rem, 7.4vw, 6rem); line-height: .98; letter-spacing: -.055em; color: var(--black); text-wrap: balance; }
.avslut-inne > p { max-width: 38rem; margin-top: 28px; color: var(--dov); font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.55; }
.avslut-knapp { margin-top: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 clamp(32px, 3.4vw, 48px); height: clamp(64px, 6vw, 84px); border-radius: 22px; background: var(--black); color: #fff; font: 700 clamp(1.3rem, 2.3vw, 2rem)/1 var(--sans); letter-spacing: -.035em; box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 20px 40px -18px rgba(13, 20, 17, .55); transition: transform .25s var(--ut), background-color .2s; }
.avslut-knapp:hover { transform: translateY(-2px); background: var(--gron-d); }
.avslut-lank { margin-top: 22px; font-size: 15.5px; color: var(--black); }
.avslut-lank:hover { text-decoration: underline; text-underline-offset: 3px; }
.avslut-fakta { margin: clamp(48px, 6vw, 72px) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px clamp(32px, 4vw, 56px); }
.avslut-fakta div { display: flex; align-items: center; gap: 12px; text-align: left; }
.avslut-fakta dt { font: 700 clamp(1.9rem, 2.8vw, 2.4rem)/1 var(--sans); letter-spacing: -.045em; color: var(--black); }
.avslut-fakta dd { margin: 0; max-width: 14rem; font-size: 13.5px; line-height: 1.3; color: var(--dov); }
.av-prickar { display: flex; gap: 4px; margin-bottom: 5px; }
.av-prickar i { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); }
.av-prickar i:nth-child(2) { background: var(--gron); }
.av-prickar i:nth-child(3) { background: var(--gron-l); box-shadow: inset 0 0 0 1px #cfe0d5; }
@keyframes hj-moln { from { transform: translateX(-2%); } to { transform: translateX(2%); } }
@media (prefers-reduced-motion: reduce) { .hj-moln { animation: none !important; } }
/* Popups över skärmbilden i toppen (bara bred skärm) */
.pop { display: none; }
@media (min-width: 1180px) {
.pop { display: block; position: absolute; inset: 0; pointer-events: none; text-align: left; font-size: 13.5px; line-height: 1.35; color: var(--black); }
.pop-kort { position: absolute; background: #fff; border: 1px solid rgba(13, 20, 17, .08); border-radius: 12px; box-shadow: 0 1px 2px rgba(13, 20, 17, .06), 0 24px 48px -20px rgba(13, 20, 17, .38); }
.js .skarm .pop-kort { opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .6s var(--ut), transform .6s var(--ut); }
.js .skarm.inne .pop-kort { opacity: 1; transform: none; }
.js .skarm.inne .pop-filter { transition-delay: .5s; }
.js .skarm.inne .pop-folk { transition-delay: .85s; }
.js .skarm.inne .pop-profil { transition-delay: 1.15s; }
.js .skarm.inne .pop-fraga { transition-delay: 1.45s; }
.pop-rub { display: flex; align-items: center; gap: 10px; padding: 13px 16px; font-weight: 600; font-size: 14px; }
.pop-rub i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--papper); font: 600 11px/1 var(--mono); color: var(--dov); }
.pop dl { margin: 0; }
.pop dl div { padding: 10px 16px; border-top: 1px solid var(--linje); }
.pop dt { color: var(--dov); font-size: 12.5px; }
.pop dd { margin: 2px 0 0; font-weight: 500; }
.pop-filter { left: clamp(-150px, calc((1320px - 100vw) / 2 - 40px), -40px); top: 5%; width: 236px; }
.pop-fraga { left: clamp(-40px, calc((1320px - 100vw) / 2 + 60px), 60px); top: 54%; width: 262px; padding: 14px 16px; background: #FFF6EC; border-color: #F6D9BC; }
.pop-fraga b { font-weight: 600; }
.pop-val { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 12px; color: var(--dov); }
.pop-ja { padding: 6px 11px; border-radius: 7px; background: #fff; color: var(--black); font-weight: 600; box-shadow: 0 1px 2px rgba(13, 20, 17, .14); }
.pop-profil { right: clamp(-170px, calc((1320px - 100vw) / 2 - 60px), -44px); top: -5%; width: 322px; padding: 16px 0 8px; z-index: 2; }
.pop-person { display: flex; align-items: center; gap: 12px; padding: 0 16px 14px; }
.pop-person > span:last-child { display: grid; gap: 3px; min-width: 0; }
.pop-person b { font-size: 15.5px; font-weight: 600; }
.pop-bild { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--gron-l); color: var(--gron); font: 700 15px/1 var(--sans); }
.skarm img.pop-bild { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--gron-l); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--linje); }
.pop-mejl, .pop-folk em { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/1.3 var(--mono); color: var(--dov); white-space: nowrap; }
.pop svg { width: 13px; height: 13px; flex: none; color: #1D7A4E; }
.pop-profil dl div { display: grid; grid-template-columns: 62px 1fr; gap: 8px; padding: 7px 16px; border-top: 0; }
.pop-profil dd { margin: 0; }
.pop-folk { right: clamp(-110px, calc((1320px - 100vw) / 2), 0px); top: 31%; width: 300px; }
.pop-folk ul { display: block; }
.pop-folk li { display: grid; gap: 3px; padding: 11px 16px; border-top: 1px solid var(--linje); }
.pop-folk b { font-weight: 600; }
.pop-folk li span { color: var(--text); }
.pop-folk em { font-style: normal; margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) { .js .skarm .pop-kort { opacity: 1; transform: none; transition: none; } }
/* Kom igång: tre kort, de yttre lutade, på prickig botten */
.lar { position: relative; overflow: hidden; background: linear-gradient(var(--bg), rgba(251, 250, 247, 0) clamp(180px, 22vw, 320px)), linear-gradient(0deg, var(--bg), rgba(251, 250, 247, 0) clamp(160px, 18vw, 280px)), radial-gradient(circle, rgba(15, 46, 33, .11) 1px, transparent 1.2px) 0 0 / 18px 18px, var(--bg); }
.lar .ram { position: relative; }
.lar-linje { position: absolute; color: var(--linje-2); pointer-events: none; }
.lar-linje-v { left: 0; top: 22%; width: min(42vw, 600px); }
.lar-linje-h { right: 0; bottom: 8%; width: min(40vw, 620px); }
.lar-rad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1060px; margin-inline: auto; padding: 14px 0 20px; }
.lar-kort { position: relative; display: flex; flex-direction: column; padding: 26px 26px 24px; background: #fff; border: 1px solid var(--linje); border-radius: var(--r-kort); box-shadow: var(--skugga-1); transition: transform .35s var(--ut), box-shadow .35s; }
.lar-v { transform: rotate(-2.2deg) translate(8px, 22px); }
.lar-m { z-index: 1; }
.lar-h { transform: rotate(1.8deg) translate(-8px, 18px); }
.lar-kort:hover { z-index: 2; transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(13, 20, 17, .35); }
.lar-ik { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--gron-l); color: var(--gron); }
.lar-ik svg { width: 21px; height: 21px; }
.lar-kort h3 { margin-top: 30px; font: 600 1.2rem/1.25 var(--sans); letter-spacing: -.015em; color: var(--black); }
.lar-kort p { margin-top: 8px; color: var(--dov); line-height: 1.5; }
.lar-kort ul { display: grid; gap: 9px; margin: 20px 0 30px; font-size: 15px; color: var(--text); }
.lar-kort li { display: flex; align-items: flex-start; gap: 11px; line-height: 1.4; }
.lar-kort li .ik { width: 16px; height: 16px; margin-top: 2px; color: var(--gron); }
.lar-knapp { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; margin-top: auto; height: 40px; padding: 0 16px; border: 1px solid var(--linje-2); border-radius: var(--r); background: #fff; font: 600 15px/1 var(--sans); color: var(--black); transition: border-color .2s, background .2s; }
.lar-knapp:hover { border-color: var(--black); }
.lar-knapp .ik { transition: transform .2s var(--ut); }
.lar-knapp:hover .ik { transform: translateX(3px); }
/* Priser: planblocket från prissidan (priser.css), med de färger och mått det väntar sig */
.pris { --white: #FFFFFF; --ink: var(--black); --ink-2: var(--text); --graphite: var(--dov); --line: var(--linje); --deep: var(--gron); --ok: #1D7A4E; --ease: cubic-bezier(.2, .7, .2, 1);
--pp-body: var(--papper); --pp-field: #ECE9DF; --pp-field-line: var(--linje-2); --pp-hover: #E6E2D6; --pp-r: var(--r-kort); background: var(--bg); color: var(--ink); }
.pris .pp-card[data-plan="byra"], .pris .pp-col[data-plan="byra"] { --c: var(--gron-d); --tx: var(--gron-d); }
.pris .pp-card[data-plan="gratis"], .pris .pp-col[data-plan="gratis"] { --c: #2B6E51; }
.pris .wrap { width: auto; max-width: none; margin: 0; padding: 0; }
.pris .pp-bar { margin-top: 0; }
.pris .pp-grid { margin-top: 56px; }
.pris .pp-vat { font-size: .9375rem; }
.pris .pp-bill, .pris .pp-incl { line-height: 1.45; }
.pris .pp-cmp-panel table { font-size: .9375rem; }
.pris .pp-cmp-panel th, .pris .pp-cmp-panel td { line-height: 1.5; }
.pris .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pris a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* 11b. Volymkortet under planerna: ett stort kort, tre kolumner, ett reglage som styr mittenkolumnen */
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/instrument-serif-latin-400-normal.woff2?v=c00b720b01) format('woff2'); }
.pris { padding-bottom: clamp(8px, 1.4vw, 20px); }
.pk-del { --pk-serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; --pk-bg: #FDFDFB; --pk-pad: 24px; margin-top: clamp(64px, 8vw, 104px); font-family: var(--sans); }
.pk-huvud { text-align: center; margin-bottom: clamp(24px, 3vw, 36px); }
.pk-huvud h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.15; letter-spacing: -.025em; font-weight: 650; }
.pk-huvud p { margin-top: 8px; font-size: 1rem; color: var(--dov); }
.pk { position: relative; isolation: isolate; overflow: hidden; max-width: 1250px; margin-inline: auto; padding: 60px 36px 44px; background: var(--pk-bg); border: 1px solid var(--linje-2); border-radius: 24px; box-shadow: 0 1px 2px rgba(13, 20, 17, .03), 0 10px 30px -18px rgba(13, 20, 17, .10); color: var(--dov); font-size: 15px; line-height: 1.4; }
.pk-nat { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pk-kol { display: contents; }
.pk-kol > * { padding-inline: var(--pk-pad); min-width: 0; }
.pk-kol:nth-child(1) > * { grid-column: 1; }
.pk-kol:nth-child(2) > * { grid-column: 2; }
.pk-kol:nth-child(3) > * { grid-column: 3; }
.pk-namn { grid-row: 1; margin: 0; display: flex; align-items: center; gap: 10px; min-height: 22px; font-size: 15px; line-height: 1.2; font-weight: 650; letter-spacing: -.005em; color: var(--black); }
.pk-kol:not(.pk-vald) .pk-namn { color: var(--text); }
.pk-tagg { padding: 3px 8px; border-radius: 999px; background: rgba(245, 124, 34, .12); color: #A44E0E; font-size: 11.5px; font-weight: 600; letter-spacing: 0; line-height: 1.2; white-space: nowrap; }
.pk-pris { grid-row: 2; margin-top: 10px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; min-height: 46px; color: var(--dov); font-size: 15px; }
.pk-pris b { font: 400 2.6rem/1.1 var(--pk-serif); letter-spacing: -.01em; color: var(--text); font-variant-numeric: lining-nums; white-space: nowrap; }
.pk-vald .pk-pris b { color: var(--black); }
.pk-om { grid-row: 3; margin-top: 12px; padding-bottom: 20px; min-height: 82px; font-size: 14.5px; }
.pk-vald .pk-om { color: var(--text); }
.pk-fakt { margin-top: 2px; font-size: 13px; color: var(--dov); }
.pk-vol, .pk-rad, .pk-knapprad { border-top: 1px solid var(--linje); }
.pk-vol { grid-row: 4; padding-top: 16px; padding-bottom: 12px; }
.pk-vol b { font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.pk-vald .pk-vol, .pk-vald .pk-rad { color: var(--black); }
.pk-vald .pk-vol b, .pk-vald .pk-rad b { color: var(--black); font-weight: 650; }
.pk-rad { padding-block: 14px; line-height: 21px; }
.pk-r1 { grid-row: 6; } .pk-r2 { grid-row: 7; } .pk-r3 { grid-row: 8; } .pk-r4 { grid-row: 9; }
.pk-knapprad { grid-row: 10; padding-top: 20px; }
.pk-knapp { display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--linje-2); background: var(--vit); color: var(--black); font: 600 15.5px/1 var(--sans); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; transition: background .2s, border-color .2s, transform .15s var(--ut); }
.pk-knapp:hover { border-color: #b9b5a8; background: var(--bg); }
.pk-knapp:active { transform: translateY(1px); }
.pk-knapp-fylld { background: var(--black); border-color: var(--black); color: #fff; }
.pk-knapp-fylld:hover { background: #1c2622; border-color: #1c2622; }
.pk-knapp:focus-visible { outline: 2px solid var(--gron); outline-offset: 3px; border-radius: 999px; }
.pk-fot { position: relative; margin-top: 36px; padding-inline: var(--pk-pad); text-align: center; font-size: 14px; line-height: 1.55; color: var(--dov); }
.pk-fot p { max-width: 62em; margin-inline: auto; text-wrap: balance; }
/* Reglaget: ett riktigt över ett eget spår. --f är 0, .5 eller 1 (priser.js). */
.pk-nat .pk-kol > .pk-reglage { grid-column: 1 / -1; grid-row: 5; --f: .5; --s0: calc((100% + 2 * var(--pk-pad)) / 3); --sl: calc((100% + 2 * var(--pk-pad)) / 3); padding-bottom: 14px; }
.pk-spar { position: relative; height: 24px; border-radius: 999px; background: #ECEAE3; box-shadow: inset 0 0 0 1px rgba(13, 20, 17, .07); }
.pk-fyll { position: absolute; inset: 0 auto 0 0; width: calc(var(--s0) + var(--sl) * var(--f)); min-width: 24px; border-radius: 999px 0 0 999px; background:
radial-gradient(circle at 7% 62%, rgba(255, 255, 255, .95) 0 1px, transparent 1.6px),
radial-gradient(circle at 16% 30%, rgba(255, 255, 255, .8) 0 .8px, transparent 1.4px),
radial-gradient(circle at 29% 55%, rgba(255, 255, 255, .9) 0 1px, transparent 1.6px),
radial-gradient(circle at 41% 72%, rgba(255, 255, 255, .7) 0 .8px, transparent 1.4px),
radial-gradient(circle at 52% 34%, rgba(255, 255, 255, .85) 0 1px, transparent 1.6px),
radial-gradient(circle at 66% 60%, rgba(255, 255, 255, .75) 0 .8px, transparent 1.4px),
radial-gradient(circle at 78% 28%, rgba(255, 255, 255, .9) 0 1px, transparent 1.6px),
radial-gradient(circle at 88% 68%, rgba(255, 255, 255, .7) 0 .8px, transparent 1.4px),
linear-gradient(90deg, #FBD9BC 0%, #F8B27A 55%, #F58A3A 100%); transition: width .28s var(--ut); }
.pk-spar input { position: absolute; top: 50%; left: calc(var(--s0) - 14px); width: calc(var(--sl) + 28px); height: 44px; margin: -22px 0 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: pan-y; }
.pk-spar input:focus { outline: none; }
.pk-spar input::-webkit-slider-runnable-track { height: 28px; background: transparent; border: 0; }
.pk-spar input::-moz-range-track { height: 28px; background: transparent; border: 0; }
.pk-spar input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #F0A66B; background: radial-gradient(circle, var(--orange) 0 3px, #fff 3.6px); box-shadow: 0 1px 2px rgba(13, 20, 17, .12), 0 3px 8px -2px rgba(245, 124, 34, .45); cursor: grab; transition: transform .15s var(--ut), box-shadow .15s; }
.pk-spar input::-moz-range-thumb { box-sizing: border-box; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #F0A66B; background: radial-gradient(circle, var(--orange) 0 3px, #fff 3.6px); box-shadow: 0 1px 2px rgba(13, 20, 17, .12), 0 3px 8px -2px rgba(245, 124, 34, .45); cursor: grab; }
.pk-spar input:hover::-webkit-slider-thumb { transform: scale(1.06); }
.pk-spar input:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.1); }
.pk-spar input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--gron); outline-offset: 3px; }
.pk-spar input:focus-visible::-moz-range-thumb { outline: 2px solid var(--gron); outline-offset: 3px; }
.pk-skala { position: relative; height: 38px; margin-top: 7px; font-size: 12.5px; line-height: 1; }
.pk-streck { position: absolute; top: 0; height: 6px; background-repeat: repeat-x; }
.pk-streck-v { left: 12px; width: calc(var(--s0) - 12px); background-image: linear-gradient(90deg, rgba(13, 20, 17, .5) 1px, transparent 1px); background-size: calc((100% - 1px) / 9) 100%; }
.pk-streck-m { left: var(--s0); width: var(--sl); background-image: linear-gradient(90deg, rgba(13, 20, 17, .26) 1px, transparent 1px); background-size: calc((100% - 1px) / 12) 100%; }
.pk-streck-h { left: calc(var(--s0) + var(--sl)); right: 12px; background-image: linear-gradient(90deg, rgba(13, 20, 17, .14) 1px, transparent 1px); background-size: calc((100% - 1px) / 7) 100%; }
.pk-stopp { position: absolute; top: 0; left: calc(var(--s0) + var(--sl) * var(--i)); transform: translateX(-50%); padding: 17px 8px 4px; color: var(--dov); font-weight: 500; cursor: pointer; white-space: nowrap; transition: color .2s; }
.pk-stopp::before { content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 11px; background: rgba(13, 20, 17, .55); }
.pk-stopp[data-v="1"] { --i: 0; } .pk-stopp[data-v="2"] { --i: .5; } .pk-stopp[data-v="3"] { --i: 1; }
.pk-stopp:hover { color: var(--black); }
.pk-stopp.aktiv { color: var(--black); font-weight: 650; }
/* Rastermotiv bakom mittenkolumnen: ekoringar i prickar */
.pk-motiv { position: absolute; z-index: -1; left: 30%; width: 40%; top: 9%; height: 70%; pointer-events: none; background: radial-gradient(circle, rgba(13, 20, 17, .14) 1.05px, transparent 1.5px) 0 0 / 6px 6px;
-webkit-mask-image: repeating-radial-gradient(circle at 50% 56%, #000 0 20px, transparent 21px 47px, #000 48px); mask-image: repeating-radial-gradient(circle at 50% 56%, #000 0 20px, transparent 21px 47px, #000 48px); }
.pk-motiv::after { content: ''; position: absolute; inset: 0; background: radial-gradient(closest-side at 50% 56%, rgba(253, 253, 251, 0) 18%, var(--pk-bg) 96%); }
@media (max-width: 1080px) {
.pk { padding-inline: 20px; }
.pk-del { --pk-pad: 16px; }
.pk-pris b { font-size: 2.3rem; }
}
@media (max-width: 899px) {
.pk { padding: 8px 20px 28px; }
.pk-del { --pk-pad: 4px; }
.pk-motiv { display: none; }
.pk-nat { display: block; }
.pk-kol { display: block; padding: 32px 0 30px; }
.pk-om { min-height: 0; }
.pk-kol + .pk-kol { border-top: 1px solid var(--linje-2); }
.pk-pris b { font-size: 2.6rem; }
.pk-nat .pk-kol > .pk-reglage { --s0: 14px; --sl: calc(100% - 28px); padding-bottom: 8px; }
.pk-streck-v, .pk-streck-h { display: none; }
.pk-stopp[data-v="1"] { transform: translateX(-14px); padding-left: 0; }
.pk-stopp[data-v="1"]::before { left: 14px; }
.pk-stopp[data-v="3"] { transform: translateX(calc(-100% + 14px)); padding-right: 0; }
.pk-stopp[data-v="3"]::before { left: auto; right: 14px; }
.pk-fot { margin-top: 0; padding-top: 24px; border-top: 1px solid var(--linje-2); font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
.lar-kort, .lar-knapp .ik { transition: none; }
.pk-fyll, .pk-knapp, .pk-stopp, .pk-spar input::-webkit-slider-thumb { transition: none; }
}
/* Loggrad under priserna: verktygens namn i egen typografi, två rader som en logovägg */
.loggor { margin-top: clamp(64px, 8vw, 112px); text-align: center; }
.loggor-rubrik { font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dov); }
.loggor-rad { list-style: none; margin: 28px auto 0; padding: 0; max-width: 1000px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 26px clamp(32px, 4.6vw, 64px); color: var(--black); }
.loggor-rad li { opacity: .82; transition: opacity .25s var(--ut); white-space: nowrap; }
.loggor-rad li:hover { opacity: 1; }
.lg-s7 { font: 800 clamp(1.25rem, 1.9vw, 1.6rem)/1 var(--sans); letter-spacing: -.045em; }
.lg-s5 { font: 500 clamp(1.2rem, 1.8vw, 1.5rem)/1 var(--sans); letter-spacing: -.02em; }
.lg-m { font: 600 clamp(.95rem, 1.35vw, 1.12rem)/1 var(--mono); letter-spacing: .08em; }
@media (max-width: 640px) { .loggor-rad { gap: 18px 26px; } }
/* Fungerar med: rutnät med tunna linjer (Dub-stil), små celler med verktyg och stora med beskrivning */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vg { border-top: 1px solid var(--linje); margin-block: clamp(48px, 6vw, 96px) clamp(24px, 3vw, 48px); }
.vg-ram { width: min(100% - 2 * clamp(16px, 4vw, 40px), 1100px); margin-inline: auto; border-inline: 1px solid var(--linje);
-webkit-mask-image: linear-gradient(#000 calc(100% - clamp(160px, 16vw, 240px)), transparent); mask-image: linear-gradient(#000 calc(100% - clamp(160px, 16vw, 240px)), transparent); }
.vg-huvud { text-align: center; padding: clamp(56px, 7vw, 96px) 24px clamp(44px, 5vw, 64px); border-bottom: 1px solid var(--linje); }
.vg-huvud h2 { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.04; letter-spacing: -.035em; }
.vg-huvud p { max-width: 34rem; margin: 16px auto 0; color: var(--dov); font-size: 1.08rem; line-height: 1.55; }
.vg-huvud .knapp { margin-top: 28px; }
.vg-nat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vg-cell { position: relative; border-right: 1px solid var(--linje); border-bottom: 1px solid var(--linje); transition: background-color .25s var(--ut); }
.vg-cell:hover { background: #fff; }
.vg-liten { display: grid; place-items: center; min-height: clamp(180px, 20vw, 280px); }
.vg-mark { display: inline-flex; align-items: center; gap: 12px; font: 700 clamp(1.15rem, 1.7vw, 1.45rem)/1 var(--sans); letter-spacing: -.03em; color: var(--black); transition: transform .3s var(--ut); }
.vg-liten:hover .vg-mark { transform: scale(1.04); }
.vg-mark .hb-ik { width: 38px; height: 38px; border-radius: 10px; }
.vg-mark .hb-ik b { font-size: 19px; }
.vg-mark .hb-ik svg { width: 20px; height: 20px; }
.vg-mark .kb-csv b { font-size: 11px; }
.vg-stor { grid-column: span 2; display: flex; flex-direction: column; padding: clamp(28px, 3.4vw, 40px); }
.vg-rubrik { display: flex; align-items: center; gap: 10px; font: 700 1.3rem/1 var(--sans); letter-spacing: -.03em; color: var(--black); }
.vg-rubrik-ik { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--gron-d); color: #fff; }
.vg-rubrik-ik svg { width: 18px; height: 18px; }
.vg-text { margin-top: 26px; max-width: 30rem; color: var(--dov); font-size: 1.05rem; line-height: 1.6; }
.vg-text b { color: var(--black); font-weight: 600; }
.vg-fot { margin-top: auto; padding-top: 30px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.vg-taggar { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.vg-taggar li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text); }
.vg-tagg-ik { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: #fff; }
.vg-tagg-ik svg { width: 12px; height: 12px; }
.t-gron { background: var(--gron); } .t-orange { background: var(--orange); } .t-mork { background: var(--black); } .t-ljus { background: var(--gron-l); color: var(--gron); }
.vg-sida { display: flex; align-items: center; gap: 12px; text-align: right; font-size: 13px; line-height: 1.35; color: var(--dov); }
.vg-sida b { display: block; color: var(--black); font-weight: 600; font-size: 13.5px; }
.vg-sida-ik { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 12px; background: #fff; border: 1px solid var(--linje); box-shadow: var(--skugga-1); color: var(--orange); }
.vg-sida-ik svg { width: 22px; height: 22px; }
.hb-ik { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--bg); border: 1px solid var(--linje); color: var(--gron); }
.hb-ik b { font: 800 16px/1 var(--sans); letter-spacing: -.04em; }
.kb-csv b { font: 600 10.5px/1 var(--mono); letter-spacing: 0; }
.kb-excel { background: var(--gron); border-color: var(--gron); color: #fff; }
.kb-hubspot { background: var(--orange); border-color: var(--orange); color: #fff; }
.kb-instantly { background: var(--black); border-color: var(--black); color: #fff; }
.kb-pipedrive { background: var(--gron-l); border-color: #cfe0d5; color: var(--gron); }
.kb-lemlist { background: #FDE6D2; border-color: #f6d3b6; color: #B4530D; }
.kb-sf { background: #E4EEF6; border-color: #cddfee; color: #1F4E79; }
.kb-lime { background: var(--gron-d); border-color: var(--gron-d); color: #fff; }
/* sista cellen i varje rad utan högerlinje (ramen har redan en) */
.vg-nat > .vg-cell:nth-child(3), .vg-nat > .vg-cell:nth-child(6), .vg-nat > .vg-cell:nth-child(9), .vg-nat > .vg-cell:nth-child(12) { border-right: 0; }
.vg-nat > .vg-cell:nth-last-child(-n + 3) { border-bottom: 0; }
@media (max-width: 860px) {
.vg-nat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vg-nat > .vg-cell { border-right: 1px solid var(--linje); border-bottom: 1px solid var(--linje); }
.vg-nat > .vg-cell:nth-child(2), .vg-nat > .vg-cell:nth-child(6), .vg-nat > .vg-cell:nth-child(8), .vg-nat > .vg-cell:nth-child(12) { border-right: 0; }
.vg-stor { grid-column: span 2; border-right: 0 !important; }
.vg-nat > .vg-cell:nth-last-child(-n + 2) { border-bottom: 0; }
.vg-liten { min-height: 140px; }
}
@media (max-width: 480px) {
.vg-fot { flex-direction: column; align-items: flex-start; }
.vg-sida { flex-direction: row-reverse; text-align: left; }
.vg-mark { font-size: 1rem; gap: 9px; }
.vg-mark .hb-ik { width: 32px; height: 32px; }
}
/* Sidfot: mörkt kort med rundade hörn, fem kolumner, stor ordbild */
.fot { width: min(100% - 2 * clamp(12px, 7vw, 120px), 1480px); margin: 0 auto; background: var(--gron-d); color: #fff; border-radius: var(--r-yta) var(--r-yta) 0 0; padding: clamp(48px, 6vw, 80px) 0 clamp(36px, 4vw, 56px); }
.fot-inne { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: clamp(24px, 4.6vw, 64px); }
.fot a { color: #fff; }
.fot-kolumner { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px 28px; }
.fot-kol h2 { font: 700 1.4rem/1.2 var(--sans); letter-spacing: -.025em; color: #fff; margin-bottom: 14px; text-wrap: balance; }
.fot-kol ul { display: grid; gap: 2px; }
.fot-kol a { display: inline-block; padding: 9px 0; font: 600 15.5px/1.35 var(--sans); }
.fot-kol a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.fot-land { display: flex; justify-content: center; margin-top: clamp(48px, 6vw, 84px); }
.fot-land span { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); font: 700 15px/1 var(--sans); }
.fot-land svg { border-radius: 2px; }
.ordbild, .fot-ord { fill: var(--orange); shape-rendering: geometricPrecision; }
.fot-ord { display: block; width: 100%; height: auto; margin-top: clamp(28px, 4vw, 56px); }
.fot-juridik { margin-top: clamp(20px, 3vw, 40px); font-size: 13px; line-height: 1.75; color: #dfeae4; max-width: none; }
.fot-kontakt { display: grid; grid-template-columns: 1fr 1.5fr; gap: 32px clamp(32px, 6vw, 96px); margin-top: clamp(36px, 5vw, 64px); padding-top: clamp(36px, 5vw, 64px); border-top: 1px solid rgba(255, 255, 255, .16); }
.fot-kontakt h2 { font: 700 clamp(1.8rem, 3vw, 2.5rem)/1.05 var(--sans); letter-spacing: -.035em; color: #fff; }
.fot-kontakt-text p { margin-top: 16px; color: #dfeae4; max-width: 24em; }
.fot-mejl { display: inline-flex; align-items: center; gap: 10px; font: 600 16px/1 var(--sans); color: #fff; }
.fot-mejl:hover, .fot-form-not a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fot-form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.fot-valfritt { font-weight: 400; opacity: .6; }
.fot-falt-bred { grid-column: 1 / -1; }
.fot-falt label { display: block; font: 600 14px/1 var(--sans); margin-bottom: 8px; }
.fot-falt input, .fot-falt textarea { display: block; width: 100%; padding: 13px 14px; border: 1px solid rgba(255, 255, 255, .32); border-radius: 10px; background: rgba(255, 255, 255, .07); color: #fff; font: 400 16px/1.45 var(--sans); transition: border-color .2s, background .2s; }
.fot-falt textarea { resize: vertical; min-height: 120px; }
.fot-falt input:hover, .fot-falt textarea:hover { border-color: rgba(255, 255, 255, .55); }
.fot-falt input:focus-visible, .fot-falt textarea:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-color: #fff; background: rgba(255, 255, 255, .1); }
.fot-falla { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fot-form-fot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.fot-skicka { height: 50px; padding: 0 24px; border: 0; border-radius: 10px; background: var(--orange); color: #1a0d02; font: 700 16px/1 var(--sans); cursor: pointer; transition: background .2s, transform .2s; }
.fot-skicka:hover { background: #ff9340; }
.fot-skicka:active { transform: translateY(1px); }
.fot-skicka:disabled { opacity: .6; cursor: progress; }
.fot-form-not { font-size: 13px; color: #c9dbd1; flex: 1 1 220px; }
.fot-form-not a { text-decoration: underline; text-underline-offset: 3px; }
.fot-status { font: 600 15px/1.5 var(--sans); min-height: 1.5em; }
.fot-status.fel { color: #ffb4a3; }
.fot-status.klar { color: #a9e6c4; }
/* Inpassning vid skroll (bara när skriptet körs) */
.js [data-in] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ut), transform .7s var(--ut); transition-delay: var(--d, 0s); }
.js [data-in].inne { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.js [data-in] { opacity: 1; transform: none; transition: none; }
*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}
/* Mellanbredd */
@media (max-width: 1080px) {
.fot-kolumner { grid-template-columns: repeat(3, 1fr); }
.verktyg { grid-template-columns: repeat(3, 1fr); }
.planer { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.lar-rad { grid-template-columns: 1fr; gap: 14px; max-width: 520px; padding: 0; }
.lar-v, .lar-h { transform: none; }
.lar-linje { display: none; }
.fot-kontakt { grid-template-columns: 1fr; }
.topp-nav, .topp-prata { display: none; }
.meny { display: block; }
.topp-rad { justify-content: space-between; gap: 12px; }
.prova { grid-template-columns: 1fr; }
.visa, .fragor { grid-template-columns: 1fr; }
.visa-vand .visa-text { order: 0; }
.fragor-v { position: static; }
.steg { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--linje-2); }
.steg li, .steg li + li { padding: 0 0 34px 28px; border-left: 0; }
.steg li::before, .steg li + li::before { top: 2px; left: -5px; }
.steg li:last-child { padding-bottom: 0; }
.vem { grid-template-columns: 1fr; gap: 40px; max-width: 520px; margin-inline: auto; }
.siffer-rad { grid-template-columns: 1fr 1fr; }
.siffer-rad > div { padding: 24px 20px; }
.siffer-rad > div:nth-child(odd) { border-left: 0; padding-left: 0; }
.siffer-rad > div:nth-child(n+3) { border-top: 1px solid var(--linje); }
.siffer-rad dd { font-size: clamp(1.5rem, 6.4vw, 2.4rem); white-space: nowrap; }
.jamfor-ram { background: none; border: 0; box-shadow: none; overflow: visible; }
.jamfor thead { display: none; }
.jamfor, .jamfor tbody, .jamfor tr, .jamfor th, .jamfor td { display: block; width: auto !important; }
.jamfor tr { margin-bottom: 14px; background: var(--vit); border: 1px solid var(--linje); border-radius: 16px; overflow: hidden; }
.jamfor th, .jamfor td { padding: 14px 18px; }
.jamfor tbody th { border-top: 0; font-size: 1.05rem; }
.jamfor td::before { display: block; margin-bottom: 4px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dov); }
.jamfor td:nth-of-type(1)::before { content: 'För hand'; }
.jamfor td:nth-of-type(2)::before { content: 'Globala verktyg'; }
.jamfor td:nth-of-type(3)::before { content: 'Spanly'; color: var(--gron); }
}
@media (max-width: 640px) {
.hj-trad, .hj-sten { display: none; }
.hj-kort { --land: 196px; }
.fot-kolumner { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
.fot-kol h2 { font-size: 1.2rem; }
.fot-form { grid-template-columns: 1fr; }
.fot-skicka { width: 100%; }
body { font-size: 16.5px; }
.topp-logga { display: none; }
.topp-rad { height: 58px; }
.hjalte h1 { letter-spacing: -.035em; }
.hj-chips { flex-direction: column; align-items: stretch; width: min(100%, 300px); }
.hj-pill span { white-space: normal; text-align: left; line-height: 1.25; }
.hj-not i { display: none; }
.hj-not { display: grid; gap: 4px; }
.knapprad { flex-direction: column; align-self: stretch; }
.hjalte .knapprad .knapp { width: 100%; }
.avslut-inne > p br { display: none; }
.avslut-fakta { flex-direction: column; align-items: center; }
.skarm picture { padding: 4px; border-radius: 18px; max-width: 340px; margin-inline: auto; }
.skarm img { border-radius: 14px; }
.verktyg { grid-template-columns: 1fr 1fr; }
.verktyg li { padding: 22px 18px 24px; }
.planer { grid-template-columns: 1fr; }
.plan-vald { order: -1; }
.falt-par { grid-template-columns: 1fr; }
.prova { margin-inline: calc(var(--kant) * -.4); border-radius: 22px; }
.fragor-h summary { font-size: 1.06rem; padding: 20px 0; }
.fragor-h details p { padding-right: 0; }
}
@media (max-width: 380px) {
.verktyg { grid-template-columns: 1fr; }
}
/* Hjälte: prickkarta över Norden, bolag som tänds */
.hj-karta { position: absolute; z-index: -2; top: -1%; right: max(0px, calc(50% - 720px)); height: 94%; width: auto; pointer-events: none;
-webkit-mask-image: linear-gradient(100deg, transparent 6%, #000 42%); mask-image: linear-gradient(100deg, transparent 6%, #000 42%); }
.hj-karta image { opacity: .42; }
.ljus-prick { fill: var(--orange); opacity: 0; transform-box: fill-box; transform-origin: center; animation: ljus 14s var(--d) ease-in-out infinite; }
.ljus-ring { fill: none; stroke: var(--orange); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ljus-ring 14s var(--d) ease-out infinite; }
@keyframes ljus { 0%, 100% { opacity: 0; transform: scale(.6); } 3% { opacity: 1; transform: scale(1.15); } 6%, 16% { opacity: .95; transform: scale(1); } 22% { opacity: 0; transform: scale(.8); } }
@keyframes ljus-ring { 0%, 2% { opacity: 0; transform: scale(1); } 4% { opacity: .7; } 14%, 100% { opacity: 0; transform: scale(4.2); } }
@media (prefers-reduced-motion: reduce) { .ljus-prick, .ljus-ring { animation: none; } .ljus:nth-child(3n) .ljus-prick { opacity: .9; } }
@media (max-width: 640px) { .hj-karta { right: -30%; top: 2%; height: 80%; } .hj-karta image { opacity: .18; } }
/* Större ordbild i sidhuvudet */
.topp .ordbild { width: 114px; height: 35px; display: block; }
@media (max-width: 640px) { .topp .ordbild { width: 100px; height: 31px; } }
/* 5. Verktygen i Plain-stil: flöde med flikar */
.sv { position: relative; padding: clamp(88px, 11vw, 150px) 0 clamp(150px, 15vw, 210px); }
.sv::after, .sk-slut { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: clamp(70px, 8vw, 120px); background: repeating-linear-gradient(180deg, #B9B5AA 0 3px, transparent 3px 6px); }
.sv-huvud { max-width: 40rem; margin: 0 auto clamp(36px, 4.4vw, 56px); text-align: center; }
.sv-huvud h2 { font-size: clamp(2.4rem, 5vw, 3.9rem); line-height: 1; letter-spacing: -.045em; }
.sv-huvud p { margin-top: 18px; font-size: clamp(1.08rem, 1.45vw, 1.3rem); line-height: 1.45; color: var(--text); }
.sv-demo { max-width: 820px; margin-inline: auto; }
.sv-yta { position: relative; height: clamp(400px, 38vw, 470px); padding: 0 clamp(16px, 5vw, 72px) 32px; border-radius: 16px; background: #F3F1EA; border: 1px solid #ECE9E0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px); mask-image: linear-gradient(180deg, transparent 0, #000 90px); }
.sv-flode { list-style: none; margin: 0; padding: 0; height: 100%; display: none; flex-direction: column; justify-content: flex-end; gap: 14px; }
.sv-flode.aktiv { display: flex; }
.sv-msg { display: flex; gap: 12px; align-items: flex-start; width: min(100%, 440px); padding: 16px 20px 17px; border-radius: 10px; }
.sv-du { background: var(--vit); box-shadow: 0 1px 2px rgba(13, 20, 17, .05), 0 0 0 1px rgba(13, 20, 17, .03); }
.sv-sp { align-self: flex-end; background: #EAE6DB; }
.sv-msg > div { min-width: 0; }
.sv-msg p { font-size: 15px; line-height: 1.45; color: var(--black); }
.sv-rad { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.sv-rad b { font-weight: 650; }
.sv-tag { padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, .7); font: 500 11px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--dov); }
.sv-rad time { font-size: 12.5px; color: var(--dov); }
.sv-av > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; font: 700 11.5px/1 var(--sans); letter-spacing: .02em; }
.sv-av-s { background: var(--gron); color: #fff; }
.sv-av-s svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sv-av-du { background: var(--black); color: #fff; border-radius: 50% !important; }
.sv-av-p { background: #F7D9C2; color: #8A3E0B; border-radius: 50% !important; }
.sv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sv-chips span { padding: 4px 10px; border-radius: 999px; background: var(--vit); border: 1px solid var(--linje); font-size: 12.5px !important; font-weight: 500; }
.sv-flikar { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 30px; border-bottom: 1px solid var(--linje); }
.sv-flik { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 8px 14px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; font: 600 clamp(14.5px, 1.3vw, 17px)/1 var(--sans); color: var(--black); cursor: pointer; transition: color .2s, border-color .2s; }
.sv-flik svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sv-flik:hover { color: var(--gron); }
.sv-flik[aria-selected="true"] { color: #2E8A5C; border-bottom-color: #3FA36F; }
.sv-flik:focus-visible { outline: 2px solid var(--gron); outline-offset: -2px; border-radius: 6px; }
.sv-text { max-width: 36rem; margin: 26px auto 0; text-align: center; }
.sv-text p { font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.6; color: var(--text); }
.sv-knapp { display: inline-block; margin-top: 20px; padding: 10px 16px; border: 1px solid var(--gron); border-radius: 999px; font: 500 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gron); transition: background-color .2s, color .2s; }
.sv-knapp:hover { background: var(--gron); color: #fff; }
.sv-not { margin-top: 22px; text-align: center; font-size: 12.5px; color: var(--dov); }
@keyframes sv-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.js .sv-demo .sv-msg { opacity: 0; }
.js .sv-demo.inne .sv-flode.aktiv .sv-msg { animation: sv-in .55s var(--ut) calc(var(--i) * .35s + .15s) both; }
@media (prefers-reduced-motion: reduce) { .js .sv-demo .sv-msg { opacity: 1; animation: none !important; } }
/* Mörkgrön del: alla funktioner i grupper */
.sk { position: relative; background: #10261B; color: #E9EFEA; padding: clamp(170px, 17vw, 230px) 0 clamp(170px, 17vw, 230px); }
.sk::before, .med-linje::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: clamp(70px, 8vw, 120px); background: #4FB585; }
.sk-slut { background: repeating-linear-gradient(180deg, rgba(233, 239, 234, .35) 0 3px, transparent 3px 6px); }
.med-linje { position: relative; }
.sk-nat { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.sk-v { position: sticky; top: 120px; }
.sk-v h2 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); line-height: 1.04; letter-spacing: -.045em; color: #fff; }
.sk-v h2 em { font-style: normal; color: #6FD19C; }
.sk-v p { margin-top: 22px; max-width: 30rem; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.45; color: #E9EFEA; }
.sk-lank { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-weight: 600; color: #6FD19C; }
.sk-lank:hover { text-decoration: underline; text-underline-offset: 4px; }
.sk-lank .ik { width: 16px; height: 16px; }
.sk-grupp + .sk-grupp { margin-top: clamp(56px, 6vw, 84px); }
.sk-etikett { margin-bottom: clamp(28px, 3.4vw, 44px); font: 500 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.sk-grupp ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 3.6vw, 48px) clamp(24px, 3vw, 40px); }
.sk-grupp h3 { font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; color: #fff; }
.sk-grupp li p { margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: rgba(233, 239, 234, .62); }
.sk-grupp li { scroll-margin-top: 110px; }
@media (max-width: 860px) {
.sk-nat { grid-template-columns: 1fr; }
.sk-v { position: static; }
.sv-flikar { display: flex; overflow-x: auto; scrollbar-width: none; }
.sv-flik { flex: 1 0 auto; padding-inline: 14px; }
.sv-msg { padding: 13px 14px; }
.sv-msg p { font-size: 14px; }
}
@media (max-width: 520px) { .sk-grupp ul { grid-template-columns: 1fr; gap: 26px; } .sv-flikar { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; } .sv-flik { padding-block: 12px; } }
/* Tätare övergång mellan "För vem" och volymreglaget */
#for-vem { padding-bottom: clamp(32px, 4vw, 56px); }
.pris-volym { padding-top: clamp(32px, 4vw, 56px); }
.pris-volym .pk-del { margin-top: 0; }
/* Kontaktformuläret: fel vid fältet och tack-rutan som ersätter formuläret (som på brakk.se) */
.fot-falt [aria-invalid="true"] { border-color: #F5A06A; background: rgba(245, 124, 34, .1); }
.fot-status a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.fot-tack { display: grid; gap: 8px; align-content: center; min-height: 220px; padding: clamp(24px, 3vw, 36px); border: 1px solid rgba(255, 255, 255, .22); border-radius: 16px; background: rgba(255, 255, 255, .06); color: #fff; font-size: 16px; line-height: 1.5; outline: none; animation: sv-in .5s var(--ut) both; }
.fot-tack b { font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -.02em; }
.fot-tack span { color: rgba(255, 255, 255, .75); }
/* 9. Vanliga frågor (Relume-stil) */
.fq { padding: clamp(80px, 10vw, 136px) 0; background: var(--papper); }
.fq-huvud { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px 40px; margin-bottom: clamp(32px, 4vw, 48px); }
.fq-huvud h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1; letter-spacing: -.045em; font-weight: 600; }
.fq-huvud p { font-size: 1.06rem; color: var(--text); padding-bottom: 6px; }
.fq-lank { color: var(--black); text-decoration: underline dotted var(--orange) 2px; text-underline-offset: 5px; transition: color .2s; }
.fq-lank:hover { color: var(--orange); }
.fq-nat { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.fq-kol { display: grid; gap: 12px; }
.fq-rad { border: 1px solid var(--linje); border-radius: 12px; background: rgba(255, 255, 255, .5); transition: background-color .2s, border-color .2s, box-shadow .2s; }
.fq-rad:hover { background: rgba(255, 255, 255, .85); border-color: var(--linje-2); }
.fq-rad[open] { background: var(--vit); border-color: var(--linje-2); box-shadow: 0 1px 2px rgba(13, 20, 17, .04), 0 8px 24px -16px rgba(13, 20, 17, .18); }
.fq-rad summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; min-height: 50px; list-style: none; cursor: pointer; font-size: 16.5px; font-weight: 500; line-height: 1.35; color: var(--black); letter-spacing: -.01em; }
.fq-rad summary::-webkit-details-marker { display: none; }
.fq-rad summary:focus-visible { outline: 2px solid var(--gron); outline-offset: 2px; border-radius: 12px; }
.fq-pil { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ut); }
.fq-rad[open] .fq-pil { transform: rotate(180deg); }
.fq-svar { padding: 0 22px 18px 46px; }
.fq-svar p { color: var(--dov); font-size: 15.5px; line-height: 1.6; max-width: 40em; }
.fq-svar a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
@keyframes fq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fq-rad[open] .fq-svar { animation: fq-in .3s var(--ut); }
.fq-mer { margin-top: 28px; text-align: center; }
.fq-visa { padding: 9px 14px; border: 1px solid var(--linje-2); border-radius: 8px; background: var(--vit); font: 500 14.5px/1 var(--sans); color: var(--black); cursor: pointer; box-shadow: 0 1px 2px rgba(13, 20, 17, .05); transition: border-color .2s, transform .2s var(--ut); }
.fq-visa:hover { border-color: var(--black); transform: translateY(-1px); }
.fq-nat.ihop { max-height: 520px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 200px), transparent); mask-image: linear-gradient(#000 calc(100% - 200px), transparent); }
@media (max-width: 860px) {
.fq-nat { grid-template-columns: 1fr; }
.fq-huvud { align-items: flex-start; flex-direction: column; }
.fq-rad summary { font-size: 15.5px; }
.fq-svar { padding-left: 18px; }
}
/* Vanliga frågor på vit bakgrund */
.fq { background: var(--bg); }
.fq-rad { background: var(--vit); }
.fq-rad:hover { background: #FAFAF9; }
/* Meddelanderutan växer med texten i stället för att få en egen rullning (som på brakk.se) */
.fot-falt textarea { field-sizing: content; min-height: calc(4lh + 26px); resize: none; overflow: hidden; }
/* ---------- Undersidor /funktioner/ ---------- */
.fs-topp { padding-top: 14px; }
.fs-kort { width: min(100% - 2 * clamp(10px, 2.4vw, 40px), 1800px); margin-inline: auto; border-radius: var(--r-yta); padding: clamp(44px, 6vw, 96px) max(clamp(20px, 4vw, 64px), calc((100% - 1240px) / 2)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center;
background: radial-gradient(48% 62% at 82% 30%, rgba(31, 90, 65, .10), transparent 72%), radial-gradient(40% 50% at 10% 90%, rgba(245, 124, 34, .07), transparent 70%), linear-gradient(180deg, #F1F3EC 0%, #ECEFE6 100%); }
.fs-sti { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 8px; border-radius: 999px; background: var(--vit); border: 1px solid var(--linje); font-size: 14px; font-weight: 500; color: var(--text); box-shadow: 0 1px 2px rgba(13, 20, 17, .04); }
.fs-sti a { padding-left: 6px; color: var(--dov); }
.fs-sti a:hover { color: var(--black); }
.fs-sti > span[aria-hidden] { color: var(--linje-2); }
.fs-sti-ik { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--gron); color: #fff !important; }
.fs-sti-ik svg, .fs-ik svg, .fs-rel-ik svg, .fs-faktakort-ik svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fs-text h1 { margin-top: 24px; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1; letter-spacing: -.05em; text-wrap: balance; }
.fs-ingress { margin-top: 22px; max-width: 32rem; font-size: clamp(1.08rem, 1.45vw, 1.25rem); line-height: 1.55; color: var(--text); }
.fs-text .knapprad { margin-top: 32px; }
.fs-not { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14.5px; color: var(--dov); }
.fs-not .ik { width: 16px; height: 16px; color: var(--gron); }
.fs-demo { width: 100%; }
.fs-demo .sv-yta { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .8); box-shadow: 0 30px 60px -40px rgba(13, 20, 17, .35); }
.fs-demo .sv-sp { background: #EAE6DB; }
.fs-demo .sv-not { text-align: left; }
.fs-sk { padding: clamp(88px, 10vw, 140px) 0; }
.fs-sk::before { display: none; }
.fs-sk .sk-grupp li { position: relative; padding-top: 46px; }
.fs-ik { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(111, 209, 156, .12); color: #6FD19C; }
.fs-faktakort { position: relative; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-stor, 28px); background: var(--papper); border: 1px solid var(--linje); }
.fs-faktakort-ik { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--gron); color: #fff; margin-bottom: 26px; }
.fs-faktakort-ik svg { width: 22px; height: 22px; }
.fs-faktakort dl { margin: 0; display: grid; gap: 0; }
.fs-faktakort dl div { display: flex; align-items: baseline; gap: 18px; padding: 18px 0; border-top: 1px solid var(--linje-2); }
.fs-faktakort dt { min-width: 7.5rem; font: 700 clamp(1.6rem, 2.6vw, 2.2rem)/1 var(--sans); letter-spacing: -.04em; color: var(--black); }
.fs-faktakort dd { margin: 0; color: var(--dov); }
.fs-mer { padding-top: 0; }
.fs-rel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fs-rel a { position: relative; display: grid; gap: 8px; height: 100%; padding: 26px 26px 28px; border-radius: var(--r-kort); background: var(--vit); border: 1px solid var(--linje); box-shadow: var(--skugga-1); transition: transform .3s var(--ut), box-shadow .3s, border-color .2s; }
.fs-rel a:hover { transform: translateY(-3px); box-shadow: var(--skugga-2); border-color: var(--linje-2); }
.fs-rel-ik { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 8px; border-radius: 10px; background: var(--gron-l); color: var(--gron); }
.fs-rel b { font-size: 1.15rem; letter-spacing: -.02em; color: var(--black); }
.fs-rel span:not(.fs-rel-ik) { color: var(--dov); font-size: 15px; line-height: 1.5; }
.fs-rel-pil { position: absolute; top: 28px; right: 26px; width: 18px; height: 18px; color: var(--dov); transition: transform .25s var(--ut), color .2s; }
.fs-rel a:hover .fs-rel-pil { transform: translateX(3px); color: var(--black); }
@media (max-width: 960px) {
.fs-kort { grid-template-columns: 1fr; }
.fs-rel { grid-template-columns: 1fr; }
}
.fs-demo .sv-yta { height: auto; padding-top: clamp(20px, 3vw, 36px); padding-bottom: clamp(20px, 3vw, 36px); -webkit-mask-image: none; mask-image: none; }
.fs-demo .sv-flode { justify-content: flex-start; }
.fs-text .knapprad { justify-content: flex-start; }