.tri-item h3,.story h3,.feature-copy h3,
.tri-item h2[data-h3],.story h2[data-h3],.feature-copy h2[data-h3]{font-size:var(--h3);letter-spacing:-.03em;line-height:1.16;margin:0 0 8px}
.tri-item p,.story p{font-size:var(--small);color:var(--ink-600);line-height:1.6;margin:0}
.download-copy p,.stripe p,.feature-copy p{font-size:var(--body)}
.section-head{align-items:flex-end}
.section-head .lead{margin-top:12px}
/* ── Rött, återhållet ──────────────────────────────────────────────────────
Behåll: streck före etiketten. Ta bort: linjer under rubriker, röda
punkter i listor och röda bockar (de läste som fel, inte som accent). */
.dark .eyebrow,.stripe .eyebrow{color:#8fe0b4}
.trust-row span::before{color:var(--green-600)}
.trust-row .count{color:var(--ink-900);font-weight:800;font-variant-numeric:tabular-nums}
.trust-row .count::before{content:none}
/* Menyn markerar med ett tunt rött understreck vid hover. */
.navlinks>a{position:relative}
.navlinks>a::before{
content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
background:var(--red-500);border-radius:2px;transform:scaleX(0);transform-origin:left;
transition:transform .26s cubic-bezier(.2,.7,.2,1);
}
.navlinks>a:hover::before,.navlinks>a.active::before{transform:scaleX(1)}
.btn:focus-visible{outline:3px solid var(--red-500);outline-offset:2px}
/* Loggan större utan att headern växer. */
.header.scrolled .brand img{transition:height .3s cubic-bezier(.2,.7,.2,1)}
/* ── Enhetsmockup ──────────────────────────────────────────────────────────
Ramen byggs av lager i stället för en kantlinje: metallisk kant med ljus
uppe och mörk nere, sidoknappar tecknade i kanten, dynamic island över
skärmen och en glasreflex snett över. Skärmen får egen radie innanför. */
.phone,.phone-shot{
position:relative;border:0;padding:10px;border-radius:46px;
transform-style:preserve-3d;
background:
/* volymknappar till vänster, strömknapp till höger */
linear-gradient(#7d8781,#39423c) left -1px top 23% / 3px 30px no-repeat,
linear-gradient(#7d8781,#39423c) left -1px top 33% / 3px 30px no-repeat,
linear-gradient(#7d8781,#39423c) right -1px top 29% / 3px 46px no-repeat,
/* ljuskant längs överkanten */
linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 16%),
/* själva ramen */
linear-gradient(158deg,#5d665f 0%,#1b211d 21%,#0b0f0d 51%,#232a25 79%,#515a53 100%);
box-shadow:
0 0 0 1px rgba(255,255,255,.10) inset,
0 1px 2px rgba(0,0,0,.6) inset,
0 40px 70px -26px rgba(5,26,18,.55),
0 16px 30px -16px rgba(5,26,18,.4);
transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease;
}
.phone img,.phone-shot img{display:block;width:100%;border-radius:37px;background:#0b0f0d}
/* Sidan av telefonen: en identisk platta en bit bakåt i djupled. När enheten
vrids sticker den ut längs ena kanten och blir till en synlig kortsida, så
telefonen läser som ett föremål med tjocklek i stället för en bild med
perspektiv. Det är skillnaden mot en vanlig rundad rektangel. */
.phone::before,.phone-shot::before{
content:"";position:absolute;inset:0;border-radius:46px;z-index:-1;
transform:translateZ(-13px);
background:linear-gradient(100deg,#39423c,#0a0d0b 38%,#121714 62%,#2e3630);
box-shadow:0 0 0 1px rgba(0,0,0,.5);
}
/* Skärmens glas: dynamic island överst och en ljusstrimma snett över. */
.phone::after,.phone-shot::after{
content:"";position:absolute;inset:10px;border-radius:37px;pointer-events:none;z-index:3;
background:
url("data:image/svg+xml;utf8,") top 10px center / 29% auto no-repeat,
linear-gradient(126deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 24%,transparent 46%);
}
/* ── Laptopram ─────────────────────────────────────────────────────────────
Portalen är en webbprodukt, så den ska sitta i en skärm och inte sväva som
en lös bild. Ramen är tunn upptill och i sidorna, tjockare under skärmen,
plus en fot som sticker ut i underkant. */
.laptop{
position:relative;padding:10px 10px 16px;border-radius:14px 14px 8px 8px;
background:linear-gradient(168deg,#4b544d,#1a201c 34%,#101512 70%,#333a35);
box-shadow:
0 0 0 1px rgba(255,255,255,.09) inset,
0 40px 70px -28px rgba(5,26,18,.5),
0 16px 30px -18px rgba(5,26,18,.35);
}
.laptop img{display:block;width:100%;border-radius:6px;background:#fff}
/* Foten. Bredare än skärmen och med en urtagning i mitten, som på en riktig. */
.laptop::after{
content:"";position:absolute;left:-6.5%;right:-6.5%;bottom:-11px;height:11px;
border-radius:0 0 10px 10px;
background:linear-gradient(180deg,#3d453f,#171c19);
box-shadow:0 8px 18px -8px rgba(5,26,18,.45);
}
.laptop::before{
content:"";position:absolute;left:50%;transform:translateX(-50%);
bottom:-11px;width:15%;height:5px;border-radius:0 0 6px 6px;
background:#0c100e;z-index:2;
}
/* Portalbilder: ram och djup, men ingen enhetsdekor. Laptopramen har sin egen
yta och ska inte få den generella kanten ovanpå. */
.portal-crop,.pt-visual,.screen-clean{
border-radius:var(--radius-lg);overflow:hidden;background:#fff;
border:1px solid var(--border);box-shadow:var(--shadow-md);
}
.portal-shot:not(.laptop){
border-radius:var(--radius-lg);overflow:hidden;background:#fff;
border:1px solid var(--border);box-shadow:var(--shadow-md);
}
/* Beskärning: visa UI:t större i stället för hela webbläsarfönstret. */
.shot-zoom{overflow:hidden}
.shot-zoom img{width:132%;max-width:none;transform:translate(-13%,-4%)}
.connected-visual .portal-crop img{width:128%;max-width:none;transform:translate(-11%,-5%)}
/* ── Riktiga enhetsmockuper ────────────────────────────────────────────────
Telefonerna är Marcus egna Canva-exporter med skärmen redan inmonterad,
rastrerade till PNG med genomskinlig bakgrund. De behöver varken ram,
skugga eller perspektiv från CSS: allt det ligger redan i bilden.
Därför ingen .phone-styling på dem, bara storlek och placering. */
.device{display:block;width:100%;height:auto}
/* app.html hade telefonerna i .phone-ramen fran site.css. Mockuperna har egen
ram, sa omslaget far bara satta bredd. .small halls kvar som storleksklass. */
.device-wrap{border:0;background:none;box-shadow:none;padding:0;border-radius:0;width:230px}
.device-wrap.small{width:196px;transform:translateY(20px)}
.device-wrap img{display:block;width:100%;border-radius:0;background:none}
.phone-pair{gap:26px;padding:10px}
/* ── A. Hjälte ─────────────────────────────────────────────────────────────
Mobilen överlappar webbplattformen för djup. Ingen glow, ingen chip-pill. */
.hero{padding:56px 0 58px;background:var(--surface)}
.hero::after{display:none}
.hero-grid{grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center}
/* --h1 i stället för --display: annars bryts "All in one place." till tre rader
i den smalare textspalten, vilket ser hackigt ut. */
.hero h1{font-size:var(--h1);margin:14px 0 18px}
.hero-copy p{max-width:520px}
.product-stage{position:relative;min-height:0;perspective:1700px;perspective-origin:62% 44%}
.stage-glow,.product-chip{display:none}
/* Portalen får ingen fejkad laptopram. Den är en rektangel, och en ritad ram
runt en rektangel tillför inget utom risken att se billig ut. Rundade hörn
och en djup skugga räcker, samma grepp som Linear och Stripe använder. */
.portal-shot{
position:relative;right:auto;top:auto;width:86%;margin-left:auto;z-index:1;
border-radius:14px;overflow:hidden;
box-shadow:0 44px 80px -34px rgba(5,26,18,.42),0 0 0 1px rgba(16,32,51,.07);
}
.portal-shot img{display:block;width:100%}
/* Mockupen har egen skugga, så den behöver bara placeras. Bilden är lite
bredare än telefonen i den, därav 26 % i stället för 22. */
.hero-device{position:absolute;left:-2%;bottom:-34px;width:26%;z-index:2}
.trust-row{gap:20px;margin-top:24px}
/* ── B. En sammankopplad plattform ──────────────────────────────────────────
Gymfotot ligger bakom en mörk grön överlagring. Överlagringen är själva
bakgrunden i gradienten, så texten behåller sin kontrast även om bilden
byts ut eller inte laddas. */
.stripe{
padding:56px 0;
background:
linear-gradient(120deg,rgba(5,43,33,.94),rgba(7,60,45,.88) 58%,rgba(10,77,57,.9)),
var(--green-950);
}
.stripe::after{display:none}
.stripe-grid{grid-template-columns:.84fr 1.16fr;gap:48px;align-items:center}
.connected-visual{position:relative;perspective:1600px;perspective-origin:60% 45%}
/* Laptopmockupen har egen ram och skugga, sa den behover bara bredd. Telefonen
overlappar nedre vanstra hornet, samma grepp som i hjaltesektionen. */
.connected-laptop{width:94%;margin-left:auto}
.connected-device{position:absolute;left:-1%;bottom:-6px;width:23%;z-index:2}
/* ── C. Tre områden ───────────────────────────────────────────────────────── */
.tri-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.tri-item{text-align:left}
.tri-item .device{width:100%;max-width:300px;margin:0 auto var(--space-4)}
.tri-item h3,
.tri-item h2[data-h3]{margin-top:0}
/* ── D. Digital PT ──────────────────────────────────────────────────────────
Gymfotona bakom stripe och Digital PT togs bort 2026-10-23: de var
AI-genererade och väggtexterna lyste igenom. Kvar är bara gradienten.
Tidigare: fotot bakom en mörk grön överlagring som ligger
i gradienten, så texten behåller kontrast oavsett vad bilden gör. */
/* Inzoomad på mitten: bilden har väggtext i båda kanterna, och den läses
igenom överlagringen och drar blicken. Mitten är bara golv och ställningar. */
.section.dark{
background:
linear-gradient(105deg,rgba(7,60,45,.95),rgba(5,43,33,.9) 55%,rgba(7,60,45,.93)),
var(--green-900);
}
.solo-phone{display:flex;justify-content:center}
.solo-phone .device{width:min(330px,84%)}
.dark .feature-copy li{color:#cbdad4}
.dark .feature-copy li::before{background:var(--green-2,#20b765)}
/* ── E. PT-ytan ───────────────────────────────────────────────────────────── */
.pt-showcase{grid-template-columns:.78fr 1.22fr;gap:44px;align-items:center}
/* Laptopmockupen har egen ram och skugga. Tidigare lag har en beskuren
skarmbild dar hogerkanten klipptes av mitt i klientlistan. */
.pt-laptop{width:100%}
.feature-pill:nth-child(4){background:var(--red-100);color:var(--red-500);border-color:#f1cfc5}
/* PT-sidans hjälte: mindre luft och portalbilden med direkt i första vyn. */
.pt-hero{padding:48px 0 44px}
.pt-hero-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;align-items:center}
.pt-hero h1{font-size:var(--h1);line-height:1.02;letter-spacing:-.045em;margin:12px 0 16px}
.pt-hero p{font-size:var(--body);color:var(--ink-600);max-width:520px;margin:0}
.pt-hero .hero-actions{margin-top:24px}
/* ── F. Övningsbiblioteket på startsidan ──────────────────────────────────── */
.home-exercises{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:var(--space-4)}
.exercise-card{transition:transform .24s cubic-bezier(.2,.7,.2,1),box-shadow .24s ease,border-color .24s ease}
.exercise-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:#c9d6d0}
/* ── G. Redaktionellt ─────────────────────────────────────────────────────── */
/* Fyra lika stora kort pa samma rad. Tidigare var ett kort dubbelt sa stort
och de ovriga hamnade pa olika hojd, vilket gjorde raden svar att lasa av.
Hela kortet ar en lank, inte bara rubriken. */
.editorial-grid{grid-template-columns:repeat(4,1fr);gap:24px;align-items:start}
.story{border-top:2px solid var(--border);padding-top:14px}
.story:hover{border-top-color:var(--green-600)}
.story-link{display:block;color:inherit}
.story .thumb{border-radius:var(--radius-md);margin-bottom:14px;aspect-ratio:16/10;overflow:hidden;background:var(--surface-mint)}
.story .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.story:hover .thumb img{transform:scale(1.03)}
.story h3,
.story h2[data-h3]{font-size:20px;line-height:1.25}
.story-link:hover h3,
.story-link:hover h2[data-h3]{color:var(--green-600)}
/* Bildplats för riktiga foton. Utan fil syns en lugn grön ton i stället för
en trasig bild, så designen håller tills fotona finns på plats. */
.photo-slot{
background:linear-gradient(150deg,var(--surface-mint),#dceee4);
border-radius:var(--radius-md);overflow:hidden;
}
.photo-slot img{width:100%;height:100%;object-fit:cover;display:block}
/* ── Fotobehandling ────────────────────────────────────────────────────────
Det som avslöjar en AI-bild är inte motivet utan ytan: den är för ren, för
jämn och för mättad. Riktiga foton har korn, lite brus i skuggorna och en
färgton från kameran.
Två grepp, båda i CSS så originalfilerna är orörda:
1. Lätt avmättnad och en aning mer kontrast, så bilden känns graderad
snarare än genererad.
2. Ett fint korn ovanpå, genererat med SVG-turbulens (inga extra filer).
Kornet bryter den perfekta ytan och är det enskilt effektivaste knepet.
Effekten ska vara omärklig var för sig. Ser man den är den för stark. */
.story .thumb,.photo-frame{position:relative;isolation:isolate}
.story .thumb img,.photo-frame img{filter:saturate(.88) contrast(1.05) brightness(.98)}
.story .thumb::after,.photo-frame::after,.stripe::before,.section.dark::before{
content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
background-image:url("data:image/svg+xml;utf8,");
background-size:140px 140px;
opacity:.16;mix-blend-mode:overlay;
}
/* Kornet över hela sektionen för de mörka ytorna, innehållet ligger över. */
.stripe,.section.dark{position:relative;isolation:isolate}
.stripe>*,.section.dark>*{position:relative;z-index:2}
/* Breda fotoband: beskurna hårt så de läser som en bild i en publikation och
inte som ett stock-foto på full höjd. */
.photo-frame{border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-mint)}
.photo-frame img{width:100%;display:block}
.pt-band{aspect-ratio:21/9}
.pt-band img{height:100%;object-fit:cover;object-position:center 38%}
.library-band{aspect-ratio:24/9;margin:22px 0 4px}
.library-band img{height:100%;object-fit:cover;object-position:center 34%}
/* ── Artikel- och nyhetssidor (CMS) ─────────────────────────────────────────
Läsbredd framför full sidbredd: en artikel ska läsa som en text, inte som
en produktsida. Runt 68 tecken per rad. */
.article-wrap{max-width:760px}
.article-meta{font-size:var(--small);color:var(--ink-600);font-weight:700;margin:0 0 14px}
.article-hero{aspect-ratio:16/9}
.article-hero img{height:100%;object-fit:cover}
.article-body{font-size:var(--body);line-height:1.75;color:var(--ink-700)}
.article-body h2{font-size:var(--h3);letter-spacing:-.025em;line-height:1.2;margin:34px 0 12px;color:var(--ink-900)}
.article-body h3,
.article-body h2[data-h3]{font-size:20px;margin:26px 0 10px;color:var(--ink-900)}
.article-body p{margin:0 0 18px}
.article-body ul,.article-body ol{margin:0 0 18px;padding-left:22px;display:grid;gap:8px}
.article-body a{color:var(--green-600);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.article-body a:hover{color:var(--red-500)}
.article-body blockquote{
margin:24px 0;padding:4px 0 4px 20px;border-left:3px solid var(--red-500);
font-size:20px;line-height:1.55;color:var(--ink-900);
}
.article-body code{background:var(--surface-soft);padding:2px 6px;border-radius:6px;font-size:.92em}
.story h3 a,
.story h2[data-h3] a{color:inherit}
.story h3 a:hover,
.story h2[data-h3] a:hover{color:var(--green-600)}
.info-card h3 a,
.info-card h2[data-h3] a{color:inherit}
.info-card h3 a:hover,
.info-card h2[data-h3] a:hover{color:var(--green-600)}
/* ── H. Nedladdning ───────────────────────────────────────────────────────── */
.cta{padding:var(--space-7) 0}
/* Telefonen till vanster, texten till hoger. Mockupen lutar med skarmen mot
hoger, sa den vander sig mot innehallet i stallet for bort fran det. */
.download-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.download-copy h2{margin:10px 0 14px}
.download-copy .store-badges{margin-top:22px}
.download-copy .text-link{display:inline-block;margin-top:18px}
.download-phone{display:flex;justify-content:flex-start}
.download-phone .device{width:min(300px,76%)}
/* ── Rörelse ───────────────────────────────────────────────────────────────
Liten och fysisk: 8 till 16 px glidning, stegvis intoning och hover.
--py sätts av frog.js och ligger först i transformen så rotationen är kvar. */
/* Ingen rotation längre. Mockuperna är fotograferade enheter med sin egen
form och skugga, och att vrida dem i CSS skulle snedvrida bilden i stället
för att skapa djup. Kvar är bara den lilla glidningen vid scroll. */
html.motion-ready .hero-device,
html.motion-ready .connected-device,
html.motion-ready .portal-shot,
html.motion-ready .connected-laptop,
html.motion-ready .pt-visual,
html.motion-ready .screen-clean,
html.motion-ready .tri-item .device,
html.motion-ready .solo-phone .device,
html.motion-ready .download-phone .device{
transform:translate3d(0,var(--py,0px),0);
transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
html.motion-ready .tri-item .device:hover,
html.motion-ready .solo-phone .device:hover,
html.motion-ready .download-phone .device:hover,
html.motion-ready .hero-device:hover,
html.motion-ready .portal-shot:hover,
html.motion-ready .pt-visual:hover{
transform:translate3d(0,var(--py,0px),0) translateY(-5px);
}
html.motion-ready [data-stagger]>*{
opacity:0;transform:translateY(10px);
transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1);
transition-delay:var(--d,0ms);
}
html.motion-ready [data-stagger].in>*{opacity:1;transform:none}
.header{transition:box-shadow .3s ease,background .3s ease}
.header.scrolled{box-shadow:0 6px 22px rgba(16,32,51,.07);background:rgba(255,255,255,.97)}
.header.scrolled .nav{height:64px}
.nav{transition:height .3s cubic-bezier(.2,.7,.2,1)}
/* Google Play-brickan har inbyggd luft i PNG:en, darfor de negativa marginalerna
i site.css. Bieffekten ar att flexlayouten raknar bort samma pixlar fran
bildens egen bredd, sa brickan blir ihoptryckt ~11 procent och bryter mot
Googles egna riktlinjer. Explicit bredd ur filens verkliga forhallande
(646x250) haller proportionen, och max-width:none behovs for att sajtens
globala img-regel annars klipper bredden till lankens smalare ruta. */
.store-badge.google img{width:183.5px;max-width:none;flex:0 0 auto}
@media(max-width:640px){.store-badge.google img{width:160px}}
.store-badge{transition:transform .24s cubic-bezier(.2,.7,.2,1)}
.store-badge:hover{transform:translateY(-2px)}
/* ── Tätare rytm ──────────────────────────────────────────────────────────── */
.section{padding:var(--space-7) 0}
.section.tight{padding:var(--space-6) 0}
.feature-line{padding:12px 0;gap:48px}
@media(max-width:1000px){
.hero-grid,.stripe-grid,.pt-showcase,.download-grid,.pt-hero-grid{grid-template-columns:1fr}
.tri-grid{grid-template-columns:1fr;gap:var(--space-5)}
.tri-item .phone{max-width:240px}
.home-exercises{grid-template-columns:repeat(2,1fr)}
.editorial-grid{grid-template-columns:repeat(2,1fr)}
.portal-shot{width:100%;margin:0}
.hero-device{position:relative;left:auto;bottom:auto;width:52%;margin:-64px auto 0;display:block}
.connected-laptop{width:100%;margin:0}
.connected-device{position:relative;left:auto;bottom:auto;width:46%;margin:-40px auto 0;display:block}
.download-phone{justify-content:center}
.brand img{height:46px}
/* I en kolumn blir 3D bara stökigt. */
html.motion-ready .phone,html.motion-ready .phone-shot,
html.motion-ready .portal-shot,html.motion-ready .connected-visual .portal-crop{transform:none}
}
.hero h1,.pt-hero h1,.page-hero h1,.section h2,.stripe h2,.cta h2,
.feature-copy h3,.download-copy h2,
.feature-copy h2[data-h3]{font-weight:500}
.hero h1 .accent{font-weight:inherit}
.section h3,.story h3,.tri-item h3,.info-card h3,.ex-card h2,
.article-body h2,.article-body h3,.ex-main h2,
.section h2[data-h3],.story h2[data-h3],.tri-item h2[data-h3],.info-card h2[data-h3],.article-body h2[data-h3]{font-weight:600}
/* Brodtexten var 18px. 20px later mer sjalvsakert och ar lattare att lasa pa
en 27-tumsskarm, med nagot tightare radavstand sa styckena inte glesnar. */
:root{--body:20px}
.hero p,.stripe p,.feature-copy p,.pt-hero p,.lead{line-height:1.45}
/* ---- Hjalten ------------------------------------------------------------
Fem knappar ovanfor vikningen betyder att ingen av dem ar knappen. Kvar ar
butiksbrickorna (ett val) och webbplattformen (ett andra). Demon och
PT-sidan lag redan i menyn, i sidfoten och i sina egna avsnitt langre ner,
sa ingenting blev oatkomligt. */
.hero .hero-actions{margin-top:18px}
/* ---- Anatomisk figur ----------------------------------------------------
Samma path-data som portalens BodyMap och appens muskelkarta, laddad ur
src/lib/bodyData.ts vid bygget. Primar muskel i fullt gront, sekundara i
ljusare. Vyn ritas bara nar den har nagot markerat. */
.bodymap{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:end;max-width:470px;
background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:20px 22px 16px;margin:18px 0 0}
.bodymap.one{grid-template-columns:minmax(0,215px);max-width:260px}
.bodymap-fig{margin:0;text-align:center}
.bodymap-fig svg{display:block;width:100%;height:auto}
.bodymap-fig figcaption{margin-top:6px;font-size:11px;font-weight:800;letter-spacing:.09em;
text-transform:uppercase;color:var(--ink-600)}
.bodymap-key{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;margin:8px 0 0;
font-size:12.5px;font-weight:700;color:var(--ink-700)}
.bodymap-key span{display:inline-flex;align-items:center;gap:6px}
.bodymap-key i{width:11px;height:11px;border-radius:3px;flex:none}
/* ---- Sprakvaxlare -------------------------------------------------------
Sajten finns pa svenska under /sv/ och pa engelska pa roten. Vaxlaren pekar
pa motsvarande sida, inte pa startsidan. */
.lang-switch{display:inline-flex;align-items:center;gap:1px;padding:2px;border:1px solid var(--border);border-radius:999px;background:#fff;margin-right:4px}
.lang-pick{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:28px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--ink-600);transition:background .18s ease,color .18s ease}
.lang-pick:hover{color:var(--ink-900);background:#f1f5f0}
.lang-pick.active{background:var(--ink-900);color:#fff}
@media(max-width:900px){.lang-switch{margin-right:2px}}
/* ---- Ovningssidan ------------------------------------------------------
Instruktionerna lag tidigare over hela wrappen (1240px), alltsa rader pa
nastan 200 tecken: bade svarlasta och orsaken till att sidan kandes tom.
Uppdelningen foljer StrengthLog: en innehallsspalt runt 700px och en
smalare sidospalt, med rorlig bild hogst upp dar blicken landar. */
.ex-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:52px;align-items:start}
.ex-main{max-width:720px;font-size:17px}
.ex-main h2{margin:34px 0 12px;font-size:26px;letter-spacing:-.02em}
.ex-main>*:first-child{margin-top:0}
.ex-main ol{padding-left:22px;display:flex;flex-direction:column;gap:9px}
.ex-main ol li{padding-left:4px}
.ex-cta{margin-top:30px}
.ex-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:96px}
/* preload="none" gor att webblasaren inte kanner videons matt forran nagon
trycker play, sa rutan far sin plats av oss i stallet: utan aspect-ratio
kollapsar spelaren till en remsa och sidan hoppar nar filmen startar. */
.ex-video{margin:0 0 34px;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:#0B1620}
.ex-video figcaption{padding:11px 15px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#cfe6da;background:#0B1620}
.ex-video video{width:100%;display:block;aspect-ratio:16/9;object-fit:contain;background:#0B1620}
/* Med preload="none" ar rutan tom tills nagon trycker play. Markeringen ar rent
dekorativ (pointer-events:none), sa webblasarens egna kontroller nas anda och
videon fungerar utan JS. frog.js doljer den nar filmen borjar. */
.ex-video{position:relative}
.ex-video-cue{position:absolute;inset:44px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:none;color:#cfe6da;font-size:13px;font-weight:750;transition:opacity .3s ease}
.ex-video.playing .ex-video-cue{opacity:0}
.ex-video-cue span.dot{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center}
.ex-video-cue span.dot::before{content:"";border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;margin-left:4px}
.ex-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:20px}
.ex-card h2{font-size:17px;margin:0 0 13px;letter-spacing:-.015em}
.ex-facts dl{margin:0;display:flex;flex-direction:column}
.ex-facts dl>div{display:flex;justify-content:space-between;gap:16px;padding:9px 0}
.ex-facts dl>div+div{border-top:1px solid var(--border)}
.ex-facts dt{font-size:13px;color:var(--ink-600);font-weight:700;flex:0 0 auto}
.ex-facts dd{margin:0;font-size:14px;font-weight:750;text-align:right}
.ex-related-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ex-related-list li+li{border-top:1px solid var(--border)}
.ex-related-list a{display:flex;flex-direction:column;gap:2px;padding:11px 0;transition:padding-left .18s ease}
.ex-related-list a:hover{padding-left:6px}
.ex-related-list strong{font-size:15px;font-weight:750;letter-spacing:-.01em}
.ex-related-list span{font-size:12.5px;color:var(--ink-600)}
.ex-card .text-link{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:800}
.ex-more .section-head{margin-bottom:22px}
/* Rullgardinerna ska se ut som fritextfaltet, inte som systemets egna. */
.exercise-toolbar select.field{appearance:none;-webkit-appearance:none;font-family:inherit;font-size:14px;font-weight:650;cursor:pointer;padding-right:34px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235E6B7C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 13px center}
.exercise-toolbar select.field:focus{border-color:#9ec7b1;box-shadow:0 0 0 3px rgba(11,143,89,.12)}
.exercise-empty{color:var(--ink-600);padding:28px 0}
/* Filtret foljer med nedat pa sma skarmar. Biblioteket ar 405 kort langt, och
utan det maste besokaren rulla hela vagen upp igen bara for att byta
muskelgrupp. Headern ar sticky pa top:0, sa raden lagger sig precis under
den och korten rullar under bada tva: samma oskarpa som headern, annars
syns texten passera igenom.
Bara under 860px. Pa skrivbordet ryms filtret och de forsta raderna i samma
vy anda, och en fast rad dar hade bara atit hojd. */
@media(max-width:860px){
.exercise-toolbar{
position:sticky;
top:73px; /* .nav ar 74px hog, en pixel in under kanten */
z-index:20; /* under headern (50), over korten */
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
align-content:start;
margin:18px 0 4px;
/* .wrap lamnar 20px rannsten. Utan att ata upp den syns korten glida
forbi i kanterna bredvid den fasta raden. */
margin-inline:-20px;
padding:11px 20px 9px;
background:rgba(255,255,255,.94);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid var(--border);
}
/* .field har min-width:230px, vilket spranger ett rutnat pa en telefon. */
.exercise-toolbar .field{min-width:0}
.exercise-toolbar #exercise-search{grid-column:1/-1}
.exercise-toolbar .field{padding:10px 12px;font-size:14px}
.exercise-toolbar select.field{background-position:right 11px center}
/* Traffraknaren ar aterkoppling, inte ett falt: med ram och vit botten tog
den en tredjedel av den fasta radens hojd. */
.exercise-toolbar>div.field{
grid-column:1/-1;
border:0;background:none;padding:1px 0 0;
font-size:12.5px;font-weight:650;color:var(--ink-600);
}
.exercise-toolbar>div.field strong{color:var(--ink-900)}
}
@media(max-width:680px){
/* .nav ar 66px har, och .wrap lamnar 12px. */
.exercise-toolbar{top:65px;margin-inline:-12px;padding-inline:12px}
}
/* Utan JS finns ingen anledning att lasa fast en rad som inte kan filtrera.
frog.js satter motion-ready pa sa fort skriptet kor. */
html:not(.motion-ready) .exercise-toolbar{position:static}
@media(max-width:1080px){
.ex-layout{grid-template-columns:1fr;gap:30px}
.ex-side{position:static;max-width:720px}
.ex-main{max-width:none}
}
@media(max-width:680px){
.home-exercises,.editorial-grid{grid-template-columns:1fr}
.phone,.phone-shot{border-radius:38px;padding:8px}
.phone img,.phone-shot img{border-radius:31px}
}
@media(prefers-reduced-motion:reduce){
html.motion-ready .phone,html.motion-ready .phone-shot,
html.motion-ready .portal-shot,html.motion-ready .pt-visual,
html.motion-ready .connected-visual .portal-crop{transform:none!important}
html.motion-ready [data-stagger]>*{opacity:1!important;transform:none!important}
}
/* ---- Undermenyn ---------------------------------------------------------
Den gamla var en vit ruta som bara gick att klicka fram: den satt en bit
vid sidan av ordet man klickade pa, hade ingen forbindelse upp till menyn
och innehollet var tre nakna lankar. Den har oppnar pa hover, pekar pa sin
egen rubrik med en spets, och varje rad sager vad den leder till.
behalls som stomme, sa menyn fungerar med klick aven utan JS.
frog.js lagger till hover, Escape och klick utanfor. */
.nav-dropdown>summary{display:inline-flex;align-items:center;gap:6px;position:relative}
.nav-dropdown>summary::after{
content:"";width:9px;height:9px;margin:0 0 2px 0;border-right:2px solid currentColor;
border-bottom:2px solid currentColor;border-radius:0 0 2px 0;opacity:.5;
transform:rotate(45deg) translate(-1px,-1px);
transition:transform .22s cubic-bezier(.2,.7,.2,1),opacity .22s ease;
}
.nav-dropdown[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px);opacity:.9}
.nav-dropdown[open]>summary{color:var(--green-600)}
/* Samma roda understreck som de vanliga menyvalen far pa hover. */
.nav-dropdown>summary::before{
content:"";position:absolute;left:0;right:15px;bottom:2px;height:2px;
background:var(--red-500);border-radius:2px;transform:scaleX(0);transform-origin:left;
transition:transform .26s cubic-bezier(.2,.7,.2,1);
}
.nav-dropdown:hover>summary::before,.nav-dropdown[open]>summary::before,
.nav-dropdown>summary.active::before{transform:scaleX(1)}
/* Star man pa en sida inne i undermenyn ska rubriken visa det, precis som de
vanliga menyvalen gor. */
.nav-dropdown>summary.active{color:var(--green-600)}
.nav-dropdown-menu a.active{background:var(--surface-mint);color:var(--green-900)}
.nav-dropdown-menu a.active small{color:var(--green-700)}
.nav-dropdown-menu a.active::after{opacity:1}
/* Osynlig brygga over glappet mellan menyraden och panelen, annars stangs
menyn i det ogonblick musen lamnar ordet och ar pa vag ner. */
.nav-dropdown[open]::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.nav-dropdown-menu{
top:calc(100% + 12px);left:-18px;min-width:318px;padding:9px;
border-radius:16px;border-color:#e4ebe7;
box-shadow:0 22px 48px -18px rgba(14,45,34,.28),0 2px 8px rgba(14,45,34,.06);
animation:navmenu .2s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes navmenu{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Spetsen som binder ihop panelen med rubriken den hor till. */
.nav-dropdown-menu::before{
content:"";position:absolute;top:-6px;left:30px;width:12px;height:12px;
background:var(--surface);border-left:1px solid #e4ebe7;border-top:1px solid #e4ebe7;
transform:rotate(45deg);border-radius:3px 0 0 0;
}
.nav-dropdown-menu a{
display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;
padding:11px 13px;border-radius:11px;font-size:14.5px;font-weight:700;color:var(--ink-900);
transition:background .16s ease,color .16s ease;
}
.nav-dropdown-menu a small{
grid-column:1;font-size:12.5px;font-weight:500;line-height:1.35;color:var(--ink-600);
}
.nav-dropdown-menu a::after{
content:"";grid-column:2;grid-row:1/span 2;width:7px;height:7px;
border-right:2px solid var(--green-600);border-top:2px solid var(--green-600);
transform:rotate(45deg);opacity:0;transition:opacity .16s ease,transform .16s ease;
}
.nav-dropdown-menu a:hover,.nav-dropdown-menu a:focus-visible{background:var(--surface-mint);color:var(--green-900)}
.nav-dropdown-menu a:hover::after,.nav-dropdown-menu a:focus-visible::after{opacity:1;transform:rotate(45deg) translate(2px,-2px)}
.nav-dropdown-menu a:hover small{color:var(--green-700)}
@media(max-width:860px){
.nav-dropdown[open]::after{display:none}
.nav-dropdown-menu{min-width:0;animation:none;border-radius:12px;box-shadow:none;padding:2px}
.nav-dropdown-menu::before{display:none}
.nav-dropdown>summary::before{display:none}
}
/* ---- Kalorikalkylatorn --------------------------------------------------
Formularet till vanster, resultatet klistrat till hoger: andrar man ett
falt ska man se talet rora sig utan att scrolla. Under 1000px gar det till
en kolumn och resultatet hamnar overst, dar det ar det man kom for. */
.calc-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:34px;align-items:start}
.calc-panel{border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;padding:26px 26px 22px;box-shadow:var(--shadow-sm)}
.calc-block{border:0;padding:0;margin:0 0 26px}
.calc-block+.calc-block{border-top:1px solid var(--border);padding-top:22px}
.calc-legend{padding:0;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green-600);margin-bottom:14px}
.calc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:14px}
.calc-field{position:relative;display:flex;flex-direction:column;gap:6px}
/* display:flex slar [hidden] pa lika specificitet, sa det doljda enhetsfaltet
syntes anda och sidan visade tva langdfalt. */
.calc-field[hidden]{display:none}
.calc-field-full{margin-top:14px}
.calc-label{font-size:13.5px;font-weight:750;color:var(--ink-700)}
.calc-optional{font-weight:600;color:var(--ink-600);font-size:12px}
/* .field i site.css har min-width:230px, vilket spranger varje rutnat har. */
.calc-panel .field{min-width:0;width:100%;padding:11px 13px;font-size:15px;font-weight:650}
.calc-panel input.field{padding-right:46px}
.calc-unit{position:absolute;right:13px;bottom:12px;font-size:12.5px;font-weight:750;color:var(--ink-600);pointer-events:none}
.calc-split{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative}
.calc-split .calc-unit{position:static;align-self:center;margin-left:-38px;width:0}
.calc-split input.field{padding-right:34px}
.calc-hint{font-size:12.5px;line-height:1.5;color:var(--ink-600);margin:10px 0 0}
.calc-panel select.field{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235E6B7C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 13px center}
.calc-seg{display:inline-flex;padding:3px;gap:3px;border:1px solid var(--border);border-radius:999px;background:var(--surface-soft);margin-bottom:12px}
.calc-seg-wide{display:grid;grid-template-columns:1fr 1fr;width:100%}
.calc-seg input{position:absolute;opacity:0;width:1px;height:1px}
.calc-seg label{display:flex;align-items:center;justify-content:center;min-height:38px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:750;color:var(--ink-600);cursor:pointer;transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.calc-seg label:hover{color:var(--ink-900)}
.calc-seg input:checked+label{background:#fff;color:var(--green-900);box-shadow:0 1px 3px rgba(14,45,34,.14)}
.calc-seg input:focus-visible+label{outline:3px solid var(--red-500);outline-offset:2px}
.calc-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:700;color:var(--ink-700);margin-top:16px;cursor:pointer}
.calc-check input{width:19px;height:19px;margin:0;accent-color:var(--green-600);flex:none}
.calc-advanced{border-top:1px solid var(--border);padding-top:16px}
.calc-advanced>summary{cursor:pointer;list-style:none;font-size:13.5px;font-weight:800;color:var(--green-600);display:inline-flex;align-items:center;gap:7px}
.calc-advanced>summary::-webkit-details-marker{display:none}
.calc-advanced>summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.calc-advanced[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.calc-advanced-body{padding-top:6px}
#calc-reset{margin-top:20px}
/* ---- Resultatpanelen ---------------------------------------------------- */
.calc-out{position:sticky;top:96px;border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(180deg,#fff,#fbfdfc);padding:26px;box-shadow:var(--shadow-md)}
.calc-outtop{padding-bottom:18px;border-bottom:1px solid var(--border)}
.calc-big{margin:8px 0 4px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.calc-big strong{font-size:clamp(44px,5vw,58px);font-weight:500;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;color:var(--green-900)}
.calc-big span{font-size:15px;font-weight:750;color:var(--ink-600)}
.calc-goalline{margin:0;font-size:14px;font-weight:750;color:var(--red-500)}
.calc-bar{display:flex;height:11px;border-radius:999px;overflow:hidden;margin:20px 0 14px;background:var(--surface-soft)}
.calc-bar span{height:100%;transition:width .35s cubic-bezier(.2,.7,.2,1)}
.calc-seg-bmr{background:var(--green-900)}
.calc-seg-neat{background:var(--green-600)}
.calc-seg-eat{background:var(--red-500)}
.calc-seg-tef{background:#9ec7b1}
.calc-key{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px 16px;font-size:12.5px;color:var(--ink-600);font-weight:650}
.calc-key li{display:flex;align-items:center;gap:7px}
.calc-key i{width:10px;height:10px;border-radius:3px;flex:none}
.calc-key b{margin-left:auto;color:var(--ink-900);font-variant-numeric:tabular-nums}
.calc-stats{margin:0;display:flex;flex-direction:column}
.calc-stats>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0}
.calc-stats>div+div{border-top:1px solid var(--border)}
.calc-stats dt{font-size:13.5px;color:var(--ink-600);font-weight:700}
.calc-stats dt small{display:block;font-size:11.5px;font-weight:600;color:var(--ink-600);margin-top:1px}
.calc-stats dd{margin:0;font-size:15px;font-weight:750;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-stats dd small{font-weight:650;color:var(--ink-600);font-size:12.5px}
.calc-stats-tight>div{padding:8px 0}
.calc-macrohead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:24px 0 12px}
.calc-macrohead h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.015em}
.calc-macros{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px}
.calc-macro{border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;padding:13px 12px;display:flex;flex-direction:column;gap:2px}
.calc-macro-label{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--green-600)}
.calc-macro strong{font-size:21px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.calc-macro-sub{font-size:11.5px;color:var(--ink-600);font-weight:650;line-height:1.35}
.calc-flags{margin-top:18px;display:flex;flex-direction:column;gap:9px}
.calc-flag{margin:0;padding:12px 14px;border-radius:var(--radius-sm);font-size:12.5px;line-height:1.5;border-left:3px solid}
.calc-flag-bad{background:var(--red-100);border-color:var(--red-500);color:#6b2d1a}
.calc-flag-warn{background:#FFF8ED;border-color:#D98324;color:#6a4715}
.calc-flag-info{background:var(--surface-mint);border-color:var(--green-600);color:var(--green-900)}
.calc-cta{width:100%;margin-top:18px}
.calc-note{font-size:12px;color:var(--ink-600);margin:12px 0 0;text-align:center}
/* ---- Metod, formler och referenser -------------------------------------- */
.calc-formulas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.calc-formulas .info-card h3,
.calc-formulas .info-card h2[data-h3]{font-size:19px;margin:0 0 10px}
.calc-formulas .info-card p{font-size:14.5px;line-height:1.55}
.calc-eq{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px !important;line-height:1.7 !important;
background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 13px;margin:0 0 12px;color:var(--ink-900) !important;overflow-x:auto}
.calc-refs{margin:22px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:12px;font-size:14px;color:var(--ink-700);line-height:1.55}
.calc-refs li{padding-left:4px}
.calc-refs a{font-weight:750;color:var(--green-600)}
.calc-refs a:hover{color:var(--red-500)}
.calc-refs em{color:var(--ink-900)}
@media(max-width:1000px){
.calc-grid{grid-template-columns:1fr;gap:24px}
/* I en kolumn ligger formularet forst: talet i resultatrutan ar bara
standardvarden tills nagon fyllt i sina egna, och da ar det vilseledande
som det forsta man moter. */
.calc-out{position:static}
.calc-formulas{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
.calc-panel{padding:20px 18px 18px}
.calc-out{padding:20px 18px}
.calc-formulas{grid-template-columns:1fr}
.calc-macros{grid-template-columns:1fr}
.calc-macro{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.calc-macro-label{width:100%}
.calc-key{grid-template-columns:1fr}
}
/* ---- Undermenyn: bred panel (forslag B) ---------------------------------
Utforska samlar traning, verktyg och nyheter i en panel med tva kolumner
och en ruta som visar hur stort ovningsbiblioteket faktiskt ar. Skalet ar
utrymme: menyraden blir fyra ord, alltsa kort nog att tala svenska utan att
brytas, och panelen har plats for nasta verktyg utan att raden vaxer.
Siffran i rutan kommer ur Firestore vid bygget, inte ur en konstant som
nagon glommer att uppdatera. */
.nav-dropdown-menu.wide{
left:-18px;min-width:722px;padding:20px;
display:grid;grid-template-columns:1fr 1fr 244px;gap:22px;
}
/* Osynlig remsa over hela panelens bredd. Utan den stangs menyn sa fort musen
lamnar sjalva ordet pa vag ner mot hogra kolumnen. */
.nav-dropdown-menu::after{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-col{display:flex;flex-direction:column;min-width:0}
.nav-col h4{
margin:0 0 6px;padding:0 13px;font-size:10.5px;font-weight:800;letter-spacing:.14em;
text-transform:uppercase;color:var(--green-600);
}
.nav-dropdown-menu a.nav-promo{
/* .nav-dropdown-menu a satter align-items:center, vilket i en flexkolumn
centrerar texten i sidled. Rutan ska vara vansterstalld som resten. */
display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;
border-radius:12px;padding:18px;color:#fff;
background:linear-gradient(150deg,var(--green-900),#0A4D39);
transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease;
}
.nav-dropdown-menu a.nav-promo::after{content:none}
.nav-dropdown-menu a.nav-promo:hover{
background:linear-gradient(150deg,var(--green-900),#0A4D39);
transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(7,60,45,.8);
}
.nav-promo b{font-size:31px;font-weight:500;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.nav-promo span{font-size:12.5px;line-height:1.4;color:#c7ddd3;font-weight:500}
.nav-promo em{font-style:normal;font-size:12.5px;font-weight:800;color:#8fe0b4;margin-top:4px}
/* Support som tyst lank bredvid knapparna. Den ar en funktion, inte ett amne,
och hor darfor inte hemma bland de andra rubrikerna. */
.nav-quiet{
font-size:13.5px;font-weight:700;color:var(--ink-600);padding:10px 2px;
white-space:nowrap;transition:color .18s ease;
}
.nav-quiet:hover{color:var(--green-600)}
/* Logga in och Ladda ner appen, men bara i mobilmenyn. De var bortdolda under
860 px respektive 680 px, alltsa fanns ingen av dem pa en telefon. */
.nav-cta,.nav-mobile{display:none}
.navlinks>a.nav-cta::before{content:none}
/* Loggan var 58 px i en rad pa 74 px, alltsa 8 px luft. Det ar den trangseln
som laser som rorig aven nar rubrikerna ar fa. */
.brand img{height:50px}
.header.scrolled .brand img{height:44px}
/* Mellan mobilbrytpunkten och en liten laptop far panelen inte plats bredvid
sitt eget ord. Da spanner den i stallet hela raden. Headern har
backdrop-filter och ar darmed containing block for fixed, sa matten raknas
fran headern och inte fran fonstret. */
@media(min-width:861px) and (max-width:1140px){
.nav-dropdown-menu.wide{
position:fixed;left:20px;right:20px;top:78px;min-width:0;width:auto;
grid-template-columns:1fr 1fr;
}
.header.scrolled .nav-dropdown-menu.wide{top:68px}
.nav-dropdown-menu.wide::before{display:none}
.nav-dropdown-menu a.nav-promo{grid-column:1/-1;flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap}
.nav-promo span{flex:1 1 260px}
}
@media(max-width:860px){
/* Support flyttar fran knappraden in i menyn, i stallet for att forsvinna. */
.nav-quiet{display:none}
.nav-mobile{display:block}
.nav-dropdown-menu.wide{min-width:0;grid-template-columns:1fr;padding:6px 8px 10px;gap:12px}
.nav-col h4{padding:0 12px}
.nav-dropdown-menu a.nav-promo{display:none}
.nav-dropdown-menu::after{display:none}
.nav-cta{
display:flex;align-items:center;justify-content:center;min-height:46px;margin-top:10px;
border:1px solid var(--border);border-radius:var(--radius-sm);
font-size:14px;font-weight:800;color:var(--ink-900);
}
.nav-cta+.nav-cta{margin-top:8px}
.nav-cta.primary{background:var(--green-600);border-color:var(--green-600);color:#fff}
}
/* ---- Kompaktare sidor (2026-10-14) ---------------------------------------
Marcus: "så mycket lös space ... mindre skroll så mycket vi kan". Mätt före:
startsidan 7,4 skärmar på dator och 14,9 på mobil, appsidan 3,7 / 5,7.
Luften satt i tre saker: 64 px ovanför och under varje sektion, telefoner
som var högre än texten bredvid (så texten blev en ö i en stor yta), och
listor i en enda kolumn på mobil. Ligger sist så att det vinner över både
site.css och reglerna ovan, utan att röra deras värden. */
.section{padding:40px 0}
.section.tight{padding:32px 0}
.page-hero{padding:40px 0 26px}
.hero{padding:36px 0 40px}
.pt-hero{padding:36px 0 32px}
.stripe{padding:40px 0}
.cta{padding:40px 0}
.section-head{margin-bottom:22px}
.section h2,.page-hero h1{margin:6px 0 10px}
.feature-line{padding:0;gap:40px}
.feature-copy h3,
.feature-copy h2[data-h3]{margin:6px 0 10px}
.cards{gap:14px}
.info-card{padding:18px}
.info-card h3,
.info-card h2[data-h3]{margin:4px 0 6px}
.calc-formulas{gap:14px}
.trust-row{margin-top:16px}
/* Telefonerna på appsidan: lägre än texten bredvid i stället för högre. */
.device-wrap{width:190px}
.device-wrap.small{width:162px;transform:translateY(14px)}
.phone-pair{padding:0}
.tri-item .device{max-width:230px;margin-bottom:var(--space-3)}
@media(max-width:680px){
.section{padding:28px 0}
.section.tight{padding:22px 0}
.page-hero{padding:26px 0 16px}
.page-hero h1{font-size:34px}
.hero{padding:24px 0 28px}
.pt-hero{padding:24px 0 22px}
.stripe{padding:28px 0}
.cta{padding:30px 0}
.section-head{margin-bottom:16px}
.feature-line{gap:18px}
.cards{gap:10px}
.info-card{padding:16px}
.device-wrap{width:44%}
.device-wrap.small{width:38%}
.tri-grid{gap:var(--space-4)}
.tri-item .device{max-width:170px}
/* Övningskorten två i bredd: korten är korta, en kolumn gav 93 skärmar. */
.exercise-list,.home-exercises{grid-template-columns:repeat(2,1fr);gap:8px}
.exercise-card{padding:12px}
.exercise-card h3,
.exercise-card h2[data-h3]{font-size:15px;line-height:1.25;margin:6px 0 4px}
.exercise-card p{font-size:12.5px;line-height:1.35}
/* Artikelkorten som rader: bild till vänster, text till höger. */
.story,.story-link{display:grid;grid-template-columns:104px 1fr;column-gap:14px;align-items:start}
.story-link{grid-column:1/-1}
.story .thumb{grid-row:1/span 3;margin:0;aspect-ratio:1/1}
.story h3,
.story h2[data-h3]{font-size:17px;margin:2px 0 4px}
.story p{font-size:13.5px}
.editorial-grid{gap:16px}
}
/* "Visa fler" under övningslistan (assets/js/exercises.js). */
.exercise-more{display:flex;justify-content:center;margin-top:18px}
.exercise-more[hidden]{display:none}
@media(max-width:680px){
/* Kortrader som sveps i sidled i stället för att staplas: tre till tolv
kort under varandra var den enskilt största orsaken till skrollet. Nästa
kort sticker ut i kanten, så det syns att raden fortsätter. */
.tri-grid,.cards,.calc-formulas{
display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;
overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
margin-inline:-12px;padding:2px 12px 10px;scroll-padding-inline:12px;scrollbar-width:none;
}
.tri-grid::-webkit-scrollbar,.cards::-webkit-scrollbar,.calc-formulas::-webkit-scrollbar{display:none}
.tri-grid>*,.cards>*,.calc-formulas>*{scroll-snap-align:start}
.tri-item .device{max-width:150px;margin-inline:0}
.solo-phone{max-width:190px;margin-inline:auto}
.download-phone img{max-width:170px}
}
/* Dator: bilderna som var högre än en halv skärm. Filmen fyllde hela bredden
(700 px hög), telefonerna på startsidan var 440–630 px. */
section[data-video] .screen-clean{max-width:860px;margin-inline:auto}
.tri-item .device{max-width:200px;margin-inline:auto}
.solo-phone{max-width:250px;margin-inline:auto}
.download-phone img{max-width:230px}
@media(max-width:680px){
.tri-item .device{max-width:150px;margin-inline:0}
.solo-phone{max-width:190px}
.download-phone img{max-width:170px}
}
/* ---- PT-sidan omgjord (2026-10-20) ----------------------------------------
Marcus: "lättare, mindre skroll, snyggare, ta bort bilden och lägg videon
direkt under". Hjälten är centrerad text utan bild och filmen står direkt
under. Tolv kort och tre bildsektioner blev EN flikrad med skärmbilder
(assets/js/frog.js initTabs) plus ett tätt rutnät för resten. */
.pt-hero-center{text-align:center;padding:44px 0 6px}
.pt-hero-center .wrap{max-width:860px}
.pt-hero-center p{margin-inline:auto;max-width:640px}
.pt-hero-center .hero-actions,.pt-hero-center .trust-row{justify-content:center}
.pt-film{padding-top:14px}
.pt-film[data-video] .screen-clean{max-width:980px}
.pt-tab-list{display:flex;gap:4px;justify-content:center;width:max-content;max-width:100%;margin:0 auto 26px;
padding:5px;background:#fff;border:1px solid var(--border);border-radius:999px;box-shadow:0 5px 18px rgba(14,45,34,.05)}
.pt-tab{font:inherit;font-size:15px;font-weight:600;color:var(--ink-700);background:none;border:0;border-radius:999px;
padding:9px 17px;cursor:pointer;white-space:nowrap;transition:background .2s ease,color .2s ease}
.pt-tab:hover{color:var(--ink-900);background:var(--surface-soft)}
.pt-tab[aria-selected="true"]{background:var(--green-900);color:#fff}
.pt-tab:focus-visible{outline:2px solid var(--green-600);outline-offset:2px}
/* Utan skript: inga knappar, alla paneler under varandra. */
.pt-tabs:not(.tabs-ready) .pt-tab-list{display:none}
.pt-tabs:not(.tabs-ready) .pt-tab-panel+.pt-tab-panel{margin-top:40px}
.pt-tab-panel{display:grid;grid-template-columns:.6fr 1.4fr;gap:44px;align-items:center}
.pt-tab-panel[hidden]{display:none}
.tabs-ready .pt-tab-panel:not([hidden]){animation:ptTabIn .35s cubic-bezier(.2,.7,.2,1)}
@keyframes ptTabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pt-tab-panel .feature-copy h3,
.pt-tab-panel .feature-copy h2[data-h3]{margin:0 0 10px}
/* Skärmbilden på en grön scen, inskjuten från vänster överkant och avskuren
mot höger och nederkant, så att den läser som ett fönster i coachytan. */
.pt-stage{background:linear-gradient(140deg,var(--green-950) 0%,var(--green-700) 100%);border-radius:20px;
padding:30px 0 0 30px;overflow:hidden;box-shadow:var(--shadow-sm)}
.pt-stage .screen-clean{display:block;width:100%;border:0;border-radius:12px 0 0 0;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.pt-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 18px}
.pt-mini>div{border-top:2px solid var(--border);padding-top:12px}
.pt-mini h3,
.pt-mini h2[data-h3]{font-size:17px;line-height:1.3;letter-spacing:-.01em;margin:0 0 4px}
.pt-mini p{font-size:var(--small);color:var(--ink-600);line-height:1.5;margin:0}
@media(max-width:1080px){
.pt-tab-panel{grid-template-columns:1fr;gap:20px}
.pt-mini{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
.pt-hero-center{padding:26px 0 2px}
.pt-film{padding-top:10px}
.pt-tab-list{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin-bottom:18px}
.pt-tab-list::-webkit-scrollbar{display:none}
.pt-tab{font-size:14px;padding:8px 13px}
.pt-stage{padding:16px 0 0 16px;border-radius:14px}
.pt-hero-center p{font-size:16.5px}
/* Bilden först under flikarna, texten under den. */
.pt-tab-panel{gap:16px}
.pt-tab-panel .pt-stage{order:-1}
.pt-tab-panel .feature-copy h3,
.pt-tab-panel .feature-copy h2[data-h3]{font-size:22px;margin-bottom:6px}
.pt-tab-panel .feature-copy p{font-size:15.5px}
.pt-tab-panel .feature-copy li{font-size:14.5px}
#pricing .lead{font-size:15.5px}
.pt-mini{gap:16px 12px}
.pt-mini h3,
.pt-mini h2[data-h3]{font-size:15.5px}
.pt-mini p{font-size:13px}
}
h1,h2,h3,.hero h1,.section h2,.page-hero h1,.stripe h2,.cta h2,.feature-copy h3,.tri-item h3,.story h3,h2[data-h3],.feature-copy h2[data-h3],.tri-item h2[data-h3],.story h2[data-h3]{
font-family:'Archivo',"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
font-stretch:94%;font-weight:720;letter-spacing:-.01em;word-spacing:.04em}
.hero h1{line-height:1.02;max-width:620px;text-wrap:balance}
.section h2,.stripe h2,.cta h2,.feature-copy h3,.page-hero h1,.feature-copy h2[data-h3]{text-wrap:balance}
.stripe h2{max-width:560px}
/* Etiketten: kvar på undersidorna, men som en lugn rad i stället för
spärrade gröna versaler. */
.eyebrow{text-transform:none;letter-spacing:0;font-size:15px;font-weight:600;color:var(--ink-600)}
.eyebrow::before{content:none}
.dark .eyebrow,.stripe .eyebrow{color:#b9d6c8}
/* Förtroenderaden: utan bockar framför varje punkt, bara luft emellan. */
.trust-row{gap:6px 22px;font-weight:600}
.trust-row span::before,.trust-row span:nth-child(4)::before{content:none}
.fine-print{font-size:var(--small);color:var(--ink-600);margin:14px 0 0}
.dark .fine-print{color:#d5e8de}
/* ── Headern, riktning B (2026-10-23) ────────────────────────────────────────
Marcus valde den ljusa varianten av tre prototyper. Grodan plus namnet i
Archivo i stället för märket som PNG, menyval i normal vikt, språket som en
vanlig länk, Logga in som text och en enda mörk knapp. Utforska-panelen,
Support och mobilmenyn är oförändrade. */
.nav{height:72px;gap:36px}
.header.scrolled .nav{height:64px}
.brand{min-width:0;gap:10px;color:var(--ink-900)}
.header .brand img,.header.scrolled .brand img{height:34px;width:auto}
.brand-name{font-family:'Archivo',"Inter",sans-serif;font-weight:800;font-size:20px;letter-spacing:-.01em;white-space:nowrap}
.navlinks{gap:26px;font-size:15px;font-weight:500;color:var(--ink-900)}
.nav-actions{gap:20px}
.nav-quiet{font-size:15px;font-weight:500;color:var(--ink-600)}
.lang-link{font-size:15px;color:var(--ink-600);white-space:nowrap}
.lang-link:hover{color:var(--ink-900)}
.nav-actions .btn.login{border:0;background:none;padding:0;min-height:0;font-size:15px;font-weight:500}
.nav-actions .btn.login:hover{color:var(--green-600);transform:none;box-shadow:none}
.nav-actions .btn.primary{background:var(--ink-900);border-color:var(--ink-900);font-weight:600;font-size:15px;min-height:42px;border-radius:6px}
.nav-actions .btn.primary:hover{background:#000;border-color:#000}
@media(max-width:860px){.lang-link{font-size:14px}.brand-name{font-size:18px}}
/* ── Startsidans toppsektion, riktning B ─────────────────────────────────────
Rubriken över hela bredden, texten och butiksbrickorna på en rad under,
och sist en rad med fyra riktiga skärmar ur appen och webben. */
.hero.hero-b{padding:64px 0 40px;background:#fff}
.hero-b h1{font-size:clamp(46px,6.6vw,100px);line-height:.98;letter-spacing:-.03em;max-width:1120px;margin:0}
.hero-b h1 .accent{color:var(--green-600)}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap;margin:32px 0 44px}
.hero-row p{max-width:540px}
.hero-row .store-badges{margin:0}
.hero-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}
.hero-strip figure{margin:0}
.hero-strip .tile{background:var(--surface-mint);border-radius:6px;aspect-ratio:4/5;overflow:hidden;display:flex;justify-content:center;align-items:flex-end;padding:26px 16px 0}
.hero-strip .tile img{width:86%;max-width:none;margin-bottom:-22%;display:block}
.hero-strip .tile.web{align-items:center;justify-content:flex-start;padding:0}
.hero-strip .tile.web img{width:155%;margin:0 0 0 7%}
.hero-strip figcaption{font-size:14px;color:var(--ink-600);margin-top:10px;line-height:1.4}
@media(max-width:860px){
.hero.hero-b{padding:36px 0 28px}
.hero-row{margin:22px 0 28px}
.hero-strip{grid-template-columns:1fr 1fr;gap:12px}
}
/* ── Headern, lugnare (2026-10-23, andra varvet) ─────────────────────────────
Den svarta knappen och de grå småorden till höger passade inte med resten
av sidan, som är grön. Nu: sajtens gröna knapp, menyval i halvfet, och
Support bara i sidfoten och mobilmenyn. Partners är ute ur menyraden. */
.navlinks{font-weight:600}
.nav-actions .btn.login{font-weight:600;color:var(--ink-900)}
.lang-link{font-weight:600}
.nav-quiet{display:none}
.nav-actions .btn.primary{background:var(--green-600);border-color:var(--green-600);border-radius:var(--radius-sm)}
.nav-actions .btn.primary:hover{background:var(--green-700);border-color:var(--green-700)}
/* Bildraden i hjälten har en rubrik per bild. */
.hero-strip figcaption b{display:block;color:var(--ink-900);font-size:16px;font-weight:700;margin-bottom:2px}
/* Digital PT: två skärmar, den andra lite förskjuten. */
.pt-duo{display:flex;justify-content:center;align-items:flex-start;gap:0}
.pt-duo .device{width:min(270px,46%)}
.pt-duo .device+.device{margin:48px 0 0 -40px}
/* Övningsbiblioteket: appens skärm bredvid rubriken. */
.library-top{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:center;margin-bottom:28px}
.library-top .section-head{margin:0;flex-direction:column;align-items:flex-start;gap:14px}
.lib-tile{background:#fff;border-radius:6px;height:300px;overflow:hidden;display:flex;justify-content:center;padding-top:22px}
.lib-tile img{width:78%;height:auto;align-self:flex-start}
@media(max-width:860px){
.library-top{grid-template-columns:1fr;gap:20px}
.lib-tile{height:240px}
}
/* ── Startsidan, tredje varvet (2026-10-23) ──────────────────────────────────
Efter en genomgång av Hevy, Strong, Fitbod, StrengthLog och Everfit:
1) hjälten har EN stor telefon bredvid rubriken i stället för fyra små,
2) funktionerna är rader med samma uppbyggnad, en skärm och några punkter,
där bilden byter sida varannan rad,
3) PT-avsnittet är sidans enda mörka band, eftersom det är en egen målgrupp. */
.hero.hero-c{padding:48px 0 40px;background:#fff;overflow:visible}
.hero-c-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
.hero-c h1{font-size:clamp(44px,5.4vw,82px);line-height:1;letter-spacing:-.03em;margin:0 0 22px}
.hero-c h1 .accent{color:var(--green-600)}
.hero-c p{max-width:520px;margin:0 0 28px}
.hero-c-media{position:relative;display:flex;justify-content:center;min-height:620px}
.hero-c-media .device{position:absolute;filter:drop-shadow(0 28px 40px rgba(16,32,51,.18))}
.hero-c-media .front{width:min(310px,58%);left:14%;top:0;z-index:2}
.hero-c-media .back{width:min(270px,50%);right:6%;top:56px;z-index:1;opacity:.96}
.frows{padding-top:24px}
.frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center;padding:44px 0}
.frow+.frow{border-top:1px solid var(--border)}
.frow.flip .frow-media{order:2}
.frow-media{display:flex;justify-content:center;background:var(--surface-mint);border-radius:8px;height:440px;overflow:hidden;padding-top:36px}
.frow-media .device{width:min(280px,62%);height:auto;align-self:flex-start}
.frow.wide .frow-media{padding:0;align-items:center}
.frow.wide .frow-media .device{width:112%;max-width:none;align-self:center;margin-left:8%}
.frow-copy{max-width:500px}
.frow-copy h2{font-size:var(--h2);line-height:1.08;letter-spacing:-.02em;margin:0 0 14px}
.frow-copy p{font-size:var(--body);color:var(--ink-600);margin:0 0 18px;line-height:1.5}
.frow-copy ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.frow-copy li{position:relative;padding-left:22px;font-size:16px;color:var(--ink-900)}
.frow-copy li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--green-600)}
.frow-copy .fine-print{margin-top:16px}
.frow-copy .btn{margin-top:22px}
.pt-band .lead{color:#cfe0d8}
.pt-band h2{color:#fff}
.pt-band-btn{margin-top:22px}
@media(max-width:900px){
.hero-c-grid{grid-template-columns:1fr;gap:28px}
.hero-c-media{min-height:clamp(420px,112vw,600px)}
.hero-c-media .front{width:56%;left:8%}
.hero-c-media .back{width:48%;right:4%;top:40px}
.frow{grid-template-columns:1fr;gap:24px;padding:32px 0}
.frow.flip .frow-media{order:0}
.frow-media{height:340px;padding-top:24px}
}
/* Utan färgade rutor bakom telefonerna (Marcus 2026-10-23): telefonerna står
fritt på sidans botten och visas hela, inte avklippta nertill. */
.frow-media{background:none;border-radius:0;height:auto;padding:0;overflow:visible}
.frow-media .device{width:min(260px,60%);align-self:center;filter:drop-shadow(0 24px 34px rgba(16,32,51,.14))}
.frow.wide .frow-media .device{width:100%;margin:0}
.lib-tile{background:none;height:auto;padding:0;overflow:visible}
.lib-tile img{width:min(200px,70%);align-self:center;filter:drop-shadow(0 20px 30px rgba(16,32,51,.12))}
@media(max-width:900px){.frow-media{height:auto;padding:0}.frow-media .device{width:min(240px,64%)}}
@media(max-width:860px){.lib-tile{height:auto}}
/* ── Utforska-panelen, omgjord (2026-10-23) ──────────────────────────────────
Fyra rader med ikon, namn och en kort rad text, i ett rutnät två och två.
Inga versala kolumnrubriker och ingen mörk sifferruta längre. */
.nav-dropdown-menu.wide.explore{min-width:540px;padding:10px;grid-template-columns:1fr;gap:0}
.explore .nav-col{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.explore a{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:10px}
.explore a::after{content:none}
.nav-ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:var(--surface-mint);color:var(--green-700);transition:background .16s ease,color .16s ease}
.explore a:hover .nav-ico,.explore a.active .nav-ico{background:var(--green-600);color:#fff}
.nav-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.nav-txt>span{font-size:14.5px;font-weight:700;color:var(--ink-900)}
.nav-txt small{font-size:12.5px;font-weight:500;color:var(--ink-600);line-height:1.35}
@media(min-width:861px) and (max-width:1140px){
.nav-dropdown-menu.wide.explore{left:auto;right:auto;min-width:0;grid-template-columns:1fr}
}
@media(max-width:860px){
.nav-dropdown-menu.wide.explore{min-width:0;padding:4px}
.explore .nav-col{grid-template-columns:1fr}
.explore a{padding:10px 12px}
.nav-ico{width:34px;height:34px}
}
/* ── Språket: SWE / ENG med flaggor ───────────────────────────────────────── */
.lang-toggle{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.lang-opt{display:inline-flex;align-items:center;gap:6px;color:var(--ink-600);padding:4px 2px;border-radius:4px;transition:color .16s ease}
.lang-opt svg{display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(16,32,51,.12)}
.lang-opt.active{color:var(--ink-900)}
a.lang-opt{opacity:.75}
a.lang-opt:hover{opacity:1;color:var(--ink-900)}
.lang-sep{color:#c3ccc7;font-weight:400}
@media(max-width:480px){.lang-opt span{display:none}.lang-toggle{gap:4px}}
/* ── Den gröna bågen bakom telefonerna (2026-10-23) ──────────────────────────
Samma form och färg som i förklaringsfilmen (marketing/video/frogfitness-
explainer, #panel i scenen "Logga varje pass"): en limegrön yta som börjar
uppe vid headern och har stora rundade hörn nertill, med ett svagt ljus
uppe till vänster. Telefonerna ligger över dess nederkant. Sidans botten
får filmens ljusa, gröntonade mark. */
.hero.hero-c{background:radial-gradient(70% 90% at 70% 40%,#f8fbf8 0%,#eef6f0 100%)}
.hero-c-media::before{
content:"";position:absolute;z-index:0;
top:-48px;left:-4%;right:-4%;height:68%;
border-radius:0 0 88px 88px;
background-color:#5fa83a;
background-image:radial-gradient(120% 140% at 15% 0%,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 55%);
}
.hero-c-media .front{z-index:2}
.hero-c-media .back{z-index:1}
.hero-c-media .device{filter:drop-shadow(0 30px 44px rgba(7,60,45,.28))}
@media(max-width:900px){
.hero-c-media::before{top:0;left:-12px;right:-12px;height:62%;border-radius:0 0 56px 56px}
}
/* ── Kontrast och radbrytning (2026-10-24, efter Impeccables granskning) ─────
Sajtens gröna #0B8F59 gav 4,1:1 mot vitt, under WCAG AA:s 4,5:1, både som
textfärg och som botten för vit knapptext. Den mörkare gröna som redan fanns
(#08784B, 5,5:1) blir nu huvudgrön, och hovringen ett steg mörkare (6,6:1).
Den inaktiva språklänken var genomskinlig och hamnade på 3,2:1. */
:root{--green-600:#08784B;--green-700:#066B43}
a.lang-opt{opacity:1}
/* Grå text på mörkgrönt läste som grå på färg: tona den åt grönt i stället. */
.dark .lead{color:#d5e8de}
/* Ensamma ord på sista raden: webbläsaren får balansera styckena själv. */
p,li,figcaption,.nav-txt small{text-wrap:pretty}
.section .feature-copy h2{font-size:var(--h3);line-height:1.16;letter-spacing:-.01em;margin:6px 0 10px}
h1,h2,h3,h2[data-h3]{text-wrap:balance}
/* Radlängd: brödtext i kort och de juridiska texterna låg på 95–110 tecken.
Läsbart är under ca 75. */
.info-card p{max-width:68ch}
.lang-sv :is(p,li),.lang-en :is(p,li){max-width:70ch}
/* Kalkylatorn: makrorutorna var kort med ram inuti resultatkortet. Nu tonade
ytor utan ram, och småtexten är 13 px i stället för 11,5. */
.calc-macro{border:0;background:var(--surface-mint);border-radius:8px}
.calc-macro-sub,.calc-stats dt small{font-size:13px}
.calc-macro-label{font-size:12px}
/* Tryckytor på mobil: minst 44 px höga. Sidfotens länkar var 22 px, ENG-länken
20 px och textlänkarna 25 px. */
@media(max-width:860px){
.footer-grid a{display:flex;align-items:center;min-height:44px}
.lang-opt{min-height:44px;min-width:44px;justify-content:center}
.text-link{display:inline-flex;align-items:center;min-height:44px}
}
/* Smalare stycken där granskningen fortfarande mätte 87–98 tecken per rad. */
.info-card p,.calc-hint{max-width:60ch}
.lang-sv :is(p,li),.lang-en :is(p,li){max-width:62ch}
/* Kalkylatorns meddelanden var tonade rutor med en färgad kantlinje till
vänster inuti resultatkortet. Nu vanlig text med en färgad punkt före. */
.calc-flag{position:relative;background:none;border:0;border-radius:0;padding:0 0 0 18px;font-size:13.5px}
.calc-flag::before{content:"";position:absolute;left:2px;top:.5em;width:8px;height:8px;border-radius:50%;background:currentColor}
.calc-flag-bad{color:#9a2c0c}
.calc-flag-warn{color:#8a5512}
.calc-flag-info{color:var(--green-900)}
.calc-flag-info::before{background:var(--green-600)}
.section .feature-copy h2[data-h3]{font-size:var(--h3);line-height:1.16;margin:6px 0 10px}
.story h2[data-h3]{margin:0 0 8px}
/* ── Jämförelsesidan för PT-appar (2026-10-25, bara på svenska) ──────────────
En vanlig tabell i textspalten, ingen kortvägg. Vår rad markeras med en
tonad yta, inte med etiketter eller bockar. På mobil blir varje rad ett
block: namn och pris överst, villkoren under. */
.compare-wrap{margin:8px 0 6px}
h1 .nobr{white-space:nowrap}
.article-body.compare-body h2{margin:48px 0 14px}
.article-body.compare-body h3,
.article-body.compare-body h2[data-h3]{font-size:22px;font-weight:720;margin:30px 0 8px}
.compare-table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
.compare-table th,.compare-table td{text-align:left;vertical-align:top;padding:14px 12px;border-bottom:1px solid var(--border)}
.compare-table thead th{font-size:13.5px;font-weight:700;color:var(--ink-600);padding-top:0;border-bottom-color:var(--ink-900)}
.compare-table tbody th{font-weight:700;color:var(--ink-900);white-space:nowrap}
.compare-table td{color:var(--ink-700)}
.compare-table td:last-child,.compare-table thead th:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.compare-table td:last-child{font-weight:700;color:var(--ink-900)}
.compare-table tr.is-us{background:var(--surface-mint)}
.compare-table tr.is-us th{color:var(--green-700)}
.article-body .compare-sources{gap:4px}
@media(max-width:640px){
.compare-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.compare-table tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:14px 10px;border-bottom:1px solid var(--border)}
.compare-table th,.compare-table td{padding:0;border:0}
.compare-table td:nth-child(2){grid-column:1/-1;grid-row:2;font-size:15px}
.compare-table td:last-child{grid-row:1;grid-column:2}
}
/* ── Appsidan, omgjord (2026-10-25) ──────────────────────────────────────────
Startsidans hjälte och rader. Undermenyn till avsnitten ligger överst i
raderna och går att svepa i sidled på smala skärmar i stället för att bryta
"Digital PT" på två rader. */
.hero-c .eyebrow{margin-bottom:14px}
.frows .subnav{margin:0 0 8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.frows .subnav::-webkit-scrollbar{display:none}
.frows .subnav a{flex:none;white-space:nowrap;color:var(--ink-600)}
.frows .subnav a:hover{color:var(--green-600)}
.frow[id]{scroll-margin-top:84px}
.frow-copy .eyebrow{margin-bottom:10px}
.frow-copy .text-link{display:inline-block;margin-top:20px}
/* ── Svepbara rader på mobil (appsidan, 2026-10-26) ─────────────────────────
Marcus: "en swipe för de olika bilderna så man slipper skrolla". Under 900px
blir raderna i [data-swipe] kort i sidled med snäpp, nästa telefon sticker
fram i kanten och prickarna (initSwipe i frog.js) visar var man är. Ingen
färgad ruta bakom telefonerna (Marcus 2026-10-23). På datorn är behållaren
ett vanligt block och raderna står under varandra som förut. */
.frow-track+.frow,.frow-track+.swipe-dots+.frow{border-top:1px solid var(--border)}
.swipe-dots{display:none}
@media(max-width:900px){
.frows-swipe .frow-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 -12px;padding:8px 12px 4px;scroll-padding-inline:12px}
.frows-swipe .frow-track::-webkit-scrollbar{display:none}
.frows-swipe .frow-track>.frow{flex:0 0 84%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;gap:20px;padding:12px 0 4px;border:0}
.frows-swipe .frow-track .frow-media .device{width:min(210px,70%)}
.frows-swipe .frow-track .frow-copy h2{font-size:25px}
.frows-swipe .frow-track .frow-copy p{font-size:15.5px;margin-bottom:14px}
.frows-swipe .frow-track .frow-copy ul{gap:8px}
.frows-swipe .frow-track .frow-copy li{font-size:15px}
.frows-swipe .frow-track+.frow{margin-top:20px}
.frows-swipe .subnav{position:relative}
.frows-swipe .subnav a.active{color:var(--green-600)}
.swipe-dots{display:flex;justify-content:center;gap:2px;margin:14px 0 6px}
.swipe-dots button{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.swipe-dots button::before{content:"";width:8px;height:8px;border-radius:99px;background:#c3d0c9;transition:width .2s ease,background-color .2s ease}
.swipe-dots button.on::before{width:20px;background:var(--green-600)}
}
/* ── PT-sidan på mobil (2026-10-26) ─────────────────────────────────────────
1) Rubriken i samma tyngd som startsidan: .pt-hero h1 fastnade på 500 i den
äldre regeln ovan, som Archivo-regeln (bara h1) inte vinner över.
2) Prislistan under varandra i stället för svep: tre korta kort ryms på en
skärm och går att jämföra, och inget paket klipps av i kanten.
3) Större text i "Ingår också".
4) Sista rutans huvudknapp i full bredd, de två andra bredvid varandra.
Mobilbilderna i flikarna (pt-tab-*-m.jpg) byts in med . */
.pt-hero h1{font-weight:720;line-height:1.02;text-wrap:balance}
.pt-stage picture{display:block}
@media(max-width:680px){
.pt-hero h1{font-size:44px}
#pricing .pt-prices{display:grid;grid-auto-flow:row;grid-template-columns:1fr;grid-auto-columns:auto;
overflow:visible;margin-inline:0;padding:0;gap:10px}
#pricing .pt-prices .info-card{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline;padding:16px 18px}
#pricing .pt-prices .info-card .eyebrow{grid-column:1/-1;margin:0 0 2px}
#pricing .pt-prices .info-card h3,
#pricing .pt-prices .info-card h2[data-h3]{margin:0;font-size:22px;white-space:nowrap}
#pricing .pt-prices .info-card p{grid-column:1/-1;margin:6px 0 0;font-size:14.5px}
.pt-mini h3,
.pt-mini h2[data-h3]{font-size:16.5px}
.pt-mini p{font-size:15px}
.cta .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cta .hero-actions .btn{justify-content:center;text-align:center;padding-inline:10px}
.cta .hero-actions .btn.primary{grid-column:1/-1}
/* Mobilbilden står upprätt: ingen avskuren fönsterkant, hela skärmen syns. */
.pt-stage:has(picture){padding:18px 18px 0;display:flex;justify-content:center}
.pt-stage picture img.screen-clean{width:min(300px,100%);border-radius:14px 14px 0 0}
}
@media(max-width:680px){
/* Hemsidebilden är ett liggande utsnitt av sidan: full bredd, rundade hörn. */
.pt-stage:has(picture.wide){padding:16px}
.pt-stage picture.wide img.screen-clean{width:100%;border-radius:10px}
}
@media(max-width:680px){
/* Bygget skriver datorbildens aspect-ratio inline på ; mobilbilden har ett annat format. */
.pt-stage picture img.screen-clean{aspect-ratio:auto!important;height:auto}
}