/* Studio, webbplatsen. Färger och mått ur Dagsljus (studio/brand/tokens.css). */

@font-face {
  font-family: "Inter";
  src: url("/assets/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --papper: #FDFCFC;
  --kort: #FFFFFF;
  --platta: #F6F5F4;
  --platta-2: #EFEDEB;
  --ink: #000000;
  --gra: #777169;
  --linje: rgba(0, 0, 0, .06);
  --linje-stark: rgba(0, 0, 0, .13);
  --klar: #1D7A47;
  --kor: #2F6FED;
  --obs: #B7791F;
  --orb-persika: #FFDDC0;
  --orb-lila: #9C8DD0;
  --orb-bla: #7FB3F0;
  --text: 1.0625rem;
  --bredd: 1120px;
  --las: 40rem;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papper);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--text);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-color: var(--linje-stark); text-underline-offset: .2em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--kor); outline-offset: 3px; border-radius: 6px; }

/* Språk: båda finns i sidan, html[data-sprak] visar ett */
html[data-sprak="sv"] [data-visa="en"],
html[data-sprak="en"] [data-visa="sv"] { display: none !important; }

.ram {
  width: 100%;
  max-width: calc(var(--bredd) + 2 * 24px);
  margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}

/* Huvud */
.huvud { border-bottom: 1px solid var(--linje); }
.huvud .ram {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}
.marke {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -.03em;
}
.marke small {
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--gra);
}
.nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.nav a, .sprak {
  font: inherit;
  font-size: .9375rem;
  color: var(--ink);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 999px;
}
.nav a:hover { background: var(--platta); }
.nav a[aria-current="page"] { background: var(--platta-2); }
.sprak {
  background: none;
  border: 1px solid var(--linje-stark);
  cursor: pointer;
  margin-left: 6px;
}
.sprak:hover { background: var(--platta); }

/* Startsidan */
.hero { padding-block: clamp(56px, 9vw, 112px) clamp(36px, 5vw, 56px); }
.hero h1 {
  margin: 0;
  font-size: clamp(2.5rem, 6.2vw, 4.5rem);
  line-height: 1.02;
  font-weight: 450;
  letter-spacing: -.035em;
  max-width: 13ch;
  text-wrap: balance;
}
.hero p {
  margin: 22px 0 0;
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--gra);
}
.hero .not {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9375rem;
  color: var(--ink);
}
.prick { width: 8px; height: 8px; border-radius: 50%; background: var(--kor); flex: none; }

.skarm {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--linje-stark);
  background: var(--kort);
  box-shadow: 0 30px 80px -40px rgba(30, 24, 18, .35);
}
.skarm img { width: 100%; aspect-ratio: 1440 / 900; object-fit: cover; }

/* Stegen: samma rad som i appen (Klipp, Godkänn, Titel & bild, 4K, YouTube) */
.vag { padding-block: clamp(64px, 9vw, 112px) 0; }
.vag h2, .del h2, .konto h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.1;
  font-weight: 450;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.steg {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 20px;
}
.steg li { position: relative; padding-top: 30px; min-width: 0; }
.steg li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink);
}
.steg li::after {
  content: "";
  position: absolute;
  top: 11.5px;
  left: 22px;
  right: -10px;
  height: 1px;
  background: var(--linje-stark);
}
.steg li:last-child::before { background: var(--papper); border: 2px solid var(--ink); }
.steg li:last-child::after { display: none; }
.steg h3 { margin: 0; font-size: 1.0625rem; font-weight: 550; letter-spacing: -.01em; }
.steg p { margin: 6px 0 0; font-size: .9375rem; line-height: 1.55; color: var(--gra); }

/* Två kolumner: bild + text */
.del {
  padding-block: clamp(64px, 9vw, 112px) 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.del .text { min-width: 0; }
.del p { margin: 16px 0 0; color: var(--gra); max-width: 30rem; }

/* YouTube-kontot */
.konto { padding-block: clamp(64px, 9vw, 112px) clamp(72px, 10vw, 128px); }
.konto > p { margin: 14px 0 0; color: var(--gra); max-width: var(--las); }
.lista {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  background: var(--kort);
  border: 1px solid var(--linje-stark);
  border-radius: 16px;
}
.lista li {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 8px 32px;
  padding: 20px 24px;
  border-top: 1px solid var(--linje);
}
.lista li:first-child { border-top: 0; }
.lista strong { font-weight: 550; }
.lista li > span { color: var(--gra); }
.konto .mer { margin-top: 20px; font-size: .9375rem; }

/* Juridiska sidor */
.juridik { padding-block: clamp(48px, 7vw, 88px) clamp(72px, 10vw, 120px); }
.juridik article { max-width: var(--las); }
.juridik h1 {
  margin: 0;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.05;
  font-weight: 450;
  letter-spacing: -.035em;
}
.juridik .datum { margin: 12px 0 0; color: var(--gra); font-size: .9375rem; }
.juridik .ingress { margin: 28px 0 0; font-size: 1.1875rem; line-height: 1.55; }
.juridik h2 {
  margin: 44px 0 0;
  font-size: 1.3125rem;
  line-height: 1.3;
  font-weight: 550;
  letter-spacing: -.015em;
}
.juridik h3 { margin: 24px 0 0; font-size: 1.0625rem; font-weight: 550; }
.juridik p, .juridik li { color: #2B2824; }
.juridik p { margin: 10px 0 0; }
.juridik ul { margin: 10px 0 0; padding-left: 1.2em; }
.juridik li { margin-top: 6px; }
.juridik li::marker { color: var(--gra); }
.ruta {
  margin-top: 28px;
  padding: 20px 24px;
  border-radius: 16px;
  background: var(--platta);
}
.ruta p:first-child { margin-top: 0; }
.juridik code { font-size: .875em; background: var(--platta); padding: 1px 6px; border-radius: 6px; word-break: break-word; }

/* Fot */
.fot { border-top: 1px solid var(--linje); color: var(--gra); font-size: .9375rem; }
.fot .ram {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  padding-block: 32px 40px;
}
.fot p { margin: 0; }
.fot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.fot a { color: var(--ink); text-decoration: none; }
.fot a:hover { text-decoration: underline; }
.fot .liten { flex-basis: 100%; font-size: .8125rem; }

@media (max-width: 900px) {
  .steg { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steg li { padding: 0 0 26px 30px; }
  .steg li::before { top: 6px; }
  .steg li::after { top: 22px; bottom: 0; left: 5.5px; right: auto; width: 1px; height: auto; }
  .del { grid-template-columns: minmax(0, 1fr); }
  .lista li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

@media (max-width: 560px) {
  .huvud .ram { min-height: 60px; }
  .marke small { display: none; }
  .nav .bort-smal { display: none; }
  .lista li { padding: 18px 18px; }
}


.del.vand { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
@media (max-width: 900px) { .del.vand { grid-template-columns: minmax(0, 1fr); } }

.hero .not a { color: var(--ink); }
.marke { align-items: baseline; }
.tegel {
  align-self: center;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--kort);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}