/* BeatLamp – beatlamp.com. Samma färger och typsnitt som appen ("Kvällsljus"): nattviolett botten,
   lampornas ljus är den enda starka färgen. Inga övertoningar, inga linjer, inga skuggor utanför
   appfragmenten (data-ui). */

:root {
  --ground: #0c0722;
  --field-1: #120b2b;
  --field-2: #1a1038;
  --field-3: #241850;
  --field-4: #2f2163;
  --surface: #1d1542;
  --surface-2: #2a2056;
  --ink: #ffffff;
  --muted: #b8b1cf;
  --accent: #b9a2ff;
  --accent-ink: #160e33;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --t-s: 15px;
  --t-b: 18px;
  --t-l: clamp(22px, 1.9vw, 28px);
  --t-h: clamp(34px, 4.2vw, 60px);
  --t-xl: clamp(46px, 6vw, 96px);

  --m: clamp(20px, 3.2vw, 48px);
  --gap: clamp(120px, 14vw, 200px);
  --r: 20px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 var(--t-b)/1.55 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 650; letter-spacing: -0.03em; line-height: 1.02; margin: 0; text-wrap: balance; }
p { margin: 0; }
.wrap { padding-inline: var(--m); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--m); top: 12px; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; z-index: 10; }

/* Knappar: en form på hela sidan (kapsel, som i appen). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0;
  background: var(--accent); color: var(--accent-ink);
  font: 600 18px/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: transform .15s var(--ease), background-color .15s var(--ease);
}
.btn:hover { background: #c9b8ff; }
.btn:active { transform: scale(.97); }
.link { color: var(--ink); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.link:hover { color: var(--accent); }

/* Navigering */
.bar { display: flex; align-items: center; gap: 28px; padding: 22px var(--m); }
.wm { font: 700 var(--t-l)/1 var(--rounded); letter-spacing: -0.01em; text-decoration: none; margin-right: auto; }
.bar nav { display: flex; gap: 26px; font-size: 15px; }
.bar nav a { text-decoration: none; color: var(--ink); opacity: .86; }
.bar nav a:hover { opacity: 1; color: var(--accent); }
.bar .btn { min-height: 42px; padding: 0 20px; font-size: 15px; }
@media (max-width: 900px) { .bar nav a:not(.lang) { display: none; } }
@media (max-width: 520px) { .bar .btn { display: none; } }

/* Första skärmen: rubrik uppe till vänster, appen arbetar på resten av ytan. */
.hero {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px;
  padding: clamp(28px, 6vh, 80px) var(--m) 0; min-height: calc(100svh - 86px); align-items: start;
}
.hero-copy { grid-column: 1 / span 5; padding-top: clamp(0px, 4vh, 48px); }
.hero h1 { font-size: var(--t-xl); max-width: 9ch; }
.hero-copy > p { font-size: var(--t-l); line-height: 1.4; color: var(--ink); max-width: 30ch; margin-top: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 36px; }
.hero-copy > p.hero-note { font-size: var(--t-s); line-height: 1.5; color: var(--muted); max-width: 34ch; margin-top: 22px; }
.hero-stage { grid-column: 7 / span 6; display: flex; justify-content: center; padding-bottom: 64px; }
@media (max-width: 1000px) {
  .hero { display: block; min-height: 0; }
  .hero-copy { padding-top: 12px; }
  .hero-stage { margin-top: 48px; justify-content: flex-start; }
}

/* Appens musikskärm, byggd i HTML efter appens egna mått (data-ui: appens former gäller här). */
.hero-stage { flex-direction: column; align-items: center; }
.hero-cap { font-size: var(--t-s); color: var(--muted); max-width: 390px; margin-top: 16px; }
.phone {
  width: min(390px, 100%); min-height: 760px; display: flex; flex-direction: column;
  position: relative; overflow: hidden; isolation: isolate;
  background: #06041a; border-radius: 48px; padding: 18px 20px 22px;
  font: 400 17px/1.3 var(--sans); color: #fff;
}
/* Appens himmel: nattviolett upptill, nästan svart nertill (en suddig yta i stället för en övertoning). */
.phone::before, .card::before { content: ""; position: absolute; inset: -20% -20% 30% -20%; z-index: -1; background: #1a1038; filter: blur(70px); }
[data-ui] [hidden] { display: none !important; }
.ph-top { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; }
.ph-wm { font: 700 22px/1 var(--rounded); }
.ph-circle { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09); } /* taste-skill-ignore: appfragment (data-ui) */
.ph-circle.big { width: 56px; height: 56px; flex: none; }
.ph-seg { display: flex; margin: 14px 44px 0; padding: 2px; border-radius: 9px; background: rgba(118,118,128,.24); font-size: 13px; font-weight: 500; }
.ph-seg span { flex: 1; text-align: center; padding: 6px 0; border-radius: 7px; color: rgba(255,255,255,.92); }
.ph-seg span.on { background: rgba(255,255,255,.26); }
.ph-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 0 18px; }
.ph-orb { --size: 230px; position: relative; width: calc(var(--size) * 1.3); height: calc(var(--size) * 1.3); display: grid; place-items: center; }
.ph-orb > * { grid-area: 1 / 1; position: relative; } /* alla lager i samma ordning som i appen */
.ph-glow { width: calc(var(--size) * 1.3); height: calc(var(--size) * 1.3); border-radius: 50%; background: var(--c); filter: blur(calc(var(--size) * .3)); opacity: 0; transition: background .2s linear, opacity .4s ease; }
.ph-core { width: var(--size); height: var(--size); border-radius: 50%; background: #2a1e52; transition: background .2s linear, box-shadow .4s ease;
  box-shadow: inset calc(var(--size) * -.1) calc(var(--size) * -.12) calc(var(--size) * .3) calc(var(--size) * .08) #120b2b; } /* taste-skill-ignore: appfragment (data-ui) */
.ph-hl { width: calc(var(--size) * .62); height: calc(var(--size) * .62); border-radius: 50%; background: #fff; opacity: 0; filter: blur(calc(var(--size) * .14)); transform: translate(-14%, -16%); transition: opacity .4s ease; }
.ph-ring { width: var(--size); height: var(--size); opacity: .85; transition: opacity .4s ease; }
.ph-ringglow { width: calc(var(--size) * 1.09); height: calc(var(--size) * 1.09); opacity: .22; filter: blur(calc(var(--size) * .17)); transition: opacity .4s ease; }
.ph-orb.lit .ph-glow { opacity: .55; }
.ph-orb.lit .ph-core { background: var(--c); box-shadow: none; } /* taste-skill-ignore: appfragment (data-ui) */
.ph-orb.lit .ph-hl { opacity: .32; }
.ph-orb.lit .ph-ring, .ph-orb.lit .ph-ringglow { opacity: 0; }
.ph-orb.pulse { animation: pulse .36s ease-out; }
@keyframes pulse { 0% { transform: scale(1.035); filter: brightness(1.06); } 100% { transform: scale(1); filter: none; } }
.ph-bpm { display: flex; flex-direction: column; align-items: center; line-height: 1; color: #fff; }
.ph-bpm b { font: 600 66px/1 var(--rounded); font-variant-numeric: tabular-nums; }
.ph-bpm small { font-size: 13px; font-weight: 700; opacity: .75; margin-top: 4px; }
.ph-status { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-height: 104px; }
.ph-title { font-size: 20px; font-weight: 600; }
.ph-title.dim { color: rgba(255,255,255,.62); }
.ph-sub { font-size: 15px; color: rgba(255,255,255,.62); }
.ph-learn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #30d158; }
.ph-learning { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.62); font-variant-numeric: tabular-nums; }
.spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; animation: spin 1s linear infinite; } /* taste-skill-ignore: appfragment (data-ui) */
@keyframes spin { to { transform: rotate(360deg); } }
.ph-live { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: 13px; font-weight: 600; color: rgba(255,255,255,.88); }
.ph-live svg:last-child { color: rgba(255,255,255,.32); }
.ph-card { border-radius: 26px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09); } /* taste-skill-ignore: appfragment (data-ui) */
.ph-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; min-height: 56px; }
.ph-row + .ph-row, .ph-row + .ph-presets { border-top: 1px solid rgba(255,255,255,.09); } /* taste-skill-ignore: appfragment (data-ui) */
.ph-row .v { color: rgba(255,255,255,.62); display: inline-flex; align-items: center; gap: 10px; }
.ph-row .v svg { color: rgba(255,255,255,.32); }
.ph-chips { display: flex; gap: 6px; }
.ph-chip { display: inline-flex; gap: 3px; padding: 7px 9px; border-radius: 999px; border: 0; background: rgba(255,255,255,.06); cursor: pointer; box-shadow: inset 0 0 0 1.5px transparent; } /* taste-skill-ignore: appfragment (data-ui) */
.ph-chip i { width: 11px; height: 11px; border-radius: 50%; }
.ph-chip[aria-checked=true] { background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9); } /* taste-skill-ignore: appfragment (data-ui) */
.ph-presets { display: flex; gap: 8px; padding: 12px 16px; }
.ph-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 15px; font-weight: 500; }
.ph-pill.dash { background: none; color: rgba(255,255,255,.62); padding: 8px 12px; outline: 1px dashed rgba(255,255,255,.2); outline-offset: -1px; } /* taste-skill-ignore: appfragment (data-ui) */
.ph-bar { display: flex; gap: 12px; margin-top: 16px; }
.ph-main { flex: 1; min-height: 56px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 17px/1 var(--sans); cursor: pointer; transition: transform .15s ease; }
.ph-main:active { transform: scale(.97); }
.ph-main.stop { background: rgba(255,69,58,.22); color: #ff8a80; }
.ph-main.start { background: #fff; color: #06041a; }

/* Mittenkortet i "Så fungerar det": samma skärm i fyra lägen */
.card .ph-orb { margin: -12px 0 -6px; }
.card .ph-title { font-size: 17px; margin-top: 2px; }
.card .ph-bpm b { font-size: 42px; }
.card .ph-learn, .card .ph-learning { margin-top: 6px; }

/* Sektioner */
section { scroll-margin-top: 24px; }
.h2 { font-size: var(--t-h); }
.lead { font-size: var(--t-l); line-height: 1.4; max-width: 34ch; }

/* Så fungerar det: fyra fält, samma kort fyra gånger. */
.fields { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: var(--gap); }
.field { min-height: 84svh; padding: 32px 28px; display: flex; flex-direction: column; position: relative; }
.field:nth-child(1) { background: var(--field-1); }
.field:nth-child(2) { background: var(--field-2); }
.field:nth-child(3) { background: var(--field-3); }
.field:nth-child(4) { background: var(--field-4); }
.field .h2 { font-size: var(--t-l); font-weight: 800; letter-spacing: -0.02em; }
.field .card-slot { position: absolute; left: 0; right: 0; top: 38%; display: flex; justify-content: center; transform: translateY(-30%); }
.field p.clause { margin-top: auto; font-size: var(--t-l); line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; max-width: 13ch; }
.card {
  width: 280px; min-height: 290px; background: #06041a; border-radius: 28px; padding: 6px 12px 22px; font: 400 15px/1.35 var(--sans); color: #fff;
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: transform .15s var(--ease);
}
.field:hover .card { transform: translateY(-6px); }
@media (max-width: 900px) {
  .fields { grid-template-columns: 1fr; }
  .field { min-height: 64svh; padding: 28px 20px; }
  .field p.clause { margin-top: 0; font-size: 24px; max-width: 18ch; order: -1; }
  .field .card-slot { position: static; transform: none; margin-top: 32px; }
  .field .h2 { order: -2; margin-bottom: 14px; }
}

/* En lampa, tre lägen */
.states { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; margin-top: var(--gap); }
.states .h2 { grid-column: 4 / span 7; margin-bottom: 72px; }
.state { display: contents; }
.state-word { grid-column: 1 / span 3; text-align: right; font-size: var(--t-l); color: var(--muted); align-self: start; padding-top: 18px; }
.state .row-slot { grid-column: 4 / span 6; }
.state + .state .row-slot, .state + .state .state-word { margin-top: 56px; }
.lamprow { width: min(560px, 100%); background: rgba(255,255,255,.07); border-radius: 12px; padding: 4px 0; font: 400 17px/1.3 var(--sans); position: relative; }
.lr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; }
.lr-top b { font-weight: 400; display: block; }
.lr-top small { display: block; font-size: 12px; color: rgba(255,255,255,.62); margin-top: 2px; }
.toggle { width: 51px; height: 31px; border-radius: 999px; background: rgba(120,120,128,.32); position: relative; flex: none; }
.toggle.on { background: #b9a2ff; }
.toggle i { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; }
.toggle.on i { left: 22px; }
.lr-rh { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 10px 32px; border-top: 1px solid rgba(255,255,255,.09); position: relative; } /* taste-skill-ignore: appfragment (data-ui) */
.lr-val { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.62); }
.lr-val.manual { color: #b9a2ff; }
.lr-reason { display: block; padding: 0 16px 10px 32px; margin-top: -6px; font-size: 12px; color: rgba(255,255,255,.62); }
.menu {
  position: absolute; right: 12px; top: calc(100% - 4px); z-index: 2; width: 230px; padding: 6px;
  background: #2a2056; border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.45); list-style: none; margin: 0; /* taste-skill-ignore: appfragment (data-ui) */
}
.menu button { width: 100%; text-align: left; border: 0; background: transparent; padding: 10px 12px 10px 34px; border-radius: 9px; font-size: 17px; cursor: pointer; position: relative; }
.menu button:hover, .menu button:focus-visible { background: rgba(255,255,255,.1); outline: none; }
.menu button[aria-checked=true]::before { content: ""; position: absolute; left: 13px; top: 15px; width: 10px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); } /* taste-skill-ignore: appfragment (data-ui) */
.state.mid .row-slot { margin-bottom: 250px; }
@media (max-width: 900px) {
  .states { display: block; padding-inline: 16px; }
  .states .h2 { font-size: 26px; margin-bottom: 36px; padding-inline: 4px; }
  .state { display: block; }
  .state + .state { margin-top: 48px; }
  .state + .state .row-slot, .state + .state .state-word { margin-top: 0; }
  .state-word { display: block; text-align: left; font-size: 17px; margin-top: 10px; padding-inline: 4px; }
  .state .row-slot { overflow: hidden; }
  .lamprow { width: 100%; }
  .state.mid .row-slot { margin-bottom: 0; overflow: visible; }
  .lr-rh { flex-wrap: wrap; }
  .menu { position: static; flex-basis: 100%; width: auto; margin-top: 6px; box-shadow: none; background: rgba(255,255,255,.06); } /* taste-skill-ignore: appfragment (data-ui) */
}

/* Ljuslägen: skärmbilderna tonar över i varandra, listan bredvid. */
.modes { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; margin-top: var(--gap); align-items: start; }
.modes-pics { grid-column: 1 / span 5; position: relative; aspect-ratio: 1320 / 1720; border-radius: var(--r); overflow: hidden; background: var(--field-2); }
.modes-pics img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity 1.6s ease; }
.modes-pics img.on { opacity: 1; }
.modes-text { grid-column: 7 / span 6; }
.modes-text .lead { margin-top: 24px; }
.modes-list { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 10px 12px; list-style: none; padding: 0; }
.modes-list li { font-size: 18px; background: var(--field-2); padding: 8px 14px; border-radius: 999px; }
.modes-list li.now { background: var(--accent); color: var(--accent-ink); }
.modes-flags { margin-top: 26px; font-size: var(--t-s); color: var(--muted); max-width: 52ch; }
.modes-more { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.modes-more img { border-radius: var(--r); width: 100%; aspect-ratio: 1320 / 1500; object-fit: cover; object-position: top; }
.modes-more p { font-size: var(--t-s); color: var(--muted); margin-top: 12px; }
@media (max-width: 900px) {
  .modes { display: block; }
  .modes-pics { max-width: 520px; }
  .modes-text { margin-top: 40px; }
}

/* Jämförelsen, i ord */
.compare { margin-top: var(--gap); }
.compare .h2 { margin-bottom: 48px; }
.ctable { display: grid; grid-template-columns: 5fr 2.33fr 2.33fr 2.33fr; position: relative; }
.ctable > div { padding: 0 18px; min-height: 68px; display: flex; align-items: center; font-size: 18px; }
.ctable > .name { font-size: var(--t-l); font-weight: 550; padding-left: 20px; letter-spacing: -0.01em; }
.ctable > .head { font-weight: 700; min-height: 56px; }
.ctable > .alt { background: var(--field-1); }
.ctable > .feat { color: var(--accent-ink); background: var(--accent); font-weight: 600; }
.ctable > .head.feat { margin-top: -24px; min-height: 80px; padding-top: 24px; border-radius: var(--r) var(--r) 0 0; }
.ctable > .feat.last { border-radius: 0 0 var(--r) var(--r); }
.compare-note { margin-top: 28px; font-size: var(--t-s); color: var(--muted); max-width: 70ch; }
@media (max-width: 900px) {
  .ctable { display: block; }
  .featcol { display: none; }
  .crow { padding: 18px 16px; }
  .crow:nth-child(odd) { background: var(--field-1); }
  .crow h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
  .crow p { font-size: 16px; display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
  .crow p.f { background: var(--accent); color: var(--accent-ink); margin: 4px -16px; padding: 7px 16px; }
}
.mobile-only { display: none; }
@media (max-width: 900px) { .desk-only { display: none; } .mobile-only { display: block; } }

/* Priser: planernas namn, en siffra som byts */
.pricing { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; margin-top: var(--gap); align-items: start; }
.plans { grid-column: 1 / span 6; display: flex; flex-direction: column; align-items: flex-start; }
.plans button {
  border: 0; background: none; padding: 0; cursor: pointer; text-align: left;
  font: 650 var(--t-xl)/1.1 var(--display); letter-spacing: -0.035em; color: var(--muted);
  display: inline-flex; align-items: center; gap: .3em;
}
.plans button::before { content: ""; width: .3em; height: .3em; border-radius: 50%; background: transparent; }
.plans button[aria-selected=true] { color: var(--ink); }
.plans button[aria-selected=true]::before { background: var(--accent); }
.stage { grid-column: 8 / span 5; transition: opacity .2s ease; }
.stage .fig { font: 650 clamp(64px, 9vw, 150px)/0.95 var(--display); letter-spacing: -0.045em; }
.stage .per { font-size: 18px; color: var(--muted); margin-left: 6px; letter-spacing: 0; font-weight: 400; }
.stage p { font-size: 18px; margin-top: 22px; max-width: 40ch; }
.stage .btn { margin-top: 30px; }
.stage .small { font-size: var(--t-s); color: var(--muted); margin-top: 18px; }
@media (max-width: 900px) {
  .pricing { display: block; }
  .plans button { font-size: 10vw; }
  .stage { margin-top: 28px; }
  .stage .fig { font-size: 20vw; }
  .stage .btn { width: 100%; }
}

/* Frågor */
.faq { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; margin-top: var(--gap); align-items: start; }
.faq .h2 { grid-column: 1 / span 4; position: sticky; top: 96px; }
.faq-list { grid-column: 5 / span 8; display: grid; gap: 8px; }
.faq details { background: var(--field-2); border-radius: var(--r); transition: background .2s ease; }
.faq details[open] { background: var(--accent); color: var(--accent-ink); }
.faq summary { list-style: none; cursor: pointer; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px; font-size: 18px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.plus { position: relative; width: 16px; height: 16px; flex: none; }
.plus::before, .plus::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 16px; height: 3px; border-radius: 2px; background: currentColor; transition: transform .2s ease; }
.plus::after { transform: rotate(90deg); }
details[open] .plus::after { transform: rotate(0deg); }
.faq .ans { padding: 0 24px 24px; font-size: 18px; max-width: 58ch; }
.faq .ans p + p { margin-top: 10px; }
.faq .ans a { color: inherit; }
@media (max-width: 900px) {
  .faq { display: block; }
  .faq .h2 { position: static; font-size: 9vw; margin-bottom: 28px; }
  .faq-list { gap: 6px; }
  .faq summary { font-size: 18px; min-height: 64px; padding: 16px 20px; }
  .faq .ans { font-size: 16px; padding: 0 20px 20px; }
}

/* Slut: en rad */
.foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 24px; margin-top: 30svh; padding: 0 var(--m) 30px; font-size: 15px; color: var(--muted); }
.foot nav { display: flex; gap: 24px; }
.foot a { color: var(--ink); text-decoration: none; }
.foot a:hover { color: var(--accent); }
.foot .r { text-align: right; }
.credit { padding: 0 var(--m) 24px; font-size: 13px; color: var(--muted); }
@media (max-width: 700px) {
  .foot { display: flex; flex-direction: column; gap: 8px; margin-top: 20svh; padding-bottom: 24px; font-size: 14px; }
  .foot nav { flex-wrap: wrap; gap: 8px 20px; }
  .foot .r { text-align: left; }
}

/* Textsidor: integritet och support */
.doc { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding: clamp(40px, 8vh, 96px) var(--m) 0; }
.doc header { grid-column: 1 / span 8; }
.doc h1 { font-size: var(--t-xl); }
.doc .docimg { width: min(340px, 100%); border-radius: var(--r); margin-top: 28px; }
.doc .dated { color: var(--muted); font-size: var(--t-s); margin-top: 16px; }
.doc .short { grid-column: 1 / span 7; margin-top: 48px; font-size: var(--t-l); line-height: 1.45; background: var(--field-2); border-radius: var(--r); padding: 28px 32px; }
.doc article { grid-column: 1 / span 7; margin-top: 72px; }
.doc aside { grid-column: 9 / span 4; margin-top: 72px; position: sticky; top: 32px; align-self: start; font-size: 15px; }
.doc aside a { display: block; padding: 7px 0; text-decoration: none; color: var(--muted); }
.doc aside a:hover { color: var(--ink); }
.doc h2 { font-size: var(--t-l); letter-spacing: -0.02em; margin: 64px 0 16px; scroll-margin-top: 24px; }
.doc h2:first-child { margin-top: 0; }
.doc article p, .doc article li { font-size: 18px; line-height: 1.6; max-width: 66ch; }
.doc article p + p { margin-top: 14px; }
.doc article ul { padding-left: 1.1em; margin: 14px 0 0; }
.doc article li + li { margin-top: 8px; }
.doc .contact { background: var(--field-2); border-radius: var(--r); padding: 26px 30px; margin-top: 20px; }
@media (max-width: 900px) {
  .doc { display: block; }
  .doc aside { display: none; }
  .doc .short { padding: 22px; font-size: 20px; }
}

/* Rörelse: delarna i varje sektion kommer in i tur och ordning, en gång. Utan skript syns allt direkt. */
.js .rise { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js .rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rise { opacity: 1; transform: none; transition: none; }
  .modes-pics img { transition: none; }
  .card, .btn, .ph-orb *, .ph-main { transition: none !important; }
  .ph-orb.pulse, .spin { animation: none; }
}