/* ── Frog Fitness designlager ────────────────────────────────────────────────
Laddas EFTER site.css och injiceras av scripts/build-website.mjs, så en ny
leverans av site.css inte raderar det.
Innehåller tre saker: layouten för startsidans nya sektioner, riktiga
enhetsmockuper i stället för platta rektanglar, och återhållsam rörelse.
Inga nya färger eller storlekar: allt kommer från tokens i site.css.
Röd är accent, inte huvudfärg. Den används på fyra ställen: strecket före
etiketten, ordet i hjälterubriken, understreck i menyn vid hover och en
enda pill i PT-raden. Röda linjer under stora rubriker är medvetet borta,
de blev för många. */
/* ── Typografi: samma nivå, samma storlek genom hela sajten ────────────────── */
.tri-item h3,.story h3,.feature-copy 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). */
.eyebrow{display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:20px;height:3px;border-radius:2px;background:var(--red-500);flex:none}
.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. */
.brand img{height:58px}
.header.scrolled .brand img{height:48px;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) url("/assets/img/photos/gym-dark.jpg") center/cover no-repeat;
}
.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{margin-top:0}
/* ── D. Digital PT ──────────────────────────────────────────────────────────
Samma behandling som stripe: 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) url("/assets/img/photos/training-wide.jpg") 46% 50%/205% no-repeat;
}
.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{font-size:20px;line-height:1.25}
.story-link:hover 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{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{color:inherit}
.story h3 a:hover{color:var(--green-600)}
.info-card h3 a{color:inherit}
.info-card 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}
}
/* ---- 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}
@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}
}