:root {
  --bg: #07090D;
  --bg-alt: #0d1017;
  --card: #12151d;
  --border: rgba(255,255,255,0.08);
  --text: #f5f5f7;
  --text-dim: rgba(245,245,247,0.65);
  /* Tillbaka till det mättade, "stunsiga" guldet (Niclas 2026-09-30) -- ett
     försök att matcha logotypens egen mjukare guldton gjorde texten "mesig".
     Fel spår, rör inte igen utan uttrycklig begäran. */
  /* Exakt hex som Niclas gav 2026-10-01: "All gul färg ska vara uteslutande
     #fbb90f" -- gäller även logotypfilen, se recolor-skriptet som körts mot
     assets/logo_p.png (den hade en egen, blekare inbakad guldton). */
  --gold: #fbb90f;
  --gold-dim: rgba(251,185,15,0.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

/* Enhetlig rubrikskala (Niclas 2026-09-30): H1 = hero, H2 = alla
   sektionsrubriker (familjekarusell, biobiljett, familjedelning, avslutande
   CTA), H3 = de mindre highlight-rubrikerna. Fyller i här på tag-nivå
   istället för i varje enskild sektion, så nya rubriker automatiskt får
   samma storlek utan att en ny regel glöms bort. */
h1, h2, h3 { font-weight: 700; margin: 0; }
h1 {
  font-size: clamp(38px, 5.2vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.15;
}
h3 {
  font-size: 20px;
  line-height: 1.3;
}

/* Flyter direkt ovanpå hero-bilden, som i Niclas skiss (2026-09-28) --
   ingen egen mörk list ovanför, logotyp och meny ligger på fotot. */
.nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
}

.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 75px 24px 14px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 12px; }
/* Storleksförhållande P-ikon/ordmärke rättat mot Niclas skiss 2026-09-30
   ("du MÅSTE se skillnaden", sen "fortfarande alldeles för liten") -- P:n
   ska dominera, texten är en liten bildtext bredvid, inte samma storlek.
   Källfilen (assets/logo_p.png) beskars till sin faktiska bildyta (hade
   ~23% osynlig transparent marginal runt om, vilket både gjorde ikonen
   mindre än den såg ut att kunna vara OCH fick den att se "sväva in" från
   vänsterkanten istället för att linjera med rubriktexten under). 80px är
   nu taket innan ikonen krockar med hero-rubriken -- ommätt live efter att
   H1:ens radavstånd stramades åt (0.98 istället för 1.08), som gav ~18px
   extra marginal jämfört med tidigare mätning. */
.brand-mark { height: 80px; width: auto; }
/* Riktig ordmärkesbild (Niclas 2026-09-30): "vår logo är en fast logo med
   typsnitt -- den får inte ersättas av ett webbtypsnitt". Ersätter den
   tidigare CSS-textade "PopMovieList" med den faktiska logotypfilen. */
.brand-word-img { height: 18px; width: auto; }

.nav-links {
  display: flex;
  gap: 32px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--gold); text-decoration: underline; text-underline-offset: 6px; }

.lang-switch { display: flex; gap: 6px; align-items: center; }
.lang-flag {
  font-size: 16px;
  opacity: 0.4;
  filter: grayscale(1);
  transition: opacity 0.15s ease, filter 0.15s ease;
  line-height: 1;
}
.lang-flag.active { opacity: 1; filter: grayscale(0); }
a.lang-flag:hover { opacity: 0.85; filter: grayscale(0.3); }

.nav-cta {
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--gold-dim); }

.hero {
  position: relative;
  height: 780px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px;
  overflow: visible;
  background-color: var(--bg);
  /* Fixed mittdel (Niclas 2026-09-23): hjälten är nu en begränsad box
     (max-width) istället för att fotot flyter ut över hela fönsterbredden --
     på breda skärmar syns bara den vanliga mörka sidbakgrunden utanför
     boxen, ingen sträckning eller kantskarv att tona bort längre. */
  background-image:
    linear-gradient(to right, rgba(7,9,13,0.92) 0%, rgba(7,9,13,0.45) 48%, rgba(7,9,13,0.25) 65%),
    url('assets/hero_backdrop_new.webp');
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, center 30%;
  background-size: 100% 100%, cover;
  display: flex;
  align-items: center;
}

.hero-grid {
  width: 100%;
  max-width: 1180px;
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 40px;
}
/* 2026-09-30, tredje försöket: `grid-template-rows: 1fr` (inte bara
   `height:100%` på containern) är det som faktiskt tvingar RADEN att fylla
   hero-rutan -- utan den regeln förblev raden innehålls-hög oavsett
   containerns höjd, vilket gjorde mina två tidigare försök verkningslösa.
   Nu kan align-self nedan faktiskt placera kolumnerna fritt inom hela
   höjden, och bildkollaget kan bli mycket större (Niclas: "blir pyttesmå"). */
/* Fast säkerhetsavstånd ner från den flytande loggan (Niclas 2026-10-01:
   "logo och text går nästan ihop") -- tidigare satt jag ikonens höjd på
   gränsen av vad som precis inte överlappade (2px marginal, såg ut som att
   de nuddade), och var tvungen att räkna om det för hand varje gång något
   annat i hero:n ändrades. En riktig fast marginal här är robust mot det. */
/* Niclas 2026-10-01: "ALLTID 60px marginal OVANFÖR H1 på desktop" (inte
   under, som jag missförstod först). `align-self:center` gjorde detta
   avstånd beroende av hur hög hela hero-content-blocket råkade vara -- tre
   separata ändringar den här sessionen (ikonstorlek, radavstånd,
   H1-marginal) har alla oavsiktligt ätit upp det avståndet igen, eftersom
   ett CENTRERAT blocks topp flyttar sig när blockets totalhöjd ändras.
   Löst permanent: start-justerat med ett FAST avstånd räknat direkt från
   nav-loggans botten (75px padding + 80px ikon + 60px = 215px), så det är
   bokstavligen omöjligt för en innehållsändring att äta upp marginalen
   igen. */
.hero-content { align-self: start; margin-top: 215px; }
.hero-visual { align-self: end; transform: translateY(15px); position: relative; z-index: 5; }

/* Bildkollaget (2026-09-30, andra försöket): mitt första försök att lösa
   detta med `align-self`/`height:100%` på grid-raden litade på att en enda
   auto-rad sträcks ut för att fylla en högre grid-container -- det gjorde
   den INTE i praktiken, så headline hamnade ändå bakom headern (Niclas:
   "blev nog lite tokigt", igen). Enklare och mer pålitlig lösning: gjorde
   hela hero-rutan högre (640 -> 780px) så den beprövade centreringen ovan
   (som redan fungerade innan bildkollaget lades till) får gott om utrymme
   runt både text- och bildkolumnen, utan att förlita sig på hur webbläsaren
   råkar tolka grid-radens höjd. */

.eyebrow {
  display: inline-block;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.hero-headline {
  margin: 0 0 20px;
}
.hero-headline .gold { color: var(--gold); }

.hero-sub {
  font-size: 17px;
  color: var(--text);
  max-width: 420px;
  margin: 0 0 28px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.arrow, .arrow-down { display: inline-block; margin-left: 4px; }

.hero-more {
  display: inline-block;
  margin-top: 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  border-bottom: 1px solid transparent;
}
.hero-more:hover { color: var(--text); border-color: var(--text); }

.hero-note {
  margin-top: 40px;
  font-size: 13px;
  color: var(--text-dim);
}

.asset-note {
  max-width: 1180px;
  margin: 24px auto 0;
  text-align: right;
  font-size: 11px;
  color: rgba(245,245,247,0.35);
  padding: 0 24px;
}

.btn {
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-gold { background: var(--gold); color: #171400; }
.btn-gold:hover { opacity: 0.9; }

/* Ramen var nästan osynlig mot hero-fotot med --border (8% vit) (Niclas
   2026-09-30) -- betydligt kraftigare kant + en dov mörk fyllning så knappen
   läses som en knapp oavsett hur ljust/mörkt fotot är precis där. */
.btn-outline {
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: rgba(7, 9, 13, 0.45);
  color: var(--text);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

/* Officiella Google Play/App Store-badges (hämtade direkt från Googles och
   Apples egna servrar, Niclas 2026-09-28) -- ingen egen knappram runt dem,
   badgen har redan sin egen visuella form. */
.store-badge { display: inline-flex; transition: transform 0.15s ease, opacity 0.15s ease; }
.store-badge:hover { transform: translateY(-1px); opacity: 0.9; }
/* Lika höga knappar (Niclas 2026-09-30): Google Play/App Store-artworken har
   olika inre marginal, så att matcha på BREDD gjorde dem olika höga -- matcha
   på HÖJD istället så de blir visuellt lika tunga. */
.store-badge img { height: 44px; width: auto; display: block; }

.hero-note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-dim);
}

/* Riktiga skärmdumpsrenderingar (Niclas, 2026-09-23) */
.hero-visual {
  position: relative;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-shot {
  position: absolute;
  width: auto;
  height: 600px;
  border-radius: 28px;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.55));
}

/* Färdigkomponerat flerskärmskollage (Niclas 2026-09-28), ersätter det
   tidigare två-lager-upplägget ovan -- en enda bild, inget eget lager-CSS. */
.phone-collage {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 620px;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6));
  animation: heroCollageIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes heroCollageIn {
  from { opacity: 0; transform: translateY(36px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes phoneInBack {
  from { opacity: 0; transform: translate(-110px, 70px) rotate(-8deg) scale(0.78); }
  to   { opacity: 0.92; transform: translate(-110px, 20px) rotate(-8deg) scale(0.86); }
}
@keyframes phoneInFront {
  from { opacity: 0; transform: translate(85px, 70px) rotate(5deg) scale(0.92); }
  to   { opacity: 1; transform: translate(85px, -10px) rotate(5deg) scale(1); }
}

.phone-shot-back {
  z-index: 1;
  animation: phoneInBack 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.phone-shot-front {
  z-index: 2;
  animation: phoneInFront 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.format-strip {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 32px;
  max-width: 1180px;
  /* En negativ toppmarginal här tidigare (2026-09-30, "minska lite typ
     50px") drog remsan rakt in i telefonkollagets överflödande yta (hero har
     overflow:visible + en nedåt-translate på bilderna), så den gula
     kantlinjen hamnade bakom telefonerna och "försvann" (Niclas 2026-10-01).
     Att i stället krympa .hero:s egen höjd visade sig knuffa upp hela det
     centrerade hero-innehållet och äta upp nav-loggans marginal igen -- för
     instabilt för att lita på. Löst mer återhållsamt: bara remsans EGEN
     toppadding minskad (32->12px), ingen marginal som kan krocka med
     telefonbilden. */
  margin: 0 auto;
  padding: 12px 24px 32px;
  border-top: 1px solid rgba(255,187,0,0.45);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  flex-wrap: wrap;
}
.format-strip .dot { color: var(--border); }

/* Officiella format-loggor (Blu-ray Disc Association, DVD Format/Logo
   Licensing Corp, UHD Alliance/DEG m.fl. -- Niclas beslut 2026-09-28,
   medvetet varumärkt material på en publik sida). Originalen har olika
   egna färger (svart, blått) -- ett filter gör alla enhetligt vita mot
   sidans mörka bakgrund, samma knep som redan använts för appens egna
   format-loggor. */
.format-logo {
  height: 34px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}
/* LaserDisc-originalet är mycket bredare per höjdenhet än de andra fyra --
   samma pixelhöjd gjorde den visuellt dominant i raden (Niclas 2026-09-30). */
img[alt="LaserDisc"].format-logo { height: 22px; }
img[alt="4K Ultra HD"].format-logo { height: 42px; }

.steps-section { text-align: center; }
.steps-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 900;
  line-height: 1.15;
  margin: 0 0 56px;
}
.steps-title .gold { color: var(--gold); }

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  text-align: left;
}
.step-num { color: var(--gold); font-weight: 800; font-size: 13px; }
.step-icon { font-size: 22px; margin: 10px 0 14px; }
.step h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.step p { font-size: 14px; color: var(--text-dim); margin: 0; }

.rediscover { padding: 100px 24px; text-align: center; }
.rediscover-inner { max-width: 640px; margin: 0 auto; }
.rediscover h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 900; line-height: 1.2; margin: 0 0 16px; }
.rediscover h2 .gold { color: var(--gold); }
.rediscover p { color: var(--text-dim); font-size: 15px; margin: 0 0 32px; }
.rediscover .hero-actions { justify-content: center; }

.section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 90px 24px;
}

.section-alt { background: var(--bg-alt); max-width: none; }
.section-alt > * { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* Tydligt tonad bakgrund (Niclas skiss 2026-09-30) -- märkbart ljusare än
   --bg-alt, så filmsektionen sticker ut som ett eget block mot de rena
   svarta sektionerna ovanför/under. */
.section-tinted { background: #1b1e25; max-width: none; }
.section-tinted > * { max-width: 1180px; margin-left: auto; margin-right: auto; }

.section-title {
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 800;
  text-align: center;
  margin: 0 0 12px;
}

.section-sub {
  text-align: center;
  color: var(--text);
  max-width: 560px;
  margin: 0 auto 56px;
  font-size: 15px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.feature {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 28px 24px;
}

.feature-icon { font-size: 26px; margin-bottom: 14px; }
.feature h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.feature p { font-size: 14px; color: var(--text-dim); margin: 0; }

.feature-grid-highlight { margin-bottom: 20px; }
.feature-big {
  border-color: rgba(255,187,0,0.25);
  background: linear-gradient(160deg, rgba(255,187,0,0.07), var(--card) 55%);
}
.feature-big .feature-icon { font-size: 30px; }
.feature-big h3 { font-size: 18px; }
.feature-big p { font-size: 14.5px; }

/* Rubrik + knapp ovanför den (numera dolda) fulla funktionslistan
   (Niclas 2026-09-30): "vi behöver wow:a på annat sätt" -- listan finns
   kvar orörd, men ligger bakom en knapp istället för att vara första
   intrycket på sidan. */
.centered-head { text-align: center; }
.centered-head h2 { margin: 0 0 24px; }

/* Tät funktionslista (Niclas 2026-09-30): "ALLA funktioner i en tajt
   lista", TITEL + en rad beskrivning, inga ikoner eller kort -- så listan
   känns massiv/smaskig utan att bli tung att skanna. */
.feature-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 40px;
  max-width: 1100px;
  margin: 0 auto;
}
.feature-line {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.feature-line strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.feature-category {
  margin-bottom: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 187, 0, 0.35);
}
.feature-category:first-child { padding-top: 0; border-top: none; }
.feature-category:last-child { margin-bottom: 0; }
.feature-category-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
}
.feature-line span {
  display: block;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--text);
}
@media (max-width: 900px) {
  .feature-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .feature-list { grid-template-columns: 1fr; }
}

.split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 90px 24px;
}

.eyebrow {
  display: inline-block;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.split-text h2 { margin: 0 0 16px; }
.split-text p { color: var(--text); font-size: 15px; margin: 0 0 24px; }

.checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.checklist li {
  font-size: 14px;
  color: var(--text);
  padding-left: 26px;
  position: relative;
}
.checklist li::before {
  content: '✓';
  color: var(--gold);
  position: absolute;
  left: 0;
  font-weight: 800;
}

.split-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.split-glow {
  width: 160px;
  opacity: 0.9;
  filter: drop-shadow(0 0 60px rgba(255,187,0,0.35));
}

.screenshot-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

.screenshot-placeholder {
  aspect-ratio: 9 / 16;
  border: 1px dashed var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 13px;
  background: var(--card);
}

.cta-section { text-align: center; }
.cta-section h2 { margin: 0 0 8px; }
.store-note { font-size: 12px; color: var(--text-dim); margin-top: 16px; }

.footer {
  border-top: 1px solid var(--border);
  padding: 48px 24px;
}
.footer-inner { max-width: 1180px; margin: 0 auto; text-align: center; }
.footer-brand { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; }
.footer-mark { height: 22px; width: auto; }
.footer-word-img { height: 18px; width: auto; }
.footer-tagline { font-size: 13px; color: var(--text-dim); margin: 0 0 20px; }
.tmdb-attribution { font-size: 12px; color: var(--text-dim); margin: 0 0 8px; }
.footer-copy { font-size: 12px; color: var(--text-dim); margin: 0; }

@media (max-width: 900px) {
  /* Desktopstorleken (80px) fick loggan att krocka med rubriken på smala
     skärmar, där hero-innehållet inte ligger i samma tvåkolumns-grid (Niclas
     2026-09-30-fixen förutsatte desktoplayouten). Tillbaka nära ursprunglig
     storlek här. */
  .brand-mark { height: 44px; }
  .brand-word-img { height: 14px; }
  /* 120px = headerns egen höjd (75px marginal + ~38px knapp), annars
     hamnar rubriken bakom den transparenta headern på smala skärmar. */
  .hero { height: auto; padding: 120px 24px 40px; }
  .hero-grid { grid-template-columns: 1fr; }
  /* Desktopens fasta 215px-marginal (för 60px luft under den mycket större
     desktop-loggan) gäller inte här -- hero:s egen 120px-padding sköter
     redan nav-avståndet på mobil med den mindre 44px-loggan. */
  .hero-content { text-align: center; margin-top: 0; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-visual { height: auto; margin-top: 20px; }
  .phone-shot { height: 400px; }
  @keyframes phoneInBack {
    from { opacity: 0; transform: translate(-60px, 50px) rotate(-8deg) scale(0.76); }
    to   { opacity: 0.92; transform: translate(-60px, 10px) rotate(-8deg) scale(0.82); }
  }
  @keyframes phoneInFront {
    from { opacity: 0; transform: translate(50px, 50px) rotate(5deg) scale(0.86); }
    to   { opacity: 1; transform: translate(50px, -8px) rotate(5deg) scale(0.92); }
  }
}

@media (max-width: 720px) {
  .nav-links { display: none; }
  .split { grid-template-columns: 1fr; }
  .split-visual { order: -1; }
  .format-strip { flex-wrap: wrap; gap: 10px 16px; }
}

/* Tre nya "plain" highlight-kort (Niclas skiss 2026-09-30) -- ingen ikon,
   ingen kortbakgrund, bara rubrik + text, tre kolumner. Ersätter de sex
   tidigare bakgrundskorten ovanför funktionslistan. */
.feature-plain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 56px;
}
/* Gula skiljestreck mellan kolumnerna (Niclas 2026-09-30 skiss) -- ligger
   mitt i gap:et (halva 40px), döljs på mobil där kolumnerna staplas. */
.feature-plain { position: relative; }
.feature-plain:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20px;
  width: 1px;
  background: rgba(255, 187, 0, 0.35);
}
@media (max-width: 900px) {
  .feature-plain:not(:first-child)::before { display: none; }
}
.feature-plain h3 {
  margin: 0 0 14px;
}
.feature-plain p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}
@media (max-width: 900px) {
  .feature-plain-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Guldstreck under varje post i funktionslistan (Niclas skiss 2026-09-30)
   istället för den gamla ljusgrå heldragna linjen -- kort, guld, bara under
   texten, inte hela cellens bredd. */
.feature-line {
  padding: 14px 0;
  border-bottom: none;
  position: relative;
}
.feature-line::after {
  content: '';
  display: block;
  width: 36px;
  height: 2px;
  background: var(--gold);
  margin-top: 8px;
  opacity: 0.8;
}

/* Funktionslista som accordion, en rad per kategori (Niclas skiss
   2026-09-30, ersätter den tidigare enda "visa allt"-knappen) -- native
   <details>/<summary>, ingen JS behövs. */
.feature-accordion { margin-top: 40px; border-top: 1px solid var(--border); }
.feature-accordion-item { border-bottom: 1px solid var(--border); }
.feature-accordion-item summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 4px;
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.feature-accordion-item summary::-webkit-details-marker { display: none; }
.feature-accordion-item summary::before {
  content: '▶';
  color: var(--gold);
  font-size: 11px;
  transition: transform 0.15s ease;
}
.feature-accordion-item[open] summary::before { transform: rotate(90deg); }
.feature-accordion-item .feature-list {
  padding: 4px 4px 28px;
  max-width: none;
}
.feature-accordion-item .feature-list .feature-line { padding: 10px 0; }

/* Prisruta (Niclas skiss 2026-09-30) -- pris och villkor är ännu inte
   beslutade, så innehållet står medvetet kvar med hakparenteser tills dess. */
.price-box {
  max-width: 600px;
  margin: 40px auto 0;
  padding: 48px 44px;
  border: 1px solid var(--gold);
  border-radius: 16px;
}
.price-box-brand { font-size: 16px; color: var(--text); margin: 0 0 28px; }
.price-box-amount { font-size: 44px; font-weight: 700; margin: 0 0 12px; }
.price-box-period { color: var(--text-dim); font-size: 15px; margin: 0 0 24px; }
.price-box-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 12px; }
.price-box-list li { color: var(--text-dim); font-size: 15px; padding-left: 22px; position: relative; }
.price-box-list li::before { content: '•'; position: absolute; left: 0; color: var(--text-dim); }
.price-box-note { color: var(--text-dim); font-size: 13px; line-height: 1.5; margin: 0 0 20px; }
.price-box-btn {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  background: #34383c;
  color: #c4c6c8;
  border: none;
  cursor: not-allowed;
}
.price-box-btn:hover { transform: none; }
.price-box-footnote { color: var(--text-dim); font-size: 12px; line-height: 1.5; margin: 0; }

.faq-answer {
  padding: 0 4px 24px;
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.6;
}

.demo-section { text-align: center; }
/* Demofilmen (Niclas 2026-10-01) -- en svensk klipp-version används
   tillfälligt på BÅDA språksidorna tills en engelsk variant är klar. */
.demo-video-wrap {
  margin: 32px auto 0;
  max-width: 780px;
}
.demo-video {
  display: block;
  width: 100%;
  border-radius: 12px;
  background: var(--card);
}

/* "Biobiljett"-banner (2026-09-30) -- ett pris för alla plattformar, koncept
   från Codex-referensen Niclas skickade. Solid guldbakgrund som ett medvetet
   avbrott mot resten av sidans mörka toner, formad som en riven biobiljett. */
.pricing-ticket {
  background: var(--gold);
  color: #171400;
}
.pricing-ticket-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px;
}
.pricing-ticket .eyebrow {
  color: #171400;
  opacity: 0.7;
}
.pricing-ticket h2 {
  margin: 8px 0 12px;
}
.pricing-ticket .copy {
  font-size: 15px;
  max-width: 420px;
  color: #171400;
  opacity: 0.85;
  margin: 0;
}

/* Enhetsillustration i biobiljett-bannern (2026-09-30, ersätter den tidigare
   biljettstubben) -- enkla mörka siluetter i CSS, ingen bildfil behövs.
   Telefon, telefon, platta, dator, lätt överlappande, enligt Niclas skiss. */
.device-stack {
  display: flex;
  align-items: flex-end;
  gap: -8px;
  flex-shrink: 0;
}
.device {
  position: relative;
  background: rgba(23,20,0,0.82);
  border: 1px solid rgba(23,20,0,0.9);
  border-radius: 10px;
  box-shadow: -6px 0 12px rgba(23,20,0,0.15);
}
.device-phone { width: 58px; height: 120px; margin-right: -14px; }
.device-phone .notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,187,0,0.35);
}
.device-tablet { width: 96px; height: 128px; margin-right: -18px; border-radius: 12px; }
.device-tablet .cam {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,187,0,0.35);
}
.device-laptop {
  width: 168px;
  height: 108px;
  border-radius: 10px 10px 4px 4px;
}
.device-laptop::after {
  content: '';
  position: absolute;
  left: -10px;
  right: -10px;
  bottom: -10px;
  height: 10px;
  background: rgba(23,20,0,0.82);
  border-radius: 0 0 6px 6px;
}
.device-laptop .cam {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,187,0,0.35);
}
@media (max-width: 700px) {
  .device-stack { margin-top: 8px; justify-content: center; }
}

/* Niclas egen enhetsbild (2026-09-30), ersätter CSS-siluetterna ovan.
   multiply togs bort kortvarigt 2026-10-01 (teorin var att vita loggor
   skulle bli osynliga mot guldet) men Niclas ville ha tillbaka looken -- han
   har facit framför sig, så tillbaka den går. */
.device-stack-img {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}
@media (max-width: 700px) {
  .pricing-ticket-inner { grid-template-columns: 1fr; }
  .device-stack-img { order: -1; }
}

/* Familjekaruell (2026-09-30): två livsstilsbilder som korstonar, gul
   rubrik, ljus text ovanpå en mörk gradient för läsbarhet. */
/* Mätt pixel för pixel mot Niclas skiss (2026-09-30), inte uppskattat:
   bilden ligger i sidans vanliga 1180px-innehållskolumn (inte fullbred),
   med en FAST höjd på desktop -- 500px togs fram genom att mäta rutans
   höjd/bredd-förhållande i skissen (543/1272 = 0,427) och applicera det på
   1180px. Rubrikens och brödtextens storlek och position är likaså mätta
   direkt ur skissens pixlar, inte gissade. */
/* Lika marginal ovanför/under (Niclas 2026-09-30): gick tidigare "kloss i
   kloss" mot biobiljett-bannern under, medan sektionen ovanför redan hade
   luft via sin egen padding. En egen symmetrisk margin löser det oavsett
   vilka sektioner som råkar ligga precis intill. */
.family-carousel {
  width: 1180px;
  max-width: 100%;
  height: 500px;
  margin: 72px auto;
  position: relative;
  overflow: hidden;
}
.family-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.family-slide.is-active { opacity: 1; }
.family-slide-inner {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  /* Niclas 2026-10-01: text/rubrik för högt upp, sänkt ~25px mot botten. */
  padding: 209px 24px 0;
  text-align: center;
}
.family-slide-inner h2 {
  color: var(--gold);
  margin: 0 0 22px;
}
.family-slide-inner p {
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 900px) {
  .family-carousel { height: auto; min-height: 560px; }
  .family-slide-inner { padding-top: 60px; padding-bottom: 60px; }
}