/* ═══════════════════════════════════════════════════════════════════════════
   MARKNADSDEMOT — formatmallen

   Ramen är ett fönster och inte en bild. Skillnaden ligger i tre saker: en
   list med sidans egen adress i, en yta som är ljusare än panelen omkring,
   och att varje yta som går att trycka på ändrar sig när muspekaren står på
   den. Utan den tredje behandlas skärmen som en skärmdump.

   HÖJDEN ÄR SATT HÄR OCH INTE AV INNEHÅLLET. Skriptet är defer och fyller
   ramen efter första målningen; en ram som växer när den fylls hade skjutit
   ned resten av sidan. Måtten nedan rymmer det högsta läget (tre kort med
   kvitton över sig), och .mk-yta får rulla som skyddsnät om en översättning
   blir längre än den engelska.

   RÖRELSE. Bara opacity och transform, som resten av sajten.
   ═══════════════════════════════════════════════════════════════════════ */

[hidden]{display:none !important}

/* MÅTTET ÄR ETT MINIMUM OCH INTE EN HÖJD, och det är vilolägets mått.

   Skriptet är defer och bygger allt här inne efter första målningen. En tom
   ruta som växer till sin fulla storlek när skriptet kommer hade skjutit ned
   resten av sidan, och sajten ligger på CLS 0. Därför reserverar markupen
   precis så mycket som viloläget tar: rutan är lika stor före och efter att
   skriptet fyllt den, och ingenting flyttar sig.

   NÄR BESÖKAREN TRYCKER VÄXER DEN, och det är i sin ordning. En förändring
   som följer inom en halv sekund på ett tryck räknas inte som en förskjutning,
   och alternativet var värre: ett fönster låst vid sin högsta höjd hade dels
   stått med fyrahundra pixlar luft i viloläget, dels fått rulla inuti sig
   självt på telefon, mitt i en karusell som redan äger svepet.

   FÖNSTRET TAR DET SOM BLIR ÖVER. Noten under det bryter på olika många rader
   i fyra språk, och med flex tar .mk resten: luften i viloläget hamnar inne i
   fönstret i stället för som en remsa under det. */
.mkd{position:relative;display:flex;flex-direction:column;margin-top:.85rem;
  min-height:715px;border-radius:16px}
/* Bara innan skriptet fyllt den. Efteråt bär .mk sin egen ram och noten sin
   vita botten, och gradienten hade lyst igenom under noten. */
.mkd:empty{border:1px solid var(--line);background:
  radial-gradient(300px 200px at 15% 110%, rgba(79,195,255,.2), transparent 60%),
  radial-gradient(300px 200px at 85% -10%, rgba(127,176,255,.15), transparent 60%),
  #eaeff9}

.mk{position:relative;flex:1;min-height:0;display:flex;overflow:hidden;
  border:1px solid var(--line);border-radius:16px;background:#e9eef9;
  box-shadow:0 22px 50px -44px rgba(10,24,84,.6)}

/* FÖNSTERLISTEN ÄR BORTA sedan den 5 september 2026. Demot satt i en ritad
   webbläsare med tre grå prickar och en adressrad, och den läste som en bild
   av ett program i stället för som programmet. Ramen kommer nu ur
   css/systemskal.css: systemets egen sidomeny, dess menyrader och dess
   sidrubrik. Tipsraden flyttade med dit och heter .sk-tips. */

/* ── Ytan och panelen ──────────────────────────────────────────────────── */
/* HOPKRYMPNING 6 september 2026. Kortets padding bär både marknads- och
   receptionsdemot, och den var satt för en panel som fick ta ett helt fönster. */
.mk-panel{background:#fff;border:1px solid var(--line2);border-radius:12px;
  padding:clamp(.5rem,1.1vw,.68rem)}

.mk-huvud{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.5rem;margin-bottom:.45rem}
.mk-rubgrupp{display:grid;gap:.15rem;min-width:0}
.mk-rub{font-family:var(--display);font-size:.98rem;font-weight:600;
  letter-spacing:-.01em;color:var(--text);margin:0}
/* Regeln inläggen skrivs under, ordagrant ur produktens egen planLimits. Den
   står här och inte i noten under fönstret, för den är ett svar på den första
   frågan en mäklare ställer: varifrån kommer texten. */
.mk-portfolj{font-size:.68rem;line-height:1.5;color:var(--faint);max-width:64ch}
/* FYLLD INNAN NÅGOT ÄR SKRIVET, tonad efteråt. Knappen var vit med blå ram
   och läste som en sekundär åtgärd bredvid en rubrik, alltså precis tvärtom
   mot vad den är: den är det enda man ska göra på skärmen tills något står
   där. data-forsta sätts av demot och bara i viloläget. */
.mk-gen{position:relative;font-size:.76rem;font-weight:650;color:var(--g2);
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:.4rem .85rem;cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s}
.mk-gen[data-forsta]{color:#fff;background:#1c3f9e;border-color:#1c3f9e;
  padding:.5rem 1.05rem;font-size:.8rem}
.mk-gen[data-forsta]:hover{background:var(--g2);border-color:var(--g2)}
.mk-gen:hover:not([aria-disabled="true"]){border-color:rgba(92,141,255,.55);background:rgba(92,141,255,.07)}
.mk-gen:active:not([aria-disabled="true"]){transform:translateY(1px)}
.mk-gen[aria-disabled="true"]{color:var(--faint);cursor:default}
.mk-gen:focus-visible,.mk-flik:focus-visible,.mk-s:focus-visible,.mk-vkn:focus-visible,
.mk-pub:focus-visible,.mk-sidpil:focus-visible,.mk-lada-v:focus-visible,
.mk-lank:focus-visible{outline:2px solid var(--g3);outline-offset:2px}

/* ── Talen ────────────────────────────────────────────────────────────────
   Tre rutor i rad, som i förlagan. Talet i serif och stort: det är det ögat
   ska ta först, och det är den enda plats på skärmen där ett tal får vara
   större än en rubrik. */
.mk-tal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;
  margin-bottom:.5rem}
.mk-tal-r{display:grid;gap:.05rem;padding:.45rem .55rem;border:1px solid var(--line2);
  border-radius:9px;background:#fbfcff}
.mk-tal-r b{font-family:var(--display);font-size:1.24rem;font-weight:600;
  line-height:1.1;color:var(--g2)}
.mk-tal-r span{font-size:.68rem;font-weight:600;color:var(--text)}
.mk-tal-r small{font-size:.62rem;color:var(--faint);line-height:1.35}

/* ── Arbetsloggen ──────────────────────────────────────────────────────────
   Höjden är låst till fyra rader medan teamet arbetar och till en när det är
   klart. Elva rader stående kvar hade tryckt korten ur ramen, och den sista
   raden är ändå den enda som säger vad som blev gjort. */
.mk-logg{display:flex;flex-direction:column;justify-content:flex-end;gap:.18rem;
  overflow:hidden;margin-bottom:.6rem;padding:.45rem .55rem;
  background:rgba(42,85,200,.04);border-radius:8px;min-height:26px}
.mk-logg-r{display:flex;align-items:flex-start;gap:.4rem;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.6rem;line-height:1.5;
  color:var(--faint);animation:mk-in .34s var(--ease-solutra,ease) both}
.mk-logg-b{flex:none;color:#2f7d4a;margin-top:.08rem}
.mk-logg-r--nu{color:var(--g2)}
.mk-ring{flex:none;width:11px;height:11px;margin-top:.15rem;border-radius:50%;
  border:2px solid rgba(42,85,200,.2);border-top-color:var(--g3);
  animation:mk-snurr .8s linear infinite}
@keyframes mk-snurr{to{transform:rotate(360deg)}}
@keyframes mk-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ── Flikarna ──────────────────────────────────────────────────────────── */
.mk-flikar{display:flex;flex-wrap:wrap;gap:.2rem;
  border-bottom:1px solid var(--line2);margin-bottom:.6rem}
.mk-flik{position:relative;display:flex;align-items:center;gap:.35rem;
  font-size:.74rem;font-weight:600;color:var(--faint);background:none;border:0;
  border-bottom:2px solid transparent;padding:.4rem .55rem;margin-bottom:-1px;
  cursor:pointer;transition:color .2s,border-color .2s}
.mk-flik:hover{color:var(--g2)}
.mk-flik.on{color:var(--g2);border-bottom-color:var(--g3)}
.mk-flik em{font-style:normal;color:var(--faint);font-weight:600}

/* ── Kvittona ──────────────────────────────────────────────────────────── */
.mk-kvitton{display:grid;gap:.3rem;margin-bottom:.6rem}
.mk-kvitto{font-size:.74rem;font-weight:600;color:#1f6a41;
  background:rgba(47,125,74,.09);border-radius:7px;padding:.42rem .6rem;
  animation:mk-in .38s var(--ease-solutra,ease) both}

.mk-tomt{font-size:.78rem;color:var(--muted);line-height:1.55;padding:.6rem 0 .3rem}
/* Produktens tomtext säger att inget är skrivet än. Den här raden säger vad
   man ska göra åt det, och den är demots egen och inte produktens: därför
   står den i accentfärg med en list, så att den syns som en anvisning och
   inte läses som en rad ur systemet. */
.mk-borja{font-size:.8rem;line-height:1.6;color:var(--g2);font-weight:600;
  padding:.1rem 0 .6rem .8rem;border-left:2px solid rgba(92,141,255,.5);max-width:62ch}

/* Uppläsningsytan. Den ska höras och inte synas, och den får inte tas bort ur
   flödet med display:none: en yta som inte renderas läses inte heller upp. */
.mk-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* ── Korten ────────────────────────────────────────────────────────────────
   ETT KORT I TAGET, PÅ ALLA BREDDER. Tre kort bredvid varandra var förlagans
   uppställning och den kostade 457 pixlar per kort: texten blev sju rader i
   en tredjedels spalt, och ramen sprack med 116 pixlar. Ett kort i taget gör
   samma text till fyra rader bredvid bilden, och sifforna i flikarna säger
   ändå att det ligger tre i varje kanal.

   BLÄDDRINGEN ÄR KNAPPAR OCH INTE SCROLL. En vågrät rullyta inne i den
   vågräta invändningskarusellen slåss om samma svep på en telefon. */
.mk-korten{display:grid;gap:.7rem}
.mk-kort{display:flex;flex-direction:column;gap:.32rem;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:.6rem;
  transition:opacity .34s var(--ease-solutra,ease),transform .34s var(--ease-solutra,ease)}
.mk-kort:not(.mk-kort--pa){display:none}
.mk-kort-a,.mk-kort-b{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.mk-kort--ivag{opacity:0;transform:translateY(-16px)}
.mk-kort-h{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.mk-marke{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.55rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:.16rem .45rem}
.mk-marke--vinkel{color:var(--g2);border-color:rgba(92,141,255,.4);
  background:rgba(92,141,255,.07)}

.mk-bild{position:relative;overflow:hidden;border-radius:9px;
  height:124px;background:#dfe6f3}
.mk-scen{display:block;width:100%;height:100%;object-fit:cover}
.mk-defs{position:absolute;width:0;height:0;overflow:hidden}
.mk-krop{font-size:.6rem;color:var(--faint);line-height:1.4}

.mk-sprak{display:flex;flex-wrap:wrap;gap:.25rem}
.mk-s{font-size:.68rem;font-weight:600;color:var(--muted);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:.18rem .5rem;cursor:pointer;
  transition:border-color .2s,background .2s,color .2s}
.mk-s:hover{border-color:rgba(92,141,255,.5);color:var(--g2)}
.mk-s.on{background:rgba(92,141,255,.12);border-color:rgba(92,141,255,.45);color:var(--g2)}

.mk-txt{font-size:.78rem;line-height:1.55;color:var(--text);max-width:68ch}
textarea.mk-txt{width:100%;font-family:inherit;resize:vertical;
  border:1px solid rgba(92,141,255,.45);border-radius:8px;padding:.45rem .55rem;
  background:#fbfcff;color:var(--text)}
.mk-tagg{font-size:.72rem;color:var(--g2);line-height:1.45;word-break:break-word}
.mk-red{font-size:.68rem;color:var(--massing);font-weight:600}
.mk-tid{font-size:.68rem;color:var(--faint);
  padding-top:.35rem;border-top:1px solid var(--line2)}

.mk-verktyg{display:flex;flex-wrap:wrap;gap:.3rem}
.mk-vkn{display:inline-flex;align-items:center;gap:.28rem;
  font-size:.7rem;font-weight:600;color:var(--muted);background:#fff;
  border:1px solid var(--line);border-radius:7px;padding:.3rem .5rem;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s,transform .15s}
.mk-vkn:hover{border-color:rgba(92,141,255,.5);color:var(--g2);background:rgba(92,141,255,.05)}
.mk-vkn:active{transform:translateY(1px)}
.mk-vkn--pri{color:#fff;background:var(--g3);border-color:var(--g3)}
.mk-vkn--pri:hover{background:var(--g2);border-color:var(--g2);color:#fff}

.mk-pub{position:relative;margin-top:.15rem;width:100%;
  font-size:.76rem;font-weight:700;color:#fff;background:#1c3f9e;
  border:1px solid #1c3f9e;border-radius:9px;padding:.5rem .7rem;cursor:pointer;
  transition:background .2s,transform .15s}
.mk-pub:hover:not([aria-disabled="true"]){background:var(--g2)}
.mk-pub:active:not([aria-disabled="true"]){transform:translateY(1px)}
.mk-pub[aria-disabled="true"]{opacity:.6;cursor:default}

/* ── Fotoladan ─────────────────────────────────────────────────────────── */
.mk-lada{border:1px solid var(--line);border-radius:9px;padding:.5rem;
  background:#fbfcff;animation:mk-in .3s var(--ease-solutra,ease) both}
.mk-lada-h{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  margin-bottom:.4rem}
.mk-lada-h b{font-size:.7rem;font-weight:700;color:var(--text)}
.mk-lank{font-size:.68rem;font-weight:600;color:var(--g2);background:none;border:0;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.mk-lada-rad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}
.mk-lada-v{display:grid;gap:.2rem;padding:0;background:none;border:0;cursor:pointer}
.mk-lada-v .mk-scen{height:46px;border-radius:6px;
  border:2px solid transparent;transition:border-color .2s,transform .2s}
.mk-lada-v:hover .mk-scen{transform:translateY(-2px);border-color:rgba(92,141,255,.5)}
.mk-lada-v.on .mk-scen{border-color:var(--g3)}
.mk-lada-v span{font-size:.6rem;color:var(--faint)}
.mk-lada-v.on span{color:var(--g2);font-weight:650}

/* ── Bläddringen ───────────────────────────────────────────────────────── */
.mk-sidor{display:flex;align-items:center;justify-content:center;gap:.7rem;
  margin-top:.6rem}
.mk-sidpil{display:grid;place-items:center;width:30px;height:30px;flex:none;
  border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--g2);
  cursor:pointer;transition:border-color .2s,background .2s}
.mk-sidpil:hover{border-color:rgba(92,141,255,.5);background:rgba(92,141,255,.08)}
.mk-sidtal{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.65rem;
  color:var(--faint)}

.mk-fot{margin-top:.55rem;padding-top:.45rem;border-top:1px solid var(--line2);
  font-size:.68rem;line-height:1.5;color:var(--faint)}

/* Noten under fönstret. Samma roll som .pv-not: den säger vad demot är och
   vad det inte är, och den står utanför ramen för att den talar om skärmen
   och inte i den. */
.mk-not{flex:none;margin:.45rem 0 0;padding-top:.42rem;border-top:1px dashed var(--line);
  font-size:.74rem;line-height:1.55;color:var(--muted)}

/* ── Förhandsvisningen ────────────────────────────────────────────────────
   Vad som faktiskt gick ut. Kortet i listan är ett utkast med knappar; det
   här är inlägget, i kanalens egen form, och det är den enda bilden som visar
   att texten och fotot hör ihop. Det ligger stilla drygt en och en halv
   sekund och far sedan uppåt ur bild, samma rörelse som Instagramdemot hade.

   BAKGRUNDEN ÄR TONAD OCH INTE SVART. En svart platta mitt i en vit panel
   läser som en modal man måste stänga; den här ska läsa som att inlägget
   lyfts fram ur listan som ligger kvar under. */
/* BÅDA RÖRELSERNA ÄR ÖVERGÅNGAR, ingen är en keyframe. Intoningen var förut
   en animation med fill-mode both, och de hållna slutvärdena vinner över en
   klass som försöker ändra samma egenskaper: uttoningen hann aldrig hända,
   rutan stod stilla och försvann tvärt. Startläget ligger i .mk-forh--fore
   som tas bort på nästa bildruta, slutläget i --ivag.

   will-change ger rutan ett eget lager, så skalningen och genomskinligheten
   komponeras i stället för att måla om panelen bakom vid varje bildruta. Den
   sitter kvar hela rutans livstid, och det är två sekunder. */
.mk-forh{position:absolute;inset:0;z-index:4;display:grid;place-items:center;
  padding:.9rem;background:rgba(233,238,249,.82);
  will-change:opacity,transform;
  transition:opacity .34s var(--ease-solutra,ease),transform .34s var(--ease-solutra,ease)}
.mk-forh--fore{opacity:0;transform:translateY(12px) scale(.97)}
.mk-forh--ivag{opacity:0;transform:translateY(-30px) scale(.93);
  transition-duration:.38s}

.mk-ig,.mk-li{width:min(330px,100%);max-height:100%;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 26px 60px -34px rgba(10,24,84,.6)}
.mk-li{width:min(400px,100%)}
.mk-ig-h,.mk-li-h{display:flex;align-items:center;gap:.55rem;padding:.6rem .7rem}
.mk-ig-a,.mk-li-a{flex:none;display:grid;place-items:center;width:30px;height:30px;
  border-radius:50%;font-size:.62rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--g2),var(--g4))}
.mk-li-a{border-radius:7px}
.mk-ig-n{display:grid;gap:.05rem;min-width:0}
.mk-ig-n b{font-size:.78rem;font-weight:700;color:var(--text);line-height:1.2}
.mk-ig-n small{font-size:.66rem;color:var(--faint);line-height:1.2}
/* Instagram visar kvadratiskt, LinkedIn liggande. Kortet i listan påstår det
   i en rad text; här görs det. */
.mk-ig-b{aspect-ratio:1/1;background:#dfe6f3}
.mk-li-b{aspect-ratio:1.91/1;background:#dfe6f3}
.mk-ig-foto{display:block;width:100%;height:100%;object-fit:cover}
.mk-ig-ik{display:flex;gap:.85rem;padding:.55rem .7rem .1rem;color:var(--text)}
.mk-ig-txt,.mk-li-txt{padding:.35rem .7rem 0;font-size:.76rem;line-height:1.5;color:var(--text)}
.mk-ig-txt b{font-weight:700}
.mk-li-txt{padding-top:.1rem}
.mk-forh .mk-ig-tagg{padding:.25rem .7rem 0;font-size:.72rem;color:var(--g2);line-height:1.4}
.mk-ig-tid{display:block;padding:.4rem .7rem .7rem;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.56rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

/* ── Pulsen ────────────────────────────────────────────────────────────────
   Ringen ligger på nästa steg och bara där, och den slocknar så fort
   besökaren tryckt en gång. Ren transform och opacity, och den försvinner
   helt vid reducerad rörelse: en ring som pulsar för alltid är en banner. */
.mk-pulsar::before,.mk-pulsar::after{content:"";position:absolute;inset:-3px;
  border-radius:inherit;border:2px solid var(--g3);opacity:0;pointer-events:none;
  animation:mk-puls 1.9s var(--ease-solutra,ease) infinite}
/* TVÅ RINGAR, den andra en dryg sekund efter den första. En ensam ring hann
   bli osynlig innan nästa kom, och pausen läste som att något var klart. Två
   gör den till en jämn blinkning som ögat fångar i utkanten av synfältet. */
.mk-pulsar::after{animation-delay:1.05s}
@keyframes mk-puls{
  0%{opacity:.85;transform:scale(1)}
  65%{opacity:0;transform:scale(1.11)}
  100%{opacity:0;transform:scale(1.11)}}

@media(min-width:760px){
  /* Vilolägets mått, uppmätt i den bredd panelen faktiskt får, efter
     komprimeringen: 800 px vid 294, 529 vid 808, 467 vid 1005. Reserven
     ligger strax över det uppmätta i varje spann, aldrig under: för mycket
     ger luft, för lite ger en förskjutning när skriptet fyller rutan. */
  .mkd{min-height:525px}
  /* Bilden till vänster om texten. Under den här bredden ligger de på
     varandra, och kortet blir dubbelt så högt. */
  .mk-kort{display:grid;grid-template-columns:minmax(0,232px) minmax(0,1fr);
    gap:.4rem .9rem;align-items:start}
  .mk-bild{height:116px}
}

@media(min-width:1000px){ .mkd{min-height:455px} }

@media(prefers-reduced-motion:reduce){
  .mk-pulsar::before,.mk-pulsar::after{display:none}
  .mk-forh{transition:none}
  .mk-logg-r,.mk-kvitto,.mk-lada{animation:none}
  .mk-ring{animation:none;border-top-color:rgba(42,85,200,.2)}
  .mk-kort{transition:none}
}