/* ==========================================================================
   JMS 10 — ett stilark. Varumärkesidentitet 3.0.

   Ersätter tokens.css, components.css, jms6-design.css och jms9.css.
   Laddas efter fonts.css och jms6-grund.css. Grunden (grammatiken: data-steg,
   pennan, ritningen) stannar som egen genererad fil och läser --font-sans härifrån.

   Byggregler för den här filen:
   · Varje token har ETT värde på ETT ställe. Ingen definieras om längre ner.
   · Ingen !important utom mot Elementors egna regler, och då står det varför.
   · Ingen hårdkodad färg utanför :root. Grått är grått via --n-*.
   · Två brytpunkter: 640 (telefon) och 900 (platta). Inte elva.
   · Inget @layer. Det degraderar pluginet under tema och kit.

   Namnen i :root är ett kontrakt. PHP skriver --jms5-btn-primary-bg-user,
   --jms5-accent-base, --penna, --jms5-ghost, --jms5-photo-sat och
   --jms5-fw-content inline; jms6-grund läser --font-sans; byggaren läser
   --n-*, --text, --ease och --jms5-white. Alla 97 namn något läser finns kvar.
   Mätt 12 september 2026, se verktyg/tackning.py och jms10/tokenkontrakt.txt.
   ========================================================================== */


/* ============================================================ A. TOKENS */
:root{
  /* --- Gråskalan: Apples sex steg. Steg 6 närmast papperet. ------------ */
  --n-00:#FFFFFF; --n-01:#F5F5F7; --n-02:#E5E5EA; --n-03:#D1D1D6;
  --n-04:#C7C7CC; --n-05:#AEAEB2; --n-06:#8E8E93; --n-07:#636366;
  --n-08:#48484A; --n-09:#3A3A3C; --n-10:#2C2C2E; --n-11:#1C1C1E; --n-12:#000000;

  /* --- Rollerna ------------------------------------------------------- */
  --ink:#1D1D1F;                      /* bläck. all primär text */
  --text:var(--ink);
  --text-muted:#6E6E73;               /* enda gråtonen som bär text på ljust */
  --text-ingress:#8E8E93;             /* bläck 3. BARA stor halvfet text: 21 px/500
                                         räknas som stor text och klarar 3:1 (3,5:1).
                                         Apple kör #86868B på samma plats, 3,4:1. */
  --text-svag:var(--text-muted);
  --line:rgba(60,60,67,.18);          /* 0,5 px med alfa. aldrig 1 px solid */
  --line-mork:rgba(84,84,88,.48);
  --bg:var(--n-01);
  --surface:var(--n-00);
  --surface-2:var(--n-01);
  --grafit:#3A3A3C;                   /* blyerts */

  /* --- Handling: en färg, mätt till 6,87:1 mot vitt --------------------- */
  --handling:#1F4BD8;
  --handling-ljus:#6E8CFF;            /* text på mörkt, aldrig knappyta */
  --handling-yta:rgba(31,75,216,.075);
  --jms5-cta:var(--handling);
  --jms5-cta-base:var(--handling);
  --jms5-cta-fg:#FFFFFF;
  --jms5-cta-hover:#17379F;
  --jms5-accent:var(--handling);
  --jms5-accent-mark:var(--handling);
  --jms5-accent-text:var(--handling);
  --jms5-accent-ink:var(--handling);
  --jms5-accent-hover:var(--jms5-cta-hover);
  --jms5-accent-soft:var(--handling-yta);

  /* --- Systemfärgerna: diagram och pennor, ingenting annat ------------- */
  --acc-blue:#1F4BD8;  --acc-orange:#C55300; --acc-teal:#008198;
  --acc-purple:#B02FC2; --acc-green:#008932; --acc-brown:#956D51;
  --acc-red:#E9152D;   --acc-yellow:#A16A00; --acc-mint:#008575;
  --acc-cyan:#007EAE;  --acc-indigo:#564ADE; --acc-pink:#E7124D;
  --p-lansera:#1F4BD8; --p-vaxa:#34C759; --p-effekt:#FFCC00;

  /* --- Gamla namn som fortfarande läses. Pekar på rollerna ovan. -------- */
  --jms5-black-100:var(--n-02); --jms5-black-300:var(--n-06);
  --jms5-black-400:var(--text-muted); --jms5-black-500:var(--text-muted);
  --jms5-black-700:var(--n-11); --jms5-black-800:var(--ink); --jms5-black-900:var(--ink);
  --jms5-brand-teal:var(--handling);  /* var länkfärgen. länkar bär handling */
  --jms5-ebony:var(--n-11);
  --jms5-porcelain:var(--n-01);
  --jms5-surface-breeze:var(--n-02); --jms5-ziggurat:var(--n-03);
  --jms5-iron:var(--n-03); --jms5-heather:var(--n-05);
  --jms5-white:#FFFFFF;
  /* namn designlagret läste med fallback. nu definierade en gång. */
  --lank:var(--handling); --markor:var(--handling);
  /* Gränssnittets fyllningar och statusytor, hämtade ur jms-3.0-granssnitt.html.
     Observera skillnaden mellan YTA och TON: ytan är Apples systemfärg med
     låg alfa, tonen är den mörkare varianten som klarar kontrastkravet. */
  --fyll:rgba(120,120,128,.12); --fyll2:rgba(120,120,128,.08);
  --ok:#008932;   --ok-yta:rgba(52,199,89,.13);
  --varn:#C55300; --varn-yta:rgba(255,141,40,.13);
  --fel:#E9152D;  --fel-yta:rgba(255,56,60,.11);
  --tint:rgba(31,75,216,.075);
  --matt-bredd:var(--jms5-content-width); --matt-sido:var(--gutter);
  --yta-ljus:var(--n-01); --linje:var(--line);

  /* --- Typsnitten ----------------------------------------------------- */
  --font-sans:"helvetica-neue-lt-pro",'Helvetica Neue','Helvetica Now Text',Helvetica,Arial,sans-serif;
  --font-display:'Neue Haas Display',"neue-haas-grotesk-display",'Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:'SF Mono',ui-monospace,Menlo,Consolas,monospace;
  --jms5-font-text:var(--font-sans);
  --jms5-font-sans:var(--font-sans);
  --jms5-font-display:var(--font-display);
  --jms5-font-mono:var(--font-mono);

  /* --- Skalan. Mätt mot apple.com 12 sep 2026. ------------------------- */
  --fs-display:clamp(40px,5.6vw,82px);
  --fs-h2:clamp(31px,3.9vw,54px);
  --fs-h3:clamp(23px,2.2vw,29px);
  --fs-h4:16px;
  --fs-body:17px;
  --fs-caption:14px;
  --jms5-text-sm:.875rem;
  --jms5-text-2xl:2.25rem;
  --fw-roman:400; --fw-medium:500; --fw-display:500;
  --lh-display:1.05; --lh-heading:1.06; --lh-title:1.14; --lh-body:1.52;   /* guiden 1,55 · apple.com uppmätt 1,47 */
  --ls-display:-.015em; --ls-h2:-.008em; --ls-h3:-.006em;
  --ls-body:-.021em; --ls-btn:-.012em; --ws-display:0;

  /* --- Rummet ----------------------------------------------------------- */
  --jms5-content-width:1220px;
  --jms5-prose-width:660px;           /* cirka 68 tecken */
  --gutter:clamp(22px,5vw,72px);
  --jms6-luft:clamp(84px,10vw,144px);
  --jms6-luft-stor:clamp(104px,14vw,200px);
  --jms5-space-2:8px;  --jms5-space-3:12px; --jms5-space-4:16px; --jms5-space-5:24px;
  --jms5-space-6:32px; --jms5-space-7:48px; --jms5-space-8:64px; --jms5-space-9:96px;
  --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --r-pill:980px; --r-yta:20px;
  --jms5-radius-md:16px; --jms5-radius-lg:24px; --jms5-radius-xl:28px;
  --jms5-radius-full:var(--r-pill);

  /* --- Rörelsen ---------------------------------------------------------- */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --kurva:var(--ease-out);
  --jms5-ease-standard:var(--ease);

  /* --- Glas. Mätt på apple.com: piller 7 px/72 %, navigering 20 px/80 %. -- */
  --glas-piller:rgba(232,232,237,.72);
  --glas-nav:rgba(255,255,255,.80);
  --glas-ring:#E6E6E8;

  --jms5-check-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.7 6.7 12 12.6 4.8' fill='none' stroke='%231D1D1F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ========================================================== B. BASLAGRET
   Gäller allt som ligger i ett jms-block. Skrivet en gång. */

/* B1. Nollställning inne i blocken. Temat och Elementor sätter marginaler
   och listmarkörer som blocken aldrig vill ha. */
.elementor-widget[class*="elementor-widget-jms5-"] [class*="jms5-"]{
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
[class*="jms5-"] :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,blockquote){margin:0}
[class*="jms5-"] :where(ul,ol){list-style:none;padding:0}
[class*="jms5-"] :where(img,svg,video){display:block;max-width:100%}
/* Betoning i löpande text. Två grepp, olika jobb: fetstil pekar ut ordet
   som bär meningen och lyfts till bläck ur den dova brödtexten, kursiv
   markerar det som ställs mot något annat och byter bara lutning. Ett
   grepp per mening. Font Awesome kapar <i> och undantas. */
[class*="jms5-"] :where(strong,b){font-weight:var(--fw-medium);color:var(--ink)}
[class*="jms5-"] :where(em,i):where(:not([class*="fa-"])){font-style:italic}
/* Ingen kursiv i rubrik: Neue Haas Display har ingen kursiv skärning, så
   webbläsaren lutar bokstäverna själv och det syns. Rubriker betonar med
   --heading-ton i stället. */
[class*="jms5-"] :where(h1,h2,h3,h4) :where(em,i){font-style:normal}
/* box-sizing på ALLT i ett block, inte bara på sektionerna. Annars blir
   min-height innehållets höjd och en knapp med 12 px luft blir 68 px i
   stället för 44 — det hände i heroförslaget 13 sep. */
[class*="jms5-"],[class*="jms5-"] *{box-sizing:border-box}
/* Kitet sätter line-height:1.6em på body: em räknas EN gång mot 16 px och
   ärvs som 25,6 px absolut. Ett tal ärvs som förhållande. Mätt 23 aug. */
/* Grundtypsnittet. jms10 satte tidigare familjen bara inne i jms5-block, så
   markup utanför dem föll till webbläsarens serif. Hero-förslaget 13 sep. */
body{font-family:var(--font-sans);color:var(--ink)}
body[class*="elementor-kit-"]{line-height:var(--lh-body)}
/* Elementors figure-reset väger 0,4,1. Samma vikt, senare i ordningen. */
.elementor .elementor-widget [class*="jms5-"] figure[class*="jms5-"]{margin:0 0 var(--jms6-figurluft,0)}

/* B2. Typografin. Två snitt, två vikter. Storleken sätts här, en gång,
   och blocken ärver den. Rubriken har ingen etikett ovanför sig.
   Vikten 0,2,0: Elementors kit sätter storlek och färg på h1–h6, p och
   button med .elementor-kit-N (0,1,1), oavsett laddningsordning. Kitet rör
   inte p och li; de stannar på 0,1,0 så blocken kan sätta egen storlek. Prefixet
   :is(kit,html) väger lika mycket överallt, även i galleriet utan kit.
   Ett block som behöver en annan rubrikstorlek sätter kroken --rubrik. */
[class*="jms5-"],
[class*="jms5-"] :where(*:not(svg):not(svg *):not([class*="fa-"])){
  font-family:var(--font-sans);
}
:is([class*="elementor-kit-"],html) [class*="jms5-"] :where(h1,h2,h3){
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  color:var(--ink);
  text-wrap:balance;
}
:is([class*="elementor-kit-"],html) [class*="jms5-"] :where(h1){font-size:var(--rubrik,var(--fs-display));line-height:var(--lh-display);letter-spacing:var(--ls-display)}
:is([class*="elementor-kit-"],html) [class*="jms5-"] :where(h2){font-size:var(--rubrik,var(--fs-h2));line-height:var(--lh-heading);letter-spacing:var(--ls-h2)}
:is([class*="elementor-kit-"],html) [class*="jms5-"] :where(h3){font-size:var(--rubrik,var(--fs-h3));line-height:var(--lh-title);letter-spacing:var(--ls-h3)}
:is([class*="elementor-kit-"],html) [class*="jms5-"] :where(h4,h5,h6){font-size:var(--rubrik,var(--fs-h4));line-height:1.35;letter-spacing:-.008em;font-weight:var(--fw-medium);color:var(--ink)}
/* TEXTFÄRGEN. Guidens tabell säger "Bläck — all primär text", men mätt på
   apple.com/se/macbook-air 13 sep 2026 är den vanligaste brödtextfärgen
   #86868B, alltså LJUSARE än vår Bläck 2. Bläck används där bara för korta
   bärande rader. Johan såg samma sak: ren bläcktext i löpande text blir
   tung.

   Uppdelningen blir därför efter textens ROLL, inte efter taggen:
     bläck      det korta som bär: ingress, löftesrad, ledtext
     bläck 2    allt annat: brödtext, citat, svar, marginalnot, bildtext
   Två nivåer räcker. Apples egen ljusare ton klarar inte kontrastgolvet,
   så Bläck 2 bär både prosan och det som stödjer. */
[class*="jms5-"] :where(p,li){
  font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);
  color:var(--text-muted);
}
/* Det korta som bär står i bläck. */
[class*="jms5-"] :is(.jms5-hero-ing,.jms5-hero-sub,.jms5-behov-txt-p,
  .jms5-raknamed-text,.jms5-inline-cta-copy strong){color:var(--ink)}
/* Ingressen efter rubriken står ett steg ljusare. Rubriken bär, ingressen
   förklarar, och i bläck konkurrerade de om samma uppmärksamhet. Mätt på
   apple.com/se/macbook-air: deras sektionsingress är #86868B, 21/600, och
   bläck är där reserverat för rubriker. */
[class*="jms5-"] :is(.jms5-behov-intro,.jms5-sechead-text,.jms5-process-intro,
  .jms5-resa-intro,.jms5-katalog-intro,.jms5-programs-intro,.jms5-contact-body,
  .jms5-tabs-intro,.jms5-faq-intro,.jms5-team-intro,.jms5-omraden-intro,
  .jms5-cta-final-svar p,.jms5-problem-intro p,.jms5-mcircle-header p){
  font-weight:var(--fw-medium);color:var(--text-ingress)}
/* Det som stödjer står ett steg till ned. */
[class*="jms5-"] :is(.jms5-eyebrow,.jms5-behov-kat,.jms5-kallrad,.jms5-crumb-lista,
  .jms5-crumb-lista > li,.jms5-omrade-kat,.jms5-omrade-ingar,
  .jms5-paket-matt,.jms5-falt-hjalp,
  .jms5-skelett-vad,.jms5-status-text,.jms5-team-roll,.jms5-voice-vem span,
  .jms5-logos-label,.jms5-taggar-label,.jms5-tabs-panel-eyebrow,.jms5-programs-eyebrow,
  .jms5-program-card-cat,.jms5-faq-item-cat,.jms5-tom-text,.jms5-resa-par dt,
  .jms5-contact-steg--not,.jms5-process-namn b,.jms5-resa-fas b,.jms5-kat-nr,
  .jms5-vag-nr,.jms5-stege-steg,.jms5-mcircle-steps > li > span,
  small,figcaption){color:var(--text-muted)}
/* Två nivåer, inte tre. Apples #86868B ger 3,4:1 mot vitt och klarar inte
   guidens golv på 4,5:1 för text. Bläck 2 ger 5,1:1 och gör samma jobb. */
[class*="jms5-"] :where(p,li) :where(strong,b){color:var(--ink)}
[class*="jms5-"] :where(small,figcaption,[class*="caption"],[class*="kallrad"]){
  font-size:var(--fs-caption);line-height:1.5;letter-spacing:0;color:var(--text-muted);
}
/* Kitets knappyta (svart, 4 px) gäller inte kontroller i blocken. */
:is([class*="elementor-kit-"],html) [class*="jms5-"] :where(button){background:none;border:0;border-radius:0;padding:0;color:inherit;font:inherit;letter-spacing:inherit;box-shadow:none}
/* Tvåtonsrubriken: andra delen i tonad gråton, egen rad. */
[class*="jms5-"] .jms5-heading-ton{color:var(--text-muted);font-weight:inherit;display:block}
/* En span, strong eller penna i en rubrik byter aldrig typsnitt mitt i meningen. */
[class*="jms5-"] :is(h1,h2,h3,h4) :is(span,b,strong,em,i,mark,a){font-family:inherit;font-weight:inherit;letter-spacing:inherit}
/* Noten och rubriken bär EN luft. Rubriken äger den. */
[class*="jms5-"] :is(h1,h2,h3):where(:not(:first-child)){margin-top:16px}
[class*="jms5-"] .jms5-hero-text h1{margin-top:20px}

/* B3. Marginalnoten. Gemener, brödtextens storlek, ingen spärr, ingen
   versal. Den finns i två lägen och inga andra: heron namnger vad sidan
   handlar om (som Apple sätter produktnamnet över rubriken), och kapitlet
   markerar en del i en lång text. En etikett som upprepar rubriken under
   sig är en form utan innehåll — se jms_eyebrow() i basklassen.
   (Aldrig [class*="-kat"] som selektor: det träffar hela katalogen.) */
[class*="jms5-"] :is(.jms5-eyebrow,.jms5-behov-kat){
  display:block;width:fit-content;margin-bottom:0;
  font-family:var(--font-sans);font-size:16px;font-weight:var(--fw-roman);
  line-height:1.5;letter-spacing:0;text-transform:none;
  color:var(--text-muted);background:none;border:0;padding:0;
}

/* B4. Länkar bär handlingsfärgen. Understrykning bara vid hover. */
[class*="jms5-"] a:where(:not([class*="btn"])):where(:not([class*="jmsh"])){
  color:var(--handling);text-decoration:none;
  transition:color .2s var(--ease);
}
[class*="jms5-"] a:where(:not([class*="btn"])):hover{
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
}
[class*="jms5-"] :where(h1,h2,h3,h4) a{color:inherit;text-decoration:none}
[class*="jms5-"] :where(a,button,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--handling);outline-offset:3px;border-radius:6px;
}

/* B5. Knapparna. Måtten är gränssnittsguidens: piller 980, 12 px lodrätt
   och 24 px vågrätt, 16 px i Regular, spärr −0,012 em, ikonavstånd 9 px,
   minst 44 px hög. Rörelsen är opacitet 90 % och skala 1,02 — ingen skugga
   som växer, ingen färg som byts.

   GLASET: masterguidelinen säger glas på det man kan trycka på, och
   gränssnittsguiden ritar den sekundära som en tonad fyllning. Båda har
   rätt i sitt sammanhang — glas behöver något att bryta. Därför: tonad
   fyllning på papper, glas när knappen ligger på foto eller mörk yta. */
[class*="jms5-"] :is(a,button).jms5-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:12px 24px;border:0;border-radius:var(--r-pill);
  font-family:var(--font-sans);font-size:16px;font-weight:var(--fw-roman);
  line-height:1.25;letter-spacing:-.012em;text-align:center;text-decoration:none;
  /* En knapp radbryter aldrig. I en smal spalt krympte den anonyma flexdelen
     under sitt innehåll och knappen blev 68 px hög i stället för 44. */
  white-space:nowrap;
  cursor:pointer;box-shadow:none;
  transition:opacity .2s var(--ease),transform .25s cubic-bezier(.2,.8,.2,1),background .2s var(--ease);
}
[class*="jms5-"] :is(a,button).jms5-btn:hover{opacity:.9;transform:scale(1.02);text-decoration:none}
[class*="jms5-"] :is(a,button).jms5-btn:active{transform:scale(.99)}
[class*="jms5-"] :is(a,button).jms5-btn:focus-visible{outline:2px solid var(--handling);outline-offset:3px}
[class*="jms5-"] :is(a,button).jms5-btn:is(:disabled,[aria-disabled="true"]){opacity:.4;pointer-events:none;transform:none}

/* Primär. Läser Elementors inline-variabler om blocket sätter en egen. */
[class*="jms5-"] :is(a,button).jms5-btn-primary{
  background:var(--jms5-btn-primary-bg-user,var(--jms5-cta,var(--handling)));
  color:var(--jms5-btn-primary-fg-user,#fff);
}
[class*="jms5-"] :is(a,button).jms5-btn-primary:hover{
  background:var(--jms5-btn-primary-hover-user,var(--jms5-cta-hover,var(--handling)));
}
/* GLASPILLRET. Receptet är guidens, inte mitt minne av Apple:
   jms-3.0-ikoner-illustrationer.html, klassen .pill som visas på foto.
       bakgrund   rgba(14,14,18,.30)
       filter     blur(18px) saturate(1.45) brightness(1.03)
       ringar     inset .5px rgba(255,255,255,.34) runt om
                  inset .5px rgba(255,255,255,.50) längs ÖVERKANTEN
       skugga     0 10px 24px -12px rgba(0,0,0,.45)
       text       alltid vit
   Den övre ljusa linjen är gradientkanten — det är den som gör att pillret
   läser som material och inte som en grå platta. Mörkt glas fungerar på både
   ljust och mörkt foto, för filtret mörknar underlaget innan det suddas.
   Bara på foto. På papper är sekundärknappen en tonad fyllning. */
[class*="jms5-"] :is(a,button).jms5-btn-glas{
  gap:10px;padding:11px 20px 11px 16px;color:#fff;border:0;
  /* Tätheten är en ratt. Guidens 30 % räcker när pillret ligger på motiv
     eller på en toning; på en NÄSTAN VIT yta behöver vit text mer för att
     nå 7:1, och då sätts --glas-tathet till .62. Mätt mot bildens verkliga
     pixlar, inte mot en gissning. */
  background:rgba(14,14,18,var(--glas-tathet,.30));
  -webkit-backdrop-filter:blur(18px) saturate(1.45) brightness(1.03);
  backdrop-filter:blur(18px) saturate(1.45) brightness(1.03);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.34),
             inset 0 .5px 0 rgba(255,255,255,.5),
             0 10px 24px -12px rgba(0,0,0,.45);
}
[class*="jms5-"] :is(a,button).jms5-btn-glas:hover{background:rgba(14,14,18,calc(var(--glas-tathet,.30) + .08));color:#fff}
/* Tätt glas: när pillret ligger på en ljus, jämn yta. */
[class*="jms5-"] :is(a,button).jms5-btn-glas--tat{--glas-tathet:.62}

/* UNDERSTRUKEN TEXT som sekundär. När primären är fylld i handlingsfärgen
   ska sekundären INTE vara blå — två blå konkurrerar om samma klick. Den
   här bär heroens egen ton: bläck på ljust, vitt på mörkt. Understrykningen
   sitter 4 px under baslinjen och är en hårlinje, inte en ram. */
[class*="jms5-"] :is(a,button).jms5-btn-understruken{
  background:none;padding:12px 4px;color:var(--ton,var(--ink));
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:color-mix(in srgb,currentColor 42%,transparent);
  transition:text-decoration-color .18s var(--ease),opacity .2s var(--ease)}
[class*="jms5-"] :is(a,button).jms5-btn-understruken:hover{
  text-decoration-color:currentColor;opacity:1;transform:none}

/* Sekundär på papper: tonad fyllning. */
[class*="jms5-"] :is(a,button).jms5-btn-secondary{
  background:var(--jms5-btn-secondary-bg-user,var(--fyll));
  color:var(--jms5-btn-secondary-fg-user,var(--ink));
}
/* Text med chevron. Nio av dessa på varje fylld knapp. */
[class*="jms5-"] :is(a,button).jms5-btn-text{
  background:transparent;color:var(--handling);padding:12px 6px;min-height:44px}
/* Destruktiv. Bekräftelse krävs bara när det inte går att ångra. */
[class*="jms5-"] :is(a,button).jms5-btn-destruktiv{background:var(--fel);color:#fff}

/* Blocket kan sätta en egen handlingsfärg via Elementors inline-variabel. */
.elementor-widget[class*="elementor-widget-jms5-"]{--jms5-cta:var(--jms5-accent-base,var(--handling))}

/* B6. Foto. Rundat, aldrig ram, aldrig skugga. Behandlingen är fotoguidens,
   inte v8:s: mättnad cirka 90 procent och kontrast upp en aning i
   mellantonerna. v8:s gråskala (--jms5-photo-sat 0,14, som basklassen
   fortfarande skriver inline) läses inte längre. */
[class*="jms5-"] img{filter:saturate(.9) contrast(1.04)}
[class*="jms5-"] :is(.jms5-illustration,svg) img,[class*="jms5-"] img[class*="logo"]{filter:none}
.jms5-photo-placeholder{
  position:relative;overflow:hidden;width:100%;
  aspect-ratio:4/5;border-radius:var(--jms5-radius-lg);
  background:var(--n-01);
}
.jms5-photo-placeholder.jms5-photo--wide{aspect-ratio:16/10}
.jms5-photo-placeholder img{width:100%;height:100%;object-fit:cover}
.jms5-photo-placeholder:not(.jms5-photo--has-image)::before{
  content:"Foto";position:absolute;inset:0;display:grid;place-items:center;
  font-size:14px;color:var(--text-muted);
}
.jms5-illustration{display:block;width:100%;height:auto;max-width:460px;mix-blend-mode:multiply}

/* B7. Bredd, läge och storlek. Elementors kontroller på wrappern. */
.elementor-element.jms5-width--fullwidth,.elementor-widget.jms5-width--fullwidth,
.elementor-element.jms5-width--full,.elementor-widget.jms5-width--full,
.elementor-element.jms5-width--band,.elementor-widget.jms5-width--band{
  width:100% !important;max-width:100% !important;position:relative !important;
  left:0 !important;margin-left:0 !important;margin-right:0 !important;transform:none !important;
}
/* !important ovan: Elementor sätter dessa inline på kolumnen. */
:is(.elementor-element,.elementor-widget):is(.jms5-width--fullwidth,.jms5-width--full,.jms5-width--band) > .elementor-widget-container{
  padding:0;width:100%;max-width:100%;
}
:is(.elementor-element,.elementor-widget):is(.jms5-width--fullwidth,.jms5-width--full,.jms5-width--band) > :is(.elementor-widget-container > [class*="jms5-"],[class*="jms5-"]){
  box-sizing:border-box;max-width:none;border-radius:0;
  width:var(--jms5-bleed-w,100%);margin-left:var(--jms5-bleed-ml,0);margin-right:0;
  padding-left:max(var(--gutter),calc((var(--jms5-bleed-w,100%) - var(--jms5-fw-content,var(--jms5-content-width))) / 2));
  padding-right:max(var(--gutter),calc((var(--jms5-bleed-w,100%) - var(--jms5-fw-content,var(--jms5-content-width))) / 2));
}
/* hidden, inte clip: overflow-x:clip på body ärvs till vyporten och Chromium
   slutar måla allt under första skärmen (tjänstesidan 12 sep: vit under heron). */
body:has(.jms5-width--fullwidth),body:has(.jms5-width--full),body:has(.jms5-width--band),body:has(.jms5-hero-with-photo){overflow-x:hidden}
.jms5-width--narrow{--jms5-content-width:900px}
.jms5-align--left :where([class*="-header"],[class*="-intro"],[class*="-inner"],.jms5-hero-text){margin-left:0;margin-right:0;text-align:left}

/* B8. Ytorna. Papper är utgångsläget. */
.jms5-bg--mist,.jms5-bg--canvas{background:var(--n-01)}
.jms5-bg--bla{background:var(--handling-yta)}
.jms5-bg--signal{background:var(--n-01)}
/* Mörk yta: bläck som botten. Rollerna vänds LOKALT. Ingen ambient glöd.
   Knappen står direkt på ytan, i samma blå som överallt. */
.jms5-bg--ink,.jms5-cta-final--mork{
  /* Bokstavligt värde: --ink vänds två rader ner, och en egenskap som
     läser var(--ink) på samma element får det VÄNDA värdet. */
  --bg-mork:#1D1D1F;
  background:var(--bg-mork);color:#F5F5F7;
  --ink:#F5F5F7;--text:#F5F5F7;--text-muted:#98989D;--text-svag:#98989D;--text-ingress:#98989D;
  --line:var(--line-mork);
  --jms5-black-500:#98989D;--jms5-black-900:#F5F5F7;
  --n-01:#2C2C2E;--n-02:#3A3A3C;--n-03:#48484A;
}
:is(.jms5-bg--ink,.jms5-cta-final--mork) :where(h1,h2,h3,h4){color:#fff}
:is(.jms5-bg--ink,.jms5-cta-final--mork) .jms5-heading-ton{color:#98989D}
/* Knappen står direkt på det mörka. Glas behöver något att bryta (ett
   foto); på en jämn yta läses ett glaspiller som en tjock grå ram. Samma
   blå som överallt: en handlingsfärg, ljus som mörk botten. */
:is(.jms5-bg--ink,.jms5-cta-final--mork) :is([class*="-actions"],[class*="-buttons"]){display:flex;flex-wrap:wrap;align-items:center;gap:12px}
:is(.jms5-bg--ink,.jms5-cta-final--mork) :is(a,button).jms5-btn-primary{background:var(--handling);color:#fff;box-shadow:none}
:is(.jms5-bg--ink,.jms5-cta-final--mork) :is(a,button).jms5-btn-primary:hover{background:var(--handling-ljus)}
:is(.jms5-bg--ink,.jms5-cta-final--mork) :is(a,button).jms5-btn-secondary{background:rgba(255,255,255,.12);color:#fff}
:is(.jms5-bg--ink,.jms5-cta-final--mork) :is(a,button).jms5-btn-secondary:hover{background:rgba(255,255,255,.18)}
:is(.jms5-bg--ink,.jms5-cta-final--mork) :is(a,button).jms5-btn-secondary:hover{background:rgba(255,255,255,.18)}

/* B9. Spökglyfen. Kapitelsiffran bakom innehållet. */
.jms5-har-glyf{position:relative;isolation:isolate}
.jms5-har-glyf::before{
  content:var(--jms5-ghost,"");position:absolute;top:0;inset-inline-start:0;z-index:0;
  font-family:var(--font-display);font-weight:var(--fw-medium);
  font-size:clamp(120px,17vw,260px);line-height:.8;color:var(--n-02);
  pointer-events:none;user-select:none;
}
.jms5-har-glyf > *{position:relative;z-index:1}
:is(.jms5-bg--ink,.jms5-cta-final--mork).jms5-har-glyf::before{color:#2C2C2E}

/* B10. Småsaker som återkommer. */
:where(.jms5-ikon){display:inline-block;vertical-align:-.125em;flex:0 0 auto}
svg.jms5-ikon path[stroke]{stroke:currentColor;fill:none}
.jms5-proof-stars{display:flex;gap:2px}
.jms5-proof-stars svg,.jms5-proof-stars svg path{fill:var(--n-04);color:var(--n-04)}
.jms5-proof-text{font-size:var(--fs-caption);color:var(--text-muted)}
.jms5-avatar-stack{display:flex}
.jms5-avatar-stack .jms5-avatar{
  width:36px;height:36px;border-radius:50%;margin-left:-10px;
  border:2px solid var(--surface);background:var(--n-02);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:12px;
}
.jms5-avatar-stack .jms5-avatar:first-child{margin-left:0}
[class*="jms5-"] i.fa-check::before{
  content:"";display:inline-block;width:1em;height:1em;background:currentColor;
  -webkit-mask:var(--jms5-check-svg) center/contain no-repeat;mask:var(--jms5-check-svg) center/contain no-repeat;
}
[class*="jms5-"] :where(i[class*="fa-"]){font-family:"Font Awesome 6 Pro","Font Awesome 6 Free";font-weight:300;font-style:normal;line-height:1}

/* B11. Rörelsen ägs av jms6-grund.css (skärpa på data-steg och data-serie).
   Här bara det som avviker: fotot skärps långsammare än texten, så rörelsen
   läses som ett fokus och inte som en övertoning. */
@media (prefers-reduced-motion:no-preference){
  html.jms6-redo .jms5-photo-placeholder[data-steg]{filter:blur(16px);transform:scale(1.04);
    transition:opacity .9s var(--ease-out) var(--d,0ms),filter 1.5s var(--ease-out) var(--d,0ms),transform 1.5s var(--ease-out) var(--d,0ms)}
  html.jms6-redo .jms6-syns .jms5-photo-placeholder[data-steg]{filter:none;transform:none}
}
body.elementor-editor-active [data-steg],body.elementor-editor-preview [data-steg]{opacity:1;filter:none;transform:none}

/* B12. Navigeringen. Rå HTML i post 733, utanför blocken, men det enda
   som svävar över innehållet: därför glas, mätt på Apples egen. */
.elementor-location-header,.elementor-location-header > .elementor-element{
  background-color:var(--glas-nav) !important;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 0 0 1px var(--glas-ring);
}
/* !important ovan: Elementor sätter headerns bakgrund inline via post-css. */
a.jmsh-cta[class],.jmsh-cta[class]{
  background:var(--handling) !important;color:#fff !important;border-radius:var(--r-pill) !important;
}
a.jmsh-cta[class]:hover{background:var(--jms5-cta-hover) !important}
/* Menyns egna gråtoner är v6:as (#83828F och #5C5B69) och ligger i postens
   egen CSS, alltså utanför pluginet. De väger mer än en enkel klass, så
   rollerna skrivs om med [class] för att nå samma vikt. */
:is(.jmsh-mega__eyebrow,.jmsh-mob__group)[class],[class*="jmsh-"] small[class],
[class*="jmsh-"] small{color:var(--text-ingress)}
.jmsh-mega__note[class],[class*="jmsh-"] p[class*="note"]{color:var(--text-muted)}
:is(.jmsh-mega__link,.jmsh-mob__link)[class] small{color:var(--text-ingress) !important}
/* Klassen sitter ibland på länken och ibland på behållaren, och postens
   egen CSS sätter dessutom a{color:inherit}. Båda formerna måste därför
   skrivas ut, annars ärver länken den gamla tonen från sin förälder. */
/* !important här: postens egen CSS skriver färgen med !important, och den
   ligger utanför pluginet. Regeln tas bort den dag sidhuvudet och foten
   flyttas in i blocken. */
.jmsh-mob__meta[class],.jmsh-mob__meta[class] a{color:var(--text-muted) !important}
/* Foten är också rå HTML, i post 734, med samma gamla gråtoner. */
.jmsf__list[class],.jmsf__list[class] a,.jmsf__tag[class]{color:var(--text-muted) !important}
.jmsf__list[class] a:hover,a.jmsf__list[class]:hover{color:var(--ink) !important}
.jmsf__copy[class]{color:var(--text-ingress)}

/* B13. Sidans mått. Varje block har en -inner som centrerar. */
[class*="jms5-"] > :is([class*="-inner"],.jms5-sechead-text-col,.jms5-programs-header,.jms5-programs-grid){
  max-width:var(--jms5-content-width);margin-inline:auto;
  padding-inline:var(--gutter);box-sizing:border-box;
}
section[class*="jms5-"]{padding-block:var(--jms6-luft)}
/* Sektionen går kant till kant, innehållet står på 1220 i mitten. Elementors
   behållare (1180) släpps för varje jms-block, annars läses sidan som rutor. */
.elementor-container:has(> .elementor-column :is(section[class*="jms5-"],.jms5-hero-with-photo,.jms5-inline-cta,.jms5-crumb)){max-width:none}
.elementor-widget-wrap:has(> .elementor-element :is(section[class*="jms5-"],.jms5-hero-with-photo,.jms5-inline-cta,.jms5-crumb)){padding-inline:0;padding-block:0}
/* En sektionsöppning är rubriken till blocket under, inte ett eget block. */
.jms5-sechead{padding-block:var(--jms6-luft) 0}
.elementor-element:has(> .elementor-widget-container > .jms5-sechead) + .elementor-element > .elementor-widget-container > section[class*="jms5-"]{
  padding-top:clamp(30px,3.1vw,44px)}

/* B15. Punktlistan.

   Raden bärs av en ikon, inte av ett streck. Ikonen är Font Awesome Pro
   Light, guidens egen ikonvikt, som legat i pluginet sedan i somras utan
   att någonsin köas. Den skrivs som ett attribut på raden:

       <li data-ikon="&#xf135;">Nytt företag</li>

   så listan går att skriva i Elementor utan SVG i texten. Fonten laddas
   bara för det privata teckenområdet, se unicode-range i fonts.css.

   Radens anatomi: ikon 18 px i bläck på en 26 px spalt, texten 16/1,5,
   12 px mellan raderna. Ikonen är optiskt centrerad mot versalhöjden i
   första raden. <b> i en rad lyfter ordet, se B2. */
.jms5-punkter{list-style:none;margin:18px 0 0;padding:0;max-width:46ch;display:grid;gap:12px}
.jms5-punkter > li{position:relative;padding-left:26px;
  font-size:16px;line-height:1.5;letter-spacing:var(--ls-body);color:var(--ink)}
.jms5-punkter > li::before{content:attr(data-ikon);position:absolute;left:0;top:0;
  font-family:'Font Awesome 6 Pro';font-weight:300;font-style:normal;font-size:18px;line-height:1.34;
  color:var(--ikon-ton,var(--ink))}

/* Tät: i ett kort eller en smal spalt, där raden är ett begrepp. */
.jms5-punkter--tat{gap:10px}
.jms5-punkter--tat > li{padding-left:25px;font-size:15px}
.jms5-punkter--tat > li::before{font-size:17px;line-height:1.36}

/* Ikonen i handlingsfärg. För listor som är vägar in, inte innehåll. */
.jms5-punkter--bla{--ikon-ton:var(--handling)}
/* Ikonen tyst. För långa listor där ikonerna annars blir ett mönster. */
.jms5-punkter--tyst{--ikon-ton:var(--n-06)}

/* En enda hårlinje över listan, mellan rubrikdelen och raderna. Linjer
   MELLAN rader gör listan till en tabell; en linje över den skiljer bara
   löftet från innehållet. */
.jms5-punkter--linje{border-top:.5px solid var(--line);padding-top:16px}   /* tillval */

/* Två spalter när listan är lång och raderna korta. */
.jms5-punkter--tva{grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(24px,3vw,44px);max-width:none}
@media (max-width:700px){.jms5-punkter--tva{grid-template-columns:1fr}}

/* På mörk yta står ikonen i papper, som texten. */
:is(.jms5-bg--ink,.jms5-cta-final--mork) .jms5-punkter{--ikon-ton:#F5F5F7}

/* B14. Skrivaren. */
@media print{
  [class*="jms5-"] *{opacity:1 !important;filter:none !important;transform:none !important;
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
}


/* ============================================================ C. BLOCKEN
   Ett avsnitt per block, i den ordning de ligger på startsidan. Varje
   avsnitt bär bara blockets EGEN geometri. Typografi, färg, luft och knappar
   kommer från B och upprepas inte. Måtten är designlagrets, uppmätta mot
   skissen 23 aug 2026 och behållna. */

/* C1. HERO. Rutnät 1,06/0,94: textspalten bredare än fotot. */
.jms5-hero-with-photo,.jms5-hero{
  max-width:var(--jms5-content-width);margin-inline:auto;
  padding-block:var(--jms6-luft);padding-inline:var(--gutter);box-sizing:border-box;
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,5vw,84px);align-items:start;
}
.jms5-hero:not(.jms5-hero-with-photo){grid-template-columns:1fr}
.jms5-hero-sub{font-size:clamp(18px,1.5vw,21px);line-height:1.45;max-width:56ch;margin-top:clamp(20px,1.8vw,26px)}
.jms5-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,2.8vw,40px)}
.jms5-hero-proof{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;
  margin-top:clamp(28px,2.9vw,42px);padding-top:22px;border-top:.5px solid var(--line);max-width:56ch;
}
.jms5-proof-text{display:flex;flex-direction:column;gap:5px;font-size:var(--fs-caption);line-height:1.5}
.jms5-avatar-stack .jms5-avatar{width:38px;height:38px;font-size:11.5px;letter-spacing:.03em;line-height:1;font-weight:var(--fw-medium)}
.jms5-avatar-stack .jms5-avatar + .jms5-avatar{margin-left:-7px}
.jms5-avatar-stack .jms5-avatar:nth-child(1){z-index:4}.jms5-avatar-stack .jms5-avatar:nth-child(2){z-index:3}
.jms5-avatar-stack .jms5-avatar:nth-child(3){z-index:2}.jms5-avatar-stack .jms5-avatar:nth-child(4){z-index:1}
@media (max-width:900px){.jms5-hero-with-photo{grid-template-columns:1fr}}
@media (max-width:640px){
  .jms5-hero-actions .jms5-btn{width:100%}
  .jms5-hero-proof{grid-template-columns:1fr;gap:12px;max-width:none}
}

/* C2. PROBLEM. Hårlinjerader: citatet .44, förklaringen .56. */
.jms5-problem-intro{max-width:none}
.jms5-problem-intro h2{max-width:26ch}
.jms5-problem-intro p{font-size:clamp(18px,1.5vw,21px);line-height:1.45;max-width:56ch;margin-top:18px;
  font-weight:var(--fw-medium)}
.jms5-problem-rader{margin-top:clamp(34px,4vw,58px);border-top:.5px solid var(--line)}
.jms5-problem-rad{
  display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);gap:clamp(18px,3vw,52px);
  align-items:start;padding:clamp(22px,2.2vw,32px) 0;border-bottom:.5px solid var(--line);
}
.jms5-problem-cit{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(20px,1.9vw,25px);
  line-height:1.24;letter-spacing:-.018em;color:var(--ink)}
.jms5-problem-text{max-width:64ch}
.jms5-problem-lank{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(26px,2.6vw,38px);font-weight:var(--fw-medium);font-size:16px}
@media (max-width:900px){.jms5-problem-rad{grid-template-columns:1fr;gap:10px}}

/* C3. ERBJUDANDET SOM TRE KORT.
   Mätt på apple.com/se/mac 13 sep 2026 (.ProductTile). Tre saker där som
   löser exakt det som saknades:

   1. KORTET ÄR INGEN RUTA. Ingen bakgrund, ingen ram, ingen radie, ingen
      padding. Det är fotot som har ytan; resten står på papper.
   2. FASTA RADER. Kortets huvud är ett rutnät med låsta radhöjder
      (Apple: 292 / 38 / 56 px). Därför börjar namn, text och knapp på
      exakt samma linje i alla kort, oavsett hur lång texten är. Det var
      det som saknades när kolumnerna inte kändes i balans.
   3. FOTEN ÄR EN KNAPP PLUS EN LÄNK. Apple har ett fyllt piller ("Läs
      mer") och en textlänk ("Köp ›") med 34 px mellan sig. Inte en ensam
      blå textrad.

   Vi avviker på en punkt: Apple har fyra fyllda blå piller i samma rad.
   Vår guide har ett CTA per sida, och det ägs av avslutet. Kortens knapp
   är därför sekundär i ton men samma form. Den syns, den konkurrerar inte.

   Punktlistan är borttagen. Bocken betyder "ingår, är gjort" i vårt
   formspråk, och de fyra raderna var varken det eller något att välja.
   De var dekoration. Apple har ingen lista alls på kortet: bild, namn,
   en rad i Medium, pris. Detaljen kommer på nästa sida. */
.jms5-behov-header{max-width:66ch}
.jms5-behov-intro{font-size:clamp(18px,1.5vw,21px);line-height:1.45;max-width:56ch;margin-top:20px;
  font-weight:var(--fw-medium);color:var(--text-ingress)}
.jms5-behov-lista{display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:clamp(26px,3.4vw,52px);row-gap:0;margin-top:clamp(44px,5vw,72px);
  /* foto · namn · löfte · lista · knapp. Kategorin är borttagen: den sa
     samma sak som löftesraden, och tre textnivåer före listan var en för
     mycket. Raden med 1fr är listan, så knappen hamnar i linje mellan
     kort med olika många rader. */
  grid-template-rows:auto auto auto 1fr auto}
.jms5-behov-kort{display:grid;grid-template-rows:subgrid;grid-row:span 5;min-width:0}
@supports not (grid-template-rows:subgrid){
  .jms5-behov-lista{grid-template-rows:none;row-gap:clamp(38px,4vw,60px)}
  .jms5-behov-kort{display:flex;flex-direction:column}
  .jms5-behov-cta{margin-top:auto}
}
/* Äldre markup (och allt som redan ligger sparat i Elementor) har ett
   mellanlager .jms5-behov-txt mellan kortet och raderna. Subgrid kräver
   att kortets barn ÄR raderna, så lagret görs genomskinligt för rutnätet
   i stället för att kräva att varje sida byggs om. */
.jms5-behov-txt{display:contents}
.jms5-behov-foto{margin:0 0 22px}
.jms5-behov-foto img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--jms5-radius-lg)}
.jms5-behov-kat{display:none}   /* renderas inte längre, se widgets/behov.php */
[class*="jms5-"] .jms5-behov-namn{--rubrik:clamp(26px,2.1vw,31px);margin:0 0 12px;line-height:1.14;letter-spacing:-.026em}
/* Raden under namnet bär löftet och står i Medium, som Apples tagline. */
/* Löftesraden är två rader i alla tre korten. text-wrap:balance delar
   dem jämnt i stället för att lämna ett ensamt ord sist. */
.jms5-behov-txt-p{font-size:17px;line-height:1.5;font-weight:var(--fw-medium);
  max-width:27ch;text-wrap:balance;margin:0}
/* Det som ingår: punktlistan ur B15 i tätt läge, med EN hårlinje över
   raderna. Linjen skiljer löftet från innehållet, precis som i kortets
   förebild; raderna själva har inga linjer. */
/* Ingen linje. Ikonerna gör redan raderna till en lista, och linjen blev
   en tredje vågrät kant i ett kort som redan har foto och knapp. Luften
   över listan skiljer löftet från innehållet i stället. */
.jms5-behov-rader{list-style:none;margin:24px 0 0;padding:0;max-width:32ch;
  display:grid;gap:10px}
.jms5-behov-rad{position:relative;margin:0;padding:0 0 0 25px;list-style:none;
  font-size:15px;line-height:1.5;color:var(--ink)}
.jms5-behov-rad::before{content:attr(data-ikon);position:absolute;left:0;top:0;
  font-family:'Font Awesome 6 Pro';font-weight:300;font-style:normal;font-size:17px;line-height:1.36;
  color:var(--ink)}
.jms5-behov-rad .jms6-form{display:none}
.jms5-behov-radtxt{display:inline}
/* Foten: piller plus textlänk, 34 px mellan dem som hos Apple. */
/* En handling per kort. Apple har två, men vår guide säger ett CTA per
   sida och kortet är inte platsen att låna ett till. */
.jms5-behov-cta{display:flex;align-items:center;margin-top:clamp(22px,2.2vw,30px)}
[class*="jms5-"] .jms5-behov-cta a{text-decoration:none}
@media (max-width:900px){
  .jms5-behov-lista{grid-template-columns:1fr;grid-template-rows:none;row-gap:clamp(40px,5vw,64px)}
  .jms5-behov-kort{display:flex;flex-direction:column;grid-row:auto}
  .jms5-behov-txt-p,.jms5-behov-rader{max-width:none}
}

/* Erbjudanderaderna på tjänstesidorna får samma behandling: raden är inte
   en ruta, men den slutar med en knapp i stället för att bara stå där. */
.jms5-paketrad{grid-template-columns:minmax(0,1fr) auto auto auto}
.jms5-paketrad .jms5-btn{margin-left:8px}

/* C4. BILD + TEXT. Två spalter: påstående och bild vänster, text höger. */
/* Spalterna börjar på SAMMA linje. Luften efter rubriken låg tidigare på
   fotot, så texten startade högre än bildens överkant och raden läste som
   två lösa block i stället för ett uppslag. Luften hör till raden, inte
   till en av dess spalter. */
.jms5-imgtext-rad{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);
  align-items:start;margin-top:clamp(30px,3.6vw,52px)}
.jms5-imgtext-title{max-width:22ch}
.jms5-imgtext-media{margin-top:0;padding:0;border:0;background:none}
/* Textspalten börjar i fotots överkant, inte i dess första textrad: ett
   stycke har en liten optisk indragning uppåt som en bildkant inte har. */
.jms5-imgtext-text > :first-child{margin-top:-.18em}
.jms5-imgtext-media--foto{aspect-ratio:3/2;overflow:hidden;border-radius:var(--jms5-radius-lg);background:var(--n-01)}
.jms5-imgtext-media--foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.jms5-imgtext-media .jms5-illustration{max-width:620px}
.jms5-imgtext-text p{max-width:64ch}
.jms5-imgtext-text p + p{margin-top:18px}
.jms5-imgtext-lank{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(20px,1.8vw,26px);font-weight:var(--fw-medium);font-size:16px;line-height:1}
@media (max-width:900px){.jms5-imgtext-rad{grid-template-columns:1fr;gap:clamp(24px,2.4vw,34px)}.jms5-imgtext-title{max-width:none}}

/* C5. METODCIRKELN. Ritningen .46, listan .54. Blyerts, grafit. */
.jms5-mcircle-header{max-width:none}
.jms5-mcircle-header h2{max-width:26ch}
.jms5-mcircle-header p{font-size:clamp(18px,1.5vw,21px);line-height:1.45;max-width:56ch;margin-top:18px}
.jms5-mcircle-body{display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);gap:clamp(34px,5vw,76px);align-items:start;margin-top:clamp(40px,5.1vw,74px)}
.jms5-mcircle-svg{width:100%;height:auto;color:var(--grafit)}
.jms5-mcircle-svg .r-linje{stroke:var(--grafit);stroke-width:1.5;stroke-opacity:.92}
.jms5-mcircle-svg .r-punkt circle{fill:var(--surface);stroke:var(--grafit);stroke-width:1.4;transition:fill .5s var(--ease-out),stroke .5s var(--ease-out)}
.jms5-mcircle-svg .r-punkt circle.jms6-tand{fill:var(--handling);stroke:var(--handling)}
.jms5-mcircle-svg .r-namn{font-family:var(--font-sans);font-size:13px;font-weight:var(--fw-roman);letter-spacing:0;fill:var(--text-muted)}
.jms5-mcircle-svg .jms6-svep{stroke:var(--handling);stroke-opacity:.5}
.jms5-mcircle-steps{position:relative;border-top:.5px solid var(--line)}
.jms5-mcircle-steps > li{display:grid;grid-template-columns:30px 1fr;gap:16px;align-items:baseline;padding:14px 0;border-bottom:.5px solid var(--line)}
.jms5-mcircle-steps > li > b{font-family:var(--font-sans);font-weight:var(--fw-roman);font-size:14px;line-height:1.7;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--text-muted)}
.jms5-mcircle-steps > li > span{font-size:16px;line-height:1.5;color:var(--text-muted)}
.jms5-mcircle-steps strong{color:var(--ink)}
.jms5-mcircle-note{font-size:16px;line-height:1.5;max-width:60ch;margin-top:clamp(26px,2.6vw,38px)}
@media (max-width:900px){.jms5-mcircle-body{grid-template-columns:1fr;gap:clamp(28px,2.8vw,40px)}.jms5-mcircle-svg{max-width:420px;margin-inline:auto}}

/* C6. VAD DU KAN RÄKNA MED. Löftet till vänster, villkoren som bocklista
   till höger. Bocken betyder ingår. Inga streck: tre påståenden, ingen tabell. */
.jms5-raknamed{background:var(--n-01)}
.jms5-raknamed-rad{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.jms5-raknamed-lista > li:first-child{margin-top:-.18em}
.jms5-raknamed-title{max-width:22ch}
.jms5-raknamed-text{max-width:56ch;margin-top:20px}
.jms5-raknamed-lista::before,.jms5-raknamed-lista > li::after{display:none}
.jms5-raknamed-lista > li{padding:0;font-size:25px;align-items:flex-start}
.jms5-raknamed-lista > li + li{margin-top:32px}
.jms5-raknamed-lista > li > span{display:flex;flex-direction:column;gap:12px}
.jms5-raknamed-lofte-namn{font-family:var(--font-display);font-weight:var(--fw-medium);color:var(--ink);font-size:25px;line-height:1.24;letter-spacing:-.018em}
.jms5-raknamed-lofte-text{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--text-muted)}
.jms5-raknamed .jms6-form--bock{color:var(--handling)}
@media (max-width:900px){.jms5-raknamed-rad{grid-template-columns:1fr;gap:clamp(26px,2.5vw,36px)}.jms5-raknamed-title{max-width:none}}

/* C7. KUNDRÖSTER. Ett spår som snäpper. Korten på tonad yta, ingen ram. */
.jms5-voices-inner{display:grid;row-gap:clamp(34px,4vw,58px);justify-items:start}
.jms5-voices-title{max-width:26ch}
.jms6-karusell{position:relative;width:100%;max-width:100%;min-width:0}
.jms6-karusell-spar{display:flex;flex-wrap:nowrap;min-width:0;gap:clamp(18px,2.4vw,34px);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding-block:2px}
.jms6-karusell-spar::-webkit-scrollbar{display:none}
.jms6-karusell-spar > *{flex:0 0 auto;scroll-snap-align:start}
.jms6-karusell-spar:focus-visible{outline:2px solid var(--handling);outline-offset:4px}
.jms6-karusell-styr{display:flex;gap:8px;justify-content:flex-end;margin-bottom:18px;width:100%}
.jms6-karusell--statisk .jms6-karusell-styr{display:none}
[class*="jms5-"] .jms6-karusell-knapp{appearance:none;background:transparent;cursor:pointer;width:40px;height:40px;padding:0;margin:0;
  border:.5px solid var(--line);border-radius:50%;display:grid;place-items:center;box-shadow:none;color:var(--ink);
  transition:border-color .18s var(--ease),opacity .18s var(--ease)}
[class*="jms5-"] .jms6-karusell-knapp:hover:not(:disabled){border-color:var(--ink)}
[class*="jms5-"] .jms6-karusell-knapp:disabled{opacity:.28;cursor:default}
.jms6-karusell-knapp svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3}
.jms6-karusell-knapp[data-karusell="bak"] svg{transform:scaleX(-1)}
.jms5-voices--karusell .jms5-voice{
  width:min(430px,78vw);padding:clamp(26px,2.4vw,34px);border:0;border-radius:var(--jms5-radius-lg);background:var(--n-01);
  display:grid;grid-template-columns:1fr;gap:clamp(20px,1.8vw,26px);align-content:space-between;
}
.jms5-voice p{font-size:clamp(18px,1.65vw,22px);line-height:1.45;letter-spacing:-.014em;color:var(--ink);max-width:none}
.jms5-voice footer,.jms5-voice p:has(> .jms5-voice-platta){display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.jms5-voice-platta{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--n-02);
  font-size:11.5px;font-weight:var(--fw-medium);letter-spacing:.03em;line-height:1;color:var(--ink)}
.jms5-voice-vem{display:flex;flex-direction:column;gap:2px;line-height:1.4}
.jms5-voice-vem b{font-size:15px;color:var(--ink)}
.jms5-voice-vem span{font-size:14px;color:var(--text-muted)}
.jms5-voice-betyg{display:inline-flex;gap:2px;flex-basis:100%;margin-top:4px}
@media (prefers-reduced-motion:reduce){.jms6-karusell-spar{scroll-behavior:auto}}

/* C8. AVSLUTET. Vänster bär frågan, höger bär svaret och den enda åtgärden.
   Mörk yta och knapp på glas kommer från B8. */
.jms5-cta-final{padding-block:var(--jms6-luft-stor);text-align:left;position:relative;isolation:isolate}
.jms5-cta-final-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.jms5-cta-final-fraga h2{max-width:22ch}
.jms5-cta-final-svar p{font-size:clamp(18px,1.5vw,21px);line-height:1.45;max-width:56ch;margin-top:-.18em}
.jms5-cta-final-actions{margin-top:clamp(26px,2.8vw,40px)}
.jms5-cta-final:not(.jms5-cta-final--mork) .jms5-cta-final-actions{display:flex;flex-wrap:wrap;gap:12px}
.jms5-cta-final--ljus{background:var(--n-01)}
@media (max-width:900px){.jms5-cta-final-row{grid-template-columns:1fr;gap:clamp(20px,1.9vw,28px)}.jms5-cta-final-fraga h2{max-width:none}}

/* C9. LOGOTYPER. Etiketten över spåret är en not, inte en versal etikett. */
.jms5-logos--karusell .jms5-logo-item{padding-inline:clamp(10px,1.4vw,22px);min-width:clamp(130px,12.5vw,180px);display:grid;place-items:center}
.jms5-logos--karusell .jms5-logo-item img{max-height:38px;width:auto;height:auto;object-fit:contain;filter:none}
.jms5-logos-label{margin-bottom:22px}

/* C10. FLIKAR. Segmenterad kontroll: ljus piller, fylld bläckflik. Desktop.
   Under 900 är blocket ett dragspel och pillret vore fel komponent. */
.jms5-tabs-val{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.jms5-tabs-panel{display:none}
.jms5-tabs-val:checked + .jms5-tab-btn + .jms5-tabs-panel{display:grid}
@media (min-width:901px){
  /* Segmenterad kontroll, MÄTT på apple.com/se/iphone-duo 13 sep 2026
     (.tabnav-pill → .tabnav-platter → .tabnav-link → .tabnav-indicator):

       spår      44 px högt · radie 999 · #F5F5F7 · ram 4 px runt om
       segment   36 px högt · padding 0 16 · radie 999
       text      14/18 · vikt 400 · spärr −0,016 em
       vald      #1D1D1F som fyllning, vit text, FORTFARANDE vikt 400

     Mina tre fel förra gången: 16 px text i stället för 14, vikt 500 på den
     valda (Apple byter aldrig vikt — fyllningen gör hela jobbet), och ingen
     jämn ram: pillret låg dikt an mot spårets vänsterkant medan höger ände
     hade 25 px grått. Två radier som slåss läses som slarv.

     Apple har ett eget spårelement (.tabnav-platter). Vår markup är
     interfolierad radio-etikett-panel utan omslag, så spåret ritas av
     etiketterna själva: alla bär ytan, första och sista bär radien, och
     ramen kommer av att fyllningen är indragen 4 px — även i ändarna. */
  .jms5-tabs-maskin{--spar:44px;--ram:4px;
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0}
  .jms5-tabs-maskin::after{content:"";order:1;flex-basis:100%;height:0}

  .jms5-tab-btn{position:relative;isolation:isolate;order:0;
    display:inline-flex;align-items:center;height:var(--spar);padding:0 16px;
    background:var(--n-01);cursor:pointer;white-space:nowrap;
    font-size:14px;line-height:18px;font-weight:var(--fw-roman);letter-spacing:-.016em;
    color:var(--ink);transition:color .32s var(--ease-out)}
  .jms5-tab-btn:first-of-type{padding-left:calc(16px + var(--ram));border-radius:var(--r-pill) 0 0 var(--r-pill)}
  .jms5-tab-btn:last-of-type{padding-right:calc(16px + var(--ram));border-radius:0 var(--r-pill) var(--r-pill) 0}

  /* Fyllningen. Indragen 4 px lodrätt alltid, och vågrätt bara i ändarna —
     så ramen är lika bred hela vägen runt spåret. */
  .jms5-tab-btn::before{content:"";position:absolute;z-index:-1;
    inset:var(--ram) 0;border-radius:var(--r-pill);
    background:transparent;transition:background .32s var(--ease-out)}
  .jms5-tab-btn:first-of-type::before{left:var(--ram)}
  .jms5-tab-btn:last-of-type::before{right:var(--ram)}

  .jms5-tab-btn:hover::before{background:rgba(60,60,67,.06)}
  .jms5-tabs-val:checked + .jms5-tab-btn{color:#fff}
  .jms5-tabs-val:checked + .jms5-tab-btn::before{background:var(--ink)}
  .jms5-tabs-val:checked + .jms5-tab-btn:hover::before{background:var(--ink)}
  .jms5-tabs-val:focus-visible + .jms5-tab-btn{outline:2px solid var(--handling);outline-offset:3px;border-radius:var(--r-pill)}

  .jms5-tabs-panel{order:2;margin-top:clamp(30px,3.6vw,52px);width:100%;
    grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
}
@media (max-width:900px){
  .jms5-tabs-maskin{display:block;border-top:.5px solid var(--line)}
  .jms5-tab-btn{display:flex;width:100%;justify-content:space-between;align-items:center;padding:16px 0;cursor:pointer;
    border-bottom:.5px solid var(--line);font-size:17px;font-weight:var(--fw-medium);color:var(--ink)}
  .jms5-tab-btn::after{content:"+";font-weight:var(--fw-roman);color:var(--text-muted);transition:transform .25s var(--ease-out)}
  .jms5-tabs-val:checked + .jms5-tab-btn::after{transform:rotate(45deg)}
  .jms5-tabs-panel{padding:8px 0 24px;grid-template-columns:1fr;gap:clamp(20px,2.4vw,30px)}
  .jms5-tabs-panel-media{order:2}
}
.jms5-tabs-panel-eyebrow{display:block}
.jms5-tabs .jms5-tabs-title{--rubrik:clamp(23px,2.2vw,29px);margin-top:12px;max-width:24ch}
.jms5-tabs-text{margin-top:16px;max-width:60ch}
.jms5-tabs-text p + p{margin-top:16px}
.jms5-tabs-cta{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(20px,1.8vw,26px);font-weight:var(--fw-medium);font-size:16px;line-height:1}
.jms5-tabs-panel-media{margin:0;aspect-ratio:3/2;overflow:hidden;border-radius:var(--jms5-radius-lg);background:var(--n-01)}
.jms5-tabs-panel-media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}


/* ============================================================ D. SIDORNAS BLOCK
   Blocken som bär tjänstesidorna, kunder, om oss och kontakt. Samma
   grammatik som C: rubrikdelen (not, rubrik, ingress) delas, listor bärs
   av hårlinjer, foton är rundade och i färg, inga versala etiketter. */

/* D0. Delat: ingressen efter rubriken, listornas radform, numret. */
/* Ingressen: guidens 21/1,45, i ingresston med halvfet vikt. */
:is(.jms5-sechead-text,.jms5-process-intro,.jms5-resa-intro,.jms5-katalog-intro,.jms5-programs-intro,.jms5-contact-body,.jms5-tabs-intro,.jms5-faq-intro,.jms5-team-intro,.jms5-omraden-intro){
  font-size:clamp(18px,1.5vw,21px);line-height:1.45;max-width:56ch;margin-top:18px;
  font-weight:var(--fw-medium);color:var(--text-ingress)}
:is(.jms5-process-inner,.jms5-resa-inner,.jms5-faq-inner,.jms5-team-inner,.jms5-contact-inner,.jms5-omraden-inner){display:grid;row-gap:clamp(34px,4vw,58px);justify-items:start}
:is(.jms5-process-inner,.jms5-resa-inner,.jms5-faq-inner,.jms5-team-inner,.jms5-contact-inner,.jms5-omraden-inner) > *{max-width:100%;min-width:0}
:is(.jms5-process-inner,.jms5-resa-inner,.jms5-faq-inner,.jms5-team-inner,.jms5-omraden-inner) > [class*="-header"]{max-width:none}
[class*="jms5-"] :is(.jms5-process-namn b,.jms5-resa-fas b,.jms5-kat-nr,.jms5-vag-nr){
  font-family:var(--font-sans);font-weight:var(--fw-roman);font-size:14px;line-height:1.7;letter-spacing:0;
  font-variant-numeric:tabular-nums;color:var(--text-muted);text-transform:none}
/* Marginalnoter som hette något annat. */
[class*="jms5-"] :is(.jms5-logos-label,.jms5-taggar-label,.jms5-tabs-panel-eyebrow,.jms5-programs-eyebrow,.jms5-program-card-cat,.jms5-faq-item-cat,.jms5-resa-par dt,.jms5-contact-steg--lank dt){
  font-family:var(--font-sans);font-weight:var(--fw-roman);font-size:15px;line-height:1.5;letter-spacing:0;text-transform:none;color:var(--text-muted)}

/* D1. BRÖDSMULAN. Orientering på arkets mått, ingen rörelse. */
.jms5-crumb{max-width:var(--jms5-content-width);margin-inline:auto;padding:clamp(22px,2.4vw,34px) var(--gutter) 0;box-sizing:border-box}
.jms5-crumb-lista{display:flex;flex-wrap:wrap;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.jms5-crumb-lista > li{display:flex;align-items:center;margin:0;list-style:none;font-size:14px;line-height:1.5;color:var(--text-muted)}
.jms5-crumb-lista > li + li::before{content:"";flex:none;width:1px;height:11px;margin:0 12px;background:var(--n-04);transform:rotate(18deg)}
[class*="jms5-"] .jms5-crumb-lista a{color:var(--text-muted);text-decoration:none;font-size:14px}
[class*="jms5-"] .jms5-crumb-lista a:hover{color:var(--ink)}
.jms5-crumb-lista span[aria-current]{color:var(--ink);font-weight:var(--fw-medium)}
/* Brödsmulan följs av heron: heron tar sin toppluft själv, halverad. */
.elementor-element:has(> .elementor-widget-container > .jms5-crumb) + .elementor-element .jms5-hero-with-photo,
.elementor-element:has(> .elementor-widget-container > .jms5-crumb) + .elementor-element .jms5-hero{padding-top:clamp(40px,5vw,72px)}

/* D2. SEKTIONSÖPPNINGEN. Rubriken till blocket under (luften i B13). */
.jms5-sechead-title{max-width:26ch}
.jms5-sechead-text-col{text-align:left}

/* D3. INLINE CTA. En rad mellan två hårlinjer: text vänster, åtgärd höger. */
.jms5-inline-cta{padding-block:clamp(30px,3.1vw,44px)}
.jms5-inline-cta-rad{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,40px);
  padding:clamp(20px,1.9vw,28px) 0;border-top:.5px solid var(--line);border-bottom:.5px solid var(--line)}
.jms5-inline-cta-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.jms5-inline-cta-copy strong{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(20px,1.9vw,25px);line-height:1.24;letter-spacing:-.018em;color:var(--ink)}
.jms5-inline-cta-copy span{font-size:16px;line-height:1.5;color:var(--text-muted)}
.jms5-inline-cta-atgard{flex:none}

/* D4. PROCESS. Numret är ordningen. Steget .44, förklaringen .56. */
.jms5-process-steg{list-style:none;margin:0;padding:0;width:100%;border-top:.5px solid var(--line)}
.jms5-process-rad{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);gap:clamp(18px,3vw,52px);align-items:start;
  margin:0;list-style:none;padding:clamp(22px,2.2vw,32px) 0;border-bottom:.5px solid var(--line)}
.jms5-process-namn{display:flex;align-items:baseline;gap:16px}
.jms5-process-namn b{flex:none}
.jms5-process-namn span{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(20px,1.9vw,25px);line-height:1.24;letter-spacing:-.018em;color:var(--ink)}
.jms5-process-rad p{margin:0;max-width:64ch}
@media (max-width:900px){.jms5-process-rad{grid-template-columns:1fr;gap:10px}}

/* D5. KUNDRESAN. Fas, innebörd, mått och ägare. */
.jms5-resa-rader{list-style:none;margin:0;padding:0;width:100%;border-top:.5px solid var(--line)}
.jms5-resa-rad{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);gap:clamp(18px,3vw,52px);align-items:start;
  margin:0;list-style:none;padding:clamp(22px,2.2vw,32px) 0;border-bottom:.5px solid var(--line)}
.jms5-resa-fas{display:flex;align-items:baseline;gap:14px}
.jms5-resa-fas b{flex:none}
.jms5-resa-fas span{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(20px,1.9vw,25px);line-height:1.24;letter-spacing:-.018em;color:var(--ink)}
.jms5-resa-vad p{margin:0;max-width:64ch}
.jms5-resa-par{display:flex;flex-wrap:wrap;gap:0;margin:clamp(18px,1.8vw,24px) 0 0;padding-top:clamp(14px,1.4vw,18px);border-top:.5px solid var(--line)}
.jms5-resa-par > div{padding-inline:clamp(18px,2.2vw,32px);flex:0 1 auto;min-width:0}
.jms5-resa-par > div:first-child{padding-left:0}
.jms5-resa-par > div + div{border-left:.5px solid var(--line)}
.jms5-resa-par dt{margin:0}
.jms5-resa-par dd{font-weight:var(--fw-medium);font-size:16px;line-height:1.4;margin:4px 0 0;color:var(--ink)}
@media (max-width:900px){.jms5-resa-rad{grid-template-columns:1fr;gap:12px}}
@media (max-width:640px){
  .jms5-resa-par{flex-direction:column;gap:12px}
  .jms5-resa-par > div,.jms5-resa-par > div + div{padding-inline:0;border-left:0}
}

/* D6. FAQ. En lista, alltså hårlinjer. details/summary, noll skript. */
.jms5-faq-lista{width:100%;border-top:.5px solid var(--line)}
.jms5-faq-item{border-bottom:.5px solid var(--line);border-radius:0;background:none;padding:0}
.jms5-faq-item > summary{display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(18px,3vw,48px);
  padding:clamp(18px,1.7vw,24px) 0;cursor:pointer;list-style:none}
.jms5-faq-item > summary::-webkit-details-marker{display:none}
.jms5-faq-item > summary:focus-visible{outline:2px solid var(--handling);outline-offset:3px}
.jms5-faq-q{display:flex;flex-direction:column;gap:4px;min-width:0}
.jms5-faq-item-q{font-weight:var(--fw-medium);font-size:17px;line-height:1.5;letter-spacing:var(--ls-body);color:var(--ink)}
.jms5-faq-tecken{position:relative;flex:none;width:15px;height:15px;margin-top:5px;color:var(--ink)}
.jms5-faq-tecken::before,.jms5-faq-tecken::after{content:"";position:absolute;inset:0;margin:auto;background:currentColor;opacity:.62}
.jms5-faq-tecken::before{width:15px;height:1.3px}
.jms5-faq-tecken::after{width:1.3px;height:15px;transition:transform 260ms var(--ease-out)}
.jms5-faq-item[open] .jms5-faq-tecken::after{transform:scaleY(0)}
.jms5-faq-a{padding:0 0 clamp(20px,1.8vw,26px);max-width:74ch}
.jms5-faq-a p{margin:0}
.jms5-faq-a p + p{margin-top:14px}

/* D7. TEAMET. Tre kort, fotot rundat, namnet i display. */
.jms5-team-grid{width:100%;display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(26px,3.4vw,52px);row-gap:clamp(34px,3.6vw,52px)}
.jms5-team-kort{display:flex;flex-direction:column}
.jms5-team-foto{margin:0 0 20px;aspect-ratio:4/5;overflow:hidden;border-radius:var(--jms5-radius-lg);background:var(--n-01)}
.jms5-team-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.jms5-team .jms5-team-namn{--rubrik:clamp(20px,1.9vw,25px);margin:0}
.jms5-team-roll{font-size:15px;line-height:1.5;margin:6px 0 0}
.jms5-team-bio{font-size:16px;line-height:1.5;margin:14px 0 0;max-width:40ch}
@media (max-width:900px){.jms5-team-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.jms5-team-grid{grid-template-columns:1fr}}

/* D8. KUNDNAMNEN. Kapslar, centrerade: en enhet per namn, bara linjen. */
.jms5-taggar{padding-block:clamp(30px,3.3vw,48px)}
.jms5-taggar-label{display:block;text-align:center;margin-bottom:14px}
.jms5-taggar-lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.jms5-taggar-lista > li{margin:0;list-style:none;border:.5px solid var(--n-04);border-radius:var(--r-pill);padding:8px 16px;
  font-size:15px;line-height:1.4;color:var(--ink);white-space:nowrap;transition:border-color .18s var(--ease)}
.jms5-taggar-lista > li:hover{border-color:var(--ink)}
.jms5-taggar-lista > li::before,.jms5-taggar-lista > li::after{content:none}

/* D9. LOGOTYPER. Bevisraden. Monokroma mot gråskalan: färgen hör till pennorna. */
.jms5-logos{padding-block:clamp(40px,4.4vw,64px)}
.jms5-logos-strip:not(.jms6-karusell-spar){display:flex;flex-wrap:wrap;align-items:center;gap:clamp(26px,3.6vw,56px);margin-top:18px}
.jms5-logo-item{display:inline-flex;align-items:center;font-weight:var(--fw-medium);font-size:16px;color:var(--text-muted)}
[class*="jms5-"] .jms5-logo-item img{height:clamp(22px,2.2vw,30px);width:auto;display:block;filter:grayscale(1);opacity:.72;border-radius:0}

/* D10. OMRÅDENA (programs). Ett uppslag, inte ett kort: fotot och
   hårlinjerna bär strukturen. Subgrid när korten ligger på en rad. */
.jms5-programs{padding-inline:0}
.jms5-programs-header{text-align:left}
.jms5-programs-headline{max-width:26ch}
.jms5-programs-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(26px,3.4vw,52px);row-gap:clamp(38px,4.4vw,64px);margin-top:clamp(40px,5.1vw,74px)}
.jms5-programs--enkelrad .jms5-programs-grid{grid-template-rows:auto auto auto auto auto 1fr auto;row-gap:0}
.jms5-programs--enkelrad .jms5-program-card{display:grid;grid-template-rows:subgrid;grid-row:span 7}
@supports not (grid-template-rows:subgrid){.jms5-programs--enkelrad .jms5-program-card{display:flex;flex-direction:column}}
.jms5-programs:not(.jms5-programs--enkelrad) .jms5-program-card{display:flex;flex-direction:column}
.jms5-programs:not(.jms5-programs--enkelrad) .jms5-program-card-cta{margin-top:auto}
.jms5-program-card{background:none;border:0;padding:0;box-shadow:none;border-radius:0}
.jms5-program-card-body{padding:0;text-align:left;display:contents}
.jms5-program-card-image-wrap{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:var(--jms5-radius-lg);background:var(--n-01);margin-bottom:22px}
.jms5-program-card-image{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.jms5-program-card-icon{display:none}
.jms5-program-card-cat{max-width:34ch}
.jms5-programs .jms5-program-card-name{--rubrik:clamp(23px,2.2vw,29px);margin:8px 0 12px}
.jms5-program-card-desc{max-width:44ch}
.jms5-program-card-bullets-label{margin:22px 0 0;font-weight:var(--fw-medium);font-size:15px;line-height:1.4;color:var(--ink);text-transform:none;letter-spacing:0}
.jms5-program-card-bullets{margin:12px 0 0}
.jms5-program-card-cta{margin-top:22px;align-self:start;display:inline-flex;align-items:center;gap:8px;font-weight:var(--fw-medium)}
@media (max-width:900px){
  .jms5-programs-grid,.jms5-programs--enkelrad .jms5-programs-grid{grid-template-columns:1fr;grid-template-rows:none;row-gap:clamp(38px,4.2vw,60px)}
  .jms5-programs--enkelrad .jms5-program-card{display:flex;flex-direction:column;grid-row:auto}
}

/* D11. ERBJUDANDET (katalog). Varje rad är en ingång till byggaren. */
.jms5-katalog{display:block}
.jms5-katalog-header{max-width:100%}
.jms5-katalog .jms5-katalog-title{max-width:26ch}
.jms5-katalog-lista{margin-top:clamp(34px,3.8vw,54px);border-top:.5px solid var(--line)}
.jms5-kat-rad{display:grid;grid-template-columns:3px 84px 1fr auto auto;gap:8px 22px;align-items:start;padding-block:clamp(22px,2.4vw,30px);border-bottom:.5px solid var(--line)}
@media (max-width:860px){
  .jms5-kat-rad{grid-template-columns:3px 64px 1fr;row-gap:14px}
  .jms5-kat-rad .jms5-kat-spec,.jms5-kat-rad .jms5-kat-val{grid-column:3}
  .jms5-kat-rad .jms5-kat-spec{text-align:left}
}
.jms5-kat-penna{align-self:stretch;border-radius:2px;background:var(--penna,var(--p-lansera))}
.jms5-kat-omslag{display:flex;flex-direction:column;aspect-ratio:3/4;background:var(--surface);box-shadow:inset 0 0 0 .5px var(--line);border-radius:4px;overflow:hidden}
.jms5-kat-omslag .band{height:3px;background:var(--penna,var(--p-lansera));flex:none}
.jms5-kat-omslag .huvud{padding:9px 9px 0}
.jms5-kat-omslag .omr{display:block;font:400 6.5px/1.5 var(--font-sans);letter-spacing:0;text-transform:none;color:var(--text-muted)}
.jms5-kat-omslag .titel{display:block;margin-top:3px;font:500 10px/1.15 var(--font-display);letter-spacing:-.014em;color:var(--ink)}
.jms5-kat-omslag .fot{margin-top:auto;padding:0 9px 8px}
.jms5-kat-omslag .matt{font:400 6.5px/1.5 var(--font-sans);letter-spacing:0;color:var(--text-muted)}
.jms5-kat-txt{min-width:0}
.jms5-kat-nr{display:block}
.jms5-katalog .jms5-kat-namn{--rubrik:21px;margin:3px 0 0;line-height:1.26}
[class*="jms5-"] .jms5-katalog .jms5-kat-namn a{color:var(--ink);text-decoration:none;text-decoration-color:transparent;transition:text-decoration-color .16s var(--ease)}
[class*="jms5-"] .jms5-katalog .jms5-kat-namn a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:currentColor}
.jms5-katalog .jms5-kat-lofte{margin:8px 0 0;font-size:16.5px;line-height:1.5;max-width:52ch}
.jms5-katalog .jms5-kat-far{margin-top:14px}
.jms5-katalog .jms5-kat-far > li{--lh-body:1.5;font-size:15.5px;padding:5px 0}
.jms5-katalog .jms5-kat-far::before,.jms5-katalog .jms5-kat-far > li::after{display:none}
.jms5-kat-spec{text-align:right;white-space:nowrap;font-weight:var(--fw-medium);font-size:16px;line-height:1.4;letter-spacing:-.008em;color:var(--ink);font-variant-numeric:tabular-nums}
.jms5-kat-spec i{display:block;font-style:normal;font-weight:var(--fw-roman);font-size:14px;line-height:1.5;color:var(--text-muted)}
.jms5-kat-val{display:flex;align-items:flex-start}
[class*="jms5-"] a.jms5-kat-lagg{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:var(--r-pill);
  border:.5px solid var(--n-04);color:var(--ink);text-decoration:none;font-weight:var(--fw-medium);font-size:15px;line-height:1;letter-spacing:-.008em;white-space:nowrap;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
[class*="jms5-"] a.jms5-kat-lagg:hover{border-color:var(--ink);background:var(--n-01);text-decoration:none}
[class*="jms5-"] a.jms5-kat-lagg .jms6-form{margin-top:0;width:14px;height:14px}
.jms5-katalog .jms5-katalog-cta{margin-top:clamp(30px,3.2vw,42px)}
.jms5-katalog .jms5-katalog-cta a{display:inline-flex;align-items:center;gap:9px;font-weight:var(--fw-medium);font-size:17px;line-height:1;transition:gap .2s var(--ease)}
.jms5-katalog .jms5-katalog-cta a:hover{gap:13px}

/* D12. KONTAKT. En ingång, två sätt: vägarna som text, formuläret som
   en enhet på egen yta. Fälten bärs av hårlinjen. */
.jms5-contact{background:none}
.jms5-contact-header{max-width:100%}
.jms5-contact .jms5-contact-title{max-width:22ch}
.jms5-contact-rad{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,4vw,72px);align-items:start;width:100%}
.jms5-contact-stege{display:grid;row-gap:0;margin:0}
.jms5-contact-steg{display:block;padding-block:clamp(16px,1.6vw,22px)}
.jms5-contact-steg dt{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.jms5-contact-steg dd{margin:0}
.jms5-contact-steg--primar{padding-top:0}
[class*="jms5-"] :is(.jms5-contact-steg--primar dd,.jms5-contact-steg--primar dd a){font-family:var(--font-display);font-weight:var(--fw-medium);
  font-size:clamp(23px,2.2vw,29px);line-height:1.14;letter-spacing:-.022em;color:var(--ink);text-decoration:none}
.jms5-contact-steg--sekundar{padding-top:6px}
[class*="jms5-"] :is(.jms5-contact-steg--sekundar dd,.jms5-contact-steg--sekundar dd a){font-family:var(--font-display);font-weight:var(--fw-medium);
  font-size:25px;line-height:1.24;letter-spacing:-.018em;color:var(--ink);text-decoration:none}
[class*="jms5-"] :is(.jms5-contact-steg--primar,.jms5-contact-steg--sekundar) dd a{border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .18s var(--ease)}
[class*="jms5-"] :is(.jms5-contact-steg--primar,.jms5-contact-steg--sekundar) dd a:hover{border-bottom-color:var(--ink)}
.jms5-contact-steg--not{padding-top:10px}
.jms5-contact-steg--not dd{font-size:15px;line-height:1.5;color:var(--text-muted)}
.jms5-contact-steg--lank{border-top:.5px solid var(--line);margin-top:clamp(20px,2vw,28px);padding-top:clamp(20px,2vw,28px)}
.jms5-contact-steg--lank dt{position:static;width:auto;height:auto;margin:0 0 6px;overflow:visible;clip-path:none}
[class*="jms5-"] .jms5-contact-steg--lank dd a{font-size:17px;line-height:1.5;color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
[class*="jms5-"] .jms5-contact-steg--lank dd a::after{content:" \2192";color:var(--handling)}
[class*="jms5-"] .jms5-contact-steg--lank dd a:hover{border-bottom-color:var(--ink)}
.jms5-contact-form{min-width:0;background:var(--n-01);border-radius:var(--jms5-radius-lg);padding:clamp(24px,2.4vw,34px)}
/* Elementors formulär inne i blocket. */
.jms5-contact-form .elementor-form-fields-wrapper{display:flex;flex-wrap:wrap;flex-direction:row;gap:clamp(14px,1.4vw,18px) clamp(14px,1.6vw,22px)}
.jms5-contact-form .elementor-field-group{margin:0;padding:0;width:100%}
.jms5-contact-form .elementor-field-group.elementor-col-50{width:calc(50% - clamp(7px,.8vw,11px))}
.jms5-contact-form .elementor-field-type-submit{display:flex;justify-content:flex-start;padding-top:clamp(14px,1.4vw,20px)}
/* Skicka-knappen bär B5:s mått. Aldrig full spaltbredd — knappen är en
   kapsel med innehållsbredd. */
.jms5-contact-form .elementor-button{flex:0 0 auto;align-self:flex-start;width:auto;max-width:max-content;min-width:0;
  min-height:44px;padding:12px 24px;border:0;border-radius:var(--r-pill);
  font-family:var(--font-sans);font-weight:var(--fw-roman);font-size:16px;line-height:1.25;letter-spacing:-.012em;
  background-color:var(--handling);color:#fff;
  transition:opacity .2s var(--ease),transform .25s cubic-bezier(.2,.8,.2,1)}
.jms5-contact-form .elementor-button:hover{opacity:.9;transform:scale(1.02)}
.jms5-contact-form textarea.elementor-field-textual{min-height:84px}
@media (max-width:900px){.jms5-contact-rad{grid-template-columns:1fr;gap:clamp(30px,3.1vw,44px)}}


/* ============================================ E. GRÄNSSNITTETS TILLSTÅND
   jms-3.0-granssnitt.html, mått för mått. Guidelinen beskriver sidan när
   allt fungerar — det här är resten: när något laddas, saknas, går fel
   eller ska fyllas i. Blocken och lösningsbyggaren använder samma. */

/* E1. LADDNING ÄR VARUMÄRKET. Två former, samma gest.

   Skelett när innehållet inte finns än: formen på det som kommer, i
   fyllningen rgba(120,120,128,.12). Aldrig en snurra.

   Skärpa när innehållet FINNS men inte är klart — guidens egen demo visar
   en riktig rubrik, "Din lösning kostar 148 000 kronor", som ligger suddig
   och ställer in sig. Det är den starkaste av de två, för då är det
   bokstavligen vår idé: innehållet finns redan, det är bara inte skarpt än.

   Receptet är detsamma: blur(9px), 65 procents opacitet och skala 1,015
   till skarpt på 900 ms med cubic-bezier(.16,1,.3,1). Ingen inzoomning,
   ingen toning från vitt. */
.jms5-laddar{filter:blur(9px);opacity:.65;transform:scale(1.015)}
.jms5-laddar--klar{animation:jms5-skarpa 900ms cubic-bezier(.16,1,.3,1) both}
@keyframes jms5-skarpa{
  from{filter:blur(9px);opacity:.65;transform:scale(1.015)}
  to{filter:blur(0);opacity:1;transform:none}}

.jms5-skelett{display:grid;gap:10px;width:100%}
.jms5-skelett-del{background:var(--fyll);border-radius:7px;height:13px}
.jms5-skelett-del--rubrik{height:22px;border-radius:8px;max-width:56%;margin-bottom:2px}
.jms5-skelett-del--text:nth-of-type(2){max-width:86%}
.jms5-skelett-del--text:nth-of-type(3){max-width:72%}
.jms5-skelett-del--text:last-of-type{max-width:54%}
.jms5-skelett-del--kort{height:78px;border-radius:12px;margin-top:8px;max-width:none}
.jms5-skelett-del--yta{height:230px;border-radius:16px;margin-top:8px;max-width:none}
/* Över tre sekunder: skriv ut vad som händer och ungefär hur länge.
   Aldrig en procentsiffra som inte stämmer. */
.jms5-skelett-vad{font-size:14px;line-height:1.5;color:var(--text-muted);margin:0 0 14px}
/* Reducerad rörelse: skelettet visas skarpt och pulsar inte. */
@media (prefers-reduced-motion:reduce){
  .jms5-laddar,.jms5-laddar--klar{filter:none;opacity:1;transform:none;animation:none}
}

/* E2. FYRA STATUSYTOR. Tonad yta, noll kantlinjer — en färgad kantlinje
   runt en statusruta är manéret guiden pekar ut. Ikonen bär färgen och
   texten står i bläck: ytan är för svag för att bära text.

   Ytan är Apples systemfärg med låg alfa, tonen den mörkare varianten som
   klarar kontrastkravet. Det är två olika värden, inte samma med opacitet. */
.jms5-status{display:flex;gap:14px;align-items:flex-start;
  padding:16px 18px;border-radius:14px;border:0;max-width:560px;
  background:var(--status-yta,var(--tint))}
.jms5-status + .jms5-status{margin-top:12px}
.jms5-status-ikon{flex:0 0 20px;font-size:17px;line-height:1.3;color:var(--status-ton,var(--handling))}
.jms5-status-ikon .jms5-ikon{width:17px;height:17px}
.jms5-status-kropp{min-width:0}
[class*="jms5-"] .jms5-status-rubrik{margin:0;font-size:15px;font-weight:var(--fw-medium);
  line-height:1.4;letter-spacing:-.01em;color:var(--ink)}
[class*="jms5-"] .jms5-status-text{margin:3px 0 0;font-size:14px;line-height:1.5;letter-spacing:0;color:var(--text-muted)}
.jms5-status--bekraftelse{--status-yta:var(--ok-yta);--status-ton:var(--ok)}
.jms5-status--information{--status-yta:var(--tint);--status-ton:var(--handling)}
.jms5-status--varning{--status-yta:var(--varn-yta);--status-ton:var(--varn)}
.jms5-status--fel{--status-yta:var(--fel-yta);--status-ton:var(--fel)}
:is(.jms5-bg--ink,.jms5-cta-final--mork) .jms5-status-rubrik{color:#F5F5F7}

/* E3. VALKORT. Valt läge: 1,5 px ring i handlingsfärgen plus tonad yta vid
   7,5 procent. Ingen bock, ingen skugga, ingen förstoring.
   Namnet är BRÖDTEXTENS snitt i Medium, inte display — ett valkort är en
   kontroll, inte en rubrik. Tre val per fråga; vid fler än fyra ska det
   vara en lista i stället för kort. */
.jms5-val{display:block;cursor:pointer;border-radius:16px;padding:18px 20px;
  background:var(--surface);box-shadow:inset 0 0 0 .5px var(--line);
  transition:box-shadow .18s var(--ease),background .18s var(--ease)}
.jms5-val:hover{background:var(--fyll2)}
.jms5-val-input{position:absolute;opacity:0;pointer-events:none}
.jms5-val-kropp{display:block}
.jms5-val-namn{display:block;font-family:var(--font-sans);font-size:16px;
  font-weight:var(--fw-medium);line-height:1.35;letter-spacing:-.012em;color:var(--ink)}
.jms5-val-text{display:block;font-size:14px;line-height:1.5;color:var(--text-muted);margin-top:4px}
/* Priset syns i valet: ett val utan pris tvingar användaren att gissa. */
.jms5-val-pris{display:block;font-size:14px;line-height:1.5;letter-spacing:0;
  color:var(--text-muted);margin-top:4px;font-variant-numeric:tabular-nums}
.jms5-val:has(.jms5-val-input:checked){background:var(--tint);box-shadow:inset 0 0 0 1.5px var(--handling)}
.jms5-val:has(.jms5-val-input:focus-visible){outline:2px solid var(--handling);outline-offset:3px}
.jms5-valgrupp{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:760px){.jms5-valgrupp{grid-template-columns:1fr}}

/* E4. STEGINDIKATOR. Högst fem steg — fler och indikatorn blir en
   stresskälla. Klara steg bär bock och dämpad text och går att klicka
   tillbaka till; kommande är grå och inte klickbara. */
.jms5-stege{display:flex;align-items:center;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0}
.jms5-stege-steg{display:flex;align-items:center;gap:9px;margin:0;padding:0;list-style:none;
  font-size:14px;line-height:1.4;letter-spacing:0;color:var(--n-05)}
/* Strecket mellan stegen: 44 × 1 px med 12 px luft på var sida. */
.jms5-stege-steg + .jms5-stege-steg::before{content:"";flex:none;
  width:44px;height:1px;background:var(--line);margin:0 12px}
.jms5-stege-nr{flex:none;display:grid;place-items:center;width:22px;height:22px;
  border-radius:var(--r-pill);font-size:12px;line-height:1;font-variant-numeric:tabular-nums;
  box-shadow:inset 0 0 0 1.5px var(--n-05)}
.jms5-stege-steg--aktiv{color:var(--ink);font-weight:var(--fw-medium)}
.jms5-stege-steg--aktiv .jms5-stege-nr{background:var(--handling);color:#fff;box-shadow:none}
.jms5-stege-steg--klar{color:var(--text-muted)}
.jms5-stege-steg--klar .jms5-stege-nr{background:var(--fyll);color:var(--text-muted);box-shadow:none}
.jms5-stege-steg--klar .jms5-stege-nr .jms5-ikon{width:12px;height:12px}
@media (max-width:640px){
  .jms5-stege-steg + .jms5-stege-steg::before{width:20px;margin:0 8px}
  .jms5-stege-steg:not(.jms5-stege-steg--aktiv) .jms5-stege-namn{position:absolute;width:1px;height:1px;
    margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* E5. TOM VY. En tom vy betyder att användaren står vid början av något,
   inte i en återvändsgränd. Ikonen är 44 px i Bläck 3 — aldrig i en cirkel,
   aldrig en blyertsritning; ritningen hör hemma på papper, inte i
   gränssnittet. Vänsterställt: centrerad text i en tom vy är ett manér. */
.jms5-tom{text-align:left;padding:40px 4px}
.jms5-tom-ikon{display:block;margin-bottom:18px;color:var(--n-05)}
.jms5-tom-ikon .jms5-ikon{width:44px;height:44px}
[class*="jms5-"] .jms5-tom-rubrik{margin:0 0 8px;font-family:var(--font-display);
  font-weight:var(--fw-medium);font-size:22px;line-height:1.18;letter-spacing:-.022em;color:var(--ink)}
[class*="jms5-"] .jms5-tom-text{margin:0 0 20px;font-size:16px;line-height:1.5;
  color:var(--text-muted);max-width:42ch}

/* E6. KNAPP SOM ARBETAR. Behåller sin bredd, texten byts till pågående
   form, knappen blir inaktiv. Aldrig en snurra som ersätter texten —
   då hoppar bredden. Bredden låses av markupen, inte av CSS. */
[class*="jms5-"] .jms5-btn[data-arbetar]{pointer-events:none;opacity:.4}

/* E8. EDITORNS PLATSHÅLLARE. Inte en tom vy — den är ett gränssnittsläge
   för besökaren. Det här ser bara redaktören. */
.jms5-tomt{display:grid;gap:8px;justify-items:start;padding:clamp(26px,2.6vw,38px) 0;
  border-top:.5px solid var(--line);text-align:left}
.jms5-tomt-namn{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:19px;
  line-height:1.24;letter-spacing:-.018em;color:var(--ink);margin:0}
[class*="jms5-"] :is(.jms5-tomt-vad,.jms5-tomt-hjalp){margin:0;font-size:16px;line-height:1.5;max-width:56ch}
[class*="jms5-"] .jms5-tomt-hjalp{color:var(--n-05)}

/* E7. FÄLTEN. Gränssnittsguiden ritar fältet som en rundad ruta med en
   hårlinje runt om (inset .5 px vid 32 % alfa), radie 12, 12/15 px luft.
   Vid fokus: 1 px ring i handlingsfärgen plus en halo på 3,5 px i samma
   färg vid 7,5 procent — samma mönster som macOS. Vid fel: 1 px röd ring.
   Det ersätter v8:s understrukna fält, som var ett annat system. */
[class*="jms5-"] :is(input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="number"],input[type="search"],input[type="date"],textarea,select),
.elementor-widget-form .elementor-field-textual{
  width:100%;font-family:var(--font-sans);font-size:16px;line-height:1.5;color:var(--ink);
  background:var(--surface);border:0;
  /* !important: Elementor skriver egen CSS per widget ur formulärets sparade
     stilinställningar, med selektorer på fem klasser (.elementor-784
     .elementor-element-0017cb0 …). De värdena är v8:s och går inte att nå
     på specificitet. Rätt fix är att nolla inställningarna i Elementor —
     tills dess står receptet här. Se BACKLOG-3.0.md. */
  border-radius:12px !important;padding:12px 15px !important;
  box-shadow:inset 0 0 0 .5px rgba(60,60,67,.32) !important;
  transition:box-shadow .18s var(--ease)}
[class*="jms5-"] :is(input,textarea,select):focus,
.elementor-widget-form .elementor-field-textual:focus{
  outline:0;box-shadow:inset 0 0 0 1px var(--handling),0 0 0 3.5px var(--tint) !important}
[class*="jms5-"] :is(input,textarea,select)::placeholder,
.elementor-widget-form .elementor-field-textual::placeholder{color:var(--n-05);opacity:1}
[class*="jms5-"] textarea,.elementor-widget-form textarea.elementor-field-textual{resize:vertical;min-height:96px}
/* Etiketten står alltid ovanför och försvinner aldrig. 14 px Medium. */
[class*="jms5-"] :is(form,fieldset,.jms5-falt,.elementor-field-group) > label,
.elementor-widget-form .elementor-field-group > label,
.elementor-widget-form .elementor-field-group > .elementor-field-label{
  display:block;font-size:14px !important;font-weight:var(--fw-medium) !important;line-height:1.4;
  letter-spacing:-.008em;text-transform:none;color:var(--ink) !important;margin-bottom:7px}
/* "Förklara varför": hjälptexten står mellan etikett och fält. */
.jms5-falt-hjalp{display:block;font-size:13px;line-height:1.45;color:var(--n-05);margin-bottom:8px}
/* Validera vänligt och direkt. Visa hur rätt svar ser ut. */
.jms5-falt-svar{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.45;margin-top:8px;color:var(--fel)}
.jms5-falt-svar .jms5-ikon{flex:none;margin-top:2px}
.jms5-falt--klar .jms5-falt-svar{color:var(--ok)}
.jms5-falt--fel :is(input,textarea,select){box-shadow:inset 0 0 0 1px var(--fel)}


/* ============================================ F. HERON PÅ FOTO
   Guidelinen, kapitlet Webb: "Sidan öppnar med ett foto som ställer in sig,
   rubriken direkt på bilden." Fotoguiden ger tre lägen för textzonen:
   vänster tredjedel, höger tredjedel eller nedre halvan.

   Toningen är inte dekor. Den bär texten när redaktören byter bild, och den
   är skälet till att en fylld knapp kan stå i textzonen utan att ligga på
   rå bild — guidens förbud finns för att man annars inte vet vad som är
   bakom. Här vet vi.

   TVÅ LÄGEN, EN BRYTPUNKT. Den lugna zonen i en 16:9-bild överlever bara så
   länge bilden är bred. Under 1081 px beskärs den till stående, väggen
   hamnar utanför bild och rubriken landar på motivet. Då kan texten inte
   bäras av bilden längre: den bärs av en mörk toning underifrån, i vitt.
   Det är också det enda läget som håller oavsett vilken bild som väljs.
   Fotoguiden säger samma sak med andra ord: "Ett original, fyra
   beskärningar" — 16:9 på sajtens topp, 4:5 på mobil. */
.jms5-hero-foto{position:relative;isolation:isolate;width:100%;overflow:hidden;background:var(--n-01)}
.jms5-hero-foto > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.jms5-hero-foto::before{content:"";position:absolute;inset:0;z-index:-1}
.jms5-hero-ram{position:relative;max-width:var(--jms5-content-width);margin-inline:auto;
  padding-inline:var(--gutter);height:100%;display:grid;align-items:center}
.jms5-hero-blk{max-width:var(--textbredd,500px)}
.jms5-hero-not{display:block;font-size:16px;line-height:1.5;color:var(--ton2);margin-bottom:12px}
/* Rubrikens färg OCH storlek måste sättas på kitvikt (0,2,0). Baslagrets
   rubrikregel väger så, och en klass når inte upp — det var därför rubriken
   blev bläck på mobilens mörka toning. */
[class*="jms5-"] .jms5-hero-rubrik{
  font-family:var(--font-display);font-weight:var(--fw-medium);
  --rubrik:var(--grad,clamp(38px,4.4vw,62px));font-size:var(--rubrik);
  line-height:1.05;letter-spacing:var(--ls-display);color:var(--ton);margin:0;max-width:14ch}
.jms5-hero-ing{font-size:clamp(17px,1.35vw,19px);line-height:1.5;color:var(--ton2);margin-top:16px;max-width:34ch}
.jms5-hero-knapp{margin-top:clamp(22px,2.4vw,30px);display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ── Brett läge: textzonen är bildens lugna tredjedel, i praktiken papper.
   Därför bär den bläcktext, blå fylld knapp och ljus tonad sekundär. ── */
.jms5-hero-foto--vanster{height:min(86vh,800px);--ton:var(--ink);--ton2:var(--text-muted)}
.jms5-hero-foto--vanster > img{object-position:72% 50%}
.jms5-hero-foto--vanster .jms5-hero-ram{justify-items:start}
.jms5-hero-foto--vanster::before{background:linear-gradient(90deg,
  rgba(255,255,255,.90) 0%,rgba(255,255,255,.70) 30%,rgba(255,255,255,0) 56%)}

/* ── Nedre halvan: mörkt i alla bredder. ── */
.jms5-hero-foto--nedre{height:min(94vh,880px);--ton:#fff;--ton2:rgba(255,255,255,.84);--textbredd:600px;--grad:clamp(40px,5vw,72px)}
.jms5-hero-foto--nedre > img{object-position:50% 38%}
.jms5-hero-foto--nedre .jms5-hero-ram{align-items:end;padding-bottom:clamp(48px,6vw,88px)}
.jms5-hero-foto--nedre::before{background:linear-gradient(180deg,
  rgba(0,0,0,.12) 0%,rgba(0,0,0,0) 32%,rgba(0,0,0,.60) 100%)}

/* HERONS SEKUNDÄR ÄR GLAS. Idén håller i systemet: sekundären är det val
   som ännu inte är avgjort, och det syns — den är ur fokus medan primären
   är skarp. Samma rörelse som fotot och blyertsen, fast som material.

   Receptet: nästan ingen egen fyllning, kraftig oskärpa och förhöjd mättnad
   så pillret drar in fotots värme genom den vita toningen. Kanten är två
   linjer — en svag mörk som ger formen på ljust papper, och en ljus längs
   överkanten som är gradientkanten. Utan den övre linjen läser glas som en
   platta; det är den enskilt viktigaste raden i hela regeln. */
[class*="jms5-"] .jms5-hero-knapp :is(a,button).jms5-btn-secondary{
  background:rgba(120,120,128,.08);
  -webkit-backdrop-filter:blur(28px) saturate(1.9);
  backdrop-filter:blur(28px) saturate(1.9);
  box-shadow:inset 0 0 0 .5px rgba(60,60,67,.12),
             inset 0 .5px 0 rgba(255,255,255,.85);
}
[class*="jms5-"] .jms5-hero-knapp :is(a,button).jms5-btn-secondary:hover{
  background:rgba(120,120,128,.13)}

/* Beviset under knapparna bär heroens ton, inte sidans. */
.jms5-hero-blk .jms5-hero-proof{border-top-color:color-mix(in srgb,var(--ton) 18%,transparent)}
.jms5-hero-blk .jms5-proof-text{color:var(--ton2)}

/* Sekundären följer YTANS ton, inte sidans. Den ljusgrå fyllningen är gjord
   för papper; på en mörk toning läser den som ett hål. */
[class*="jms5-"] .jms5-hero-foto--nedre :is(a,button).jms5-btn-secondary,
[class*="jms5-"] .jms5-hero-foto--mork :is(a,button).jms5-btn-secondary{
  background:rgba(255,255,255,.16);color:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.28)}
[class*="jms5-"] .jms5-hero-foto--nedre :is(a,button).jms5-btn-secondary:hover,
[class*="jms5-"] .jms5-hero-foto--mork :is(a,button).jms5-btn-secondary:hover{background:rgba(255,255,255,.24)}
[class*="jms5-"] .jms5-hero-foto--nedre .jms5-btn-understruken,
[class*="jms5-"] .jms5-hero-foto--mork .jms5-btn-understruken{color:#fff;--ton:#fff}

/* SIGNATUREN. Tre lager, en gest: fotot ställer in sig, texten tonar fram
   medan bilden ännu är sudd, kontrollen kommer sist. */
@media (prefers-reduced-motion:no-preference){
  html.jms6-redo .jms5-hero-foto > img{filter:blur(18px);transform:scale(1.045);opacity:.86}
  html.jms6-redo .jms6-syns .jms5-hero-foto > img,
  html.jms6-redo .jms5-hero-foto.jms6-syns > img{filter:none;transform:none;opacity:1;
    transition:filter 1.5s var(--ease-out),transform 1.6s var(--ease-out),opacity 1.2s var(--ease-out)}
}

/* ── Under 1081: fotot blir ett BAND, texten flyttar ner på papper. ──
   Den lugna zonen i en 16:9-bild överlever bara så länge bilden är bred.
   Smalare beskärning tar bort väggen och rubriken landar på motivet.

   Första försöket var en mörk toning under texten. Den fungerade tekniskt
   och var fel ändå: fotoguiden säger "Mörka bilder läser som melankoli. Vi
   säljer klarhet, och det ska synas i ljuset", och AI-fotoguiden listar
   djupa skuggor och melankolisk stämning som fel att rätta. En mörk toning
   över ett ljust nordiskt foto motarbetar hela bildspråket. Johan såg det
   direkt: "mörk och depig". 13 sep 2026.

   Därför reflowar samma markup i stället: bilden blir statisk och lägger
   sig som ett band överst, textblocket hamnar under på papper. Ingen text
   på bild, ingen toning, ingen mörk yta — och heron är ljust i alla
   bredder. Det håller dessutom oavsett vilken bild redaktören väljer,
   vilket den lugna zonen inte gör förrän vi har 4:5-beskärningarna. */
@media (max-width:1080px){
  .jms5-hero-foto--vanster,.jms5-hero-foto--nedre{
    display:block;height:auto;min-height:0;background:var(--surface);
    --ton:var(--ink);--ton2:var(--text-muted);--textbredd:none}
  .jms5-hero-foto > img{position:static;width:100%;
    height:clamp(260px,42vh,420px);object-fit:cover;object-position:56% 42%;
    filter:saturate(.9) contrast(1.04)}
  /* Ingen toning: texten ligger inte längre på bilden. */
  .jms5-hero-foto--vanster::before,.jms5-hero-foto--nedre::before{display:none}
  .jms5-hero-blk::before{display:none}
  .jms5-hero-ram{height:auto;display:block;
    padding-block:clamp(30px,6vw,48px) clamp(38px,7vw,58px)}
  .jms5-hero-blk{max-width:none;position:static}
  [class*="jms5-"] .jms5-hero-rubrik{--rubrik:clamp(34px,5.4vw,52px);max-width:18ch}
  .jms5-hero-ing{max-width:46ch}
}
@media (max-width:720px){
  [class*="jms5-"] .jms5-hero-rubrik{--rubrik:clamp(32px,8.6vw,46px);max-width:none}
  .jms5-hero-not{font-size:15px}
  .jms5-hero-ing{font-size:17px;max-width:none}
  .jms5-hero-knapp{width:100%;gap:10px}
  .jms5-hero-knapp .jms5-btn-primary{width:100%;justify-content:center}
}
@media (max-width:480px){.jms5-hero-knapp .jms5-btn{width:100%;justify-content:center}}


/* ============================================ G. OMRÅDENA
   Erbjudandematrisens rad för ett mål: fem utvecklingsområden med sitt
   värdeerbjudande och sitt löfte. Formen följer gränssnittsguidens regel
   om antal — "Två är ett vägval, tre är ett urval, fler är en meny. Vid
   fler än fyra: gör en lista i stället för kort." Fem områden är alltså
   hårlinjerader, inte kortrutnät.

   Raden bär tre saker i tre vikter: området i brödtextens grå som en
   marginalnot, erbjudandet som rubrik i display, och löftet i brödtext.
   Ingen ram, ingen yta — linjerna bär listan. */
.jms5-omraden-lista{list-style:none;margin:0;padding:0;width:100%;border-top:.5px solid var(--line)}
.jms5-omrade{display:grid;grid-template-columns:minmax(0,.40fr) minmax(0,.60fr);
  gap:clamp(18px,3vw,52px);align-items:start;margin:0;list-style:none;
  padding:clamp(24px,2.6vw,36px) 0;border-bottom:.5px solid var(--line)}
.jms5-omrade-kat{display:block;font-size:15px;line-height:1.5;letter-spacing:0;color:var(--text-muted);margin-bottom:6px}
[class*="jms5-"] .jms5-omrade-namn{--rubrik:clamp(21px,2vw,27px);margin:0;line-height:1.18;letter-spacing:-.02em}
.jms5-omrade-lofte{margin:0;max-width:60ch}
/* Det som ingår står som en tyst rad under löftet: substans utan att bli
   en andra lista som konkurrerar med områdeslistan. */
.jms5-omrade-ingar{margin:14px 0 0;font-size:15px;line-height:1.6;color:var(--n-05)}
@media (max-width:900px){.jms5-omrade{grid-template-columns:1fr;gap:10px}}

/* Erbjudandet, kort form: produkterna som rader med tid och prisform. */
.jms5-paketrad{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px 24px;
  align-items:baseline;padding:clamp(18px,2vw,26px) 0;border-bottom:.5px solid var(--line);margin:0;list-style:none}
.jms5-paketrad:first-child{border-top:.5px solid var(--line)}
[class*="jms5-"] .jms5-paket-namn{--rubrik:19px;margin:0}
.jms5-paket-lofte{margin:4px 0 0;font-size:16px;line-height:1.5;max-width:56ch}
.jms5-paket-matt{white-space:nowrap;font-size:15px;line-height:1.5;color:var(--text-muted);font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .jms5-paketrad{grid-template-columns:1fr;gap:6px}
  .jms5-paket-matt{text-align:left}
}

/* ============================================================ H. V8-LAGRET
   Tillfälligt. Så länge pluginet på servern är v8 laddas jms5.min.css och
   jms6-design.css före det här arket. Det mesta faller rätt på vikt, men
   några v8-regler är starkare eller bär !important. De avväpnas här.

   Hela avsnittet tas bort samma dag som 3.0-pluginet installeras. */

/* Versal spärrad etikett är förbjuden i guiden. v8 satte den på varje
   eyebrow, inklusive heron. */
[class*="jms5-"] .jms5-eyebrow,[class*="jms5-"] .jms5-eyebrow--pill{
  text-transform:none !important;letter-spacing:0 !important;
  font-size:14px !important;font-weight:var(--fw-roman) !important;
  color:var(--text-ingress) !important;background:none !important;
  padding:0 !important;border:0 !important;border-radius:0 !important}

/* v8 hade tre knappstorlekar. 3.0 har en: 44 px. */
[class*="jms5-"] :is(.jms5-btn-lg,.jms5-btn-sm,.jms5-btn-xl){
  min-height:44px !important;height:auto !important;
  padding:12px 24px !important;font-size:16px !important}

/* v8:s gamla bläck och gråtoner, kvar i enstaka regler med hög vikt. */
[class*="jms5-"] :is(h1,h2,h3,h4)[class]{color:var(--ink)}

/* --- H2. v8:s markup i 3.0:s kläder -------------------------------------
   Tills pluginet byts renderar sajten v8:s HTML. Två block skiljer sig så
   mycket att de behöver egna regler: heron och erbjudandekorten.

   HERON. v8 delar sektionen i text + fotoruta bredvid. 3.0 lägger fotot
   bakom och texten i den lugna zonen till vänster. Det går att göra i CSS
   eftersom markupen bara har två barn. */
/* Heron ska gå kant i kant. Elementor lägger den i en spalt med 1220 px
   max-bredd, så sektionen bryter ut ur sin behållare med negativ marginal
   mot halva fönstret. body har overflow-x:hidden, annars ger 100vw en
   vågrät rullning på sidor med rullningslist. */
.jms5-hero-with-photo{position:relative;isolation:isolate;overflow:hidden;
  display:block !important;min-height:min(86vh,800px);
  width:100vw;max-width:none;margin-inline:calc(50% - 50vw);
  padding:clamp(40px,6vw,96px) 0 !important;background:var(--n-01)}
.jms5-hero-with-photo > .jms5-photo-placeholder{position:absolute;inset:0;z-index:-2;
  margin:0 !important;padding:0 !important;border-radius:0 !important;background:none !important;
  aspect-ratio:auto !important;max-width:none !important;width:100%;height:100%}
.jms5-hero-with-photo > .jms5-photo-placeholder img{width:100%;height:100%;
  object-fit:cover;border-radius:0 !important;display:block}
.jms5-hero-with-photo::before{content:"";position:absolute;inset:0;z-index:-1;
  /* Starkare och bredare än i facit: sajtens foto har motivet mitt i
     bilden, så texten hamnar ovanpå två ansikten. Vitt till 88 procent
     halvvägs, sedan ut. */
  background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.94) 26%,
    rgba(255,255,255,.80) 44%,rgba(255,255,255,.28) 62%,rgba(255,255,255,0) 78%)}
/* Texten följer sidans vänsterkant, inte sektionens. Därför padding mot
   halva överskottet, aldrig mindre än sidans vanliga marginal. */
.jms5-hero-with-photo > .jms5-hero-text{position:relative;z-index:1;
  max-width:none;margin:0;
  padding-inline:max(var(--gutter),calc((100vw - var(--jms5-content-width)) / 2));
  display:flex;flex-direction:column;justify-content:center;min-height:inherit}
[class*="jms5-"] .jms5-hero-with-photo h1{max-width:13ch}
.jms5-hero-with-photo .jms5-hero-sub{max-width:34ch}
.jms5-hero-with-photo .jms5-hero-proof{max-width:46ch}
.jms5-hero-with-photo .jms5-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
/* Sekundärknappen står på papper här, inte på foto: glaset hade inget att
   bryta mot och läste som en grå platta. */
.jms5-hero-with-photo .jms5-btn-secondary{background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 0 0 .5px rgba(60,60,67,.16);color:var(--ink)}
.jms5-hero-with-photo .jms5-hero-proof{margin-top:clamp(26px,3vw,40px)}
@media (max-width:1080px){
  /* Fotoguiden: mörka bilder läser som melankoli. Under 1081 blir fotot
     ett band över texten i stället för en botten att lägga text på. */
  .jms5-hero-with-photo{min-height:0;background:var(--surface);
    display:flex !important;flex-direction:column-reverse;padding-top:0 !important}
  .jms5-hero-with-photo::before{display:none}
  .jms5-hero-with-photo > .jms5-photo-placeholder{position:static;width:100%;
    height:clamp(240px,40vh,400px);z-index:0}
  .jms5-hero-with-photo > .jms5-hero-text{max-width:none;min-height:0;
    padding-top:clamp(28px,5vw,44px)}
  .jms5-hero-with-photo .jms5-hero-sub{max-width:none}
}

/* KORTEN. v8 lägger texten i en <div> och gör CTA till en textlänk. Lagret
   görs genomskinligt i §C3; här tas kategorin bort och länken blir det
   piller den ska vara. Kategorin sa samma sak som löftesraden. */
.jms5-behov-kort .jms5-behov-kat{display:none !important}
.jms5-behov-kort p.jms5-behov-cta{display:flex;align-items:center;margin:clamp(22px,2.2vw,30px) 0 0;padding:0}
.jms5-behov-kort .jms5-behov-cta a{display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:12px 24px;border-radius:var(--r-pill);
  background:var(--n-02);color:var(--ink) !important;text-decoration:none !important;
  font-size:16px;font-weight:var(--fw-roman);letter-spacing:var(--ls-btn);white-space:nowrap}
.jms5-behov-kort .jms5-behov-cta a:hover{opacity:.9}
.jms5-behov-kort .jms5-behov-cta .jms5-ikon{display:none}

/* Raderna: v8 ritar en liten ruta i SVG. Den får vara radens tecken tills
   ikonen kommer med pluginet. Ingen vald-yta: korten är inga formulär. */
.jms5-behov-kort .jms5-behov-rader{display:grid;gap:10px;margin:24px 0 0;padding:0;border:0}
.jms5-behov-kort .jms5-behov-rad{display:flex;align-items:flex-start;gap:11px;
  padding:0 !important;margin:0 !important;border:0 !important;background:none !important}
.jms5-behov-kort .jms5-behov-rad::before{content:none}
.jms5-behov-kort .jms5-behov-rad .jms6-form{display:block;flex:none;width:15px;height:15px;
  margin-top:3px;color:var(--n-04)}
.jms5-behov-kort .jms5-behov-rad .jms6-form path{stroke-dasharray:none;stroke-dashoffset:0;opacity:1}