/* Good Thing Agency · startsida v30 · 2026-10-08 · engelska
   Riktning: v5 med en sektion som definierar testet och talet, positiva poler i testet och signaturen i två rader.
   Accenterna är tunna och få: en mintprick, en hårlinje, ett ord i pensel.
   Typsnitt: Montserrat (rubriker, lätt vikt), Instrument Serif kursiv (betoningar och citat),
   Figtree (löptext), JetBrains Mono (etiketter),
   Med ?h1 i adressen står Montserrat bara i de två stora rubrikerna och resten är serif som i v4.
   Brushstrike (penselordet; läses från datorn om det är installerat, annars Rock Salt som stand-in; brushstrike-filen läggs in i src när den finns i typsnitt/, så att sidan inte söker en fil som saknas). */
@font-face{font-family:"GT Serif";font-style:normal;font-weight:400;font-display:swap;src:url(typsnitt/instrumentserif-regular.woff2) format("woff2")}
@font-face{font-family:"GT Serif";font-style:italic;font-weight:400;font-display:swap;src:url(typsnitt/instrumentserif-italic.woff2) format("woff2")}
@font-face{font-family:"GT Rubrik";font-style:normal;font-weight:100 900;font-display:swap;src:url(typsnitt/montserrat-latin-wght-normal.woff2) format("woff2-variations")}
@font-face{font-family:"GT Text";font-style:normal;font-weight:300 900;font-display:swap;src:url(typsnitt/figtree-latin-wght-normal.woff2) format("woff2-variations")}
@font-face{font-family:"GT Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(typsnitt/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations")}
@font-face{font-family:"GT Pensel";font-style:normal;font-weight:400;font-display:swap;
  src:local("BRUSHSTRIKE"),local("Brushstrike"),local("BrushStrike"),local("Brush Strike"),local("BRUSHSTRIKE trial"),local("Brushstrike trial"),
      url(typsnitt/rocksalt-regular.woff2) format("woff2")}

html.h1-bara{--f2:var(--serif);--v2:400;--k2:1;--sp2:-.008em;--rh2:0;--ki:1}
:root{
  --bg:#0d0f0e;
  --ink:rgba(232,230,222,.9);--ink-2:rgba(232,230,222,.56);--ink-3:rgba(232,230,222,.36);--ink-4:rgba(232,230,222,.16);
  --line:rgba(232,230,222,.075);
  --mint:#86dcb6;--mint-skarp:#5FE9A9;--coral:#d98e80;
  --serif:"GT Serif","Iowan Old Style","Times New Roman",serif;
  --rubrik:"GT Rubrik","Montserrat","Avenir Next","Helvetica Neue",sans-serif;
  /* övriga rubriker: Montserrat som standard, serif med ?h1 */
  --f2:var(--rubrik);--v2:300;--k2:.78;--sp2:-.024em;--rh2:.12;--ki:1.2;
  --text:"GT Text",ui-sans-serif,system-ui,sans-serif;
  --mono:"GT Mono",ui-monospace,Menlo,monospace;
  --pensel:"GT Pensel","Bradley Hand",cursive;
  --kant:clamp(24px,8.6vw,168px);
  --luft:clamp(170px,34vh,420px);
  --h-jatte:clamp(1.7rem,2.9vw,3.1rem);
  --h-stor:clamp(1.8rem,2.75vw,2.9rem);
  --h-mellan:clamp(1.4rem,1.9vw,1.95rem);
  --ut:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;font-family:var(--text);font-weight:380;font-size:.97rem;line-height:1.72;letter-spacing:.003em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,p,ol,ul,figure,blockquote{margin:0;padding:0}
ol,ul{list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:rgba(134,220,182,.9);color:#08130e}
:focus-visible{outline:1.5px solid var(--mint-skarp);outline-offset:5px;border-radius:4px}

#streck{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.utan-webgl #streck,.utan-js #streck{display:none}
.utan-webgl body::before,.utan-js body::before{content:"";position:fixed;inset:0;z-index:0;background:radial-gradient(70% 40% at 62% 34%,rgba(134,220,182,.1),transparent 70%)}
main,.topp,.fot{position:relative;z-index:2}
.hoppa{position:fixed;left:16px;top:-60px;z-index:60;padding:10px 16px;border-radius:999px;background:#e8e6de;color:#0d0f0e;font-weight:500;font-size:.85rem}
.hoppa:focus{top:16px}

/* etiketter och knappen */
.etikett{font-family:var(--mono);font-weight:400;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.etikett b{font-weight:400;color:var(--mint)}
.prick{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--mint-skarp);flex:none}
.knapp{position:relative;display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 24px 0 22px;border:1px solid var(--ink-4);border-radius:999px;background:rgba(18,21,20,.72);color:var(--ink);font-weight:450;font-size:.9rem;letter-spacing:.005em;transition:border-color .6s var(--ut),background-color .6s var(--ut);will-change:transform}
.knapp svg{width:15px;height:15px;color:var(--ink-2);transition:transform .7s var(--ut),color .5s}
.knapp:hover{border-color:rgba(134,220,182,.55);background:rgba(134,220,182,.05)}
.knapp:hover svg{transform:translateX(5px);color:var(--mint)}
.knapp-linje{display:inline-flex;align-items:center;min-height:44px;font-size:.88rem;color:var(--ink-2);background:linear-gradient(var(--ink-4),var(--ink-4)) 0 calc(100% - 10px)/100% 1px no-repeat;transition:color .4s}
.knapp-linje:hover{color:var(--ink)}

/* sidhuvud */
.topp{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px var(--kant);transition:transform .8s var(--ut)}
.topp.undan{transform:translateY(-110%)}
.marke{display:inline-flex;align-items:center;gap:11px;min-height:44px;font-weight:500;font-size:.9rem;letter-spacing:.005em}
.marke img{width:24px;height:18px;opacity:.9}
.marke em{font-style:normal;font-weight:380;color:var(--ink-3)}
.marke span,.topp-knapp{white-space:nowrap}
.topp nav{display:none;gap:40px;font-size:.82rem;color:var(--ink-2)}
.topp nav a{position:relative;padding:12px 0;transition:color .4s}
.topp nav a::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:var(--mint-skarp);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ut)}
.topp nav a:hover{color:var(--ink)}
.topp nav a:hover::after{transform:scaleX(1)}
.topp-knapp{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:.82rem;color:var(--ink-2);background:linear-gradient(var(--ink-4),var(--ink-4)) 0 calc(100% - 11px)/100% 1px no-repeat;transition:color .4s}
.topp-knapp:hover{color:var(--ink)}
@media (min-width:900px){.topp nav{display:flex}}

/* hero */
.hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:100vh;min-height:100svh;padding:160px var(--kant) clamp(34px,6vh,64px)}
.hero .etikett{display:flex;align-items:center;gap:14px;margin-bottom:clamp(22px,3.4vh,34px)}
.h-jatte{font-family:var(--rubrik);font-weight:300;font-size:var(--h-jatte);line-height:1.2;letter-spacing:-.03em;color:var(--ink)}
.h-jatte i{font-style:normal;color:var(--ink-2)}
.h-stor i,.h-mellan i,.manifest-text i{font-family:var(--serif);font-style:italic;font-weight:400;font-size:calc(1em*var(--ki));letter-spacing:0;color:var(--ink-2)}
.rad{display:block;overflow:hidden;padding:.08em .06em .16em;margin:0 -.06em -.2em}
.rad>.i{display:block}
.m-br{display:block}
.pensel{display:inline-block;font-family:var(--pensel);font-style:normal;color:var(--mint);font-size:.62em;line-height:1;letter-spacing:.03em;transform:rotate(-3deg) translateY(-.1em);transform-origin:left center;white-space:nowrap;padding:.3em .14em .12em .2em}
.hero-fot{display:grid;gap:26px;margin-top:clamp(70px,13vh,150px);padding-top:clamp(22px,3vh,30px);border-top:1px solid var(--line)}
.hero-fot .ingress{max-width:30ch;color:var(--ink-2)}
.hero-val{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px}
.rulla{display:none;align-items:center;gap:14px;font-family:var(--mono);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3)}
.rulla i{position:relative;width:1px;height:40px;background:var(--line);overflow:hidden}
.rulla i::after{content:"";position:absolute;left:0;top:0;width:1px;height:14px;background:var(--mint-skarp);animation:rulla 2.6s var(--ut) infinite}
@keyframes rulla{from{transform:translateY(-14px)}to{transform:translateY(40px)}}
@media (min-width:900px){
  .m-br{display:none}
  .hero-fot{grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:64px}
  .rulla{display:inline-flex}
}

/* manifest */
.manifest{padding:var(--luft) var(--kant)}
.manifest-text{max-width:calc(21em/var(--k2)*.86);font-family:var(--f2);font-weight:var(--v2);font-size:calc(var(--h-stor)*var(--k2));line-height:calc(1.26 + var(--rh2)*1.6);letter-spacing:var(--sp2)}
.manifest-text i{color:var(--mint)}
.manifest-not{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;margin-top:clamp(50px,9vh,100px);color:var(--ink-2);font-size:.92rem}
.manifest-not .etikett{color:var(--mint)}
@media (min-width:900px){.manifest-text,.manifest-not{margin-left:33.3%}}

/* vad vi gör: testet och talet definierade */
.ordlista{border-top:1px solid var(--line)}
.ordlista li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 22px;align-items:baseline;padding:clamp(32px,5.4vh,56px) 0;border-bottom:1px solid var(--line)}
.ordlista .nr{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;color:var(--ink-3)}
.ordlista h3{margin:0;font-family:var(--f2);font-weight:var(--v2);font-size:calc(clamp(1.5rem,2.3vw,2.35rem)*var(--k2));line-height:calc(1.1 + var(--rh2));letter-spacing:var(--sp2)}
.ordlista p{grid-column:2;max-width:46ch;color:var(--ink-2);font-size:.95rem}
@media (min-width:900px){
  .ordlista li{grid-template-columns:33.3% minmax(0,1.1fr) minmax(0,1fr);column-gap:0}
  .ordlista p{grid-column:3;padding-top:.3em}
}

/* testet */
.test{position:relative}
.test-scen{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden}
.test-huvud{position:absolute;left:var(--kant);top:clamp(104px,15vh,160px);z-index:3;max-width:22em}
.test-huvud .h-mellan{margin-top:16px}
.h-mellan{font-family:var(--f2);font-weight:var(--v2);font-size:calc(var(--h-mellan)*var(--k2));line-height:calc(1.16 + var(--rh2));letter-spacing:var(--sp2)}
.test-akt{display:grid;justify-items:start;margin-top:22px;font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase}
.test-akt span{grid-area:1/1;display:inline-flex;align-items:center;gap:12px;color:var(--ink-3)}
.test-akt span::before{content:"";width:24px;border-top:1px dashed var(--ink-3)}
.test-akt .akt-2{color:var(--mint)}
.test-akt .akt-2::before{border-top:1px solid var(--mint-skarp)}
.test-ringar{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.test-ringar circle{fill:var(--bg);stroke-width:1;vector-effect:non-scaling-stroke}
.ring-fel{stroke:var(--coral)}
.ring-ratt{stroke:var(--mint-skarp)}
.test-ringar .prick-fel{fill:var(--coral);stroke:none}
.test-ringar .prick-ratt{fill:var(--mint-skarp);stroke:none}
.test-grindar{position:absolute;left:0;right:0;bottom:clamp(96px,15vh,150px);z-index:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 0;padding:0 var(--kant)}
.grind{position:relative;display:grid;gap:6px;align-content:start;padding-left:16px;border-left:1px solid var(--line)}
.grind .nr{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;color:var(--ink-3)}
.grind b{font-family:var(--f2);font-weight:var(--v2);font-size:calc(clamp(1.15rem,1.5vw,1.5rem)*var(--k2));line-height:calc(1.1 + var(--rh2));letter-spacing:var(--sp2)}
.dom{display:grid;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;min-height:1.5em}
.dom>*{grid-area:1/1}
.dom .fel{color:var(--coral)}
.dom .fel::before{content:attr(data-ord)}
.dom .ratt{color:rgba(134,220,182,.82)}
.test-slut{position:absolute;left:var(--kant);right:var(--kant);bottom:clamp(26px,4.4vh,48px);z-index:3;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 28px}
.test-tal{display:flex;align-items:baseline;gap:.6em;font-family:var(--f2);font-weight:var(--v2);font-size:calc(clamp(1.15rem,1.5vw,1.5rem)*var(--k2));line-height:1.3;letter-spacing:var(--sp2)}
.test-tal .nr{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;color:var(--mint)}
.test-tal .svar{display:grid}
.test-tal .svar>*{grid-area:1/1}
.test-tal .svar{font-family:var(--serif);font-size:calc(1em*var(--ki));letter-spacing:0}
.test-tal .skuld{color:var(--coral);font-style:italic}
.test-tal .skuld::before{content:attr(data-ord)}
.test-tal .stiger{color:var(--mint);font-style:italic}
.test-not{font-size:.82rem;color:var(--ink-3);max-width:40ch}
@media (min-width:900px){
  .test-grindar{grid-template-columns:repeat(4,minmax(0,1fr));padding:0;gap:0}
  .grind{justify-items:center;text-align:center;padding:0 12px;border-left:0}
  .grind::before{content:"";position:absolute;left:50%;bottom:calc(100% + 20px);width:1px;height:60vh;background:linear-gradient(to top,var(--line),transparent)}
}

/* motorn: trådarna samlas till ett drag */
.motor{position:relative}
.motor-scen{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden}
.motor-huvud{position:absolute;left:var(--kant);right:var(--kant);top:clamp(104px,15vh,160px);z-index:3}
.motor-rader{display:grid;margin-top:18px;max-width:17em}
.motor-rader>span{grid-area:1/1;display:block}
.motor-a,.motor-a>span{display:block}
.motor-a{color:var(--ink-2)}
.motor-not{position:absolute;left:var(--kant);right:var(--kant);bottom:clamp(54px,10vh,110px);z-index:3;max-width:40ch;color:var(--ink-2);font-size:.92rem}
@media (min-width:900px){.motor-not{left:calc(var(--kant) + (100% - 2*var(--kant))*.333)}}

/* erbjudandet */
.sektion{padding:var(--luft) var(--kant)}
.sek-topp{display:grid;gap:22px;margin-bottom:clamp(64px,11vh,130px)}
.h-stor{font-family:var(--f2);font-weight:var(--v2);font-size:calc(var(--h-stor)*var(--k2));line-height:calc(1.14 + var(--rh2));letter-spacing:var(--sp2)}
.sek-topp p:not(.etikett){max-width:36ch;color:var(--ink-2)}
@media (min-width:900px){.sek-topp{grid-template-columns:33.3% minmax(0,1fr);align-items:start;column-gap:0;row-gap:26px}.sek-topp .etikett{grid-column:1;padding-top:.9em}.sek-topp .h-stor{grid-column:2}.sek-topp p:not(.etikett){grid-column:2}}
.rader{border-top:1px solid var(--line)}
.rader li{border-bottom:1px solid var(--line)}
.rader a{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:8px 22px;padding:clamp(34px,5.6vh,58px) 0;overflow:hidden;isolation:isolate}
.rader a::before{content:"";position:absolute;z-index:-1;left:var(--mx,50%);top:50%;width:min(56vw,680px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(134,220,182,.07),transparent);transform:translate(-50%,-50%) scale(.6);opacity:0;transition:opacity .8s,transform 1.1s var(--ut)}
.rader a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--mint-skarp);opacity:.7;transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ut)}
.rader .nr{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;color:var(--ink-3)}
.rader .titel{font-family:var(--f2);font-weight:var(--v2);font-size:calc(clamp(1.5rem,2.3vw,2.35rem)*var(--k2));line-height:calc(1.1 + var(--rh2));letter-spacing:var(--sp2);transition:transform 1.1s var(--ut)}
.rader .for{grid-column:2;font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.rader .text{grid-column:2/-1;max-width:42ch;color:var(--ink-2);font-size:.92rem}
.rader .pil{grid-row:1;grid-column:3;align-self:center;color:var(--ink-3);transition:color .6s,transform 1.1s var(--ut)}
.rader .pil svg{width:17px;height:17px}
@media (hover:hover){
  .rader a:hover::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .rader a:hover::after{transform:scaleX(1)}
  .rader a:hover .titel{transform:translateX(12px)}
  .rader a:hover .pil{color:var(--mint);transform:translateX(6px)}
}
@media (min-width:900px){
  .rader a{grid-template-columns:33.3% minmax(0,1.1fr) minmax(0,1fr) 40px;column-gap:0;row-gap:10px;align-items:start}
  .rader .nr{grid-row:1/3;padding-top:.9em}
  .rader .titel{grid-column:2;grid-row:1}
  .rader .for{grid-column:2;grid-row:2}
  .rader .text{grid-column:3;grid-row:1/3;padding-top:.5em}
  .rader .pil{grid-column:4;grid-row:1/3;justify-self:end;align-self:start;padding-top:.8em}
}

/* bevis */
.bevis-tal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px;border-top:1px solid var(--line);padding-top:clamp(40px,7vh,72px)}
.tal{display:grid;gap:14px;align-content:start}
.tal b{font-family:var(--f2);font-weight:calc(var(--v2) - 50);font-size:calc(clamp(2.1rem,3.5vw,3.7rem)*var(--k2));line-height:1;letter-spacing:calc(var(--sp2)*1.4);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;color:var(--ink)}
.tal b small{font-size:.44em;letter-spacing:.02em;color:var(--ink-3);margin-left:.22em}
.tal>span{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.tal:first-child b{color:var(--mint)}
.citat{margin-top:clamp(90px,16vh,190px);display:grid;gap:28px}
.citat p{max-width:24em;font-family:var(--serif);font-style:italic;font-size:var(--h-mellan);line-height:1.34;color:var(--ink)}
.citat footer{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;font-size:.86rem;color:var(--ink-3)}
.citat footer b{font-weight:450;color:var(--ink-2)}
.kalla-not{margin-top:clamp(40px,6vh,70px);font-size:.76rem;color:var(--ink-3);max-width:60ch}
@media (min-width:900px){.bevis-tal{grid-template-columns:repeat(4,minmax(0,1fr));margin-left:33.3%}.citat,.kalla-not{margin-left:33.3%}}

/* avslut */
.slut{position:relative;display:grid;align-content:start;justify-items:center;text-align:center;min-height:100vh;min-height:100svh;padding:clamp(150px,24vh,260px) var(--kant) clamp(240px,44vh,460px)}
.slut .h-jatte{max-width:12em;margin:30px 0 clamp(44px,7vh,72px)}
.slut .rad{padding-inline:.12em}
.slut .signatur{position:absolute;right:var(--kant);bottom:clamp(30px,5vh,56px);display:grid;justify-items:start;gap:.1em;font-size:clamp(1.15rem,1.85vw,1.75rem);line-height:1.2;text-align:left;transform:rotate(-4deg);transform-origin:right center;opacity:.9}
.slut .signatur span:first-child{font-size:.66em;color:var(--ink);padding-left:.2em}
.slut .signatur span+span{padding-left:1.1em}
.slut .fin{margin-top:30px;font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.fot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;padding:28px var(--kant) 34px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--ink-3)}
.fot a{min-height:24px;transition:color .4s}
.fot a:hover{color:var(--ink)}
.fot div{display:flex;flex-wrap:wrap;gap:8px 28px}

/* framsteg: hur långt man kommit, längst till höger */
.framsteg{display:none}
html.js .framsteg{display:block;position:fixed;right:clamp(10px,2.1vw,34px);top:50%;z-index:45;width:22px;height:min(44vh,380px);transform:translateY(-50%);opacity:0;transition:opacity 1.6s var(--ut)}
html.js .framsteg.syns{opacity:1}
.framsteg-spar{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line);overflow:hidden}
.framsteg-fyll{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(95,233,169,.15),rgba(95,233,169,.85));transform-origin:top;transform:scaleY(var(--p,0))}
.framsteg-huvud{position:absolute;left:50%;top:calc(var(--p,0)*100%);width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--mint-skarp);box-shadow:0 0 12px rgba(95,233,169,.45)}
.framsteg-huvud b{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-weight:400;font-size:.6rem;letter-spacing:.2em;color:var(--ink-3);white-space:nowrap}
.framsteg a{position:absolute;left:50%;top:calc(var(--t,0)*100%);width:22px;height:22px;margin:-11px 0 0 -11px}
.framsteg a::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:1px;margin-left:-3.5px;background:var(--ink-4);transition:background-color .5s,width .5s var(--ut),margin .5s var(--ut)}
.framsteg a.forbi::before{background:rgba(95,233,169,.55)}
.framsteg a span{position:absolute;right:26px;top:50%;transform:translate(6px,-50%);font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .5s,transform .6s var(--ut)}
.framsteg a:hover span,.framsteg a:focus-visible span{opacity:1;transform:translate(0,-50%)}
.framsteg a:hover::before{width:13px;margin-left:-6.5px;background:var(--mint-skarp)}
.framsteg:hover .framsteg-huvud b{opacity:0}
@media (max-width:899px){
  html.js .framsteg{right:6px;height:30vh;width:12px}
  .framsteg a,.framsteg-huvud b{display:none}
}

/* pekare */
.pekare{display:none}
@media (hover:hover) and (pointer:fine){
  html.js .pekare{display:block;position:fixed;left:0;top:0;z-index:70;pointer-events:none}
  .pekare i{display:block;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--mint-skarp);border:1px solid transparent;transition:width .6s var(--ut),height .6s var(--ut),margin .6s var(--ut),background-color .4s,border-color .4s,opacity .3s}
  .pekare.stor i{width:44px;height:44px;margin:-22px 0 0 -22px;background:transparent;border-color:rgba(134,220,182,.5)}
  .pekare.borta i{opacity:0}
}

@media (max-width:520px){.pensel{font-size:.56em}.marke em{display:none}}

/* startlägen, bara när skriptet kör och rörelse är tillåten */
html.js.ror .hero .rad>.i,html.js.ror .slut .rad>.i{transform:translateY(112%)}
html.js.ror .hero .pensel{clip-path:inset(-20% 100% -20% -5%)}
html.js.ror .hero .etikett,html.js.ror .hero-fot,html.js.ror .topp{opacity:0}
html.js.ror [data-in]{opacity:0;transform:translateY(18px)}
html.js.ror .test-akt span,html.js.ror .dom>*,html.js.ror .test-tal .svar>*,html.js.ror .test-not{opacity:0}
html.js.ror .test-ringar circle{opacity:0}
html.js.ror .motor-a,html.js.ror .motor-b,html.js.ror .motor-not,html.js.ror .motor .etikett{opacity:0}
/* utan skript eller med rörelsen av: slutläget står färdigt */
html:not(.ror) .dom .fel,html:not(.ror) .test-tal .skuld,html:not(.ror) .ring-fel,html:not(.ror) .prick-fel,html:not(.ror) .test-akt .akt-1{display:none}
html:not(.ror) .test-scen{height:auto;min-height:0;padding:var(--luft) 0 60px}
html:not(.ror) .test-huvud,html:not(.ror) .test-grindar,html:not(.ror) .test-slut{position:static;margin-inline:var(--kant)}
html:not(.ror) .test-grindar{margin-top:70px;padding:0}
html:not(.ror) .test-slut{margin-top:60px}
html:not(.ror) .test-ringar,html:not(.ror) .grind::before{display:none}
html:not(.ror) .motor-scen{height:auto;min-height:0;padding:var(--luft) var(--kant) 0}
html:not(.ror) .motor-huvud,html:not(.ror) .motor-not{position:static}
html:not(.ror) .motor-rader>span{grid-area:auto}
html:not(.ror) .motor-not{margin-top:clamp(40px,7vh,70px)}
@media (min-width:900px){html:not(.ror) .motor-not{margin-left:33.3%}}
html:not(.ror) #streck{position:absolute;height:100vh;height:100svh}
@media (prefers-reduced-motion:reduce){.rulla i::after{animation:none}}

/* motorn: "in one engine" i pensel, som knyter ihop raden med erbjudandet under (startsida v16) */
.motor-c{display:block;margin-top:.12em}
.motor-c .pensel{font-size:.9em;transform:rotate(-3deg) translateY(.04em);margin-left:.1em}
html.js.ror .motor-c .pensel{clip-path:inset(-20% 100% -20% -5%)}

/* ---------- menyn och framstegslinjen till vänster (källa kalla/meny/meny.css) ----------
   v1 2026-10-08 kväll (startsida v14): ikon uppe till höger, glaskort, framstegslinjen till vänster.
   v2 2026-10-08 sent (startsida v16): ljus bakom panelen, kant som fångar ljuset, korn, sken som följer pekaren.
   v3 2026-10-08 sent (startsida v17): dovare. Ljuset bakom är nästan borta och skenet är vitt, inte grönt.
   Glaset är tunnare: sidan syns igenom och suddas av korten själva, inte av en mörk duk.
   Vid hovring skjuts en mjuk mint ut längs kanten från punkten där pekaren kom in.
   Home är kort 00 i samma serie, lägre: Start, The whole picture.
   v4 2026-10-09 (startsida v29, prov): mörkt premiumglas. Mer genomskinligt och med en mörk ton i själva glaset,
   mindre suddning (8 px i stället för 16), mörkare och mindre mättat bakom, en svagare ljuskant och en djupare skugga.
   v5 2026-10-09 (startsida v30, prov): suddningen 4 px, och allt bakom menyn dovas: duken är mörkare (0,58 i stället för 0,34).
   v6 2026-10-09 (startsida v32, prov): till vänster om korten snurrar GT-märket som NK-skylten på taket, och under det en knapp, Do you have a code?, till code-entry.
   v7 2026-10-09 (startsida v33, prov): ett mörkt hörn nere till vänster, med en mjuk kurva från vänsterkanten ner mot mitten av nederkanten (Viktors skiss), och skylten står i det mörka.
   v8 2026-10-09 (startsida v34, prov): hörnet är mörkt men inte svart, sidan anas igenom; skylten är större, ungefär lika bred som knappen
   och knappt tre gånger dess höjd (gyllene snittet i kvadrat), så att märket bär och knappen följer.
   v9 2026-10-09 (startsida v35, prov): skuggan under skylten borta; inga filter på lagren; skylten är tvåsidig som NK, två halvor rygg mot rygg
   som var och en bara syns från sitt håll (förut sköt det spegelvända djupet ut bakom märket när skylten vänt ett halvt varv).
  v10 2026-10-09 (startsida v36, prov): den ljusa ytan tonar ner mot kantens ton när den vänder sig bort och är släckt i profil,
  så att den inte hoppar 19 px när den andra sidan tar över; kanten en aning ljusare (#262c29), så skylten syns hela varvet.
  v11 2026-10-09 (startsida v37, prov): skylten är en enda kropp, 24 lager i samma riktning med mitten i noll; bakifrån ses märket
  spegelvänt som på en riktig kropp, så varvet läses som ett helt varv och inte som samma halvvarv två gånger.
  v12 2026-10-09 (startsida v38, prov): profilen är en sluten yta (en kant vinkelrätt mot lagren, synlig bara kring profilen, och 48 lager i stället för 24);
  korten har samma radie som knapparna (26 px); glaset böjer det bakom en aning (bara Chromium, SVG-filter i backdrop-filter).
  v13 2026-10-09 (r19, alla sidor): knapparna har samma kant som korten, mint som växer från där pekaren kom in; Do you have a code? i samma glas
  som korten; in-animationen 1,3 s (13 % långsammare), ut 1,15 s; magneten borta (sida.js och startsidans skript). */
@property --r{syntax:'<percentage>';inherits:false;initial-value:0%}
.topp nav{display:none!important}
.topp-hoger{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.topp.meny-oppen{transform:none!important}
.meny{position:relative}
.meny-knapp{list-style:none;display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--ink-4);border-radius:50%;background:rgba(9,11,10,.42);-webkit-backdrop-filter:blur(6px) brightness(.85);backdrop-filter:blur(6px) brightness(.85);cursor:pointer;transition:border-color .5s var(--ut),background-color .5s var(--ut)}
.meny-knapp::-webkit-details-marker{display:none}
.meny-knapp:hover{border-color:rgba(134,220,182,.45);background:rgba(134,220,182,.04)}
.meny-ikon{position:relative;display:block;width:18px;height:12px}
.meny-ikon i{position:absolute;right:0;height:1px;background:var(--ink);transition:transform .45s var(--ut),width .45s var(--ut),top .45s var(--ut)}
.meny-ikon i:first-child{top:2px;width:18px}
.meny-ikon i+i{top:9px;width:11px}
.meny-ikon b{position:absolute;left:0;top:7px;width:4px;height:4px;border-radius:50%;background:var(--mint-skarp);box-shadow:0 0 10px rgba(95,233,169,.5);transition:opacity .3s,transform .45s var(--ut)}
.meny-knapp:hover .meny-ikon i+i{width:18px}
.meny[open] .meny-ikon i{top:5.5px;width:18px}
.meny[open] .meny-ikon i:first-child{transform:rotate(45deg)}
.meny[open] .meny-ikon i+i{transform:rotate(-45deg)}
.meny[open] .meny-ikon b{opacity:0;transform:scale(.2)}
.meny[open] .meny-knapp{border-color:rgba(134,220,182,.45)}

/* duken: allt bakom menyn dovas (v5), sidan syns fortfarande igenom */
.meny[open]::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(86% 118% at 0% 100%,rgba(3,4,4,.84) 0%,rgba(3,4,4,.8) 50%,rgba(3,4,4,.5) 68%,rgba(3,4,4,0) 86%),radial-gradient(120% 90% at 85% 10%,rgba(6,8,7,.5),rgba(6,8,7,.66));animation:meny-dim .5s var(--ut) both}
/* ett dovt ljus bakom panelen, knappt synligt, för djup i glaset */
.meny[open]::after{content:"";position:absolute;z-index:-1;top:60px;right:-40px;width:min(480px,100vw);height:520px;pointer-events:none;
  background:radial-gradient(40% 34% at 68% 26%,rgba(134,220,182,.10),transparent 70%),radial-gradient(44% 38% at 30% 66%,rgba(70,120,108,.10),transparent 72%);
  filter:blur(40px);animation:meny-ljus 1.1s var(--ut) both}

.meny-panel{position:absolute;top:calc(100% + 14px);right:0;display:grid;gap:10px;width:min(392px,calc(100vw - 2*var(--kant)))}
.meny-panel>a{--mx:30%;--my:0%;--ex:0%;--ey:50%;position:relative;display:grid;border:0;border-radius:26px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(110% 90% at var(--mx) var(--my),rgba(255,255,255,.045),transparent 55%),
    linear-gradient(165deg,rgba(255,255,255,.035),rgba(255,255,255,0) 42%),
    linear-gradient(180deg,rgba(12,15,14,.46),rgba(6,8,7,.38));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.35),0 26px 54px -24px rgba(0,0,0,.78);
  -webkit-backdrop-filter:blur(4px) saturate(1.1) brightness(.82);backdrop-filter:blur(4px) saturate(1.1) brightness(.82);
  transition:transform .6s var(--ut),box-shadow .6s var(--ut)}
/* kanten: en tunn vit kant som fångar ljuset uppifrån, och mint som skjuts ut från där pekaren kom in */
.meny-panel>a::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;padding:1px;pointer-events:none;
  background:
    radial-gradient(circle at var(--ex) var(--ey),rgba(134,220,182,.85) 0,rgba(134,220,182,.42) calc(var(--r)*.55),transparent var(--r)),
    linear-gradient(155deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 30%,rgba(255,255,255,.02) 62%,rgba(255,255,255,.07));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:--r 1.15s cubic-bezier(.25,.7,.2,1)}
.meny-panel>a:hover::before,.meny-panel>a:focus-visible::before{--r:190%;transition-duration:1.3s}
/* ett tunt korn, så att ytan har material */
.meny-panel>a::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E")}
.meny-panel>a:hover{transform:translateX(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(0,0,0,.35),0 28px 58px -24px rgba(0,0,0,.82),0 0 34px -14px rgba(134,220,182,.14)}
.meny-panel>a:focus-visible{outline:none}
.meny-panel>a>*{position:relative;z-index:2}
.meny-panel .pil{color:var(--ink-3);transition:color .5s,transform .6s var(--ut)}
.meny-panel .pil svg{width:15px;height:15px}
.meny-panel>a:hover .pil{color:var(--mint);transform:translateX(4px)}

.meny-kort{grid-template-columns:auto minmax(0,1fr) auto;column-gap:16px;row-gap:6px;padding:21px 22px 23px}
.meny-kort>*{grid-column:2}
.meny-kort .nr{grid-column:1;grid-row:1/4;padding-top:.45em;font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;color:var(--ink-3)}
.meny-kort b{font-family:var(--f2);font-weight:var(--v2);font-size:calc(1.38rem*var(--k2));line-height:1.2;letter-spacing:var(--sp2);color:var(--ink)}
.meny-kort .for{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.meny-kort .text{font-size:.84rem;line-height:1.55;color:var(--ink-2)}
.meny-kort .pil{grid-column:3;grid-row:1;align-self:center}
/* kort 00: startsidan, samma glas, en rad */
.meny-start{grid-template-columns:auto auto minmax(0,1fr) auto;align-items:baseline;padding:15px 22px 15px}
.meny-start .nr{grid-row:auto;padding-top:0}
.meny-start>*{grid-column:auto}
.meny-start b{font-size:calc(1.1rem*var(--k2))}
.meny-start .for{justify-self:start;padding-left:4px}
.meny-start .pil{grid-column:auto;grid-row:auto;align-self:center}
/* sidan man står på: en stilla mint i kanten och en prick */
.meny-har::before{background:
    radial-gradient(circle at var(--ex) var(--ey),rgba(134,220,182,.85) 0,rgba(134,220,182,.42) calc(var(--r)*.55),transparent var(--r)),
    linear-gradient(155deg,rgba(134,220,182,.5),rgba(134,220,182,.12) 35%,rgba(255,255,255,.04) 65%,rgba(134,220,182,.22))}
.meny-kort.meny-har .for{display:inline-flex;align-items:center;gap:8px;color:rgba(134,220,182,.85)}
.meny-kort.meny-har .for::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--mint-skarp);box-shadow:0 0 8px rgba(95,233,169,.45)}

.meny[open] .meny-panel>a{animation:meny-in .62s var(--ut) both;animation-delay:calc(var(--i)*60ms)}
@keyframes meny-in{from{opacity:0;transform:translateY(-12px) scale(.965);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes meny-dim{from{opacity:0}to{opacity:1}}
@keyframes meny-ljus{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.meny[open] .meny-panel>a,.meny[open]::before,.meny[open]::after{animation:none}.meny-panel>a::before{transition:none}}
@media (max-width:520px){.topp-knapp{display:none}}

/* framstegslinjen bor till vänster */
html.js .framsteg{right:auto;left:clamp(10px,2.1vw,34px)}
.framsteg-huvud b{right:auto;left:16px}
.framsteg a span{right:auto;left:26px;transform:translate(-6px,-50%)}
.framsteg a:hover span,.framsteg a:focus-visible span{transform:translate(0,-50%)}
@media (max-width:899px){html.js .framsteg{left:6px;right:auto}}

/* ---------- GT-skylten och vägen till code-entry (v6) ----------
   Märket staplas i lager på djupet (translateZ) och snurrar runt sin lodräta axel, som NK-skylten. Fram- och baksidan är ljusa,
   lagren emellan mörka, så att märket får tjocklek i profil. Ett dovt mintsken ligger under, som ljuset på taket.
   På dator står skylten fritt i ytan till vänster om korten; i mobil efter korten. Med reducerad rörelse står den stilla, lätt vriden. */
.meny-kod{position:fixed;z-index:1;left:clamp(170px,17vw,340px);bottom:clamp(64px,13vh,160px);display:flex;flex-direction:column;align-items:center;gap:clamp(30px,4.4vh,44px);transform:translateX(-50%);pointer-events:none}
.meny-kod>*{pointer-events:auto}
.gt-skylt{position:relative;width:clamp(150px,13.5vw,196px);aspect-ratio:380/290;height:auto;perspective:900px;perspective-origin:50% 30%}
.gt-snurr{position:absolute;inset:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transform:rotateX(-8deg) rotateY(0deg);animation:gt-snurr 11s linear infinite}
.gt-snurr img{position:absolute;inset:0;width:100%;height:100%;transform:translateZ(calc((var(--d) - 24.5) * .4px))}
@keyframes gt-snurr{from{transform:rotateX(-8deg) rotateY(0deg)}to{transform:rotateX(-8deg) rotateY(360deg)}}
/* v10: ljuset på skylten. Ytan är full medan den vetter mot läsaren (till ungefär 73 grader) och tonar ner till kantens ton
   före profilen; samma tid som snurren, den bakre ytan ett halvt varv efter. Opacitet på enskilda lager, inga filter. */
.gt-snurr img.l{animation:gt-ljus-f 11s linear infinite}
.gt-snurr img.b.l{animation-name:gt-ljus-b}
@keyframes gt-ljus-f{0%{opacity:1.000}1.39%{opacity:1.000}2.78%{opacity:1.000}4.17%{opacity:1.000}5.56%{opacity:1.000}6.94%{opacity:1.000}8.33%{opacity:1.000}9.72%{opacity:1.000}11.11%{opacity:1.000}12.5%{opacity:1.000}13.89%{opacity:1.000}15.28%{opacity:1.000}16.67%{opacity:1.000}18.06%{opacity:1.000}19.44%{opacity:1.000}20.83%{opacity:0.941}22.22%{opacity:0.573}23.61%{opacity:0.145}25%{opacity:0.000}26.39%{opacity:0.000}27.78%{opacity:0.000}29.17%{opacity:0.000}30.56%{opacity:0.000}31.94%{opacity:0.000}33.33%{opacity:0.000}34.72%{opacity:0.000}36.11%{opacity:0.000}37.5%{opacity:0.000}38.89%{opacity:0.000}40.28%{opacity:0.000}41.67%{opacity:0.000}43.06%{opacity:0.000}44.44%{opacity:0.000}45.83%{opacity:0.000}47.22%{opacity:0.000}48.61%{opacity:0.000}50%{opacity:0.000}51.39%{opacity:0.000}52.78%{opacity:0.000}54.17%{opacity:0.000}55.56%{opacity:0.000}56.94%{opacity:0.000}58.33%{opacity:0.000}59.72%{opacity:0.000}61.11%{opacity:0.000}62.5%{opacity:0.000}63.89%{opacity:0.000}65.28%{opacity:0.000}66.67%{opacity:0.000}68.06%{opacity:0.000}69.44%{opacity:0.000}70.83%{opacity:0.000}72.22%{opacity:0.000}73.61%{opacity:0.000}75%{opacity:0.000}76.39%{opacity:0.145}77.78%{opacity:0.573}79.17%{opacity:0.941}80.56%{opacity:1.000}81.94%{opacity:1.000}83.33%{opacity:1.000}84.72%{opacity:1.000}86.11%{opacity:1.000}87.5%{opacity:1.000}88.89%{opacity:1.000}90.28%{opacity:1.000}91.67%{opacity:1.000}93.06%{opacity:1.000}94.44%{opacity:1.000}95.83%{opacity:1.000}97.22%{opacity:1.000}98.61%{opacity:1.000}100%{opacity:1.000}}
@keyframes gt-ljus-b{0%{opacity:0.000}1.39%{opacity:0.000}2.78%{opacity:0.000}4.17%{opacity:0.000}5.56%{opacity:0.000}6.94%{opacity:0.000}8.33%{opacity:0.000}9.72%{opacity:0.000}11.11%{opacity:0.000}12.5%{opacity:0.000}13.89%{opacity:0.000}15.28%{opacity:0.000}16.67%{opacity:0.000}18.06%{opacity:0.000}19.44%{opacity:0.000}20.83%{opacity:0.000}22.22%{opacity:0.000}23.61%{opacity:0.000}25%{opacity:0.000}26.39%{opacity:0.145}27.78%{opacity:0.573}29.17%{opacity:0.941}30.56%{opacity:1.000}31.94%{opacity:1.000}33.33%{opacity:1.000}34.72%{opacity:1.000}36.11%{opacity:1.000}37.5%{opacity:1.000}38.89%{opacity:1.000}40.28%{opacity:1.000}41.67%{opacity:1.000}43.06%{opacity:1.000}44.44%{opacity:1.000}45.83%{opacity:1.000}47.22%{opacity:1.000}48.61%{opacity:1.000}50%{opacity:1.000}51.39%{opacity:1.000}52.78%{opacity:1.000}54.17%{opacity:1.000}55.56%{opacity:1.000}56.94%{opacity:1.000}58.33%{opacity:1.000}59.72%{opacity:1.000}61.11%{opacity:1.000}62.5%{opacity:1.000}63.89%{opacity:1.000}65.28%{opacity:1.000}66.67%{opacity:1.000}68.06%{opacity:1.000}69.44%{opacity:1.000}70.83%{opacity:0.941}72.22%{opacity:0.573}73.61%{opacity:0.145}75%{opacity:0.000}76.39%{opacity:0.000}77.78%{opacity:0.000}79.17%{opacity:0.000}80.56%{opacity:0.000}81.94%{opacity:0.000}83.33%{opacity:0.000}84.72%{opacity:0.000}86.11%{opacity:0.000}87.5%{opacity:0.000}88.89%{opacity:0.000}90.28%{opacity:0.000}91.67%{opacity:0.000}93.06%{opacity:0.000}94.44%{opacity:0.000}95.83%{opacity:0.000}97.22%{opacity:0.000}98.61%{opacity:0.000}100%{opacity:0.000}}
/* v12: kanten i profil. Ett plan vinkelrätt mot lagren, lika djupt som skylten (48 x 0,4 = 19,2 px) och lika högt som märket
   (märket täcker raderna 140 till 411 av 140 till 430 i bildens viewBox, alltså 93,5 %), i kantens ton. Det syns bara kring profilen
   (full inom cirka 3 grader, borta vid cirka 13), annars är det dolt inne i kroppen. */
.gt-sida{position:absolute;left:calc(50% - 9.6px);top:0;width:19.2px;height:93.5%;background:linear-gradient(180deg,#2a312e,#232a27 60%,#1f2522);opacity:0;transform:rotateY(90deg);animation:gt-sida 11s linear infinite}
@keyframes gt-sida{0%{opacity:0.000}0.556%{opacity:0.000}1.111%{opacity:0.000}1.667%{opacity:0.000}2.222%{opacity:0.000}2.778%{opacity:0.000}3.333%{opacity:0.000}3.889%{opacity:0.000}4.444%{opacity:0.000}5%{opacity:0.000}5.556%{opacity:0.000}6.111%{opacity:0.000}6.667%{opacity:0.000}7.222%{opacity:0.000}7.778%{opacity:0.000}8.333%{opacity:0.000}8.889%{opacity:0.000}9.444%{opacity:0.000}10%{opacity:0.000}10.556%{opacity:0.000}11.111%{opacity:0.000}11.667%{opacity:0.000}12.222%{opacity:0.000}12.778%{opacity:0.000}13.333%{opacity:0.000}13.889%{opacity:0.000}14.444%{opacity:0.000}15%{opacity:0.000}15.556%{opacity:0.000}16.111%{opacity:0.000}16.667%{opacity:0.000}17.222%{opacity:0.000}17.778%{opacity:0.000}18.333%{opacity:0.000}18.889%{opacity:0.000}19.444%{opacity:0.000}20%{opacity:0.000}20.556%{opacity:0.000}21.111%{opacity:0.000}21.667%{opacity:0.016}22.222%{opacity:0.203}22.778%{opacity:0.508}23.333%{opacity:0.811}23.889%{opacity:0.989}24.444%{opacity:1.000}25%{opacity:1.000}25.556%{opacity:1.000}26.111%{opacity:0.989}26.667%{opacity:0.811}27.222%{opacity:0.508}27.778%{opacity:0.203}28.333%{opacity:0.016}28.889%{opacity:0.000}29.444%{opacity:0.000}30%{opacity:0.000}30.556%{opacity:0.000}31.111%{opacity:0.000}31.667%{opacity:0.000}32.222%{opacity:0.000}32.778%{opacity:0.000}33.333%{opacity:0.000}33.889%{opacity:0.000}34.444%{opacity:0.000}35%{opacity:0.000}35.556%{opacity:0.000}36.111%{opacity:0.000}36.667%{opacity:0.000}37.222%{opacity:0.000}37.778%{opacity:0.000}38.333%{opacity:0.000}38.889%{opacity:0.000}39.444%{opacity:0.000}40%{opacity:0.000}40.556%{opacity:0.000}41.111%{opacity:0.000}41.667%{opacity:0.000}42.222%{opacity:0.000}42.778%{opacity:0.000}43.333%{opacity:0.000}43.889%{opacity:0.000}44.444%{opacity:0.000}45%{opacity:0.000}45.556%{opacity:0.000}46.111%{opacity:0.000}46.667%{opacity:0.000}47.222%{opacity:0.000}47.778%{opacity:0.000}48.333%{opacity:0.000}48.889%{opacity:0.000}49.444%{opacity:0.000}50%{opacity:0.000}50.556%{opacity:0.000}51.111%{opacity:0.000}51.667%{opacity:0.000}52.222%{opacity:0.000}52.778%{opacity:0.000}53.333%{opacity:0.000}53.889%{opacity:0.000}54.444%{opacity:0.000}55%{opacity:0.000}55.556%{opacity:0.000}56.111%{opacity:0.000}56.667%{opacity:0.000}57.222%{opacity:0.000}57.778%{opacity:0.000}58.333%{opacity:0.000}58.889%{opacity:0.000}59.444%{opacity:0.000}60%{opacity:0.000}60.556%{opacity:0.000}61.111%{opacity:0.000}61.667%{opacity:0.000}62.222%{opacity:0.000}62.778%{opacity:0.000}63.333%{opacity:0.000}63.889%{opacity:0.000}64.444%{opacity:0.000}65%{opacity:0.000}65.556%{opacity:0.000}66.111%{opacity:0.000}66.667%{opacity:0.000}67.222%{opacity:0.000}67.778%{opacity:0.000}68.333%{opacity:0.000}68.889%{opacity:0.000}69.444%{opacity:0.000}70%{opacity:0.000}70.556%{opacity:0.000}71.111%{opacity:0.000}71.667%{opacity:0.016}72.222%{opacity:0.203}72.778%{opacity:0.508}73.333%{opacity:0.811}73.889%{opacity:0.989}74.444%{opacity:1.000}75%{opacity:1.000}75.556%{opacity:1.000}76.111%{opacity:0.989}76.667%{opacity:0.811}77.222%{opacity:0.508}77.778%{opacity:0.203}78.333%{opacity:0.016}78.889%{opacity:0.000}79.444%{opacity:0.000}80%{opacity:0.000}80.556%{opacity:0.000}81.111%{opacity:0.000}81.667%{opacity:0.000}82.222%{opacity:0.000}82.778%{opacity:0.000}83.333%{opacity:0.000}83.889%{opacity:0.000}84.444%{opacity:0.000}85%{opacity:0.000}85.556%{opacity:0.000}86.111%{opacity:0.000}86.667%{opacity:0.000}87.222%{opacity:0.000}87.778%{opacity:0.000}88.333%{opacity:0.000}88.889%{opacity:0.000}89.444%{opacity:0.000}90%{opacity:0.000}90.556%{opacity:0.000}91.111%{opacity:0.000}91.667%{opacity:0.000}92.222%{opacity:0.000}92.778%{opacity:0.000}93.333%{opacity:0.000}93.889%{opacity:0.000}94.444%{opacity:0.000}95%{opacity:0.000}95.556%{opacity:0.000}96.111%{opacity:0.000}96.667%{opacity:0.000}97.222%{opacity:0.000}97.778%{opacity:0.000}98.333%{opacity:0.000}98.889%{opacity:0.000}99.444%{opacity:0.000}100%{opacity:0.000}}
/* v12: glaset böjer det bakom en aning (gjutet glas), före suddningen. Bara där SVG-filter i backdrop-filter fungerar (Chromium);
   Safari (-webkit-touch-callout) och Firefox (-moz-appearance) spärras ute och behåller glaset utan warp. */
@supports (backdrop-filter:url(#gt-glas)) and (not (-webkit-touch-callout:none)) and (not (-moz-appearance:none)){
  .meny-panel>a,.meny-kod-knapp{backdrop-filter:url(#gt-glas) blur(4px) saturate(1.1) brightness(.82)}
}
.glas-filter{position:absolute;width:0;height:0;overflow:hidden}
.meny-kod-knapp{font-size:.88rem}
.meny[open] .meny-kod{animation:meny-kod-in 1.1s var(--ut) .35s both}
@keyframes meny-kod-in{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes meny-kod-in-m{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* framstegslinjen till vänster dras undan medan menyn är öppen, så att hörnet är helt lugnt */
html:has(.meny[open]) .framsteg{opacity:.12;transition:opacity .5s}
@media (max-width:899px){
  .meny-kod{position:static;transform:none;margin:22px 0 6px;gap:22px}
  .meny[open] .meny-kod{animation-name:meny-kod-in-m}
  .meny[open]::before{background:radial-gradient(120% 90% at 85% 10%,rgba(6,8,7,.5),rgba(6,8,7,.66))}
  .gt-skylt{width:96px}
}
@media (prefers-reduced-motion:reduce){.gt-snurr,.gt-snurr img.l,.gt-sida{animation:none}.gt-snurr{transform:rotateX(-8deg) rotateY(-24deg)}.meny[open] .meny-kod{animation:none}}
html:not(.ror) .gt-snurr{animation:none;transform:rotateX(-8deg) rotateY(-24deg)}
html:not(.ror) .gt-snurr img.l,html:not(.ror) .gt-sida{animation:none}

/* ---------- knapparna (v13, r19) ----------
   Samma kant som korten: en tunn ring ovanpå knappens kant där mint växer ut från punkten där pekaren kom in (--ex, --ey sätts i meny.js)
   och dras tillbaka mot punkten där den lämnade. In 1,3 s, ut 1,15 s. Knappens egen kant byter inte längre färg vid hovring.
   Gäller .knapp på alla sidor och Open i code-entry (.kod button); kodfältet i övrigt orört. */
.knapp{will-change:auto}
.knapp:hover{border-color:var(--ink-4)}
.kod button{position:relative}
.knapp::before,.kod button::before{content:"";position:absolute;inset:-1px;z-index:1;border-radius:inherit;padding:1px;pointer-events:none;
  background:radial-gradient(circle at var(--ex,50%) var(--ey,50%),rgba(134,220,182,.85) 0,rgba(134,220,182,.42) calc(var(--r)*.55),transparent var(--r));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:--r 1.15s cubic-bezier(.25,.7,.2,1)}
.knapp:hover::before,.knapp:focus-visible::before,.kod button:hover::before,.kod button:focus-visible::before{--r:190%;transition-duration:1.3s}
/* Do you have a code? i kortens glas: mörk ton, ljus som fångas uppifrån, korn utelämnat (för litet för att synas), samma suddning */
.meny-kod-knapp{border-color:transparent;
  background:linear-gradient(165deg,rgba(255,255,255,.035),rgba(255,255,255,0) 42%),linear-gradient(180deg,rgba(12,15,14,.46),rgba(6,8,7,.38));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.35),0 26px 54px -24px rgba(0,0,0,.78);
  -webkit-backdrop-filter:blur(4px) saturate(1.1) brightness(.82);backdrop-filter:blur(4px) saturate(1.1) brightness(.82)}
.meny-kod-knapp:hover{border-color:transparent;background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,0) 42%),linear-gradient(180deg,rgba(12,15,14,.46),rgba(6,8,7,.38))}
.meny-kod-knapp::before{background:
    radial-gradient(circle at var(--ex,50%) var(--ey,50%),rgba(134,220,182,.85) 0,rgba(134,220,182,.42) calc(var(--r)*.55),transparent var(--r)),
    linear-gradient(155deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 30%,rgba(255,255,255,.02) 62%,rgba(255,255,255,.07))}

/* R20: hela rekommendationen fälls ut (details, fungerar utan skript); samma röst och storlek som citatet, länken tyst som knapp-linje */
.citat-mer summary{list-style:none;display:inline-flex;align-items:center;min-height:44px;margin-top:14px;font-size:.86rem;color:var(--ink-2);cursor:pointer;background:linear-gradient(var(--ink-4),var(--ink-4)) 0 calc(100% - 10px)/100% 1px no-repeat;transition:color .4s}
.citat-mer summary::-webkit-details-marker{display:none}
.citat-mer summary:hover{color:var(--ink)}
.citat-mer .las-mindre,.citat-mer[open] .las-mer{display:none}
.citat-mer[open] .las-mindre{display:inline}
.citat-mer[open] summary{order:2}
.citat-mer[open]{display:flex;flex-direction:column;align-items:flex-start}
.citat-mer p{margin-top:.6em}
.citat-mer[open] p{animation:citat-in .7s var(--ut) both}
@keyframes citat-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.citat-mer[open] p{animation:none}}