/* Ny startsida (test, /sv/ny och /en/new). Laddas bara på den sidan.
   Formspråk: svartvita foton i helbild, en fet grotesk (Archivo) och korall som enda färg.
   Ett rutnät för hela sidan: innehållet ligger i .ln-wrap (max 1200 px). Varje avsnitt börjar med .ln-head
   (rubrik till vänster, ingress till höger på bred skärm, en tjock linje ovanför). Bara toppen, siffran och
   avslutningen har riktigt stora rubriker; avsnittens rubriker är en storlek mindre. */
@font-face{font-family:Archivo;font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/archivo-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Archivo;font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/archivo-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Archivo;font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/archivo-latin-800-normal.woff2) format('woff2')}

.page-ln{
  --ln-accent:#ff5a36; /* samma korall som logotypen */
  --ln-ink:#171717; --ln-paper:#f1f1ef; --ln-fog:#e2e2de; --ln-stone:#62625e; --ln-line:rgba(23,23,23,.18); --ln-white:#fff;
  --ln-gut:clamp(20px,4vw,48px);
  --ln-col:clamp(380px,36vw,560px); /* textspalten till höger ovanpå toppfotot */
  --ln-font:Archivo,"Helvetica Neue",Arial,sans-serif;
  background:var(--ln-paper);color:var(--ln-ink);font-family:var(--ln-font);font-size:17px;line-height:1.6;
}
.page-ln :focus-visible{outline:3px solid var(--ln-accent);outline-offset:3px}
.ln-wrap{max-width:1200px;margin:0 auto;padding:0 var(--ln-gut)}

/* ---------- rubrikrad: genomskinlig över fotot, svart när fotot är förbi (landing-new.js) ---------- */
.ln-top{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:2rem;padding:20px var(--ln-gut);color:var(--ln-white);transition:background .2s,padding .2s}
.ln-top.is-solid{background:var(--ln-ink);padding-top:12px;padding-bottom:12px}
.ln-top .logo{color:var(--ln-white)}
/* Logotypen visar sloganen i stället för produktnamnet. */
.ln-logo .logo-text small{font-family:var(--ln-font);font-weight:500;font-size:.68rem;letter-spacing:.02em;text-transform:none;opacity:.85;margin-top:.25rem}
.ln-nav{display:none;gap:2rem}
.ln-nav a,.ln-login{color:var(--ln-white);text-decoration:none;font-weight:500;font-size:.95rem;opacity:.85}
.ln-nav a:hover,.ln-login:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
.ln-actions{margin-left:auto;display:flex;align-items:center;gap:1.2rem}
.page-ln .flag.on{outline-color:var(--ln-white)}
@media (min-width:900px){.ln-nav{display:flex}}

/* ---------- foton ---------- */
.ln-photo{position:absolute;inset:0;margin:0}
.ln-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}

/* ---------- knappar ---------- */
.ln-btn{display:inline-flex;align-items:center;justify-content:center;padding:.95rem 2rem;background:var(--ln-white);color:var(--ln-ink);border:2px solid var(--ln-white);font:inherit;font-weight:800;font-size:.95rem;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;transition:background .15s,color .15s}
.ln-btn:hover{background:transparent;color:var(--ln-white)}
.ln-btn-ink{background:var(--ln-ink);color:var(--ln-white);border-color:var(--ln-ink);width:100%;margin-top:auto}
.ln-btn-ink:hover{background:transparent;color:var(--ln-ink)}
.ln-btn-accent{background:var(--ln-accent);border-color:var(--ln-accent);color:var(--ln-ink)}
.ln-btn-accent:hover{background:transparent;color:var(--ln-accent)}
.ln-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem}
.ln-note{font-size:.88rem;opacity:.8}

/* ---------- toppen ---------- */
.ln-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;color:var(--ln-white);overflow:hidden;background:#3a3a3a}
.ln-hero .ln-photo img{object-position:80% 50%}
.ln-hero .ln-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.12) 40%,rgba(0,0,0,.1) 55%,rgba(0,0,0,.6) 100%),linear-gradient(90deg,transparent 45%,rgba(0,0,0,.35) 100%)}
.ln-genres{position:relative;z-index:1;list-style:none;margin:0;padding:92px var(--ln-gut) 0;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 2.4rem;font-weight:800;text-transform:uppercase;font-size:.82rem;letter-spacing:.06em;opacity:.75}
.ln-hero-top{position:relative;z-index:1;text-align:center;padding:clamp(28px,6vh,72px) var(--ln-gut) 0}
.ln-genres-space{height:92px}
/* Branschsidor: branschens namn som en liten korallfärgad etikett ovanför rubriken. */
.ln-kicker{display:inline-block;margin:0 0 1rem;background:var(--ln-accent);color:var(--ln-ink);font-weight:800;text-transform:uppercase;font-size:.85rem;letter-spacing:.02em;padding:.3rem .6rem}
.ln-title{margin:0 auto;max-width:19ch;font-weight:800;text-transform:uppercase;font-size:clamp(2.4rem,6vw,6rem);line-height:.92;letter-spacing:-.04em;text-wrap:balance}
/* Säljpunkter och knapp nere till höger: knappen hamnar i gräset under horisonten, inte på den. */
.ln-caption{position:relative;z-index:1;margin:auto 0 0 auto;width:var(--ln-col);padding:2rem var(--ln-gut) clamp(36px,7vh,72px) 0}
.ln-points{list-style:none;margin:0 0 1.6rem;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:.45rem}
.ln-points li{background:var(--ln-accent);color:var(--ln-ink);font-weight:800;text-transform:uppercase;font-size:clamp(1.15rem,2vw,1.75rem);line-height:1;letter-spacing:-.025em;padding:.32em .5em .28em}
.ln-sub{margin:1.1rem 0 0;font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:500;line-height:1.35}

/* ---------- avsnitt ---------- */
.ln-sec{padding:clamp(72px,9vw,120px) 0}
.ln-dark{background:var(--ln-ink);color:var(--ln-paper)}
.ln-fog{background:var(--ln-fog)}
.ln-head{display:grid;gap:1rem 4rem;margin:0 0 clamp(2.4rem,5vw,3.6rem);padding-top:1.4rem;border-top:4px solid currentColor}
@media (min-width:900px){.ln-head{grid-template-columns:7fr 5fr;align-items:end}}
.ln-h{margin:0;font-weight:800;text-transform:uppercase;font-size:clamp(2rem,4vw,3.4rem);line-height:.96;letter-spacing:-.035em;text-wrap:balance}
.ln-h3{margin:0 0 .4rem;font-weight:800;text-transform:uppercase;font-size:1.15rem;line-height:1.1;letter-spacing:-.015em}
.ln-lead{margin:0;font-size:1.1rem;line-height:1.5;color:var(--ln-stone);max-width:44ch}
.ln-dark .ln-lead{color:#b4b4b0}
.ln-small{margin:1.2rem 0 0;font-size:.88rem;color:var(--ln-stone)}

/* inledning: ett påstående och tre fördelar */
.ln-statement{margin:0 0 clamp(3rem,6vw,4.5rem);font-weight:800;text-transform:uppercase;font-size:clamp(2.4rem,6vw,5.4rem);line-height:.96;letter-spacing:-.035em;max-width:18ch;text-wrap:balance}
.ln-cols{list-style:none;margin:0;padding:0;display:grid;gap:2.4rem}
@media (min-width:860px){.ln-cols{grid-template-columns:repeat(3,1fr);gap:3rem}}
.ln-cols li{border-top:1px solid #4a4a47;padding-top:1.2rem}
.ln-cols p{margin:0;color:#b4b4b0;max-width:40ch}

/* kanaler: tre "omslag" i sidans färger, inga bilder behövs */
.ln-covers{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem}
@media (min-width:760px){.ln-covers{grid-template-columns:repeat(3,1fr)}}
.ln-cover{display:flex;flex-direction:column;min-height:clamp(300px,30vw,400px);padding:1.6rem}
.ln-cover-1{background:var(--ln-accent);color:var(--ln-ink)}
.ln-cover-2{background:var(--ln-white);color:var(--ln-ink);box-shadow:inset 0 0 0 1px var(--ln-line)}
.ln-cover-3{background:var(--ln-ink);color:var(--ln-white)}
.ln-cover-time{font-weight:500;font-size:.95rem;padding-bottom:.5rem;border-bottom:2px solid currentColor;align-self:flex-start}
.ln-cover h3{margin:auto 0 .6rem;font-weight:800;text-transform:uppercase;font-size:clamp(1.7rem,2.5vw,2.3rem);line-height:.95;letter-spacing:-.035em}
.ln-cover p{margin:0;max-width:30ch;opacity:.85}

/* branschsidor: förslag på kanaler som omslag med foto, musikstil och namn */
.ln-lists{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.ln-lists{grid-template-columns:repeat(4,1fr);gap:1.2rem}}
.ln-list{position:relative;aspect-ratio:1;overflow:hidden;background:var(--ln-ink);color:var(--ln-white)}
.ln-list img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform .6s}
.ln-list::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.85))}
.ln-list:hover img{transform:scale(1.04)}
.ln-list-text{position:absolute;z-index:1;left:1rem;right:1rem;bottom:1rem}
.ln-list-style{display:inline-block;font-weight:800;text-transform:uppercase;font-size:.7rem;letter-spacing:.04em;background:var(--ln-accent);color:var(--ln-ink);padding:.2rem .45rem;margin-bottom:.5rem}
.ln-list h3{margin:0;font-weight:800;text-transform:uppercase;font-size:clamp(1rem,1.6vw,1.35rem);line-height:1.02;letter-spacing:-.02em;overflow-wrap:anywhere;hyphens:auto}
@media (prefers-reduced-motion:reduce){.ln-list img{transition:none}}

/* forskningssiffran över butiksfotot: centrerad i himlen, byggnaden fri nedtill */
.ln-stat{position:relative;min-height:88svh;display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--ln-white);overflow:hidden;background:#3a3a3a}
.ln-stat .ln-photo img{object-position:35% 100%}
.ln-stat .ln-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.08) 55%,rgba(0,0,0,.45))}
.ln-stat-in{position:relative;z-index:1;padding:clamp(80px,12vh,130px) var(--ln-gut) 0;max-width:980px}
.ln-big{margin:0 0 .6rem;font-weight:800;font-size:clamp(4rem,9vw,8rem);line-height:.9;letter-spacing:-.05em;color:var(--ln-accent)}
.ln-stat-text{margin:0 auto;font-weight:800;text-transform:uppercase;font-size:clamp(1.25rem,2.3vw,2rem);line-height:1.05;letter-spacing:-.025em;max-width:34ch;text-wrap:balance}
.ln-stat-src{position:relative;z-index:1;margin:auto 0 0;padding:0 var(--ln-gut) 22px;font-size:.8rem;color:rgba(255,255,255,.8)}
.ln-stat-src a{color:inherit}

/* så funkar det: tre steg, fyra funktioner och spelaren */
.ln-how{display:grid;gap:3.5rem;align-items:start}
@media (min-width:960px){.ln-how{grid-template-columns:7fr 5fr;gap:5rem}}
.ln-steps{list-style:none;margin:0 0 3rem;padding:0;display:grid;gap:1.4rem}
.ln-steps li{display:flex;gap:1.4rem;align-items:baseline}
.ln-step-n{flex:none;width:1.4ch;font-weight:800;font-size:2.8rem;line-height:1;letter-spacing:-.04em;color:var(--ln-accent)}
.ln-steps p{margin:0;color:var(--ln-stone)}
.ln-feat{list-style:none;margin:0;padding:0;display:grid;gap:0 2.4rem;border-top:1px solid var(--ln-line)}
@media (min-width:620px){.ln-feat{grid-template-columns:1fr 1fr}}
.ln-feat li{padding:1.1rem 0 1.2rem;border-bottom:1px solid var(--ln-line)}
.ln-feat h3{margin:0 0 .25rem;font-weight:800;font-size:1rem}
.ln-feat p{margin:0;color:var(--ln-stone);font-size:.97rem}
.ln-mock{margin:0;background:var(--ln-ink);color:var(--ln-paper);padding:2.2rem 1.8rem 1.8rem;max-width:400px;width:100%;justify-self:center}
@media (min-width:960px){.ln-mock{position:sticky;top:90px}}
.ln-mock-mode{display:flex;margin:0 auto 1.8rem;border:1px solid #4a4a47;width:max-content;font-size:.85rem;font-weight:500}
.ln-mock-mode span{padding:.4rem 1rem;color:#a9a9a5}
.ln-mock-mode .on{background:var(--ln-paper);color:var(--ln-ink)}
.ln-mock-label{text-align:center;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--ln-accent);margin:0 0 .3rem}
.ln-mock-name{text-align:center;font-weight:800;text-transform:uppercase;font-size:2rem;line-height:1;letter-spacing:-.03em;margin:0 0 1.4rem}
.ln-mock-play{display:flex;align-items:center;justify-content:center;gap:1rem;margin:0 0 1.8rem}
.ln-mock-btn{width:64px;height:64px;border-radius:50%;background:var(--ln-accent);display:grid;place-items:center}
.ln-mock-btn svg{width:26px;height:26px;fill:var(--ln-ink)}
.ln-mock .eq{display:flex;gap:3px;align-items:flex-end;height:30px}
.ln-mock .eq i{display:block;width:4px;background:#6f6f6b;height:40%}
.ln-mock .eq i:nth-child(2n){height:90%}.ln-mock .eq i:nth-child(3n){height:65%}
.ln-mock-f{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.6rem 0;border-top:1px solid #333;font-size:.9rem}
.ln-mock-seg{display:flex;border:1px solid #4a4a47}
.ln-mock-seg i{font-style:normal;padding:.25rem .55rem;font-size:.75rem;color:#a9a9a5}
.ln-mock-seg i.on{background:var(--ln-accent);color:var(--ln-ink);font-weight:800}

/* licensfritt: jämförelse */
.ln-compare{display:grid;gap:1.2rem}
@media (min-width:760px){.ln-compare{grid-template-columns:1fr 1fr}}
.ln-compare>div{padding:1.8rem 1.8rem 1.4rem}
.ln-compare h3{margin:0 0 .8rem;font-weight:800;text-transform:uppercase;font-size:1.15rem}
.ln-compare ul{list-style:none;margin:0;padding:0}
.ln-compare li{padding:.7rem 0;border-top:1px solid #3a3a37}
.ln-them{border:1px solid #3a3a37}
.ln-them li{color:#8f8f8b;text-decoration:line-through;text-decoration-thickness:1px}
.ln-us{background:var(--ln-paper);color:var(--ln-ink)}
.ln-us li{border-top-color:var(--ln-line);font-weight:500}
.ln-us li::before,.ln-checks li::before{content:"";display:inline-block;width:.55em;height:.55em;background:var(--ln-accent);margin-right:.8em;vertical-align:.08em}
.ln-more-row{margin:1.8rem 0 0;display:flex;flex-wrap:wrap;gap:.8rem 2rem}
.ln-more{color:inherit;font-weight:800;text-transform:uppercase;font-size:.95rem;text-underline-offset:6px;text-decoration-thickness:2px}

/* pris */
.ln-price{display:grid;gap:3rem;align-items:start}
@media (min-width:960px){.ln-price{grid-template-columns:5fr 7fr;gap:5rem}}
.ln-price .ln-h,.ln-faq-grid .ln-h{padding-top:1.4rem;border-top:4px solid currentColor}
.ln-checks{list-style:none;margin:2rem 0 0;padding:0}
.ln-checks li{padding:.8rem 0;border-bottom:1px solid var(--ln-line);font-weight:500}
.page-ln .plans{gap:1rem}
.page-ln .plan{background:var(--ln-white);color:var(--ln-ink);border-radius:0;border:1px solid var(--ln-ink);outline:none}
.page-ln .plan-best{background:var(--ln-ink);color:var(--ln-paper)}
.page-ln .plan-best .ln-btn-ink{background:var(--ln-accent);color:var(--ln-ink);border-color:var(--ln-accent)}
.page-ln .plan-best .ln-btn-ink:hover{background:transparent;color:var(--ln-accent)}
.page-ln .plan .price{font-family:var(--ln-font);font-weight:800;letter-spacing:-.04em;text-transform:none}
.page-ln .badge{background:var(--ln-accent);color:var(--ln-ink);border-radius:0;font-family:var(--ln-font);font-weight:800;text-transform:none}
.page-ln .plans-note{color:var(--ln-stone)}

/* verksamheter: kompakt rutnät med länkar */
.ln-ind{list-style:none;margin:0;padding:0;display:grid;gap:0 2.4rem;border-top:1px solid var(--ln-line)}
@media (min-width:620px){.ln-ind{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.ln-ind{grid-template-columns:repeat(3,1fr)}}
.ln-ind a{display:block;padding:1.1rem 2rem 1.1rem 0;border-bottom:1px solid var(--ln-line);text-decoration:none;position:relative}
.ln-ind a::after{content:"";position:absolute;right:.3rem;top:50%;width:.5rem;height:.5rem;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateY(-50%) rotate(45deg);transition:right .15s}
.ln-ind a:hover::after{right:0}
.ln-ind-name{display:block;font-weight:800;text-transform:uppercase;font-size:1.05rem;letter-spacing:-.01em}
.ln-ind-line{display:block;color:var(--ln-stone);font-size:.95rem}

/* frågor: rubrik till vänster, frågorna till höger */
.ln-faq-grid{display:grid;gap:2rem}
@media (min-width:960px){.ln-faq-grid{grid-template-columns:5fr 7fr;gap:5rem}.ln-faq-grid .ln-h{position:sticky;top:90px;align-self:start}}
.ln-faq{border-top:1px solid var(--ln-line)}
.ln-faq details{border-bottom:1px solid var(--ln-line)}
.ln-faq summary{cursor:pointer;list-style:none;padding:1.15rem 2.4rem 1.15rem 0;font-weight:500;font-size:1.08rem;position:relative}
.ln-faq summary::-webkit-details-marker{display:none}
.ln-faq summary::after{content:"+";position:absolute;right:.2rem;top:.85rem;font-size:1.6rem;line-height:1}
.ln-faq details[open] summary::after{content:"–"}
.ln-faq details p{margin:0 0 1.3rem;color:#3d3d3a;max-width:62ch}

/* avslutning */
.ln-final{background:var(--ln-ink);color:var(--ln-white);padding:clamp(80px,11vw,140px) 0;text-align:center}
.ln-final-title{margin:0 auto 2rem;font-weight:800;text-transform:uppercase;font-size:clamp(2.4rem,6vw,5.4rem);line-height:.94;letter-spacing:-.04em;max-width:14ch;text-wrap:balance}
.ln-cta-center{justify-content:center}

.page-ln .site-footer{background:#0f0f0f;color:#a9a9a5}

/* ---------- smal skärm ---------- */
@media (max-width:760px){
  .ln-hero .ln-photo img{object-position:30% 50%}
  .ln-caption{width:100%;margin:auto 0 0;padding:1.5rem var(--ln-gut) 32px}
  .ln-stat{min-height:80svh}
  .ln-cover{min-height:220px}
  .ln-genres{gap:.3rem 1.2rem;font-size:.72rem;padding-top:80px}
}
@media (max-width:560px){
  .ln-top{gap:1rem}
  .ln-actions{gap:.7rem}
  .ln-login{font-size:.88rem;white-space:nowrap}
  .ln-logo .logo-text small{font-size:.58rem;white-space:nowrap}
  .ln-title{font-size:clamp(1.8rem,7.8vw,3rem)}
}
@media (prefers-reduced-motion:reduce){.ln-btn,.ln-top,.ln-ind a::after{transition:none}}