/* Landingsside — utvider styles.css, arver Gist-tokens derfra.
   Mobil først. Én bevegelse er forfattet (svaret i heroen); alt annet er ro.
   Mono-etiketter har ÉN sporing: .13em, samme som .pill i appen. */

/* [hidden] må vinne over klasser som setter display. Uten dette vises
   CTA-en før brukeren har svart, fordi .lp-cta{display:block} overstyrer
   nettleserens display:none. */
[hidden]{display:none !important}

.lp{background:var(--ink);color:var(--paper)}
.lp-w{max-width:640px;margin:0 auto;padding:0 var(--gut);position:relative}

/* ---------- klistremerker (fylt .pill — Gists bindevev) ---------- */
.stick{display:inline-flex;align-items:center;border-radius:999px;padding:7px 13px;
  font:700 .64rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  background:var(--hi);color:var(--ink)}
.s-pink{background:var(--pink)}
.s-suds{background:var(--suds)}
.s-teal{background:var(--teal)}
.s-paper{background:var(--paper)}
.s-blue{background:var(--blue);color:var(--paper)}
/* Sømmerket sitter oppå skjøten mellom to seksjoner — halvt i hver. */
.lp-seam{position:absolute;top:0;left:50%;transform:translate(-50%,-50%) rotate(-2deg);z-index:2}
.lp-lys .lp-seam{transform:translate(-50%,-50%) rotate(1.6deg)}

/* ---------- hero ---------- */
.lp-hero{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  max-width:640px;margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) var(--gut) 34px}
.lp-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:auto;
  padding-bottom:26px}
.lp-gratis{color:var(--hi);border-color:var(--hi)}
/* H1 bærer søkeordet, men spørsmålet beholder den visuelle hovedrollen. */
.lp-h1{font:700 .68rem/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);margin-bottom:14px;max-width:34ch;text-wrap:balance}
.lp-hero-pills{display:none}
/* .qcard er dimensjonert for feeden (100dvh, snap). På landingssiden skal
   kortet være akkurat så høyt som innholdet. */
.lp-card{margin:0;min-height:0;height:auto;padding:22px 20px 24px;border-radius:22px}
.lp-card .q-text{font-size:clamp(1.45rem,5.8vw,1.9rem);max-width:none}
.lp-card .sheet{margin-top:16px}
.lp-etter{font:400 1.25rem/1.4 var(--serif);font-style:italic;margin-top:22px;max-width:30ch;
  text-wrap:balance;-webkit-text-stroke:.02em currentColor;paint-order:stroke fill}
.lp-etter b{font-style:normal;font-weight:400;color:var(--hi)}
.lp-cta{margin-top:16px;text-decoration:none;display:block}

/* Den ene forfattede bevegelsen: arket trår inn i to steg (appens eget språk),
   deretter ankommer setningen og knappen med eksponentiell ease-out — i rekkefølge. */
.lp-card .sheet.on{animation:lp-steg .1s steps(2) both}
@keyframes lp-steg{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.lp-etter:not([hidden]){animation:lp-ankomst .5s var(--ease) .14s both}
.lp-cta:not([hidden]){animation:lp-ankomst .6s var(--ease) .26s both}
@keyframes lp-ankomst{from{transform:translateY(22px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .lp-card .sheet.on,.lp-etter:not([hidden]),.lp-cta:not([hidden]){animation:none}
}

/* ---------- roterte bånd ---------- */
.lp-band-wrap{overflow:hidden;background:var(--ink);padding:38px 0 0}
.lp-band{display:flex;gap:22px;white-space:nowrap;background:var(--hi);color:var(--ink);
  padding:9px 0;transform:rotate(-1.4deg) scale(1.03);
  font:700 .72rem/1 var(--mono);letter-spacing:.13em;justify-content:center}
/* Bånd nr. 2 heller motsatt vei, i papir — rytme, ikke gjentakelse. */
.lp-band-wrap-2{padding:0 0 6px}
.lp-band-2{background:var(--paper);transform:rotate(1.2deg) scale(1.03)}

/* ---------- seksjoner ---------- */
.lp-sec{padding:64px 0;position:relative}
.lp-sec h2{font:400 clamp(1.75rem,6.2vw,2.4rem)/1.12 var(--serif);font-style:italic;
  letter-spacing:-.01em;max-width:20ch;text-wrap:balance;
  -webkit-text-stroke:.024em currentColor;paint-order:stroke fill}
.lp-lead{font-size:1.02rem;line-height:1.65;margin-top:16px;max-width:60ch;color:var(--dim)}
.lp-lead b{color:var(--paper);font-weight:600}
.lp-kilde{font:700 .62rem/1.6 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin-top:22px;max-width:56ch}
.lp-lbl{font:700 .64rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.lp-lenke{color:var(--hi);font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor}

/* Lyse seksjoner bryter rytmen og gir øyet hvile mellom de mørke. */
.lp-lys{background:var(--corn);color:var(--ink)}
.lp-lys .lp-lead{color:#3a3a46}
.lp-lys .lp-lead b{color:var(--ink)}
.lp-lys .lp-kilde{color:#6a6a78}
.lp-lys .lp-lenke{color:var(--blue)}

/* ---------- stort tall (innsatsen) ---------- */
.lp-big{font:400 clamp(5.6rem,28vw,8.5rem)/.86 var(--serif);font-style:italic;color:var(--pink);
  letter-spacing:-.045em;display:flex;align-items:baseline;gap:.05em}
.lp-big small{font-size:.3em;color:var(--paper);letter-spacing:0}
.lp-big-lbl{font:700 .64rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);margin-top:12px}
.lp-fig-tall{margin-bottom:26px}

/* ---------- skjermbilder: telefonskjerm på blekk, ingen påfunnet ramme ---------- */
.lp-fig{margin-top:30px}
.lp-shot{margin:0;border-radius:26px;overflow:hidden;background:var(--ink);
  border:1px solid var(--hair);width:min(100%,300px)}
.lp-shot img{display:block;width:100%;height:auto}
.lp-lys .lp-shot{border-color:rgba(18,18,18,.16)}
/* Vindu mot nedre del av skjermen: kilden ligger under svaret. */
.lp-shot-bunn{aspect-ratio:360/470}
.lp-shot-bunn img{height:100%;object-fit:cover;object-position:bottom}
/* Toppen av skjermen, som blør ut gjennom seksjonens bunn (kollasjen krysser rammen). */
.lp-shot-topp{aspect-ratio:360/520;border-radius:26px 26px 0 0;border-bottom:0}
.lp-shot-topp img{height:100%;object-fit:cover;object-position:top}
.lp-bleed{padding-bottom:0}
.lp-bleed .lp-fig{margin-top:34px}
/* To skjermer i kollasj: prøven foran, resultatet skrått bak. */
.lp-shots{position:relative;padding-bottom:12%}
.lp-shots .lp-shot{width:64%}
.lp-shots .lp-shot + .lp-shot{position:absolute;right:0;top:15%;width:58%;
  transform:rotate(2.4deg)}

/* ---------- talltrio: klistrekort ---------- */
.lp-tall{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.lp-tall div{flex:1 1 90px;background:var(--paper);color:var(--ink);border-radius:16px;padding:16px 14px}
.lp-tall div:nth-child(1){transform:rotate(-1.2deg)}
.lp-tall div:nth-child(2){transform:rotate(1.4deg)}
.lp-tall div:nth-child(3){transform:rotate(-.8deg)}
.lp-tall b{display:block;font:400 2.6rem/1 var(--serif);font-style:italic;color:var(--blue);
  -webkit-text-stroke:.02em currentColor;paint-order:stroke fill}
/* Etiketten må stå på én linje — «FOR Å BESTÅ» er den lengste, og tre kort
   deler 339 px på en 375-skjerm. Derfor .56rem her, .6rem fra nettbrett. */
.lp-tall span{display:block;margin-top:6px;font:700 .56rem/1 var(--mono);
  letter-spacing:.13em;text-transform:uppercase;color:#3a3a46;white-space:nowrap}

/* ---------- temaliste ---------- */
.lp-tema{display:flex;flex-direction:column;gap:9px;margin-top:24px}
.lp-tema a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  border-radius:16px;padding:15px 17px;text-decoration:none;color:var(--ink);
  transition:transform .12s var(--pop)}
.lp-tema a:active{transform:scale(.985)}
.lp-tema b{font:700 1.02rem/1.15 var(--sans)}
.lp-tema span{font:700 .62rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  opacity:.66;white-space:nowrap}

/* ---------- pakker ----------
   Bruker .pakke / .pk-navn / .pk-pris fra styles.css — samme komponent som
   appens paywall. Kun avstand og kjøpsknapp defineres her.
   Rytme: h2 → 16 → lead → 28 → pakker → 18 → kjøp → 36 → sammenligning → 24 → kilde. */
.lp-pakker{margin-top:28px}
.lp-kjop{margin-top:18px;text-decoration:none;display:block;box-shadow:none}
.lp-fig-tab{margin-top:36px}
.lp-fig-tab .compare{margin-top:14px;border-top:0;padding-top:0}
.compare .row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--hair);font-size:.92rem;color:var(--dim)}
.compare .row b{white-space:nowrap;font-variant-numeric:tabular-nums}
.compare .row.us{border-bottom:0;font-weight:700;color:var(--hi)}
.lp-pris .lp-kilde{margin-top:24px}

/* ---------- ærlighet + faq ---------- */
.lp-sec-aerlig{padding-top:20px}
.lp-aerlig{position:relative;border:2px solid var(--hair);border-radius:22px;padding:34px 22px 26px}
.lp-aerlig .lp-seam{left:22px;transform:translateY(-50%) rotate(-2deg)}
.lp-faq{margin-top:22px;display:flex;flex-direction:column;gap:2px}
.lp-faq details{border-bottom:1px solid rgba(18,18,18,.16);padding:15px 0}
.lp-faq summary{font-weight:600;cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;gap:14px;align-items:baseline}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";font:700 1.2rem/1 var(--mono);color:var(--blue)}
.lp-faq details[open] summary::after{content:"–"}
.lp-faq p{margin-top:11px;line-height:1.65;color:#3a3a46;max-width:60ch}
.lp-faq a{color:var(--blue);font-weight:600}

/* ---------- footer ---------- */
.lp-foot{background:var(--ink);color:var(--paper);padding:48px 0 60px;border-top:1px solid var(--hair)}
.lp-mark-xl{font-size:2rem;letter-spacing:.04em}
.lp-mark-xl s::after{height:3px}
.lp-nav{display:flex;flex-wrap:wrap;gap:9px 18px;margin:22px 0 24px}
.lp-nav a{color:var(--dim);text-decoration:none;font-size:.88rem}
.lp-nav a:hover{color:var(--hi)}

/* =========================================================
   Nettbrett
   ========================================================= */
@media(min-width:760px){
  .lp-tall div{flex:1}
  .lp-tall span{font-size:.6rem}
  .lp-tema{display:grid;grid-template-columns:1fr 1fr}
}

/* =========================================================
   Desktop — en komposisjon, ikke en smal kolonne på svart.
   ========================================================= */
@media(min-width:900px){
  /* hero: H1 + klistremerker til venstre, spørsmålskortet til høyre */
  .lp-hero{max-width:1080px;display:grid;column-gap:64px;
    grid-template-columns:minmax(0,1fr) minmax(0,500px);
    grid-template-rows:auto auto auto auto auto;align-content:center;
    padding-bottom:48px}
  .lp-top{grid-column:1/-1;grid-row:1;padding-bottom:44px;margin-bottom:0}
  .lp-top .mark{font-size:1.2rem}
  .lp-h1{grid-column:1;grid-row:2;font:400 clamp(2.3rem,3.8vw,3.2rem)/1.04 var(--serif);
    font-style:italic;letter-spacing:-.012em;text-transform:none;color:var(--paper);
    max-width:15ch;margin-bottom:0;-webkit-text-stroke:.024em currentColor;paint-order:stroke fill}
  .lp-hero-pills{grid-column:1;grid-row:3;display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;
    align-content:flex-start}
  .lp-hero-pills .stick:nth-child(1){transform:rotate(-2deg)}
  .lp-hero-pills .stick:nth-child(2){transform:rotate(1.4deg)}
  .lp-hero-pills .stick:nth-child(3){transform:rotate(-1deg)}
  .lp-hero-pills .stick:nth-child(4){transform:rotate(1.8deg)}
  .lp-card{grid-column:2;grid-row:2/6;padding:26px 24px 28px}
  .lp-etter{grid-column:1;grid-row:4;font-size:1.4rem;margin-top:34px}
  .lp-cta{grid-column:1;grid-row:5;max-width:440px}
  .lp-hero > :not(.lp-card){min-width:0}

  .lp-sec{padding:96px 0}
  .lp-bleed{padding-bottom:0}
  .lp-sec h2{font-size:clamp(2.2rem,3.3vw,2.9rem)}
  .lp-lead{font-size:1.08rem}

  /* delte seksjoner: tekst | bilde, annenhver vei */
  .lp-split .lp-w{max-width:1080px;display:grid;column-gap:80px;align-items:center;
    grid-template-columns:minmax(0,1fr) minmax(0,400px)}
  .lp-split .lp-txt{grid-column:1;grid-row:1}
  .lp-split .lp-fig{grid-column:2;grid-row:1;margin-top:0}
  .lp-split-left .lp-w{grid-template-columns:minmax(0,400px) minmax(0,1fr)}
  .lp-split-left .lp-txt{grid-column:2}
  .lp-split-left .lp-fig{grid-column:1}
  .lp-full{grid-column:1/-1}
  .lp-shot{width:100%}
  .lp-bleed .lp-w{align-items:end}
  .lp-bleed .lp-txt{padding-bottom:96px}
  .lp-bleed .lp-fig{margin-top:0}
  .lp-shot-bunn{aspect-ratio:360/540}
  .lp-shot-topp{aspect-ratio:360/560}
  .lp-shots{padding-bottom:14%}
  .lp-shots .lp-shot{width:66%}

  /* innsatsen: tallet er plakaten */
  .lp-fig-tall{margin-bottom:0;align-self:center}
  .lp-big{font-size:clamp(8rem,13vw,12rem)}

  /* prisen: pakker til venstre, sammenligningen ved siden av */
  .lp-pris .lp-w{align-items:start}
  .lp-fig-tab{margin-top:0;padding-top:12px}
  .lp-pris .lp-kilde{margin-top:36px}

  .lp-aerlig{padding:44px 40px 36px}
  .lp-aerlig .lp-seam{left:40px}
  .lp-sec-aerlig{padding-top:40px}

  .lp-foot .lp-w{max-width:1080px}
  .lp-foot-top{display:flex;justify-content:space-between;gap:48px;align-items:flex-start}
  .lp-mark-xl{font-size:2.6rem;flex:0 0 auto}
  .lp-nav{margin:6px 0 0;max-width:560px;justify-content:flex-end}
  .lp-foot #lp-selskap{margin-top:34px}
}