/* Logwells webbplats.
   Ljust läge, alltid. Sidan är byggd av paneler med rundade hörn på en
   tonad botten. Två färger bär den: appens gröna (ikonens, sedan 2026-10-18), och en varm sandton
   från appens egen bakgrund. Färgerna ligger samlade i "Färgpasset" sist
   i filen; reglerna ovanför det sätter form och mått.
   Fungerar utan JavaScript; rörelserna i sajt.js är ett lager ovanpå. */

:root{
  color-scheme:light;
  --botten:#EEF3F0; --panel:#FFFFFF;
  --black:#0F1317; --text:#4E5863; --svag:#7C8690;
  --linje:rgba(15,19,23,.075); --linje-stark:rgba(15,19,23,.12);
  /* Appens gröna, samma som ikonen. --acc-black är den mörkare, för text och länkar:
     den ljusa räcker inte i kontrast mot vitt i brödtextstorlek. */
  --acc:#2E9150; --acc-djup:#1F7A3C; --acc-black:#17602F; --acc-ton:#E6F6EB; --acc-ton2:#F2FBF5;
  --overgang:linear-gradient(135deg,#3BA45F 0%,#1F7A3C 100%);
  --r-xl:32px; --r-lg:22px; --r-md:16px; --piller:999px;
  --sk-panel:0 1px 2px rgba(15,19,23,.04),0 30px 70px -40px rgba(15,19,23,.22);
  --sk-kort:0 1px 2px rgba(15,19,23,.04),0 14px 30px -22px rgba(15,19,23,.2);
  --sk-acc:0 10px 24px -10px rgba(31,122,60,.55);
  --bredd:1240px; --glapp:22px; --kant:clamp(20px,4.4vw,60px); --hojd:clamp(44px,6.4vw,86px);
  --typ:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (max-width:560px){:root{--glapp:10px}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--botten);color:var(--text);font:17px/1.6 var(--typ);-webkit-font-smoothing:antialiased;padding:0 var(--glapp) var(--glapp)}
img{max-width:100%;display:block}
a{color:var(--acc-black)}
h1,h2,h3{color:var(--black);margin:0;font-weight:800;letter-spacing:-.04em;line-height:1.04}
h1{font-size:clamp(2.35rem,1.6rem + 2.8vw,4.1rem)}
h2{font-size:clamp(1.9rem,1.35rem + 2vw,3rem)}
h3{font-size:1.18rem;letter-spacing:-.02em;line-height:1.2;font-weight:750}
p{margin:0}
strong{color:var(--black);font-weight:650}
.acc{color:var(--acc-djup)}
hr{border:0;border-top:1px solid var(--linje);margin:clamp(34px,5vw,60px) 0}

.hoppa{position:fixed;left:14px;top:-80px;z-index:100;background:var(--black);color:#fff;padding:.7rem 1rem;border-radius:var(--piller);font-weight:650;text-decoration:none;transition:top .2s}
.hoppa:focus{top:14px}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:6px}

/* Språken ligger båda i sidan; det som inte är valt göms. */
/* Bara det valda språket syns. Utan skript står data-sprak="sv" kvar i sidan,
   så då syns svenskan. */
html:not([data-sprak="sv"]) [data-l="sv"],html:not([data-sprak="en"]) [data-l="en"],
html:not([data-sprak="de"]) [data-l="de"],html:not([data-sprak="es"]) [data-l="es"],
html:not([data-sprak="fr"]) [data-l="fr"],html:not([data-sprak="ar"]) [data-l="ar"]{display:none !important}

/* ── Menyn, som följer med ── */
.topp{position:sticky;top:0;z-index:40;margin:0 calc(var(--glapp) * -1);padding:0 var(--glapp);transition:background-color .28s,box-shadow .28s}
.topp.skrollad{background:color-mix(in srgb,var(--botten) 82%,transparent);-webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);box-shadow:0 1px 0 var(--linje),0 14px 30px -26px rgba(15,19,23,.5)}
.topp .rad{max-width:var(--bredd);margin:0 auto;display:flex;align-items:center;gap:14px;min-height:72px;padding:0 clamp(6px,2.4vw,30px)}
.logga{display:inline-flex;align-items:center;gap:11px;font-weight:800;font-size:1.16rem;letter-spacing:-.03em;color:var(--black);text-decoration:none}
.logga .bricka{width:38px;height:38px;border-radius:10px;overflow:hidden;box-shadow:var(--sk-acc);flex:none}
.logga .bricka img{width:100%;height:100%}
.logga .bricka svg{width:23px;height:14px}
.topp nav{margin-inline-start:auto;display:flex;align-items:center;gap:4px}
.topp nav a.lank{color:var(--black);text-decoration:none;font-size:.95rem;font-weight:620;padding:9px 13px;border-radius:var(--piller);transition:background .2s,color .2s}
.topp nav a.lank:hover{background:rgba(15,19,23,.05)}
.topp nav a.lank.har{color:var(--acc-black);background:var(--acc-ton)}
.sprakval{display:inline-flex;align-items:center;gap:2px;margin-inline-start:8px;padding:4px;border-radius:var(--piller);background:#fff;border:1px solid var(--linje);box-shadow:var(--sk-kort)}
.sprakval svg{width:17px;height:17px;margin:0 4px 0 7px;color:var(--svag)}
.sprakval button{appearance:none;border:0;background:none;color:var(--text);font:650 .86rem/1 var(--typ);padding:8px 12px;border-radius:var(--piller);cursor:pointer}
.sprakval button[aria-pressed="true"]{background:var(--acc-ton);color:var(--acc-black)}
.menyknapp{display:none;appearance:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--linje);background:#fff;box-shadow:var(--sk-kort);color:var(--black);cursor:pointer;place-items:center;margin-inline-start:6px;flex:none}
.menyknapp svg{width:21px;height:21px}
.menyknapp path{transition:transform .25s;transform-origin:12px 12px}
.topp.oppen .menyknapp .s1{transform:translateY(4px) rotate(45deg)}
.topp.oppen .menyknapp .s2{transform:translateY(-4px) rotate(-45deg)}
@media (max-width:1060px){
  .topp .rad{position:relative}
  .topp nav a.gomsmal{display:none}
  /* Knappen finns bara när skriptet gör det; utan skript står länkarna i foten.
     Med knappen ryms inte Support bredvid: den ligger i den utfällda menyn. */
  html.js .menyknapp{display:grid}
  html.js .topp:not(.oppen) nav a.lank{display:none}
  .topp.oppen nav a.lank{display:block}
  .topp.oppen nav{position:absolute;top:calc(100% + 6px);left:0;right:0;margin:0;flex-direction:column;align-items:stretch;gap:2px;padding:10px;background:#fff;border:1px solid var(--linje);border-radius:var(--r-lg);box-shadow:0 34px 60px -26px rgba(15,19,23,.45)}
  .topp.oppen nav a.gomsmal{display:block}
  .topp.oppen nav a.lank{padding:13px 14px;font-size:1.02rem}
  .topp.oppen .sprakval{margin:8px 0 2px 6px;align-self:flex-start}
  .topp.oppen .menyknapp{margin-inline-start:auto}
}
@media (max-width:520px){.sprakval svg{display:none}.topp .rad{min-height:64px}}

/* ── Knappar och brickor ── */
.knapp{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;padding:.9rem 1.45rem;border:1px solid transparent;border-radius:var(--piller);font:650 1rem/1.15 var(--typ);text-decoration:none;white-space:nowrap;transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
a.knapp:hover{transform:translateY(-1px)}
.knapp.butik{background:var(--overgang);color:#fff;box-shadow:var(--sk-acc);padding:.72rem 1.5rem .72rem 1.2rem;text-align:start}
.knapp.butik svg{width:26px;height:26px;flex:none}
.knapp.butik small{display:block;font-size:.74rem;font-weight:600;opacity:.92;letter-spacing:.01em}
.knapp.butik b{display:block;font-size:1.16rem;font-weight:800;letter-spacing:-.02em}
.knapp.vit{background:#fff;color:var(--black);border-color:var(--linje-stark);box-shadow:var(--sk-kort)}
.knapp.butik.enkel{padding:.85rem 1.5rem;font-weight:750}
a.pil{font-weight:650;text-decoration:none}
a.pil:hover{text-decoration:underline}
.marke{display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .85rem;border-radius:var(--piller);background:#fff;border:1px solid var(--linje-stark);color:var(--acc-black);font-weight:650;font-size:.86rem;line-height:1.2}
.marke svg{width:15px;height:15px;flex:none}
.ikon{width:42px;height:42px;border-radius:13px;background:var(--acc-ton);color:var(--acc-black);display:grid;place-items:center;flex:none}
.ikon svg{width:21px;height:21px}

/* ── Panelerna ── */
.skal{position:relative;max-width:var(--bredd);margin:0 auto var(--glapp);padding:var(--hojd) var(--kant);border:1px solid rgba(15,19,23,.055);border-radius:var(--r-xl);background:var(--panel);box-shadow:var(--sk-panel);overflow:hidden;isolation:isolate}
/* Klippta hörn stoppar position:sticky inuti panelen. Berättelsen behöver
   synligt överflöde för att telefonen ska kunna stå kvar. */
.skal.fri{overflow:visible}
.skal.ton{background:radial-gradient(90% 70% at 100% 0%,rgba(47,188,90,.13),rgba(47,188,90,0) 60%),linear-gradient(180deg,#fff 0%,var(--acc-ton2) 100%)}
.lead{font-size:clamp(1.05rem,.98rem + .35vw,1.22rem);line-height:1.62;margin-top:1.1rem;max-width:33em}
.mitt{text-align:center}
.mitt .lead{margin-inline:auto}

/* ── Början ── */
.skal.hero{padding-block:clamp(26px,4vw,56px) clamp(34px,4.6vw,64px);background:radial-gradient(120% 90% at 92% 0%,rgba(47,188,90,.15),rgba(47,188,90,0) 58%),linear-gradient(180deg,#fff 0%,#FAFEFC 62%,#F2FBF5 100%)}
.hero-rutnat{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(20px,3vw,48px);align-items:center}
.knappar{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem;align-items:center}
.bockar-rad{display:flex;flex-wrap:wrap;gap:10px 22px;margin:1.7rem 0 0;padding:0;list-style:none;font-size:.93rem}
.bockar-rad li{display:flex;align-items:center;gap:.5rem}
.bockar-rad.mitten{justify-content:center}
.bockar-rad li::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;background:var(--acc-ton) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6B87' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8.2'/%3E%3C/svg%3E") center/11px no-repeat;border:1px solid rgba(23,126,59,.22)}

/* Två lutade telefoner med ett sken bakom och ett par svävande brickor. */
.scen{position:relative;height:clamp(430px,44vw,640px);perspective:1700px}
.scen::before{content:"";position:absolute;inset:6% 2% 4% 14%;border-radius:50%;background:radial-gradient(closest-side,rgba(47,188,90,.34),rgba(47,188,90,0));filter:blur(26px);z-index:-1}
.scen .telefon{position:absolute}
.scen .bak{width:38%;left:5%;top:19%;transform:rotateY(24deg) rotateX(5deg) rotateZ(-3deg)}
.scen .fram{width:47%;right:3%;top:2%;transform:rotateY(-19deg) rotateX(7deg) rotateZ(4deg)}
.svav{position:absolute;width:74px;height:74px;border-radius:22px;background:#fff;border:1px solid var(--linje);box-shadow:0 22px 40px -18px rgba(15,19,23,.35);display:grid;place-items:center;color:var(--acc-djup)}
.svav svg{width:34px;height:34px}
.svav.a{left:12%;top:2%;rotate:-9deg}
.svav.b{right:0;bottom:12%;rotate:11deg;width:62px;height:62px;border-radius:19px}
.svav.b svg{width:28px;height:28px}
.rorelse .svav.a{animation:svava 7s ease-in-out infinite}
.rorelse .svav.b{animation:svava 8s ease-in-out -3s infinite}
@keyframes svava{50%{translate:0 -10px}}
@media (max-width:900px){
  .hero-rutnat{grid-template-columns:1fr}
  .scen{height:min(118vw,560px);margin-top:14px}
  .scen .bak{left:2%}.scen .fram{right:1%}
}

/* ── Telefonen ── */
/* Ramen har ingen utfyllnad: procent i padding räknas på omgivningens bredd
   och gav olika tjock kant beroende på var telefonen stod. Bilden läggs i
   stället in med mått i procent av ramen själv. Yttermåttet är valt så att
   insidan får exakt skärmbildens proportioner med lika tjock kant runt om. */
.telefon{position:relative;aspect-ratio:1000/2104;border-radius:13.5% / 6.4%;background:linear-gradient(145deg,#3A3F45,#0E1114 38%,#23272C);box-shadow:0 0 0 1.5px rgba(255,255,255,.22) inset,0 0 0 1px rgba(0,0,0,.5),0 50px 80px -36px rgba(15,19,23,.6),0 18px 30px -18px rgba(15,19,23,.45)}
.telefon img{position:absolute;left:2.6%;top:1.236%;width:94.8%;height:97.528%;max-width:none;object-fit:cover;border-radius:11.6% / 5.36%;background:#E9E4D9}
.telefon-stack img{opacity:0;transition:opacity .45s ease}
.telefon-stack img.ar{opacity:1}

/* ── Så funkar det: telefonen står kvar medan stegen rullar förbi ── */
.berattelse-rutnat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start;margin-top:10px}
.berattelse-telefon{position:sticky;top:max(92px,calc(50vh - 356px));display:flex;justify-content:center;padding-block:10px}
.berattelse-telefon::before{content:"";position:absolute;inset:8% 6%;border-radius:50%;background:radial-gradient(closest-side,rgba(47,188,90,.26),rgba(47,188,90,0));filter:blur(24px);z-index:-1}
.berattelse-telefon .telefon{width:auto;height:min(680px,calc(100vh - 140px))}
.steg{list-style:none;margin:0;padding:0}
.steg li{position:relative;min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:26px 0 26px 30px;opacity:.34;transition:opacity .35s}
.steg li::before{content:"";position:absolute;inset-inline-start:0;top:50%;width:4px;height:78px;margin-top:-39px;border-radius:4px;background:var(--linje-stark);transform:scaleY(.5);transition:transform .35s,background .35s}
.steg li.aktiv{opacity:1}
.steg li.aktiv::before{background:var(--overgang);transform:scaleY(1)}
.steg .nr{font-weight:750;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-black);margin-bottom:.7rem}
.steg h3{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);font-weight:800;letter-spacing:-.035em;line-height:1.08}
.steg p{margin-top:.7rem;max-width:26em}
html:not(.js) .steg li{opacity:1}
@media (max-width:900px){
  /* På en telefon står bilden kvar överst och följer med, och stegen kommer
     in underifrån som kort, ett i taget. Bara det aktiva kortet syns: då
     ligger aldrig text halvt gömd bakom bilden. */
  .berattelse-rutnat{grid-template-columns:1fr;gap:0}
  .berattelse-telefon{top:76px;z-index:1;padding:8px 0 22px}
  .berattelse-telefon .telefon{height:min(52vh,470px);height:min(52svh,470px)}
  .steg{position:relative;z-index:2}
  .steg li{min-height:0;display:block;margin:0 0 50vh;margin-bottom:50svh;padding:18px 20px 20px;background:#fff;border:1px solid var(--linje-stark);border-radius:var(--r-lg);box-shadow:0 26px 44px -22px rgba(15,19,23,.45);opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s}
  .steg li.aktiv{opacity:1;transform:none}
  .steg li::before{display:none}
  .steg li:last-child{margin-bottom:6vh}
  .steg h3{font-size:1.5rem}
  html:not(.js) .steg li{opacity:1;transform:none;margin-bottom:16px}
}

/* ── Rader med text på ena sidan och bild på den andra ── */
.tva{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,72px);align-items:center}
.tva.topplinje{align-items:start}
.tva h3.stor{font-size:clamp(1.45rem,1.15rem + 1vw,1.95rem);font-weight:800;letter-spacing:-.035em;line-height:1.1}
.tva p + p,.tva .stor + p{margin-top:.9rem}
@media (max-width:900px){.tva{grid-template-columns:1fr}.tva > .exempel,.tva > .telefonhall,.tva > .brickor{order:2}}

/* ── Kort ── */
.kort-rutnat{display:grid;gap:14px}
.kort-rutnat.fyra{grid-template-columns:repeat(4,1fr)}
.kort-rutnat.tre{grid-template-columns:repeat(3,1fr)}
.kort{background:#fff;border:1px solid var(--linje-stark);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sk-kort);display:flex;flex-direction:column;gap:.55rem}
.kort p{font-size:.96rem;line-height:1.55}
@media (hover:hover){.kort{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}.kort:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(15,19,23,.04),0 24px 40px -24px rgba(15,19,23,.3)}}
.liten-rubrik{font-size:.78rem;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:var(--svag);margin-bottom:1rem}
.kort .ikon{margin-bottom:.45rem}
.kort .marke{margin-top:auto;align-self:flex-start}
.kort p:has(+ .marke){margin-bottom:1.1rem}
@media (max-width:1000px){.kort-rutnat.fyra{grid-template-columns:repeat(2,1fr)}.kort-rutnat.tre{grid-template-columns:1fr}}
@media (max-width:560px){.kort-rutnat.fyra{grid-template-columns:1fr}}

/* ── Små bilder av appens rutor, ritade här. De är exempel, och det står
      under var och en. ── */
.exempel{background:linear-gradient(160deg,#fff 30%,var(--acc-ton2));border:1px solid var(--linje-stark);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sk-kort)}
.exempel .titel{display:flex;justify-content:space-between;align-items:baseline;font-weight:750;color:var(--black);font-size:.98rem;margin-bottom:1rem}
.exempel .titel > span:last-child{font-weight:600;color:var(--svag);font-size:.86rem}
.exempel .not{font-size:.8rem;color:var(--svag);margin-top:1rem;line-height:1.45}
.staplar{display:grid;gap:.85rem}
.staplar div{display:grid;grid-template-columns:5.6em 1fr 3.2em 5.6em;gap:.7rem;align-items:center;font-size:.92rem}
.staplar b{color:var(--black);font-weight:650}
.staplar i{height:8px;border-radius:8px;background:rgba(15,19,23,.08);position:relative;overflow:hidden}
.staplar i::after{content:"";position:absolute;inset:0;width:var(--v);border-radius:8px;background:var(--f,var(--overgang))}
.staplar em{font-style:normal;font-weight:750;color:var(--black);text-align:end;white-space:nowrap}
.staplar small{color:var(--svag);font-size:.8rem;text-align:end}
.streak{display:flex;align-items:baseline;gap:.5rem;color:var(--text);font-weight:600}
.streak svg{width:30px;height:30px;align-self:center}
.streak b{font-size:3rem;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--acc-djup)}
.rankrad + .rankrad{margin-top:1.15rem}
.rankrad .ovan{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;color:var(--black);font-size:.95rem}
.rankrad .ovan > span{font-weight:800;color:var(--acc-black);font-size:1.25rem;letter-spacing:-.03em}
.skala{position:relative;height:10px;border-radius:10px;background:rgba(15,19,23,.08);margin-top:.5rem}
.skala::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:var(--v);border-radius:10px;background:var(--overgang)}
.skala::after{content:"";position:absolute;top:50%;inset-inline-start:var(--v);width:16px;height:16px;margin-block:-8px 0;margin-inline:-8px 0;border-radius:50%;background:var(--acc-djup);border:3px solid #fff;box-shadow:0 2px 6px rgba(15,19,23,.3)}
.brickor{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.brickor > span{display:grid;place-items:center;text-align:center;padding:.8rem .5rem;border-radius:var(--r-md);background:#fff;border:1px solid var(--linje-stark);font-weight:650;font-size:.92rem;color:var(--black)}
.brickor > span.t{background:linear-gradient(135deg,var(--acc-ton),#fff);color:var(--acc-black)}
@media (max-width:520px){.staplar div{grid-template-columns:4.6em 1fr 3.7em}.staplar small{display:none}}
/* I streakrutan är den lilla texten själva måttet ("av 17"), så den står kvar. */
@media (max-width:520px){.staplar.kvar div{grid-template-columns:4.6em 1fr 2.4em 3.2em}.staplar.kvar small{display:block}}

.telefonhall{display:flex;justify-content:center;position:relative}
.telefonhall::before{content:"";position:absolute;inset:6% 18%;border-radius:50%;background:radial-gradient(closest-side,rgba(47,188,90,.24),rgba(47,188,90,0));filter:blur(22px);z-index:-1}
.telefonhall .telefon{width:min(280px,66vw)}

/* ── Tre skärmar i rad, med en rad text under var och en ── */
.telefoner{display:flex;justify-content:center;align-items:flex-start;gap:clamp(14px,3vw,34px)}
.telefoner figure{margin:0;width:min(250px,27vw)}
.telefoner figure:nth-child(2){margin-top:34px}
.telefoner figcaption{text-align:center;margin-top:1rem;font-weight:650;color:var(--black);font-size:.95rem}
@media (max-width:720px){
  .telefoner{overflow-x:auto;justify-content:flex-start;gap:16px;scroll-snap-type:x mandatory;margin-inline:calc(var(--kant) * -1);padding:6px var(--kant) 24px}
  .telefoner figure{width:62vw;flex:none;scroll-snap-align:center}
  .telefoner figure:nth-child(2){margin-top:0}
}

/* ── Talen ── */
.tal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(28px,4vw,48px)}
.tal div{background:#fff;border:1px solid var(--linje-stark);border-radius:var(--r-lg);padding:26px 24px;box-shadow:var(--sk-kort)}
.tal b{display:block;font-size:clamp(2.2rem,1.6rem + 2.2vw,3.3rem);font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--acc-djup)}
.tal span{display:block;margin-top:.7rem;font-size:.97rem;line-height:1.5}
.finstilt{color:var(--svag);font-size:.86rem;margin-top:1.4rem}
@media (max-width:720px){.tal{grid-template-columns:1fr}}

/* ── Integriteten ── */
.lyftkort{position:relative;background:linear-gradient(150deg,var(--acc-ton) 0%,#fff 62%);border:1px solid rgba(23,126,59,.22);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sk-kort);display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center}
.lyftkort h3{font-size:1.3rem;margin:.9rem 0 .6rem}
.lyftkort p{color:var(--black);font-size:.98rem}
.lyftkort .marke{margin-top:1.1rem}
.lyftkort .telefon{width:clamp(120px,15vw,170px);rotate:5deg}
@media (max-width:560px){.lyftkort{grid-template-columns:1fr}.lyftkort .telefon{display:none}}

/* ── Pris ── */
.bricka{display:inline-block;vertical-align:.18em;margin-inline-start:.35em;padding:.2em .65em;border-radius:var(--piller);background:var(--overgang);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.02em;line-height:1.4;white-space:nowrap}
.priser{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:720px;margin:clamp(28px,4vw,46px) auto 0;align-items:stretch}
.priskort{background:#fff;border:1px solid var(--linje-stark);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sk-kort)}
.priskort.framhavd{border-color:rgba(23,126,59,.35);background:linear-gradient(160deg,var(--acc-ton) 0%,#fff 58%);box-shadow:0 1px 2px rgba(15,19,23,.04),0 30px 50px -30px rgba(31,122,60,.55)}
.priskort h3{font-size:1.25rem}
.priskort .belopp{margin-top:.9rem;color:var(--text);font-weight:600}
.priskort .belopp b{font-size:clamp(2.2rem,1.8rem + 1.6vw,3rem);font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--black)}
.priskort.framhavd .belopp b{color:var(--acc-djup)}
.priskort .under{margin-top:.5rem;font-size:.93rem}
.lista{list-style:none;margin:1.3rem 0 0;padding:1.2rem 0 0;border-top:1px solid var(--linje);display:grid;gap:.7rem;font-size:.97rem}
.lista li{display:flex;gap:.6rem;align-items:flex-start;color:var(--black)}
.lista li::before{content:"";width:18px;height:18px;flex:none;margin-top:.2em;border-radius:50%;background:var(--acc-ton) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6B87' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8.2'/%3E%3C/svg%3E") center/11px no-repeat;border:1px solid rgba(23,126,59,.22)}
.lista li.rubrik::before{display:none}
.ingar{display:grid;grid-template-columns:1.9fr 1fr;gap:16px;max-width:1040px;margin:16px auto 0}
.ingar>div{background:#fff;border:1px solid var(--linje-stark);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sk-kort)}
.ingar .alltid{background:var(--acc-ton);border-color:rgba(23,126,59,.22);box-shadow:none}
.ingar h3{font-size:1.1rem}
.ingar .lista{margin-top:1rem;padding-top:1rem}
.lista.tva-spalter{grid-template-columns:1fr 1fr;column-gap:1.4rem}
@media (max-width:900px){.priser{grid-template-columns:1fr;max-width:520px}.ingar{grid-template-columns:1fr;max-width:520px}}
@media (max-width:560px){.lista.tva-spalter{grid-template-columns:1fr}}

/* ── Hämta ── */
.skal.hamta{text-align:center;background:radial-gradient(70% 90% at 50% 100%,rgba(47,188,90,.2),rgba(47,188,90,0) 70%),linear-gradient(180deg,#fff,var(--acc-ton2))}
.skal.hamta .lead{margin-inline:auto}
.skal.hamta .knappar{justify-content:center}

/* ── Frågor och kontakt ── */
.fragor{display:grid;gap:10px;margin-top:1.6rem}
.fragor details{background:#fff;border:1px solid var(--linje-stark);border-radius:var(--r-md);padding:0 18px;box-shadow:var(--sk-kort)}
.fragor summary{cursor:pointer;list-style:none;padding-block:16px;padding-inline:0 38px;font-weight:700;color:var(--black);letter-spacing:-.01em;position:relative}
.fragor summary::-webkit-details-marker{display:none}
.fragor summary::after{content:"+";position:absolute;inset-inline-end:0;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:var(--acc-ton);color:var(--acc-black);display:grid;place-items:center;font-weight:700;font-size:1.1rem;line-height:1;transition:transform .25s}
.fragor details[open] summary::after{transform:rotate(45deg)}
.fragor details p{padding:0 0 16px;font-size:.97rem}
.kontakt{background:linear-gradient(160deg,var(--acc-ton),#fff 70%);border:1px solid rgba(23,126,59,.2);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sk-kort)}
.kontakt p{margin-top:.8rem;font-size:.98rem}
.kontakt .knapp{margin-top:1.2rem}

/* ── Textsidorna (integritet, support) ── */
.skal.textsida{max-width:900px}
.textsida h1{font-size:clamp(2rem,1.5rem + 2vw,3rem)}
.textsida h2{font-size:.8rem;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:var(--svag);margin:2.1rem .25rem .7rem;line-height:1.3}
.textsida .ruta{background:#fff;border:1px solid var(--linje-stark);border-radius:var(--r-md);padding:18px 20px;box-shadow:var(--sk-kort)}
.textsida .ruta p{margin:0 0 .65rem}
.textsida .ruta p:last-child,.textsida .ruta ul:last-child{margin-bottom:0}
.textsida .ruta ul{margin:0 0 .65rem;padding-inline-start:1.2rem}
.textsida .ruta li{margin:.3rem 0}
.textsida .lyft{background:linear-gradient(150deg,var(--acc-ton),#fff 70%);border-color:rgba(23,126,59,.22)}
.textsida .lyft p{color:var(--black)}
.textsida .datum{color:var(--svag);font-size:.86rem;margin:1.4rem .25rem 0}

/* ── Foten ── */
footer{max-width:var(--bredd);margin:0 auto;padding:clamp(26px,4vw,44px) clamp(8px,3vw,40px) 10px;font-size:.93rem}
.fot-rutnat{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
footer h4{margin:0 0 .8rem;font-size:.74rem;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:var(--svag)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
footer a{color:var(--black);text-decoration:none;font-weight:600}
footer a:hover{color:var(--acc-black)}
footer .slogan{margin-top:.8rem;max-width:22em}
.fot-botten{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;margin-top:30px;padding-top:20px;border-top:1px solid var(--linje);color:var(--svag);font-size:.82rem}
.fot-botten a{color:var(--svag);font-weight:500;text-decoration:underline}
@media (max-width:720px){.fot-rutnat{grid-template-columns:1fr 1fr}.fot-rutnat > div:first-child{grid-column:1 / -1}}

/* ── Färgpasset (2026-10-13) ──
   Sidan var nästan helt vit: vita paneler, vita kort, vita brickor. Här får
   varje panel en egen ton och ett sken, brickorna fylls, och två ytor är
   helt i färg: scenen bakom telefonen och bandet för nedladdningen. Fortsatt
   ljust läge, inga mörka paneler. Vit text står bara på den djupare
   gröna (#1F7A3C och mörkare), där kontrasten räcker. */
:root{
  --botten:#E0EFE5;
  --djup:linear-gradient(135deg,#1F7A3C 0%,#186A33 48%,#11532A 100%);
  --sand:#FBF4E6; --sand-kant:rgba(150,104,24,.2); --sand-black:#7A5410;
  --gul:#D98E1F; --gul-ton:#FCEBCB; --gron:#2F8F52; --gron-ton:#DCF2E3; --rod:#C44941; --rod-ton:#FADFDB;
}
body{background:
  radial-gradient(58% 32% at 0% 0%,rgba(47,188,90,.26),rgba(47,188,90,0) 70%),
  radial-gradient(46% 26% at 100% 22%,rgba(224,165,46,.2),rgba(224,165,46,0) 70%),
  radial-gradient(60% 30% at 0% 62%,rgba(47,188,90,.2),rgba(47,188,90,0) 70%),
  radial-gradient(60% 30% at 100% 100%,rgba(47,188,90,.24),rgba(47,188,90,0) 70%),
  var(--botten)}
/* Tätare än förut: de färgade banden lyste annars igenom menyn. */
.topp.skrollad{background:color-mix(in srgb,#E7F3EB 93%,transparent)}

/* Panelerna: ingen är helt vit längre. */
.skal{background:linear-gradient(180deg,#FFFFFF 0%,#F5FBF7 100%);border-color:rgba(23,126,59,.12)}
.skal.hero{border-color:rgba(23,126,59,.18);background:
  radial-gradient(64% 78% at 86% 10%,rgba(47,188,90,.42),rgba(47,188,90,0) 62%),
  radial-gradient(46% 56% at 0% 100%,rgba(224,165,46,.2),rgba(224,165,46,0) 66%),
  linear-gradient(155deg,#FFFFFF 0%,#EBF9EF 52%,#D5F2DF 100%)}
.skal.ton{border-color:rgba(23,126,59,.18);background:
  radial-gradient(70% 60% at 100% 0%,rgba(47,188,90,.3),rgba(47,188,90,0) 62%),
  radial-gradient(50% 50% at 0% 100%,rgba(47,188,90,.16),rgba(47,188,90,0) 66%),
  linear-gradient(180deg,#E4F6EA 0%,#F4FBF6 100%)}
#integritet.skal.ton{background:
  radial-gradient(70% 60% at 0% 0%,rgba(47,188,90,.28),rgba(47,188,90,0) 62%),
  radial-gradient(50% 50% at 100% 100%,rgba(224,165,46,.14),rgba(224,165,46,0) 66%),
  linear-gradient(180deg,#E7F7ED 0%,#F6FBF7 100%)}
#sa-funkar{background:
  radial-gradient(50% 30% at 0% 0%,rgba(47,188,90,.2),rgba(47,188,90,0) 70%),
  linear-gradient(180deg,#F2FAF4 0%,#FFFFFF 26%,#FFFFFF 74%,#EFF9F2 100%)}
/* Den varma panelen: appens egen bakgrund är benvit, inte blå. */
#funktioner,#fragor{border-color:var(--sand-kant);background:
  radial-gradient(60% 46% at 0% 0%,rgba(224,165,46,.22),rgba(224,165,46,0) 66%),
  radial-gradient(50% 40% at 100% 100%,rgba(47,188,90,.14),rgba(47,188,90,0) 66%),
  linear-gradient(180deg,#FFFCF6 0%,var(--sand) 100%)}
#pris{background:
  radial-gradient(60% 46% at 50% 0%,rgba(47,188,90,.22),rgba(47,188,90,0) 66%),
  linear-gradient(180deg,#FFFFFF 0%,#EFF9F2 100%)}

/* Brickor och märken: fyllda i stället för vita. */
.marke{background:var(--acc-ton);border-color:rgba(23,126,59,.26)}
#funktioner .marke,#fragor .marke{background:var(--gul-ton);border-color:var(--sand-kant);color:var(--sand-black)}
.ikon{background:var(--overgang);color:#fff;box-shadow:var(--sk-acc)}
.kort-rutnat.fyra .kort:nth-child(2) .ikon{background:linear-gradient(135deg,#F0B347,#D98E1F);box-shadow:0 10px 24px -10px rgba(217,142,31,.6)}
.kort-rutnat.fyra .kort:nth-child(3) .ikon{background:linear-gradient(135deg,#46413A,#1D1B18);box-shadow:0 10px 24px -10px rgba(29,27,24,.55)}
.kort-rutnat.fyra .kort:nth-child(4) .ikon{background:linear-gradient(135deg,#DB6B62,#C44941);box-shadow:0 10px 24px -10px rgba(196,73,65,.6)}
.svav.a{background:var(--overgang);border-color:transparent;color:#fff;box-shadow:0 22px 40px -16px rgba(31,122,60,.7)}
.svav.b{background:linear-gradient(135deg,#F0B347,#D98E1F);border-color:transparent;color:#fff;box-shadow:0 22px 40px -16px rgba(217,142,31,.7)}
.scen::before{background:radial-gradient(closest-side,rgba(47,188,90,.55),rgba(47,188,90,0))}

/* Korten får en färgad kant upptill, så att en rad kort inte är fyra vita rutor. */
.kort{border-top:3px solid var(--acc);border-color:rgba(23,126,59,.16);border-top-color:var(--acc)}
.kort-rutnat.fyra .kort:nth-child(2){border-top-color:var(--gul)}
.kort-rutnat.fyra .kort:nth-child(3){border-top-color:#1D1B18}
.kort-rutnat.fyra .kort:nth-child(4){border-top-color:var(--rod)}
.exempel{border-color:rgba(23,126,59,.2);background:linear-gradient(160deg,#fff 20%,var(--acc-ton))}
#funktioner .exempel{border-color:var(--sand-kant);background:linear-gradient(160deg,#fff 30%,#FFF6E3)}
.brickor > span{border-color:rgba(23,126,59,.16)}
.brickor > span.t{background:linear-gradient(135deg,#D0F0DA,#EBF9EF)}
.liten-rubrik{color:var(--acc-black)}
#funktioner .liten-rubrik{color:var(--sand-black)}

/* Så funkar det: telefonen står på en fylld grön scen. */
.berattelse-telefon::before{inset:3% 9%;border-radius:46px;background:
  radial-gradient(80% 60% at 30% 12%,rgba(255,255,255,.3),rgba(255,255,255,0) 60%),
  linear-gradient(160deg,#48B068 0%,#1F7A3C 48%,#11532A 100%);
  filter:none;box-shadow:0 50px 90px -46px rgba(20,116,54,.85),0 0 0 1px rgba(255,255,255,.35) inset}
.steg .nr{display:inline-block;align-self:flex-start;padding:.34rem .75rem;border-radius:var(--piller);background:var(--acc-ton);border:1px solid rgba(23,126,59,.22)}
.steg li.aktiv .nr{background:var(--overgang);border-color:transparent;color:#fff}
@media (max-width:900px){
  .berattelse-telefon::before{inset:0 14%;border-radius:34px}
  .steg li{border-color:rgba(23,126,59,.24);border-top:3px solid var(--acc)}
}

/* Talen: en färg var. */
.tal div{border-color:rgba(23,126,59,.18);border-inline-start:4px solid var(--acc)}
.tal div:nth-child(2){border-inline-start-color:var(--gul)}
.tal div:nth-child(2) b{color:#B4700F}
.tal div:nth-child(3){border-inline-start-color:var(--gron)}
.tal div:nth-child(3) b{color:#22703F}

/* Priset: året är kortet i färg. */
.priskort{border-color:rgba(23,126,59,.16)}
.priskort.framhavd{background:var(--djup);border-color:transparent;color:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(15,19,23,.04),0 34px 60px -30px rgba(20,116,54,.85)}
.priskort.framhavd h3,.priskort.framhavd .belopp b{color:#fff}
.priskort.framhavd .belopp,.priskort.framhavd .under{color:rgba(255,255,255,.9)}
.priskort.framhavd .bricka{background:#fff;color:var(--acc-black)}
.ingar>div{border-color:rgba(23,126,59,.16)}
.ingar .alltid{background:linear-gradient(160deg,var(--gul-ton),#FFF8EA);border-color:var(--sand-kant)}
.ingar .alltid h3{color:var(--sand-black)}

/* Nedladdningen: ett band helt i färg. */
.skal.hamta{border-color:transparent;color:rgba(255,255,255,.92);background:
  radial-gradient(60% 80% at 12% 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 60%),
  radial-gradient(50% 70% at 100% 100%,rgba(240,179,71,.3),rgba(240,179,71,0) 62%),
  var(--djup);box-shadow:0 1px 2px rgba(15,19,23,.04),0 40px 80px -40px rgba(20,116,54,.8)}
.skal.hamta h2{color:#fff}
.skal.hamta .acc{color:#FFE2A6}
.skal.hamta .knapp.butik{background:#fff;color:var(--acc-black);box-shadow:0 18px 34px -16px rgba(0,0,0,.45)}
.skal.hamta .bockar-rad{color:rgba(255,255,255,.92)}
.skal.hamta .bockar-rad li::before{background-color:#fff}
.skal.hamta .finstilt{color:rgba(255,255,255,.78)}

/* Frågorna och kontakten. */
.fragor details{border-color:var(--sand-kant)}
.fragor details[open]{border-inline-start:4px solid var(--gul)}
.fragor summary::after{background:var(--gul-ton);color:var(--sand-black)}
.kontakt{background:var(--djup);border-color:transparent;color:rgba(255,255,255,.9);box-shadow:0 30px 60px -32px rgba(20,116,54,.8)}
.kontakt h3{color:#fff}
.kontakt .ikon{background:rgba(255,255,255,.18);box-shadow:none}
.kontakt .knapp.butik{background:#fff;color:var(--acc-black);box-shadow:0 16px 30px -16px rgba(0,0,0,.45)}
.kontakt a:not(.knapp){color:#fff}

/* Textsidorna. */
.skal.textsida{background:
  radial-gradient(70% 30% at 100% 0%,rgba(47,188,90,.26),rgba(47,188,90,0) 64%),
  linear-gradient(180deg,#FFFFFF 0%,#F3FAF5 100%)}
.textsida h2{color:var(--acc-black)}
.textsida .ruta{border-color:rgba(23,126,59,.16);border-inline-start:4px solid var(--acc)}
.textsida .lyft{border-inline-start-color:var(--gul);background:linear-gradient(150deg,var(--gul-ton),#fff 70%);border-color:var(--sand-kant)}

/* Foten: en egen panel, inte lös text på botten. */
footer{margin-bottom:var(--glapp);padding:clamp(28px,4vw,46px) var(--kant) 22px;border-radius:var(--r-xl);border:1px solid rgba(23,126,59,.18);background:
  radial-gradient(60% 80% at 0% 0%,rgba(47,188,90,.3),rgba(47,188,90,0) 62%),
  linear-gradient(180deg,#D7F0E0 0%,#E7F6EC 100%)}
footer h4{color:var(--acc-black)}
.fot-botten{border-top-color:rgba(23,126,59,.2);color:#546C5F}
.fot-botten a{color:#546C5F}

/* ── Rörelsen: bara när sajt.js satt klassen, och aldrig om läsaren bett
      om stillhet. Utan skript ligger allt synligt från början. ── */
.rorelse .in{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
.rorelse .in.syns{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .telefon-stack img,.steg li,.steg li::before,.knapp{transition:none}
}

/* ── Loggan och rubrikerna (2026-10-18) ──
   Loggan är ordet "Logwell" på sin gröna bricka, samma bokstäver som appens
   ikon och startskärm (verktyg/ikon/webb.py). Förut stod appikonen med sitt
   lilla "Log well" bredvid samma ord i text: namnet två gånger, och det i
   ikonen gick inte att läsa.
   Rubrikerna är rundade som i appen. På Apples enheter ger ui-rounded
   systemets rundade typsnitt; annars Nunito, som ligger på sidan. */
@font-face{font-family:"Nunito";src:url(nunito.woff) format("woff");font-weight:700 1000;font-style:normal;font-display:swap}
:root{--rund:ui-rounded,"SF Pro Rounded","Nunito",var(--typ)}
h1,h2,h3,h4,.steg h3,.tva h3.stor,.streak b,.tal b,.priskort .belopp b,.knapp.butik b,.rankrad .ovan > span{font-family:var(--rund)}
h1,h2{letter-spacing:-.025em}
.steg h3,.tva h3.stor{letter-spacing:-.02em}
.logga{gap:0}
.logga img{display:block;height:38px;width:auto;border-radius:11px;box-shadow:var(--sk-acc)}
.svav.a{background:none;border:0;overflow:hidden}
.svav.a img{width:100%;height:100%;display:block}

/* ── Hantelpasset (2026-10-20) ──
   Ikonen blev en hantel på kräm: mörka skivor och en grön (användaren:
   "nu uppdatera hemsidan"). Sidan följer ikonen i stället för förra ikonens
   gröna: krämvit botten, kräm på scenerna bakom telefonerna och nästan svart
   text. Grönt finns kvar som accent — det färgade ordet, brickorna, ikonerna
   — och på de tre ytor som är helt i färg (årets pris, nedladdningen,
   kontakten), som den gröna skivan i ikonen. Fortsatt ljust läge. */
:root{
  --botten:#EFE7DA;
  --kram:#F6ECDD; --kram-mitt:#E5D7C4; --kram-djup:#D9C8B0;
  --kram-kant:rgba(120,92,48,.15); --kram-kant-stark:rgba(120,92,48,.24);
  --sk-kram:0 1px 1px rgba(58,48,32,.10),0 8px 16px -8px rgba(58,48,32,.5);
}
body{background:
  radial-gradient(58% 32% at 0% 0%,rgba(255,251,244,.95),rgba(255,251,244,0) 70%),
  radial-gradient(46% 26% at 100% 22%,rgba(47,145,80,.09),rgba(47,145,80,0) 70%),
  radial-gradient(60% 30% at 0% 62%,rgba(217,142,31,.09),rgba(217,142,31,0) 70%),
  radial-gradient(60% 30% at 100% 100%,rgba(47,145,80,.08),rgba(47,145,80,0) 70%),
  var(--botten)}
.topp.skrollad{background:color-mix(in srgb,#F4ECDF 93%,transparent)}

/* Loggan: appikonen och namnet, som innan ordloggan på grönt. */
.logga{gap:10px;font-family:var(--rund);font-weight:900;font-size:1.3rem;letter-spacing:-.02em;color:var(--black)}
/* `.bricka` är också de gröna etiketterna (med utfyllnad och grön botten);
   loggans bricka ska bara vara ikonen. */
.logga .bricka{display:block;width:38px;height:38px;padding:0;margin:0;background:none;border-radius:9px;overflow:hidden;box-shadow:var(--sk-kram)}
.logga .bricka img{display:block;width:100%;height:100%;border-radius:0;box-shadow:none}

/* Panelerna: kräm i stället för grönt. */
.skal{background:linear-gradient(180deg,#FFFDF9 0%,#F8F1E6 100%);border-color:var(--kram-kant)}
.skal.hero{border-color:var(--kram-kant);background:
  radial-gradient(64% 78% at 86% 10%,rgba(47,145,80,.13),rgba(47,145,80,0) 62%),
  radial-gradient(46% 56% at 0% 100%,rgba(217,142,31,.13),rgba(217,142,31,0) 66%),
  linear-gradient(155deg,#FFFCF7 0%,var(--kram) 55%,#EADFCD 100%)}
.skal.ton{border-color:var(--kram-kant);background:
  radial-gradient(70% 60% at 100% 0%,rgba(47,145,80,.10),rgba(47,145,80,0) 62%),
  radial-gradient(50% 50% at 0% 100%,rgba(217,142,31,.08),rgba(217,142,31,0) 66%),
  linear-gradient(180deg,#F5ECDE 0%,#FCF8F1 100%)}
#integritet.skal.ton{background:
  radial-gradient(70% 60% at 0% 0%,rgba(47,145,80,.10),rgba(47,145,80,0) 62%),
  radial-gradient(50% 50% at 100% 100%,rgba(217,142,31,.10),rgba(217,142,31,0) 66%),
  linear-gradient(180deg,#F6EEE1 0%,#FCF8F2 100%)}
#sa-funkar{background:
  radial-gradient(50% 30% at 0% 0%,rgba(217,142,31,.08),rgba(217,142,31,0) 70%),
  linear-gradient(180deg,#FAF3E8 0%,#FFFDF9 26%,#FFFDF9 74%,#F7EFE3 100%)}
#pris{background:
  radial-gradient(60% 46% at 50% 0%,rgba(47,145,80,.09),rgba(47,145,80,0) 66%),
  linear-gradient(180deg,#FFFDF9 0%,#F6EEE2 100%)}

/* Telefonerna står på kräm, som hanteln på ikonen. */
.scen::before{background:radial-gradient(closest-side,rgba(205,184,150,.55),rgba(205,184,150,0))}
.telefonhall::before{background:radial-gradient(closest-side,rgba(205,184,150,.5),rgba(205,184,150,0))}
.berattelse-telefon::before{background:
  radial-gradient(80% 60% at 30% 12%,rgba(255,255,255,.6),rgba(255,255,255,0) 60%),
  linear-gradient(160deg,#FBF5EA 0%,#ECE0CD 50%,#D7C5AA 100%);
  box-shadow:0 50px 90px -46px rgba(90,68,36,.6),0 0 0 1px rgba(255,255,255,.7) inset}
.lyftkort{background:linear-gradient(150deg,#F3E9D9 0%,#fff 62%);border-color:var(--kram-kant-stark)}

/* Kanter och tonade kort i krämens färg. */
.kort{border-color:var(--kram-kant)}
.exempel{border-color:var(--kram-kant);background:linear-gradient(160deg,#fff 20%,#F6EEE2)}
.brickor > span{border-color:var(--kram-kant)}
.tal div,.priskort,.ingar>div{border-color:var(--kram-kant)}
.textsida .ruta{border-color:var(--kram-kant)}
.skal.textsida{background:
  radial-gradient(70% 30% at 100% 0%,rgba(47,145,80,.09),rgba(47,145,80,0) 64%),
  linear-gradient(180deg,#FFFDF9 0%,#F8F1E6 100%)}

/* Foten. */
footer{border-color:var(--kram-kant);background:
  radial-gradient(60% 80% at 0% 0%,rgba(255,251,244,.9),rgba(255,251,244,0) 62%),
  linear-gradient(180deg,#EDE3D3 0%,#F4ECDF 100%)}
.fot-botten{border-top-color:var(--kram-kant-stark);color:#6B5E4C}
.fot-botten a{color:#6B5E4C}

/* 404-sidan har sin rubrik som h1 på det gröna bandet; bara h2 var vit. */
.skal.hamta h1{color:#fff}

/* ── Sex språk (2026-10-20) ──
   Språkvalet är en meny: sex knappar fick inte plats bredvid loggan på en
   telefon. Arabiskan läses från höger till vänster (sajt.js sätter
   dir="rtl"); kanter och marginaler ovan är skrivna som start och slut i
   läsriktningen, så de vänder sig själva. Bokstavsavstånd tas bort på
   arabiska, där bokstäverna ska hänga ihop. */
.sprakval{padding:4px 6px 4px 4px}
.sprakval select{appearance:none;-webkit-appearance:none;border:0;background:none;color:var(--black);font:650 .9rem/1 var(--typ);
  padding:8px 22px 8px 6px;border-radius:var(--piller);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23585148' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center;background-size:12px}
.sprakval select:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
html[dir="rtl"] .sprakval select{padding:8px 6px 8px 22px;background-position:left 4px center}
html[dir="rtl"] *{letter-spacing:0 !important}
html[dir="rtl"] .pilen{display:inline-block;transform:scaleX(-1)}