/* Analysa, publik lanseringssida. Mått och klasser från webbskalet i webb-4. Text är alltid skarp, raster bara i bilder. */
:root{--mar:56px;--rytm:96px;--bredd:1440px}
body{font:400 17px/1.5 var(--ui);letter-spacing:.006em;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}ul,ol{list-style:none}

/* Färgytor: lokala variabler så att allt inuti följer med */
.gul{--ink:#131417;--paper:#FFE11A;--ark:#FFE11A;--dim:#131417;--olast:#131417;--line:#131417;--m:#131417;--pa-m:#FFE11A;background:#FFE11A;color:#131417}
.svart{--ink:#F2F0E8;--paper:#131417;--ark:#1B1C20;--dim:#B8B8B2;--olast:#9A9A94;--line:#34363B;--m:#FFE11A;--pa-m:#131417;background:#131417;color:#F2F0E8}

/* Typografi */
.t2{font:600 clamp(36px,4.6vw,68px)/1.02 var(--ui);letter-spacing:-.03em;text-wrap:balance}
.t1h{font:600 clamp(40px,4.9vw,74px)/1 var(--ui);letter-spacing:-.034em;text-wrap:balance}
.ing{font:400 clamp(21px,1.8vw,26px)/1.36 var(--las);letter-spacing:0;text-wrap:pretty}
.las{font:400 19px/1.55 var(--las);letter-spacing:0;text-wrap:pretty}
.tag{font:400 14px/1.6 var(--mono);letter-spacing:0;color:var(--dim)}

/* Överstrykningen: parallellogram bakom ord. Färgen ligger i ytan, texten förblir skarp. */
.st{position:relative;z-index:0;white-space:nowrap;margin-inline:.12em;color:var(--pa-m);transition:color .25s .25s}
.st::before{content:"";position:absolute;z-index:-1;left:-.15em;right:-.15em;top:.1em;bottom:.02em;background:var(--m);clip-path:polygon(.12em 0,100% 0,calc(100% - .12em) 100%,0 100%);transform-origin:0 50%;transition:transform .7s var(--ease)}
.js .st:not(.pa){color:inherit}
.js .st:not(.pa)::before{transform:scaleX(0)}
@media(prefers-reduced-motion:reduce){.st,.st::before{transition:none}}

/* Layout */
.rut{max-width:var(--bredd);margin-inline:auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.av{padding:var(--rytm) var(--mar)}
.huvud{grid-column:1/-1;margin-bottom:48px}

.lank{font:600 17px/1.4 var(--ui);letter-spacing:.006em;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center}
.lank:hover{text-decoration-thickness:4px}

/* Topp: bara logotypen */
.topp{padding:0 var(--mar)}
.topp-inre{max-width:var(--bredd);margin-inline:auto;height:68px;display:flex;align-items:center}
.logo{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none}
.logo-hel{display:block;width:160px;height:auto}
@media(min-width:900px){.logo-hel{width:176px}}

/* Frågor */
.fragor{grid-column:1/-1;border-top:2px solid var(--ink)}
.fraga{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:32px 0;border-bottom:1px solid var(--line);align-items:baseline}
.fraga h3{grid-column:1/8;font:600 clamp(28px,3.2vw,46px)/1.06 var(--ui);letter-spacing:-.025em;text-wrap:balance}
.fraga p{grid-column:8/-1}

/* Sidfot */
.fot{padding:56px var(--mar) 48px}
.fot-rad{max-width:var(--bredd);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:24px 48px;flex-wrap:wrap}
.fot-logo{display:block;width:176px;height:auto}
.fot-text{font:400 19px/1.4 var(--las)}

/* 404 */
.fel{min-height:calc(100vh - 68px - 160px);padding-block:var(--rytm)}
.fel-tx{grid-column:1/-1}.fel .tag{color:var(--ink)}.fel .ing{margin-top:24px;max-width:34ch}
.fel .lank{margin-top:24px}

@media(max-width:1000px){
 :root{--mar:20px;--rytm:64px}
 .topp-inre{height:60px}
 .fraga{padding:24px 0}.fraga h3,.fraga p{grid-column:1/-1}.fraga p{margin-top:10px}
 .fot{padding:40px var(--mar)}
}