/* Schedia – publik startsida (start.html).
   Bygger på tokens i css/design.css (färg, avstånd, hörn, skuggor, mörkt läge) så att sidan följer appens tema.
   Enda egna färgvärdena är "bläck"-tokens för det mörka kontaktkortet och menyns tipsruta, definierade
   nedan för både ljust och mörkt läge. Alla par klarar WCAG AA.
   Alla klasser har prefixet lp- för att inte krocka med appens komponenter.
   Inga inline-stilar: Content-Security-Policy tillåter bara stilmallar från samma ursprung. */

/* ───────────────────────── Sidtokens ───────────────────────── */
.lp {
  --lp-max: 1200px;
  --lp-gutter: 16px;
  --lp-section-y: clamp(64px, 5vw + 36px, 120px);
  --lp-header-h: 68px;
  --lp-radius: 12px;
  --lp-radius-lg: 18px;
  --lp-line: color-mix(in oklab, var(--border) 70%, transparent);
  --lp-hair: color-mix(in oklab, var(--border) 55%, transparent);
  --bg: #fff;
  --lp-tint: #fafafa;
  --lp-shadow: 0 1px 2px color-mix(in oklab, var(--text) 6%, transparent),
               0 24px 60px -32px color-mix(in oklab, var(--text) 30%, transparent);
  --lp-shadow-sm: 0 1px 2px color-mix(in oklab, var(--text) 5%, transparent),
                  0 8px 20px -14px color-mix(in oklab, var(--text) 24%, transparent);
  --s-d: var(--shift-day);
  --s-k: var(--shift-evening);
  --s-n: var(--shift-night);

  /* Bläck: djup gran för mörka ytor. Text och accent är kontrollerade mot båda bakgrunderna. */
  --lp-ink: #0b2420;
  --lp-ink-2: #12352f;
  --lp-ink-line: rgba(255, 255, 255, 0.12);
  --lp-ink-text: #eef6f4;
  --lp-ink-text-2: #b6cdc8;
  --lp-ink-accent: #86dccb;

  font-size: var(--fs-lg);
  line-height: 1.6;
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
/* Svartvit palett: sidan ärver inte appens gröna tokens. Ljust = vitt och nästan svart, mörkt = rent svart. */
.lp {
  --surface-2: #fafafa; --surface-sunken: #f2f2f2; --surface-hover: #f4f4f4;
  --border: #e4e4e4; --border-strong: #cfcfcf;
  --text: #0a0a0a; --text-2: #4a4a4a; --text-3: #5c5c5c;
  --primary: #0a0a0a; --primary-hover: #262626; --primary-active: #000000;
  --primary-soft: #f1f1f1; --primary-soft-2: #e5e5e5; --on-primary: #ffffff;
  --lp-accent: #1d7a68; --lp-ink: #000000; --lp-ink-2: #141414;
  --lp-ink-text: #fafafa; --lp-ink-text-2: #b5b5b5; --lp-ink-accent: #5fd9bf;
}
:root[data-theme="dark"] .lp {
  --bg: #000000; --surface: #0a0a0a; --surface-2: #111111; --surface-sunken: #050505; --surface-hover: #161616;
  --border: #242424; --border-strong: #353535; --border-input: #7a7a7a;
  --text: #f5f5f5; --text-2: #a3a3a3; --text-3: #8a8a8a; --text-inverse: #000000;
  --primary: #ffffff; --primary-hover: #e5e5e5; --primary-active: #d4d4d4;
  --primary-soft: #1a1a1a; --primary-soft-2: #262626; --on-primary: #000000;
  --lp-tint: #050505; --lp-ink: #000000; --lp-ink-2: #101010; --lp-ink-accent: #5fd9bf; --lp-accent: #5fd9bf;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp {
    --bg: #000000; --surface: #0a0a0a; --surface-2: #111111; --surface-sunken: #050505; --surface-hover: #161616;
    --border: #242424; --border-strong: #353535; --border-input: #7a7a7a;
    --text: #f5f5f5; --text-2: #a3a3a3; --text-3: #8a8a8a; --text-inverse: #000000;
    --primary: #ffffff; --primary-hover: #e5e5e5; --primary-active: #d4d4d4;
    --primary-soft: #1a1a1a; --primary-soft-2: #262626; --on-primary: #000000;
    --lp-tint: #050505; --lp-ink: #000000; --lp-ink-2: #101010; --lp-ink-accent: #5fd9bf; --lp-accent: #5fd9bf;
  }
}
@media (min-width: 720px) { .lp { --lp-gutter: 32px; } }
@media (min-width: 1200px) { .lp { --lp-gutter: 48px; } }

html:has(body.lp) { scroll-behavior: smooth; scroll-padding-top: calc(var(--lp-header-h) + 16px); }
html.lp-menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { html:has(body.lp) { scroll-behavior: auto; } }

.lp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.lp-wrap { width: min(100% - 2 * var(--lp-gutter), var(--lp-max)); margin-inline: auto; }
.lp main:focus { outline: none; }

.lp-ico {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.lp-ico--sm { width: 18px; height: 18px; }
.lp-ico--xs { width: 16px; height: 16px; stroke-width: 2.1; }

/* Varumärkesmärket: en färg via currentColor (primärfärgen i sidhuvud, sidfot och produktbilden) */
.lp-mark__fg { fill: currentColor; }

/* Typografi */
.lp :where(h1, h2, h3) { text-wrap: balance; color: var(--text); }
.lp :where(h2) {
  font-size: clamp(1.75rem, 1.15rem + 2.2vw, 2.75rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.lp :where(h3) { font-size: 1.0625rem; font-weight: var(--fw-semibold); letter-spacing: -0.01em; line-height: 1.3; }
:where(.lp) p { color: var(--text-2); text-wrap: pretty; }

.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: var(--s-4);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: 0.01em;
  color: var(--lp-accent);
}
.lp-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }

.lp-lead {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.6;
  max-width: 34em;
}

/* Knappar: större träffyta och lugnare hover på startsidan */
.lp .btn--lg { height: 50px; padding: 0 24px; border-radius: 10px; font-weight: var(--fw-semibold); gap: 8px; }
.lp .btn--primary { box-shadow: 0 1px 0 color-mix(in oklab, #000 18%, transparent), inset 0 1px 0 color-mix(in oklab, #fff 14%, transparent); }
.lp .btn--secondary { --btn-bd: var(--border-strong); }
.lp .btn .lp-ico { transition: transform var(--dur-2) var(--ease); }
.lp .btn:hover .lp-go, .lp-more a:hover .lp-go { transform: translateX(2px); }
.lp-go { transition: transform var(--dur-2) var(--ease); }
.lp :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ───────────────────────── Sidhuvud ───────────────────────── */
.lp-header {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.lp-header.is-scrolled, .lp-header.has-mega { border-bottom-color: var(--border); background: color-mix(in oklab, var(--bg) 94%, transparent); }
.lp-header.is-scrolled { box-shadow: 0 6px 24px -18px color-mix(in oklab, var(--text) 40%, transparent); }
.lp-header__bar {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: var(--lp-header-h);
  flex-wrap: wrap;
}

.lp-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none;
  border-radius: var(--r-md);
}
.lp-brand:hover { color: var(--text); }
/* Märke + ordmärke: märket i primärfärgen, ordmärket tungt och tätt kernat i textfärgen (ingen spärrad versal). */
.lp-brand { gap: 11px; }
.lp-brand__mark { width: 30px; height: 30px; flex: none; color: var(--primary); }
.lp-brand__word { height: 22px; width: 104px; flex: none; fill: currentColor; }
.lp-brand__name {
  font-weight: var(--fw-bold); font-size: 1.1875rem; line-height: 1;
  letter-spacing: -0.028em; white-space: nowrap;
  font-feature-settings: "kern", "ss01";
}

.lp-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; }
.lp-nav__trigger, .lp-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px;
  border: 0; border-radius: var(--r-md); background: none;
  color: var(--text-2); font: inherit; font-size: var(--fs-md); font-weight: var(--fw-medium);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.lp-nav__trigger:hover, .lp-nav__link:hover, .lp-nav__trigger[aria-expanded="true"] { color: var(--text); background: var(--surface-hover); }
.lp-nav__chev { transition: transform var(--dur-2) var(--ease); }
.lp-nav__trigger[aria-expanded="true"] .lp-nav__chev { transform: rotate(180deg); }

.lp-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.lp-header__login {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--text); font-size: var(--fs-md); font-weight: var(--fw-semibold); text-decoration: none; border-radius: var(--r-md);
}
.lp-header__login:hover { background: var(--surface-hover); color: var(--text); }
.lp-header__cta { font-weight: var(--fw-semibold); height: 40px; padding: 0 16px; border-radius: 9px; white-space: nowrap; }
.lp-menu-btn__close { display: none; }
.lp-menu-btn[aria-expanded="true"] .lp-menu-btn__open { display: none; }
.lp-menu-btn[aria-expanded="true"] .lp-menu-btn__close { display: block; }

/* Megameny-paneler (gemensamt) */
.lp-mega { display: none; }
.lp-mega__title { margin: 0 0 var(--s-2); padding: 0 10px; font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: 0.02em; color: var(--text-3); }
.lp-mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lp-mega__link {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px; border-radius: 10px;
  color: var(--text); text-decoration: none;
  transition: background var(--dur-1) var(--ease);
}
.lp-mega__link:hover { background: var(--surface-hover); color: var(--text); }
.lp-mega__link:hover .lp-mega__ico { color: var(--lp-accent); border-color: color-mix(in oklab, var(--lp-accent) 55%, var(--border)); }
.lp-mega__ico {
  display: inline-grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.lp-mega__txt { display: grid; gap: 2px; min-width: 0; }
.lp-mega__txt b { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 1.3; }
.lp-mega__txt small { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.35; }
.lp-mega__promo {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--s-5); border-radius: 12px;
  background: linear-gradient(160deg, var(--lp-ink-2), var(--lp-ink));
  color: var(--lp-ink-text-2); text-decoration: none; font-size: var(--fs-sm); line-height: 1.45;
}
.lp-mega__promo b { color: var(--lp-ink-text); font-size: var(--fs-lg); line-height: 1.3; letter-spacing: -0.01em; }
.lp-mega__promo-kicker { color: var(--lp-ink-accent); font-weight: var(--fw-semibold); font-size: 12px; }
.lp-mega__promo-more { margin-top: auto; padding-top: var(--s-3); display: inline-flex; align-items: center; gap: 6px; color: var(--lp-ink-accent); font-weight: var(--fw-semibold); }
.lp-mega__promo:hover { color: var(--lp-ink-text-2); }
.lp-mega__promo:hover .lp-mega__promo-more { color: var(--lp-ink-text); }
.lp-mega__promo:focus-visible { outline-offset: 2px; }

/* Bred skärm: vågrät meny med nedfällbara paneler under sidhuvudet */
@media (min-width: 1080px) {
  .lp-nav { margin-left: var(--s-6); align-self: stretch; display: flex; }
  .lp-nav__list { flex-wrap: nowrap; align-items: stretch; }
  /* Listpunkten fyller hela sidhuvudets höjd så att pekaren inte "tappar" menyn på väg ned till panelen. */
  .lp-nav__item { display: flex; align-items: center; }
  .lp-nav__item--login { display: none; }
  .lp-menu-btn { display: none; }
  .lp-mega {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface);
    border-block: 1px solid var(--border);
    box-shadow: 0 30px 60px -30px color-mix(in oklab, var(--text) 35%, transparent);
  }
  .lp-mega__inner {
    width: min(100% - 2 * var(--lp-gutter), var(--lp-max)); margin-inline: auto;
    display: grid; gap: var(--s-6); padding: var(--s-6) 0 var(--s-8);
    grid-template-columns: minmax(0, 360px);
  }
  .lp-mega__inner--promo { grid-template-columns: minmax(0, 380px) minmax(240px, 300px); }
  .lp-mega__inner--duo { grid-template-columns: minmax(0, 640px); }
  .lp-mega__list--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--s-4); }
  /* Utan JS: hovring och tangentbordsfokus öppnar panelen. */
  .lp-header:not(.js-nav) .lp-nav__item:hover > .lp-mega,
  .lp-header:not(.js-nav) .lp-nav__item:focus-within > .lp-mega { display: block; }
  .lp-header.js-nav .lp-nav__trigger[aria-expanded="true"] + .lp-mega { display: block; animation: lp-drop 180ms var(--ease) both; }
}

/* Smal skärm: menyknapp som öppnar en panel över sidan */
@media (max-width: 1079px) {
  .lp-nav { order: 3; flex-basis: 100%; }
  .lp-header:not(.has-menu) .lp-nav__list { padding-bottom: var(--s-3); }
  .lp-header:not(.has-menu) .lp-nav__item:focus-within > .lp-mega { display: block; padding: var(--s-2) 0; }
  .lp-header.has-menu .lp-nav { display: none; }
  .lp-header.has-menu.is-open .lp-nav {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; top: var(--lp-menu-top, var(--lp-header-h));
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: var(--s-3) var(--lp-gutter) var(--s-10);
  }
  .lp-header.has-menu .lp-nav__list { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .lp-header.has-menu .lp-nav__item { border-bottom: 1px solid var(--border); }
  .lp-header.has-menu .lp-nav__trigger, .lp-header.has-menu .lp-nav__link {
    width: 100%; justify-content: space-between; min-height: 56px; padding: 0 4px;
    font-size: 1.0625rem; font-weight: var(--fw-semibold); color: var(--text); border-radius: var(--r-sm);
  }
  .lp-header.has-menu .lp-nav__link { justify-content: flex-start; gap: 10px; }
  .lp-header.has-menu .lp-nav__trigger:hover, .lp-header.has-menu .lp-nav__link:hover { background: none; color: var(--primary); }
  .lp-header.has-menu .lp-nav__trigger[aria-expanded="true"] { background: none; color: var(--primary); }
  .lp-header.has-menu .lp-nav__trigger[aria-expanded="true"] + .lp-mega { display: block; padding: 0 0 var(--s-4); }
  .lp-mega__inner { display: grid; gap: var(--s-4); }
  .lp-mega__promo { display: none; }
  /* backdrop-filter skapar ett eget koordinatsystem för position: fixed, så det stängs av när menyn är öppen. */
  .lp-header.is-open { background: var(--bg); border-bottom-color: var(--border); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 639px) {
  .lp-header__login { display: none; }
}
@media (max-width: 479px) {
  .lp-header .lp-theme { display: none; }
  .lp-header__cta { padding: 0 12px; height: 38px; font-size: var(--fs-sm); }
}
@media (max-width: 379px) {
  .lp-brand { gap: 9px; }
  .lp-brand__word { height: 19px; width: 90px; }
  .lp-header__actions { gap: 4px; }
  .lp-header__bar { gap: var(--s-2); }
}

/* ───────────────────────── Hero ───────────────────────── */
.lp-hero {
  position: relative;
  padding: clamp(40px, 5vw + 16px, 96px) 0 clamp(48px, 5vw + 24px, 104px);
  isolation: isolate;
  overflow-x: clip;
}
/* Diskret rutnät i bakgrunden, tonas ut mot kanterna */
.lp-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, var(--lp-hair) 1px, transparent 1px),
    linear-gradient(to bottom, var(--lp-hair) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at 75% 35%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 65% 60% at 75% 35%, #000 10%, transparent 70%);
}
/* Ett mjukt ljus i varumärkesfärg bakom produktbilden */
.lp-hero::after {
  content: ""; position: absolute; inset: -10% -10% auto; height: 120%; z-index: -2;
  background: radial-gradient(40% 45% at 78% 32%, color-mix(in oklab, var(--lp-accent) 14%, transparent), transparent 70%);
  pointer-events: none;
}
.lp-hero__grid { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; }
@media (min-width: 1080px) {
  .lp-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.lp-badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: var(--s-6); padding: 5px 12px 5px 10px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2);
}
.lp-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }

.lp-hero__title {
  font-size: clamp(2.375rem, 1.1rem + 3vw, 4rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.04em;
  line-height: 1.03;
  margin-bottom: var(--s-6);
}
.lp-hero__accent { display: block; color: var(--primary); }

.lp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-8); }
.lp-cta__link { --btn-fg: var(--text); }
@media (max-width: 479px) { .lp-cta .btn { flex: 1 1 100%; } }

.lp-ticks {
  list-style: none; margin: var(--s-8) 0 0; padding: 0;
  display: grid; gap: var(--s-2);
  font-size: var(--fs-md); color: var(--text-2);
}
.lp-ticks li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; }
.lp-ticks .lp-ico, .lp-checks .lp-ico { color: var(--ok); margin-top: 1px; }

/* ───────────────────────── Produktbild i hero ─────────────────────────
   Återhållsam stil som i ett riktigt verktyg: tunna linjer, neutrala ytor, passfärg bara som smal list. */
.lp-hero__visual {
  position: relative;
  container-type: inline-size;
  margin: 0;
}
.lp-app {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
  overflow: hidden;
  font-size: 12px; line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.lp-app__chrome {
  display: flex; align-items: center; gap: 12px;
  height: 34px; padding: 0 12px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.lp-dots { display: inline-flex; gap: 6px; }
.lp-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.lp-app__url {
  display: inline-flex; align-items: center; gap: 6px;
  margin-inline: auto; padding: 2px 12px; border-radius: var(--r-md);
  background: var(--surface-sunken); color: var(--text-3); font-size: 11px;
  max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-app__url .lp-ico { width: 11px; height: 11px; }
.lp-app__body { display: flex; }
.lp-app__rail {
  display: none; flex-direction: column; align-items: center; gap: 14px;
  width: 48px; flex: none; padding: 12px 0;
  border-right: 1px solid var(--border); background: var(--surface-2); color: var(--text-3);
}
.lp-app__logo { width: 22px; height: 22px; margin-bottom: 6px; color: var(--primary); }
.lp-app__rail .lp-ico { width: 17px; height: 17px; }
.lp-app__rail .is-active { color: var(--primary); }
.lp-app__main { display: block; flex: 1; min-width: 0; }

.lp-app__head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--lp-hair);
}
.lp-app__title { display: grid; min-width: 0; flex: 1; }
.lp-app__title b { font-weight: var(--fw-semibold); font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-app__title i { font-style: normal; color: var(--text-3); font-size: 11px; }
.lp-app__btn {
  display: none; align-items: center; gap: 6px; flex: none;
  height: 26px; padding: 0 10px; border-radius: 6px;
  background: var(--primary); color: var(--on-primary); font-weight: var(--fw-semibold); font-size: 11px;
}

/* Status som text med punkt (ingen fylld pill) */
.lp-status {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 11px; font-weight: var(--fw-semibold); color: var(--text-2); white-space: nowrap;
}
.lp-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.lp-status--warn { color: var(--warn-text); }
.lp-status--warn::before { background: var(--warn); }

/* Nyckeltal: tunna avdelare i stället för rutor */
.lp-kpis {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--lp-hair);
}
.lp-kpi { display: grid; gap: 1px; align-content: start; padding: 10px 14px; }
.lp-kpi:nth-child(even) { border-left: 1px solid var(--lp-hair); }
.lp-kpi:nth-child(n+3) { border-top: 1px solid var(--lp-hair); }
.lp-kpi i { font-style: normal; color: var(--text-3); font-size: 11px; font-weight: var(--fw-medium); letter-spacing: 0.01em; }
.lp-kpi b { font-size: 16px; font-weight: var(--fw-semibold); letter-spacing: -0.015em; color: var(--text); }
.lp-kpi small { font-size: 11px; color: var(--text-3); }

/* Schemarutnät */
.lp-sched { display: block; padding: 6px 10px 12px; }
.lp-sched__row {
  display: grid;
  grid-template-columns: minmax(72px, 1.5fr) repeat(7, minmax(0, 1fr));
  gap: 3px;
  align-items: center;
  padding: 3px 0;
}
.lp-sched__row + .lp-sched__row { border-top: 1px solid var(--lp-hair); }
.lp-sched__row--head { color: var(--text-3); font-size: 11px; padding-bottom: 5px; }
.lp-sched__corner { font-weight: var(--fw-medium); }
.lp-sched__day { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.lp-sched__day b { font-weight: var(--fw-semibold); color: var(--text-2); }
.lp-sched__day i { font-style: normal; }
.lp-sched__day--we b, .lp-sched__day--we i { color: var(--text-3); font-weight: var(--fw-regular); }
.lp-long { display: none; }
.lp-sched__sum { display: none; }
.lp-sched__who { display: grid; min-width: 0; }
.lp-sched__who b { font-weight: var(--fw-semibold); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-sched__who i { display: none; font-style: normal; color: var(--text-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-sched__row--open .lp-sched__who b { color: var(--warn-text); }

/* Pass: neutral yta, passfärgen bara som 2 px list till vänster */
.lp-s {
  --c: var(--shift-default);
  display: flex; align-items: center; justify-content: center;
  height: 24px; border-radius: 3px;
  font-weight: var(--fw-semibold); font-size: 11px; color: var(--text-2);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  background: var(--surface-2);
  box-shadow: inset 2px 0 0 var(--c), inset 0 0 0 1px var(--lp-hair);
  white-space: nowrap; overflow: hidden;
}
.lp-s b { font-weight: inherit; }
.lp-s--d { --c: var(--s-d); }
.lp-s--k { --c: var(--s-k); }
.lp-s--n { --c: var(--s-n); }
.lp-s--off, .lp-s--none { background: none; box-shadow: none; }
.lp-s--gap {
  background: none; box-shadow: none; color: var(--warn-text);
  border: 1px dashed color-mix(in oklab, var(--warn) 70%, transparent);
}

.lp-sched__row--cov .lp-sched__who b { color: var(--text-3); font-weight: var(--fw-medium); }
.lp-cov {
  display: flex; align-items: center; justify-content: center; gap: 4px; height: 20px;
  font-size: 11px; font-weight: var(--fw-medium); color: var(--text-3);
}
.lp-cov::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ok); }
.lp-cov--gap { color: var(--warn-text); font-weight: var(--fw-semibold); }
.lp-cov--gap::before { background: var(--warn); }

.lp-meter { display: block; height: 3px; border-radius: 3px; background: var(--surface-sunken); overflow: hidden; margin-top: 4px; }
.lp-meter__bar { display: block; height: 100%; border-radius: inherit; background: var(--primary); }

/* Chip och förslagskort: rad under bilden på smal skärm, ligger vid bildens kant på bred */
.lp-chip, .lp-float {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--lp-shadow-sm);
  color: var(--text);
}
.lp-chip {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 12px 8px 0 0; padding: 7px 12px; border-radius: 8px;
  font-size: 12px; font-weight: var(--fw-semibold);
}
.lp-chip .lp-ico { width: 14px; height: 14px; }
.lp-chip--ok .lp-ico { color: var(--ok); }
.lp-chip--warn .lp-ico { color: var(--warn); }
.lp-float {
  display: grid; gap: 8px; margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  font-size: 12px; line-height: 1.3;
}
.lp-float__kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-weight: var(--fw-semibold); font-size: 11px; }
.lp-float__kicker .lp-ico { width: 14px; height: 14px; color: var(--primary); }
.lp-float__sugg { display: flex; align-items: center; gap: 10px; }
.lp-float__who { display: grid; min-width: 0; flex: 1; }
.lp-float__who b { color: var(--text); font-weight: var(--fw-semibold); }
.lp-float__who i { font-style: normal; font-size: 11px; color: var(--text-3); }
.lp-float__btn { flex: none; padding: 5px 10px; border-radius: 6px; background: var(--primary); color: var(--on-primary); font-weight: var(--fw-semibold); font-size: 11px; }
.lp-avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-sunken); color: var(--text-2);
  font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.02em;
}

/* En gemensam, lugn intoning för hela produktbilden */
.lp-app, .lp-chip, .lp-float { animation: lp-fade 600ms var(--ease) both; }
.lp-chip, .lp-float { animation-delay: 250ms; }

@container (min-width: 440px) {
  .lp-sched__row { grid-template-columns: minmax(96px, 1.6fr) repeat(7, minmax(0, 1fr)) minmax(52px, 0.8fr); gap: 4px; }
  .lp-sched__who i { display: block; }
  .lp-sched__sum { display: block; text-align: right; color: var(--text-3); }
  .lp-sched__sum b { color: var(--text); font-weight: var(--fw-semibold); font-size: 11px; }
  .lp-sched { padding: 6px 14px 14px; }
  .lp-app__btn { display: inline-flex; }
}
@container (min-width: 560px) {
  .lp-long { display: inline; }
  .lp-short { display: none; }
  .lp-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lp-kpi:nth-child(n+3) { border-top: 0; }
  .lp-kpi + .lp-kpi { border-left: 1px solid var(--lp-hair); }
  .lp-sched__row { grid-template-columns: minmax(118px, 1.9fr) repeat(7, minmax(0, 1fr)) minmax(52px, 0.8fr); }
}
@container (min-width: 620px) {
  .lp-app__rail { display: flex; }
}
@media (min-width: 900px) {
  /* Chippen ligger utanför själva skärmbilden så att de aldrig döljer schemat. */
  .lp-hero__visual { padding: 24px 0 112px; }
  .lp-chip, .lp-float { position: absolute; margin: 0; z-index: 2; }
  .lp-chip--ok { top: 4px; right: 24px; }
  .lp-chip--warn { bottom: 20px; right: 0; }
  .lp-float { bottom: 0; left: 24px; width: min(340px, 62%); }
}
@media (min-width: 900px) and (max-width: 1079px) {
  /* En kolumn: förslagskortet bryter till tre rader, så mer luft under bilden. */
  .lp-float { width: min(380px, 62%); }
}

@keyframes lp-drop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes lp-fade { from { opacity: 0; } }

/* ───────────────────────── Passar er om … ───────────────────────── */
.lp-fit { border-block: 1px solid var(--border); background: var(--surface); padding: var(--s-8) 0; text-align: center; }
.lp .lp-fit__title {
  margin-bottom: var(--s-5);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: 0.01em; line-height: 1.4;
  color: var(--text-3);
}
.lp-fit__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px var(--s-6);
}
.lp-fit__list a {
  display: inline-flex; align-items: center; min-height: 36px;
  font-size: 1.0625rem; font-weight: var(--fw-semibold); letter-spacing: -0.01em;
  color: var(--text); text-decoration: none; border-radius: var(--r-sm);
}
.lp-fit__list a:hover { color: var(--primary); }
.lp-fit__list li + li::before { content: "·"; margin-right: var(--s-6); color: var(--border-strong); font-weight: var(--fw-bold); }
/* Punkterna mellan branscherna visas bara när listan ryms på en rad. */
@media (max-width: 1079px) {
  .lp-fit__list { gap: 0 var(--s-6); }
  .lp-fit__list li + li::before { display: none; }
}
@media (max-width: 559px) {
  .lp-fit__list { gap: 0 var(--s-4); }
  .lp-fit__list a { font-size: var(--fs-lg); }
}
.lp .lp-fit__note { margin-top: var(--s-4); font-size: var(--fs-md); color: var(--text-3); }

/* ───────────────────────── Sektioner ───────────────────────── */
.lp-section { padding: var(--lp-section-y) 0; }
.lp-section--alt { background: var(--lp-tint); border-block: 1px solid var(--border); }
.lp-section--line { border-top: 1px solid var(--border); }
.lp-section__head { max-width: 720px; margin: 0 auto clamp(36px, 3vw + 16px, 60px); text-align: center; }
.lp-section__head .lp-eyebrow { justify-content: center; }
.lp-section__head--left { margin-inline: 0; text-align: left; }
.lp-section__head--left .lp-eyebrow { justify-content: flex-start; }
.lp-section__intro { margin-top: var(--s-4); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); }
.lp-section__intro a { color: var(--primary); font-weight: var(--fw-semibold); }

.lp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: var(--fs-md); color: var(--text); }
.lp-checks li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; }

/* Ikonruta (resultat, branscher, trygghet): tunn ram i stället för färgad platta */
.lp-result__ico, .lp-sector__ico, .lp-safe__ico {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--lp-accent);
}

/* ───────────────────────── Resultat ───────────────────────── */
.lp-results { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 800px) { .lp-results { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
.lp-result {
  display: grid; gap: var(--s-2); align-content: start;
  padding: var(--s-6);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--lp-radius);
}
.lp-result h3 { margin-top: var(--s-4); font-size: 1.25rem; letter-spacing: -0.02em; }
.lp-result p { font-size: var(--fs-lg); line-height: 1.55; }
.lp-more { margin-top: var(--s-8); text-align: center; }
.lp-more a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--primary); font-weight: var(--fw-semibold); text-decoration: none; border-radius: var(--r-sm);
}
.lp-more a:hover { text-decoration: underline; }

/* ───────────────────────── Steg ───────────────────────── */
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 800px) { .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
.lp-step {
  position: relative;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--lp-radius);
}
.lp-step h3 { margin: var(--s-4) 0 var(--s-2); font-size: 1.1875rem; }
.lp-step p { font-size: var(--fs-md); line-height: 1.6; }
.lp-step__num {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--primary); color: var(--primary);
  font-weight: var(--fw-semibold); font-size: var(--fs-md); font-variant-numeric: tabular-nums;
}
@media (min-width: 800px) {
  .lp-step:not(:last-child)::after {
    content: ""; position: absolute; top: calc(var(--s-6) + 16px); left: calc(var(--s-6) + 44px); right: calc(-1 * var(--s-5) + 8px);
    height: 1px; background: repeating-linear-gradient(to right, var(--border-strong) 0 4px, transparent 4px 8px);
  }
}

/* ───────────────────────── Rollflikar ───────────────────────── */
.lp-tabs__list {
  display: flex; gap: 4px; width: max-content; max-width: 100%;
  margin: 0 auto var(--s-8); padding: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  overflow-x: auto; scrollbar-width: none;
}
.lp-tabs__list::-webkit-scrollbar { display: none; }
.lp-tabs__tab {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 9px;
  background: none; color: var(--text-2); font: inherit; font-size: var(--fs-md); font-weight: var(--fw-semibold);
  cursor: pointer; transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.lp-tabs__tab:hover { color: var(--text); background: var(--surface-hover); }
.lp-tabs__tab[aria-selected="true"] { background: var(--primary); color: var(--on-primary); }
.lp-tabs__tab:focus-visible { outline-offset: 2px; }
/* Smal skärm: flikarna läggs i ett rutnät (under varandra på mobil) i stället för att rulla i sidled, så att alla syns. */
@media (max-width: 699px) {
  .lp-tabs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .lp-tabs__tab { justify-content: center; padding: 6px 8px; text-align: center; line-height: 1.25; }
  .lp-tabs__tab .lp-ico { display: none; }
}
@media (max-width: 479px) { .lp-tabs__list { grid-template-columns: minmax(0, 1fr); } }
.lp-tabs__panel {
  display: grid; gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(20px, 3vw, 40px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--lp-radius-lg);
}
.lp-tabs__panel + .lp-tabs__panel { margin-top: var(--s-6); }
.lp-tabs.is-ready .lp-tabs__panel + .lp-tabs__panel { margin-top: 0; }
.lp-tabs.is-ready .lp-tabs__panel:not([hidden]) { animation: lp-fade 220ms var(--ease) both; }
@media (min-width: 900px) { .lp-tabs__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.lp-tabs__copy h3 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: var(--fw-bold); letter-spacing: -0.025em; margin-bottom: var(--s-3); }
.lp-tabs__copy > p { margin-bottom: var(--s-5); }
.lp-tabs__visual, .lp-split__visual { container-type: inline-size; padding: clamp(12px, 2.5vw, 28px); border-radius: 14px; background: var(--lp-tint); border: 1px solid var(--border); }
@media (max-width: 559px) { .lp-tabs__visual, .lp-split__visual { padding: 0; border: 0; background: none; } }

/* Fönster i rollflikarnas produktbilder */
.lp-panel {
  display: grid; gap: 12px;
  padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--lp-shadow-sm);
  font-size: 12.5px; line-height: 1.35; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.lp-panel__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding-bottom: 10px; border-bottom: 1px solid var(--lp-hair); }
.lp-panel__head b { color: var(--text); font-size: 13.5px; font-weight: var(--fw-semibold); }
.lp-panel__head > span { color: var(--text-3); font-size: 11.5px; flex: 1; }
.lp-fakebtn {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px;
  background: var(--primary); color: var(--on-primary); font-weight: var(--fw-semibold); font-size: 11.5px; white-space: nowrap;
}
.lp-fakebtn--ghost { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.lp-fakebtn--sm { height: 24px; padding: 0 9px; font-size: 11px; }

.lp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; }
.lp-dot--ok { background: var(--ok); }
.lp-dot--warn { background: var(--warn); }
.lp-dot--info { background: var(--info); }
.lp-units, .lp-todo { list-style: none; margin: 0; padding: 0; display: grid; }
.lp-units li, .lp-todo li { display: flex; align-items: center; gap: 10px; padding: 9px 2px; }
.lp-units li + li, .lp-todo li + li { border-top: 1px solid var(--lp-hair); }
.lp-units b { color: var(--text); font-weight: var(--fw-semibold); }
.lp-units i { font-style: normal; color: var(--text-3); flex: 1; }
.lp-units li > span:last-child { white-space: nowrap; color: var(--text); font-weight: var(--fw-semibold); }
.lp-todo li > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.lp-todo b { color: var(--text); font-weight: var(--fw-semibold); }
.lp-todo i { font-style: normal; color: var(--text-3); font-size: 11.5px; }
.lp-next { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--lp-hair); }
.lp-next > .lp-ico { color: var(--text-3); }
.lp-s--tile { width: 30px; height: 30px; flex: none; }
.lp-next > span:last-child { display: grid; }
.lp-next i { font-style: normal; font-size: 11px; color: var(--text-3); }
.lp-next b { color: var(--text); font-weight: var(--fw-semibold); font-size: 12.5px; }
.lp-progressline { display: grid; gap: 4px; }
.lp-progressline > span:first-child { display: flex; justify-content: space-between; gap: 8px; }
.lp-progressline i { font-style: normal; color: var(--text-3); }
.lp-progressline b { color: var(--text); font-weight: var(--fw-semibold); }
.lp-progressline .lp-meter { height: 4px; }

/* ───────────────────────── Branscher ───────────────────────── */
.lp-sectors { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 600px) { .lp-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .lp-sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
.lp-sector {
  display: grid; gap: var(--s-2); align-content: start;
  padding: var(--s-6); border-radius: var(--lp-radius);
  background: var(--surface);
  border: 1px solid var(--border);
}
.lp-sector h3 { margin-top: var(--s-3); font-size: 1.125rem; }
.lp-sector p { font-size: var(--fs-md); line-height: 1.55; }

/* ───────────────────────── Trygghet ───────────────────────── */
.lp-safe { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 800px) { .lp-safe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
.lp-safe li {
  display: grid; gap: var(--s-2); align-content: start;
  padding: var(--s-6); border-radius: var(--lp-radius); background: var(--surface); border: 1px solid var(--border);
}
.lp-safe h3 { margin-top: var(--s-3); font-size: 1.125rem; }
.lp-safe p { font-size: var(--fs-md); line-height: 1.55; }
.lp .lp-safe__note { margin-top: var(--s-8); text-align: center; font-size: var(--fs-md); color: var(--text-3); }

/* ───────────────────────── Om oss ───────────────────────── */
.lp-about { max-width: 760px; }
.lp-about h2 { margin-bottom: var(--s-2); }
.lp-about .lp-section__intro { max-width: 40em; }

/* ───────────────────────── Vanliga frågor ───────────────────────── */
@media (min-width: 1080px) {
  .lp-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-12); align-items: start; }
  .lp-faq .lp-section__head { margin-bottom: 0; position: sticky; top: calc(var(--lp-header-h) + 32px); }
}
.lp-faq__list { display: grid; gap: var(--s-3); }
.lp-q { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); transition: border-color var(--dur-2) var(--ease); }
.lp-q[open] { border-color: color-mix(in oklab, var(--lp-accent) 55%, var(--border)); }
.lp-q summary {
  position: relative;
  display: flex; align-items: center; min-height: 60px; padding: var(--s-4) 56px var(--s-4) var(--s-5);
  list-style: none; cursor: pointer;
  font-size: 1.0625rem; font-weight: var(--fw-semibold); line-height: 1.35; color: var(--text);
  border-radius: 12px;
}
.lp-q summary::-webkit-details-marker { display: none; }
.lp-q summary::after {
  content: ""; position: absolute; right: 20px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2);
  transform: rotate(45deg);
  transition: transform var(--dur-2) var(--ease), margin var(--dur-2) var(--ease);
}
.lp-q[open] summary::after { transform: rotate(-135deg); margin-top: -1px; }
.lp-q summary:hover { color: var(--primary); }
.lp-q p { padding: 0 var(--s-5) var(--s-5); font-size: var(--fs-md); line-height: 1.65; max-width: 66ch; }

/* ───────────────────────── Kontakt (mörkt kort) ───────────────────────── */
.lp-demo { padding: var(--lp-section-y) 0; }
.lp-demo__card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: var(--s-8); align-items: center;
  padding: clamp(28px, 5vw + 8px, 72px);
  border-radius: 20px;
  background: linear-gradient(140deg, var(--lp-ink-2), var(--lp-ink) 60%);
  color: var(--lp-ink-text);
  border: 1px solid var(--lp-ink-line);
}
.lp-demo__card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(45% 70% at 100% 0%, color-mix(in oklab, var(--lp-ink-accent) 18%, transparent), transparent 70%);
}
@media (min-width: 960px) { .lp-demo__card { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-12); } }
.lp-demo__kicker { color: var(--lp-ink-accent) !important; font-weight: var(--fw-semibold); font-size: var(--fs-sm); margin-bottom: var(--s-3); }
.lp-demo h2 { color: var(--lp-ink-text); max-width: 20em; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); }
.lp-demo p { color: var(--lp-ink-text-2); margin-top: var(--s-4); max-width: 40em; }
.lp-demo__actions { position: relative; z-index: 1; justify-self: end; min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: var(--s-3); min-width: min(100%, 260px); }
.lp .lp-btn-invert { --btn-bg: var(--lp-ink-text); --btn-fg: var(--lp-ink); --btn-bd: var(--lp-ink-text); --btn-bg-hover: #ffffff; box-shadow: none; }
.lp-btn-outline { --btn-bg: transparent; --btn-fg: var(--lp-ink-text); --btn-bd: color-mix(in oklab, var(--lp-ink-text) 45%, transparent); --btn-bg-hover: color-mix(in oklab, var(--lp-ink-text) 12%, transparent); }
.lp-btn-quiet { --btn-bg: transparent; --btn-fg: var(--lp-ink-text-2); --btn-bd: transparent; --btn-bg-hover: color-mix(in oklab, var(--lp-ink-text) 10%, transparent); }
.lp-btn-quiet:hover { --btn-fg: var(--lp-ink-text); }
.lp-demo__card :focus-visible { outline-color: var(--lp-ink-accent); }

/* ───────────────────────── Sidfot ───────────────────────── */
.lp-footer { border-top: 1px solid var(--border); background: var(--surface); padding: var(--s-12) 0 var(--s-8); font-size: var(--fs-md); }
.lp-footer__top { display: grid; gap: var(--s-10); padding-bottom: var(--s-10); }
@media (min-width: 1080px) { .lp-footer__top { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: var(--s-12); } }
.lp-footer__brand p { margin-top: var(--s-3); max-width: 30em; }
.lp-footer__cta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.lp-footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--s-8) var(--s-6); }
@media (min-width: 1080px) { .lp-footer__nav { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-6); } }
.lp-footer__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); letter-spacing: 0.01em; margin-bottom: var(--s-2); }
.lp-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; }
.lp-footer__col a { display: inline-flex; align-items: center; min-height: 36px; color: var(--text-2); text-decoration: none; border-radius: var(--r-sm); line-height: 1.3; }
.lp-footer__col a:hover { color: var(--text); text-decoration: underline; }
@media (pointer: coarse) { .lp-footer__col a { min-height: 44px; } }
.lp .lp-footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-3); }
.lp-footer__theme { margin-left: auto; gap: 6px; color: var(--text-2); }
.lp-footer__theme .lp-ico { width: 16px; height: 16px; }

/* Breddklasser (inga inline-stilar tillåts av CSP) */
.lp-w-88 { width: 88%; } .lp-w-96 { width: 96%; } .lp-w-100 { width: 100%; }

/* ───────────────────────── Undersidor (produkt-, losningar-, bransch-*.html m.fl.) ─────────────────────────
   Samma sidhuvud, sidfot och sektioner som startsidan; det här är bara det som tillkommer:
   sidhuvudet med brödsmulor, tvåspaltsblocket, textavsnitt, länkkort och markering av aktuell sida. */
.lp-page { padding: clamp(36px, 4vw + 12px, 72px) 0 clamp(40px, 4vw + 16px, 72px); background: var(--lp-tint); border-bottom: 1px solid var(--border); }
.lp-page h1 {
  max-width: 17em; margin-bottom: var(--s-5);
  font-size: clamp(2.125rem, 1.3rem + 2.6vw, 3.25rem); font-weight: var(--fw-bold); letter-spacing: -0.035em; line-height: 1.06;
}
.lp-page .lp-lead { max-width: 40em; }
.lp-page .lp-cta { margin-top: var(--s-8); }

.lp-crumbs { margin-bottom: var(--s-6); font-size: var(--fs-sm); }
.lp-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; color: var(--text-3); }
.lp-crumbs li { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; }
.lp-crumbs li + li::before { content: "/"; color: var(--border-strong); }
.lp-crumbs a { color: var(--text-2); text-decoration: none; border-radius: var(--r-sm); }
.lp-crumbs a:hover { color: var(--primary); text-decoration: underline; }
.lp-crumbs [aria-current="page"] { color: var(--text); font-weight: var(--fw-semibold); }

/* Två spalter: text med punktlista och en produktbild (byter sida med --flip) */
.lp-split { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 900px) {
  .lp-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lp-split--flip .lp-split__copy { order: 2; }
}
.lp-split__copy h2 { margin-bottom: var(--s-3); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); }
.lp-split__copy > p:not(.lp-eyebrow) { margin-bottom: var(--s-5); max-width: 36em; }
.lp-split__visual { margin: 0; }

/* Textavsnitt */
.lp-prose { max-width: 68ch; }
.lp-prose h2 { margin-bottom: var(--s-4); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); }
.lp-prose p { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); line-height: 1.7; }
.lp-prose p + p { margin-top: var(--s-4); }

/* "Läs mer"-länk i kort och paneler */
.lp-cardlink {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start;
  margin-top: var(--s-3); min-height: 32px;
  color: var(--primary); font-weight: var(--fw-semibold); font-size: var(--fs-md); text-decoration: none; border-radius: var(--r-sm);
}
.lp-cardlink:hover { color: var(--primary); text-decoration: underline; }
.lp-cardlink:hover .lp-go { transform: translateX(2px); }
.lp-faq__list .lp-more { margin-top: var(--s-2); text-align: left; }
.lp-more + .lp-safe__note { margin-top: var(--s-3); }

/* Relaterade sidor */
.lp-related { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .lp-related { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }
.lp-related a {
  display: flex; align-items: flex-start; gap: 14px; height: 100%;
  padding: var(--s-5);
  border: 1px solid var(--border); border-radius: var(--lp-radius); background: var(--surface);
  color: var(--text); text-decoration: none;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.lp-related a:hover { color: var(--text); background: var(--surface-hover); border-color: color-mix(in oklab, var(--lp-accent) 55%, var(--border)); }
.lp-related b { display: block; font-weight: var(--fw-semibold); line-height: 1.3; }
.lp-related small { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--text-3); line-height: 1.4; }

/* Aktuell sida markeras i megamenyn, huvudmenyn och sidfoten */
.lp-nav__link[aria-current="page"], .lp-mega__link[aria-current="page"] { color: var(--primary); }
.lp-mega__link[aria-current="page"] .lp-mega__ico { color: var(--lp-accent); border-color: color-mix(in oklab, var(--lp-accent) 55%, var(--border)); }
.lp-footer__col a[aria-current="page"] { color: var(--text); font-weight: var(--fw-semibold); }

/* ───────────────────────── Rörelse, högkontrast, utskrift ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { animation: none !important; transition: none !important; }
}

@media (forced-colors: active) {
  /* Märket följer currentColor: LinkText i sidhuvud/sidfot (samma färg som ordmärket), CanvasText i produktbilden. */
  .lp-brand__mark, .lp-app__logo { color: inherit; }
  .lp-mark__fg { fill: currentColor; }
  .lp-s:not(.lp-s--off, .lp-s--none), .lp-step, .lp-panel, .lp-float, .lp-chip, .lp-app, .lp-result,
  .lp-q, .lp-safe li, .lp-sector, .lp-tabs__panel, .lp-related a { border: 1px solid CanvasText; }
  .lp-s--gap { border: 2px dashed Mark; }
  .lp-meter__bar, .lp-dot, .lp-cov::before, .lp-status::before, .lp-badge__dot { forced-color-adjust: none; background: Highlight; }
  .lp-demo__card { border: 2px solid CanvasText; }
  .lp-hero::before, .lp-hero::after, .lp-demo__card::before { display: none; }
  .lp-tabs__tab[aria-selected="true"] { border: 2px solid Highlight; }
}

@media print {
  .lp-header, .lp-demo__actions, .lp-hero::before, .lp-hero::after { display: none; }
  .lp-q:not([open]) p { display: block; }
  .lp-demo__card { background: none; color: var(--text); border: 1px solid var(--border); }
  .lp-demo h2, .lp-demo p { color: var(--text); }
}