@import url("/static/fonts/new-design/fonts.css");

/* ═══ DESIGN TOKENS ══════════════════════════════════════════════════════ */

.nd-scope {
  --white: #fff;
  --black: #000;

  --paper: #fbf6ea;
  --cream: #F2EBE1;
  --sand: #E9DFD5;
  --muted: #6e5b41;
  --cocoa: #46321c;
  --cocoa-900: #2a1c0e;
  --cocoa-950: #1b1208;

  --gold: #cda765;
  --gold-text: #704a1a;

  --play-red: #e4372b;
  --klarna-pink: #ffb3c7;

  --gold-glow: color-mix(in srgb, var(--gold) 70%, var(--white));
  --line: color-mix(in srgb, var(--cocoa) 16%, transparent);
  --line-2: color-mix(in srgb, var(--cocoa) 28%, transparent);
  --cream-mut: color-mix(in srgb, var(--cream) 66%, transparent);
  --edge-hi: color-mix(in srgb, var(--white) 65%, transparent);
  --bg: var(--cream);
  --warm-backdrop:
    radial-gradient(120% 140% at 15% 0%, var(--sand) 0%, transparent 55%),
    radial-gradient(100% 120% at 100% 0%, color-mix(in srgb, var(--gold) 12%, transparent) 0%, transparent 45%),
    var(--cream);
  --serif: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --sans: "Satoshi", system-ui, -apple-system, sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.14 0 0 0 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");

  --mask-bird: url("/static/img/new-design/logo_bird.svg") center / contain no-repeat;
  --mask-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;

  --mask-scales: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M7 21h10M5 7h14M5 7l-3 6a3 3 0 0 0 6 0L5 7Zm14 0-3 6a3 3 0 0 0 6 0l-3-6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  /* Ikoner for kontaktsidans kanalblock och dragspelet i Vanliga
     fragor (Emil 2026-09-28). Samma tunna streck som ovriga ikoner. */
  --ikon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
  --ikon-plats: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --ikon-chatt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-8 8H7l-4 3V12a8 8 0 0 1 8-8h2a8 8 0 0 1 8 8Z'/%3E%3C/svg%3E");
  --ikon-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3Cpath d='m16 11 6-3v8l-6-3z'/%3E%3C/svg%3E");
  --ikon-telefon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7A2 2 0 0 1 22 16.9z'/%3E%3C/svg%3E");
  --ikon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --ikon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  /* Statusfarger. Inga nya toner: exakt de som redan lyser i
     online-pricken pa chattknappen och i notisbrickan. */
  --status-gron: #22c55e;
  --status-rod: #dc2626;
  --r-sm: 4px;
  --r-lg: 6px;
  --r-xl: 9px;
  --r-card: 22px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--cocoa) 6%, transparent);
  --shadow-nav: 0 6px 24px color-mix(in srgb, var(--cocoa) 7%, transparent);

  --edge-btn:
    inset 0 1px 1px color-mix(in srgb, var(--white) 90%, transparent),
    inset 0 -1px 1px color-mix(in srgb, var(--cocoa) 6%, transparent);
  --edge-paper:
    inset 0 2px 1px color-mix(in srgb, var(--white) 90%, transparent),
    inset 0 -2px 1px color-mix(in srgb, var(--cocoa) 5%, transparent);
  --shadow-paper:
    var(--edge-paper),
    0 1px 2px color-mix(in srgb, var(--cocoa) 6%, transparent),
    0 8px 16px color-mix(in srgb, var(--cocoa) 10%, transparent);
  --maxw: 1320px;

  --maxw-wide: clamp(1480px, calc(880px + 36vw), 1840px);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --gut: clamp(var(--space-5), 5vw, var(--space-10));
  --section-y: clamp(80px, 9.6vw, 130px);
  --section-y-tight: clamp(var(--space-8), 5vw, var(--space-10));
  --section-y-compact: clamp(var(--space-7), 4vw, var(--space-9));
  --cluster-gap: var(--space-4);
  --grid-gap: var(--space-6);
  --grid-gap-lg: clamp(var(--space-7), 5vw, var(--space-11));
  --heading-kicker-gap: var(--space-4);
  --heading-body-gap: var(--space-5);
  --section-content-gap: var(--space-10);
  --control-y: var(--space-3);
  --control-x: var(--space-6);
  --btn-h: 44px;
  --btn-h-lg: 52px;
  --btn-h-hero: 56px;
  --card-pad: clamp(var(--space-6), 3vw, var(--space-8));
  --panel-pad: clamp(var(--space-7), 5vw, var(--space-9));
  --measure-xs: 290px;
  --measure-md: 460px;
  --measure-lg: 600px;
  --measure-xl: 720px;
  --measure-2xl: 820px;
  --nav-h: 76px;
  --control-icon: 44px;
  --avatar-sm: 30px;
  --avatar-lg: 46px;
  --avatar-xl: 84px;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-caps: 0.75rem;
  --fs-md: 0.9375rem;
  --fs-body: 1rem;
  --fs-lg: 1.25rem;
  --fs-lead: clamp(1.125rem, 1.05rem + 0.38vw, 1.25rem);
  --fs-hero: clamp(2.9375rem, 1.79rem + 5.7vw, 5.375rem);
  --fs-heading-section: clamp(2.5rem, 1.6rem + 4.2vw, 3.875rem);
  --fs-heading-compact: clamp(1.9375rem, 1.37rem + 2.8vw, 2.9375rem);
  --fs-heading-feature: clamp(1.8125rem, 1.32rem + 2.5vw, 2.6875rem);
  --fs-heading-label: clamp(1.625rem, 1.2rem + 2.1vw, 2.375rem);
  --fs-display-lg: clamp(2.125rem, 1.27rem + 4.3vw, 3.625rem);
  --fs-display-xl: clamp(2.5rem, 1.57rem + 4.7vw, 4.125rem);
  --fs-card-title: clamp(1.375rem, 1.27rem + 0.5vw, 1.5625rem);
  --fs-card-title-sm: clamp(1.25rem, 1.14rem + 0.5vw, 1.4375rem);
  --fs-price: clamp(2.1875rem, 1.76rem + 2.1vw, 2.9375rem);
  --fs-signature: clamp(1.75rem, 1.54rem + 1vw, 2.125rem);

  --lh-body: 1.45;
  --lh-prose: 1.6;
  --lh-snug: 1.3;
  --lh-heading: 1.08;
  --lh-compact: 1.02;
  --lh-tight: 1;

  --tracking-display: -0.02em;
  --tracking: -0.01em;
  --tracking-body: -0.008em;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.1em;

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ═══ HERO FRAMING TOKENS ════════════════════════════════════════════════ */

.nd-scope {
  --hero-desk-x: 5%;
  --hero-desk-y: center;
  --hero-desk-x-1300: 35%;

  --hero-phone-face-y: max(390px, 42svh);
  --hero-phone-face-y-short: 370px;
  --hero-phone-face-k: 0.36;
  --hero-phone-fit: calc(266vw - 64px);
  --hero-phone-x: 100%;
  --hero-phone-y: 0%;
  --hero-phone-fade-start: 280px;
  --hero-phone-fade-end: 400px;

  --hero-tabp-face-y: max(420px, 42svh);
  --hero-tabp-face-k: 0.34;
  --hero-tabp-fit: calc(240vw - 58px);
  --hero-tabp-x: 100%;
  --hero-tabp-y: -30%;
  --hero-tabp-fade-start: 420px;
  --hero-tabp-fade-end: 510px;

  --hero-tabl-x: 70%;
  --hero-tabl-y: center;
}

/* ═══ DARK SCOPES ════════════════════════════════════════════════════════ */

.nd-scope .hero, .nd-scope .sec--cocoa, .nd-scope .quote, .nd-scope .footer, .nd-scope .nav:not(.scrolled) {
  --gold-text: var(--gold);
}

/* ═══ BASE & RESET ═══════════════════════════════════════════════════════ */

.nd-scope * {
  box-sizing: border-box;
}

.nd-scope {
  scroll-behavior: smooth;
  overflow-x: clip;
}

.nd-scope {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--cocoa);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.nd-scope {
  overflow-x: hidden;
}

.nd-scope img {
  max-width: 100%;
  display: block;
}

.nd-scope a {
  color: inherit;
  text-decoration: none;
}

.nd-scope ::selection {
  background: color-mix(in srgb, var(--gold) 32%, var(--cream));
  color: var(--cocoa-900);
}

.nd-scope :focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.nd-scope section[id] {
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

/* ═══ ICONS ══════════════════════════════════════════════════════════════ */

.nd-scope .ico {
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nd-scope .ico--fill {
  fill: currentColor;
  stroke: none;
}

.nd-scope .ico--thin {
  stroke-width: 1.6;
}

/* ═══ SKIP LINK ══════════════════════════════════════════════════════════ */

.nd-scope .skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--r-pill);
  background: var(--cocoa-900);
  color: var(--cream);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--shadow-nav);
  transform: translateY(calc(-100% - var(--space-6)));
  transition: transform .2s var(--ease);
}

.nd-scope .skip-link:focus, .nd-scope .skip-link:focus-visible {
  transform: none;
}

/* ═══ IMAGE TREATMENTS ═══════════════════════════════════════════════════ */

.nd-scope .media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--cream);
  border: 1px solid var(--line);
}

.nd-scope .step-media::after, .nd-scope .split .media::before {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

.nd-scope .split .media::before {
  border-radius: var(--r-xl);
}

/* ═══ TYPOGRAPHY ═════════════════════════════════════════════════════════ */

.nd-scope h1, .nd-scope h2, .nd-scope h3, .nd-scope h4 {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: var(--tracking);
  line-height: var(--lh-heading);
  margin: 0;
  text-wrap: balance;
}

.nd-scope h1, .nd-scope h2 {
  letter-spacing: var(--tracking-display);
}

.nd-scope p {
  margin: 0;
  text-wrap: pretty;
}

.nd-scope h1 em, .nd-scope h2 em, .nd-scope .section-title em {
  font-style: normal;
  font-weight: inherit;
  font-size: 1.04em;
  letter-spacing: 0;
}

.nd-scope .cta-copy h2 em {
  color: var(--gold-text);
}

.nd-scope .sec--cocoa h1, .nd-scope .sec--cocoa h2, .nd-scope .quote blockquote, .nd-scope .cta-row h2, .nd-scope .blog-hero h1 {
  font-weight: 100;
}

.nd-scope h3 {
  font-weight: 400;
}

/* ═══ LAYOUT CONTAINER ═══════════════════════════════════════════════════ */

.nd-scope .wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.nd-scope .nav .links a.active-link, .nd-scope .mobile-menu__links a.active-link {
  color: var(--gold-text);
}

/* ═══ SECTION HEADINGS ═══════════════════════════════════════════════════ */

.nd-scope .section-title {
  font-size: var(--fs-heading-compact);
  margin-top: var(--heading-kicker-gap);
  margin-bottom: var(--heading-body-gap);
}

.nd-scope #forsakringar .section-title {
  font-size: var(--fs-heading-section);
}

.nd-scope .section-title+.sub, .nd-scope .section-title+.section-sub {
  margin-top: 0;
}

.nd-scope .section-sub+p {
  margin-top: var(--space-5);
}

.nd-scope .sub {
  color: var(--muted);
  font-size: var(--fs-lead);
}

.nd-scope .section-sub {
  max-width: none;
}

/* ═══ UTILITIES ══════════════════════════════════════════════════════════ */

.nd-scope .action-row {
  margin-top: var(--space-7);
}

@media (max-width: 600px) {
  .nd-scope .action-row .btn {
    width: 100%;
    justify-content: center;
  }
}

.nd-scope .inline-actions {
  display: flex;
  gap: var(--cluster-gap);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.nd-scope .feat-meta {
  margin-top: var(--space-5);
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--space-3);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.nd-scope .feat-meta .dot, .nd-scope .post .pmeta .dot {
  width: var(--space-1);
  height: var(--space-1);
  border-radius: 50%;
  background: var(--muted);
}

.nd-scope .hidden {
  display: none !important;
}

.nd-scope .kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--sans);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 500;
  font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  color: var(--gold-text);
}

.nd-scope .kicker.muted {
  color: var(--muted);
}

.nd-scope .kicker.center {
  justify-content: center;
}

.nd-scope .tlink, .nd-scope .nav .links, .nd-scope .price .tag, .nd-scope .footer h2, .nd-scope .feat .pill, .nd-scope .post .pill, .nd-scope .art-hero .pill, .nd-scope .author-card .role {
  font-size: var(--fs-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* ═══ BUTTONS ════════════════════════════════════════════════════════════ */

.nd-scope .btn {
  --bg: var(--paper);
  --fg: var(--cocoa);
  --btn-min-h: var(--btn-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  line-height: var(--lh-tight);
  min-height: var(--btn-min-h);
  padding: var(--control-y) var(--control-x);
  border-radius: var(--r-pill);
  border: 1px solid var(--edge-hi);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    var(--edge-btn),
    0 1px 1px color-mix(in srgb, var(--cocoa) 5%, transparent),
    0 3px 7px color-mix(in srgb, var(--cocoa) 8%, transparent);
  transition: transform .3s var(--ease), box-shadow .3s, background .25s, color .25s, border-color .25s;
}

.nd-scope .btn:hover {
  transform: translateY(-1px);
  box-shadow:
    var(--edge-btn),
    0 2px 3px color-mix(in srgb, var(--cocoa) 6%, transparent),
    0 5px 11px color-mix(in srgb, var(--cocoa) 10%, transparent);
}

.nd-scope .btn:active {
  transform: translateY(0);
  box-shadow:
    var(--edge-btn),
    0 1px 2px color-mix(in srgb, var(--cocoa) 6%, transparent);
}

.nd-scope .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 38%, transparent);
}

.nd-scope .btn>svg {
  transition: transform .3s var(--ease);
}

.nd-scope .btn:hover>svg {
  transform: translateX(3px);
}

.nd-scope .btn--ghost {
  --bg: transparent;
  --fg: var(--cocoa);
  border-color: color-mix(in srgb, var(--cocoa) 32%, transparent);
  box-shadow: none;
}

.nd-scope .btn--ghost:hover, .nd-scope .btn--ghost:active {
  box-shadow: none;
}

.nd-scope .btn--primary {
  --bg: var(--gold);
  --fg: var(--cocoa);
  border-color: transparent;
  box-shadow: none;
}

.nd-scope .btn--primary:hover {
  --bg: color-mix(in srgb, var(--gold) 88%, var(--white));
  box-shadow: none;
}

.nd-scope .btn--primary:active {
  --bg: color-mix(in srgb, var(--gold) 90%, var(--cocoa));
  box-shadow: none;
}

.nd-scope .btn--primary:focus-visible {
  box-shadow:
    0 0 0 2px var(--paper),
    0 0 0 4px color-mix(in srgb, var(--cocoa) 70%, transparent);
}

.nd-scope .btn--lg {
  --btn-min-h: var(--btn-h-lg);
  padding-inline: var(--space-7);
}

/* ═══ TEXT LINKS ═════════════════════════════════════════════════════════ */

.nd-scope .tlink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  white-space: nowrap;
  font-family: var(--sans);
  font-weight: 700;
  color: var(--cocoa);
  cursor: pointer;
  position: relative;
  transition: color .2s;
}

.nd-scope .tlink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--gold-text);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s var(--ease);
}

.nd-scope .tlink:hover {
  color: var(--gold-text);
}

.nd-scope .tlink:hover::after {
  transform: scaleX(1);
}

/* ═══ NAV ════════════════════════════════════════════════════════════════ */

.nd-scope .nav {
  --nav-fg: var(--cocoa-900);
  --nav-mark: color-mix(in srgb, var(--gold-text) 65%, var(--gold));
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

/* NAV_ALWAYS_DARK_v1 (Emil 2026-08-24): burger + nav-tekst ska vara
   mörk brun oavsett scroll-position, så vi behåller default --nav-fg
   (cocoa-900). Original vit-mode kvar som referens: */
/*
.nd-scope .nav:not(.scrolled) {
  --nav-fg: var(--white);
  --nav-mark: var(--gold);
}
*/

.nd-scope .nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold));
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left;
  pointer-events: none;
}

.nd-scope .nav.scrolled {
  background: var(--paper);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-nav);
}

.nd-scope .nav .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--nav-h);
}

.nd-scope .brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--serif);
  font-size: 2.25rem;
  line-height: .9;
  letter-spacing: var(--tracking);
  color: var(--white);
  justify-self: start;
  transform: translateY(-1px);
  transition: transform .4s cubic-bezier(.25, 1, .5, 1);
}

.nd-scope .brand-logo {
  width: auto;
  height: 52px;
  flex: none;
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.4);
}

.nd-scope .brand-logo__bird {
  fill: var(--gold);
}

.nd-scope .brand-logo__word {
  fill: var(--nav-mark, var(--gold));
}

.nd-scope .nav .brand:hover .brand-logo {
  transform: rotate(-3deg) translateY(-2px);
}

.nd-scope .nav .links {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-7);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.nd-scope .nav-right {
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* NAVGAP_v2 (Emil 2026-08-25): reducerad fran var(--space-7) till 4px
     for tatare gruppering av [Bell] [AI-avatar] [Burger]. */
  gap: 4px;
  min-width: 0;
}

.nd-scope .nav .links a {
  color: var(--nav-fg);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
  transition: color .2s;
}

.nd-scope .nav .links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: var(--gold-text);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s var(--ease);
}

.nd-scope .nav .links a:hover {
  color: var(--gold-text);
}

.nd-scope .nav .links a:hover::after {
  transform: scaleX(1);
}

.nd-scope .nav .nav-cta {
  display: inline-flex;
  gap: var(--cluster-gap);
  align-items: center;
  justify-content: flex-end;
}

.nd-scope .nav .nav-cta .btn {
  font-weight: 500;
}

.nd-scope .nav .nav-cta .nav-login {
  --btn-min-h: 40px;
  padding-inline: var(--space-6);
}

.nd-scope .nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.nd-scope .nav.scrolled {
  background: var(--paper);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-nav);
}

/* ── nav toggle ── */

.nd-scope .nav-toggle {
  /* Emil 2026-09-02: burger visas pa ALLA viewports (desktop + mobil) sa
     alla menyval (inkl Mitt Konto/Logga ut) alltid ar tillgangliga. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nav-fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nd-scope .nav-toggle__bars, .nd-scope .nav-toggle__bars::before, .nd-scope .nav-toggle__bars::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .34s var(--ease), opacity .2s ease, background-color .2s ease;
}

.nd-scope .nav-toggle__bars {
  top: 50%;
  left: 11px;
  margin-top: -.8px;
}

.nd-scope .nav-toggle__bars::before, .nd-scope .nav-toggle__bars::after {
  left: 0;
}

.nd-scope .nav-toggle__bars::before {
  top: -7px;
}

.nd-scope .nav-toggle__bars::after {
  top: 7px;
}

.nd-scope .nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nd-scope .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  top: 0;
  transform: rotate(45deg);
}

.nd-scope .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ── mobile menu ── */

.nd-scope .mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: 60;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--space-6);
  padding: var(--space-7) var(--gut) calc(var(--space-9) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--paper) 97%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .3s ease, transform .34s var(--ease), visibility 0s linear .34s;
}

.nd-scope .mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .3s ease, transform .34s var(--ease), visibility 0s linear 0s;
}

.nd-scope .mobile-menu__links {
  display: flex;
  flex-direction: column;
  /* MENUCLEAN2 2026-08-24 (Emil): bumped from --space-2 (8px) till --space-7
   * (32px) for luft mellan burger-nav och forsta menyitem. Totalt fran
   * nav-bottom: 32px (.mobile-menu padding-top) + 32px = 64px, ca 24px
   * extra jamfort med tidigare. */
  margin-top: var(--space-7);
}

.nd-scope .mobile-menu__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: clamp(var(--space-3), 2.4vw, var(--space-5)) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 1rem + 2vw, 1.6875rem);
  color: var(--cocoa);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s ease, transform .45s var(--ease), color .2s ease;
}

.nd-scope .mobile-menu.open .mobile-menu__links a {
  opacity: 1;
  transform: none;
  transition-delay: calc(.055s * var(--i, 0) + .04s);
}

.nd-scope .mobile-menu__links a::after {
  content: "";
  width: 22px;
  height: 22px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--mask-arrow-right);
  mask: var(--mask-arrow-right);
  color: var(--gold-text);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .25s ease, transform .25s var(--ease);
}

.nd-scope .mobile-menu__links a:hover, .nd-scope .mobile-menu__links a.active-link {
  color: var(--gold-text);
}

.nd-scope .mobile-menu__links a:hover::after, .nd-scope .mobile-menu__links a.active-link::after {
  opacity: 1;
  transform: none;
}

.nd-scope .mobile-menu__cta {
  display: grid;
  gap: var(--space-3);
}

.nd-scope .mobile-menu__cta .btn {
  --btn-min-h: 54px;
  width: 100%;
  font-size: var(--fs-body);
}

.nd-scope {
  overflow-x: hidden;
}

.nd-scope .nav, .nd-scope .nav:not(.scrolled) {
  background: color-mix(in srgb, var(--paper) 97%, transparent);
  border-bottom-color: transparent;
}

.nd-scope .nav .nav-cta {
  visibility: hidden;
}

@media (min-width: 768px) and (max-width: 999px) {
  .nd-scope .nav .wrap {
    gap: var(--space-4);
  }

  .nd-scope .nav .links {
    gap: var(--space-4);
  }

  .nd-scope .nav .nav-cta .nav-login {
    padding-inline: var(--space-5);
  }
}

@media (max-width: 767px) {
  .nd-scope .nav .wrap {
    grid-template-columns: 1fr auto;
  }

  .nd-scope .nav .links {
    display: none;
  }

  .nd-scope .nav .nav-cta .nav-login {
    display: none;
  }

  .nd-scope .nav-right {
    gap: var(--space-4);
  }

  .nd-scope .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Emil 2026-09-02: Tog bort desktop-hide av .mobile-menu — panelen
   togglas nu via .open-klassen (opacity + pointer-events) pa alla viewports
   sa burger-menyn fungerar aven pa desktop. */

/* === Emil 2026-09-02: BURGER-DRAWER (desktop + mobil) === */
/* Overlay: dimmar bakgrunden nar drawer ar open. Skapas av nd-nav.js */
.nd-scope .nd-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  z-index: 55;
  transition: opacity .3s ease, visibility 0s linear .3s;
  cursor: pointer;
}
.nd-scope .nd-drawer-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease, visibility 0s linear 0s;
}
/* Desktop: side-drawer 50% width, hoger-anchored */
@media (min-width: 768px) {
  .nd-scope .mobile-menu {
    inset: 0 0 0 auto !important;
    width: 50% !important;
    max-width: 520px;
    min-width: 340px;
    height: 100vh !important;
    /* Emil 2026-09-16: pa desktop borjar panelen vid y=0 (inset 0) medan
       navraden med burger/stang-knappen, notisklockan och sprakvaljaren
       ligger kvar overst. Utan utrymme for den hamnade forsta menyposten
       ("Mina arenden") under knapparna och gick inte att klicka. Panelen
       ska fortfarande vara helhog — darfor padding, inte inset. */
    padding-top: calc(var(--nav-h) + var(--space-5)) !important;
    z-index: 70 !important;
    transform: translateX(100%) !important;
    transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .32s ease, visibility 0s linear .32s !important;
    box-shadow: -8px 0 32px rgba(0,0,0,0.18);
    opacity: 1 !important;
    visibility: hidden !important;
  }
  .nd-scope .mobile-menu.open {
    transform: translateX(0) !important;
    visibility: visible !important;
    transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .32s ease, visibility 0s linear 0s !important;
  }
}
/* Lock body-scroll nar menyn ar open */
body.menu-open { overflow: hidden !important; }
/* Dolj horisontell top-nav pa desktop (>=768px) - burger tacker allt */
@media (min-width: 768px) {
  body .lawyer-top-nav,
  body .municipality-top-nav {
    display: none !important;
  }
}
/* === /BURGER-DRAWER === */



/* ═══ HERO-CTA SOM EGET BAND ═══════════════════════════ */
/* Emil 2026-10-23: knapparna ut ur heron, "de saljer for mycket av
   den". Heron kortas sa att knapparna ANDA ligger over vikningen och
   35 px av nasta sektion syns.

   ⚠ SIDOPADDINGEN AR 12px MED FLIT. Med 16px staplas de tva
   knapparna vid 375 px bredd (iPhone SE): bandet blir 192 px i
   stallet for 124, och knapparna hamnar 26 px UNDER vikningen.
   Uppmatt renderat 2026-10-23 — och det var mitt eget val av padding
   som forst fick mig att rapportera att det inte gick ihop. */
/* ═══ SCROLL-IKON I HERON ══════════════════════════════ */
/* Emil 2026-10-23, nar CTA-knapparna flyttades ut ur heron och hamnade
   under vikningen: *"lagg samtidigt in en scroll-ikon som visar att
   man kan scrolla ner"*.

   Ikonen ERSATTER inte de 35 pixlarna av nasta sektion — bada star
   kvar. Tva signaler som sager samma sak ar redundans pa ratt stalle.

   Den ar en KNAPP och inte en bild: en pil som bara pekar ar en
   illustration, en som skrollar nar man trycker ar en funktion.

   Och den ar lasbar UTAN rorelse. Sidan respekterar redan
   prefers-reduced-motion pa sex stallen; blocket langst ned foljer
   det, och da star pilen stilla i stallet for att forsvinna. */
.nd-scope .hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(8px, 2svh, 20px);
  transform: translateX(-50%);
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;          /* 44 px = minsta vettiga traffyta */
  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  color: var(--white, #fff);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nd-scope .hero-scroll-cue i {
  font-size: 1rem;
  line-height: 1;
  animation: pek-scroll-cue 1.8s ease-in-out infinite;
}

@keyframes pek-scroll-cue {
  0%, 100% { transform: translateY(0); opacity: 0.75; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* Utan rorelse: pilen STAR KVAR, den slutar bara rora sig. En ikon
   som forsvinner for den som stangt av rorelse vore att ta bort
   informationen i stallet for animationen. */
@media (prefers-reduced-motion: reduce) {
  .nd-scope .hero-scroll-cue i {
    animation: none;
    opacity: 1;
  }
}

.nd-scope .hero-cta-band {
  padding: 24px 12px;
}

.nd-scope .hero-cta-band .hero-cta {
  justify-content: center;
}

/* ═══ HERO ═══════════════════════════════════════════════════════════════ */

.nd-scope .hero {
  min-height: min(880px, calc(100svh - var(--nav-h)));

  --hero-copy-cap: min(980px, calc(66vw - var(--gut)));

  --hero-edge: max(0px, calc((100% - var(--maxw)) / 2));

  --hero-col: min(840px, 62vw);
  --hero-read: calc(var(--hero-edge) + min(var(--hero-col), var(--hero-copy-cap)) - var(--gut));

  background-image:
    linear-gradient(180deg,
      color-mix(in srgb, var(--cocoa-900) 62%, transparent) 0,
      color-mix(in srgb, var(--cocoa-900) 50%, transparent) var(--nav-h),
      color-mix(in srgb, var(--cocoa-900) 18%, transparent) calc(var(--nav-h) * 2),
      transparent calc(var(--nav-h) * 3)),

    linear-gradient(90deg,
      color-mix(in srgb, var(--cocoa-900) 88%, transparent) 0,
      color-mix(in srgb, var(--cocoa-900) 86%, transparent) calc(var(--hero-read) * .45),
      color-mix(in srgb, var(--cocoa-900) 82%, transparent) calc(var(--hero-read) * .78),
      color-mix(in srgb, var(--cocoa-900) 77%, transparent) var(--hero-read),
      color-mix(in srgb, var(--cocoa-900) 70%, transparent) calc(var(--hero-read) + .7vw),
      color-mix(in srgb, var(--cocoa-900) 58%, transparent) calc(var(--hero-read) + 1.4vw),
      color-mix(in srgb, var(--cocoa-900) 43%, transparent) calc(var(--hero-read) + 2.1vw),
      color-mix(in srgb, var(--cocoa-900) 28%, transparent) calc(var(--hero-read) + 2.8vw),
      color-mix(in srgb, var(--cocoa-900) 15%, transparent) calc(var(--hero-read) + 3.5vw),
      color-mix(in srgb, var(--cocoa-900) 6%, transparent) calc(var(--hero-read) + 4vw),
      transparent calc(var(--hero-read) + 4.5vw)),
    url("/static/img/new-design/hero.webp");

  --hero-zoom: cover;
  --hero-pos-x: var(--hero-desk-x);
  --hero-pos-y: var(--hero-desk-y);

  background-position: center, center, var(--hero-pos-x) var(--hero-pos-y);
  background-size: cover, cover, var(--hero-zoom);
  background-repeat: no-repeat;
  color: var(--white);
  position: relative;
  overflow: visible;
}

.nd-scope .hero {
  min-height: min(880px, calc(100svh - var(--nav-h)));
}

.nd-scope .hero .grid {
  position: relative;
  z-index: 2;
  min-height: inherit;
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, var(--hero-col));

  grid-auto-rows: min-content;
  align-content: center;
  align-items: center;
}

@media (min-width: 1500px) {
  .nd-scope .hero .grid {
    max-width: var(--maxw-wide);
  }

  .nd-scope .hero {
    --hero-edge: max(0px, calc((100% - var(--maxw-wide)) / 2));

    --hero-col: clamp(840px, 46vw, 1000px);
  }

  .nd-scope .hero h1 {
    font-size: clamp(5.375rem, 3rem + 4vw, 6.5rem);
  }

  .nd-scope .hero .lead {
    max-width: var(--measure-2xl);
    font-size: 1.375rem;
  }

  .nd-scope .nav .wrap {
    max-width: var(--maxw-wide);
  }
}

.nd-scope .hero-copy {
  padding-block:
    clamp(var(--nav-h), 60.8svh - 439px, calc(var(--nav-h) + var(--space-9)))
    clamp(var(--space-3), 39.2svh - 283px, var(--space-8));
  padding-inline: var(--gut);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: var(--hero-copy-cap, 760px);
}

.nd-scope .hero .kicker {
  font-weight: 400;
  color: var(--gold);
}

.nd-scope .hero h1 {
  font-size: var(--fs-hero);
  font-weight: 200;
  line-height: var(--lh-compact);

  max-width: 14ch;
  color: var(--white);
}

.nd-scope .hero h1 em {
  color: var(--gold);
}

.nd-scope .hero .kicker+h1 {
  margin-top: var(--space-6);
}

.nd-scope .hero .lead {
  margin-top: var(--space-4);
  max-width: var(--measure-xl);
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--white);
}

.nd-scope .heart-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
  margin-bottom: var(--space-5);
  max-width: 480px;
}

.nd-scope .heart-divider .line {
  flex: 1;
  height: 1px;
  background: var(--line-2);
}

.nd-scope .heart-divider .heart-icon {
  color: var(--gold);
  stroke-width: 1.8;
}

.nd-scope .gold-text-highlight {
  color: var(--gold);
  font-weight: 600;
}

.nd-scope .hero .actions {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(var(--space-6), 2.4vw, var(--space-9));
  align-items: center;
}

/* HERO_CTA (Emil 2026-10-15): uppmaningen i heron.
 *
 * EGEN RAD UNDER ``.actions``. Videominiatyren ligger i ``.actions``,
 * och flera hero-brytpunkter satter den raden till
 * ``flex-wrap:nowrap`` — tva knappar till dar hade klamt ihop
 * miniatyren i stallet for att radbryta.
 *
 * ``--btn-h-hero`` och den storre innerbredden ar samma som de andra
 * hero-knapparna redan har (``.hero .actions .btn``), sa den nya raden
 * inte ser ut som en annan sorts knapp.
 */
.nd-scope .hero-cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

.nd-scope .hero-cta .btn {
  --btn-min-h: var(--btn-h-hero);
  padding-inline: var(--space-7);
  font-size: var(--fs-body);
  /* Etiketten far inte radbryta inuti pillret. Uppmatt i mobil: utan
   * det blev "Kom igang med BankID nu" 184 px bred i en knapp vars
   * innerruta var 162 — texten spillde ut over pillrets kanter, och
   * matningen sa anda "spiller inte" (scrollWidth raknar inte
   * overspill at vanster i en centrerad flexruta). Skarmbilden visade
   * det, inte talen. */
  white-space: nowrap;
}

/* GHOST-KNAPPEN STAR PA ETT FOTO.
 *
 * ``.btn--ghost`` ar ritad for ljus bakgrund: kakaofargad text och en
 * kant pa 32 % kakao. Pa hero-fotot — morkt, med en morkbrun gradient
 * over vanstra halvan — blev "Testa demo" nastan oläslig. Sags pa
 * skarmbilden vid 1280; inget matt i DOM:en hade sagt det.
 *
 * Darfor en egen ton HAR: ljus text, ljusare kant och en svag fyllning
 * som later fotot synas igenom men ger bokstaverna nagot att sta mot.
 */
.nd-scope .hero-cta .btn--ghost {
  /* MORK PLATTA, inte ljus slöja (Emil 2026-10-15, med bild:
   * "Testa demo går knappt att läsa").
   *
   * UPPMATT pa prod i mobil fore andringen: kontrastkvoten mellan
   * texten och knappens ljusaste parti var 1.46:1. Kravet ar 4.5:1 for
   * text i den har storleken, och 3:1 aven for stor text. Den gamla
   * fyllningen var paper 14 % — en ljus slöja over ett foto som nar
   * luminans 0.67 i de ljusa partierna, sa krämvit text pa krämvit
   * botten.
   *
   * Nu en MORK platta i stallet. Den haller ihop med heron, vars egen
   * text ligger ljus mot en mork gradient, och knappen forblir tydligt
   * sekundar: ingen guldfyllning, bara lasbar.
   *
   * Siffran ar matt om efterat i samma vy — se
   * scratchpad/_matt_kontrast.py. */
  --fg: var(--paper);
  background: color-mix(in srgb, var(--cocoa-900) 78%, transparent);
  border-color: color-mix(in srgb, var(--paper) 62%, transparent);
  backdrop-filter: blur(3px);
}

.nd-scope .hero-cta .btn--ghost:hover {
  background: color-mix(in srgb, var(--cocoa-900) 88%, transparent);
  border-color: color-mix(in srgb, var(--paper) 82%, transparent);
}

/* Mobil: BREDVID VARANDRA, inte staplade (Emil).
 *
 * Uppmatt vid 390 px: innehallsbredden ar 350, och de tva knapparna i
 * sina vanliga matt blir ~250 + ~150 = 400 — de far inte plats. Darfor
 * delar de raden har: primaren tar den storre andelen (``flex: 3``),
 * demoknappen den mindre (``flex: 2``), och innerkanten krymper.
 * ``white-space: nowrap`` skulle ha kapat texten; i stallet far
 * primarens etikett radbryta inuti knappen om den maste.
 */
/* Mobil: bredvid varandra nar de RYMS, annars under varandra.
 *
 * Forsta forsoket tvingade dem pa samma rad med ``flex: 3`` och
 * ``flex: 2`` och ``nowrap``. Da krympte LADORNA men inte texten, och
 * etiketten rann ut over pillret.
 *
 * Nu far knapparna sin naturliga bredd och raden bryta. Uppmatt:
 * 216 + 115 + 12 = 343 px, vilket ryms i 350 (innehallsbredden vid
 * 390 px, den vanligaste telefonbredden) men inte i 320. Pa en
 * smalare telefon hamnar de alltsa under varandra — hellre det an en
 * kapad etikett.
 */
@media (max-width: 600px) {
  .nd-scope .hero-cta {
    gap: var(--space-3);
    flex-wrap: wrap;
  }

  .nd-scope .hero-cta .btn {
    padding-inline: var(--space-4);
    font-size: var(--fs-sm);
  }
}

/* ── hero video badge ── */

.nd-scope .hero-play-badge {
  --pb-w: clamp(150px, 44vw, 190px);
  --pb-disc: 38px;
  align-self: flex-start;
  margin: 0;
  width: var(--pb-w);
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--white);
  box-shadow: none;
  display: block;
  cursor: pointer;
  transition: transform .35s var(--ease);
}

.nd-scope .hero-play-badge:hover {
  transform: none;
  box-shadow: none;
}

.nd-scope .hero-play-badge:hover .pb-thumb {
  transform: scale(1.05);
}

.nd-scope .hero-play-badge:hover .pb-label {
  color: var(--gold);
}

.nd-scope .hero-play-badge:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--gold);
  outline-offset: 5px;
}

.nd-scope .hero-play-badge .pb-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  border: var(--white) solid 2px;
  box-shadow:
    5px 4px 9px var(--cocoa-950);
  transition: transform .35s var(--ease);
}

.nd-scope .hero-play-badge .pb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nd-scope .hero-play-badge .pb-disc {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: var(--pb-disc, 40px);
  height: var(--pb-disc, 40px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--play-red);
  color: var(--white);
  border: 1.5px solid color-mix(in srgb, var(--white) 55%, transparent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--cocoa-950) 45%, transparent);
  transition: transform .3s var(--ease);
}

.nd-scope .hero-play-badge .pb-disc::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--play-red) 75%, transparent);
  animation: play-pulse 3.4s cubic-bezier(.2, .6, .3, 1) infinite;
  pointer-events: none;
}

.nd-scope .hero-play-badge .pb-disc svg {
  margin-left: 2px;
}

.nd-scope .hero-play-badge:hover .pb-disc {
  transform: scale(1.1);
}

.nd-scope .hero-play-badge:hover .pb-disc::before {
  animation-play-state: paused;
  opacity: 0;
}

.nd-scope .hero-play-badge .pb-time {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 2px 8px;
  border-radius: var(--r-pill);

  background: color-mix(in srgb, var(--cocoa-950) 76%, transparent);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.nd-scope .hero-play-badge .pb-label {
  display: block;
  padding: var(--space-3) 0 0;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  line-height: var(--lh-snug);
  text-align: center;

  color: var(--white);
  transition: color .3s ease;
}

@media (min-width: 1200px) {
  .nd-scope .hero-play-badge {
    --pb-w: clamp(148px, 12vw, 182px);
    --pb-disc: 34px;
  }

  .nd-scope .hero-play-badge .pb-time {
    right: 5px;
    bottom: 5px;
    padding: 1px 6px;
    font-size: 0.6875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nd-scope .hero-play-badge .pb-disc::before {
    animation: none;
  }
}

@keyframes play-pulse {
  0% {
    transform: scale(1);
    opacity: .55;
  }

  55%,
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

/* ═══ VIDEO MODAL ════════════════════════════════════════════════════════ */

.nd-scope .video-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: var(--panel-pad);
  background: color-mix(in srgb, var(--cocoa-950) 84%, transparent);
  backdrop-filter: blur(16px);
}

.nd-scope .video-modal__frame {
  width: min(1040px, 100%);
  aspect-ratio: 16 / 9;
  background: var(--black);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 28px 80px color-mix(in srgb, var(--black) 46%, transparent);
}

.nd-scope .video-modal__frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.nd-scope .video-modal__close {
  position: fixed;
  top: var(--space-6);
  right: var(--space-6);
  width: var(--control-icon);
  height: var(--control-icon);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--cocoa);
  cursor: pointer;
}

.nd-scope .video-modal__close:hover {
  background: var(--sand);
}

/* ═══ HERO — RESPONSIVE ══════════════════════════════════════════════════ */

@media (min-width: 1200px) and (max-width: 1300px) {
  .nd-scope .hero {
    --hero-copy-cap: calc(72vw - var(--gut));

    --hero-pos-x: var(--hero-desk-x-1300);
  }
}

@media (min-width: 1200px) and (max-width: 1499px) {
  .nd-scope .hero h1 {
    font-size: clamp(2.75rem, 1.6rem + 3.6vw, 4rem);
  }
}

@media (max-width: 999px) {
  .nd-scope .brand {
    font-size: 2rem;
  }

  .nd-scope .brand-logo {
    height: 46px;
  }
}

@media (max-width: 767px) {
  .nd-scope .brand-logo {
    height: 50px;
  }
}

@media (max-width: 1199px) {
  .nd-scope .hero, .nd-scope .hero {
    --hero-face-y: var(--hero-phone-face-y);
    --hero-face-k: var(--hero-phone-face-k);
    --hero-photo-h:
      min(max(100svh, calc(var(--hero-face-y) / var(--hero-face-k))),
          var(--hero-phone-fit));
    --hero-zoom: auto var(--hero-photo-h);
    --hero-pos-x: var(--hero-phone-x);
    --hero-pos-y: var(--hero-phone-y);
    --hero-fade-start: var(--hero-phone-fade-start);
    --hero-fade-end: var(--hero-phone-fade-end);
    --hero-fade-span: calc(var(--hero-fade-end) - var(--hero-fade-start));

    --hero-h1-w: 15ch;
    --hero-lead-w: 44ch;

    /* 35 px sa nasta sektion tittar fram.
       ⚠ KRAVET ANDRADES 2026-10-23: forst skulle knapparna ligga
       KVAR over vikningen, och da var avdraget 159 px (35 + bandets
       124). Emil andrade sig: *"nu vill jag ha dem under. Men lagg
       samtidigt in en scroll-ikon"*. Knapparna far alltsa hamna
       under vikningen och ikonen gor deras jobb. */
    min-height: calc(100svh - 35px);

    background-image: none;
    color: var(--white);
  }

  .nd-scope .hero-copy::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      linear-gradient(180deg,
        color-mix(in srgb, var(--cocoa-900) 80%, transparent) 0,
        color-mix(in srgb, var(--cocoa-900) 84%, transparent) 90px,
        color-mix(in srgb, var(--cocoa-900) 86%, transparent) 200px,
        color-mix(in srgb, var(--cocoa-900) 85%, transparent) 300px,
        color-mix(in srgb, var(--cocoa-900) 82%, transparent) var(--hero-fade-start),
        color-mix(in srgb, var(--cocoa-900) 70%, transparent) calc(var(--hero-fade-start) + var(--hero-fade-span) * 0.22),
        color-mix(in srgb, var(--cocoa-900) 55%, transparent) calc(var(--hero-fade-start) + var(--hero-fade-span) * 0.41),
        color-mix(in srgb, var(--cocoa-900) 38%, transparent) calc(var(--hero-fade-start) + var(--hero-fade-span) * 0.56),
        color-mix(in srgb, var(--cocoa-900) 22%, transparent) calc(var(--hero-fade-start) + var(--hero-fade-span) * 0.70),
        color-mix(in srgb, var(--cocoa-900) 10%, transparent) calc(var(--hero-fade-start) + var(--hero-fade-span) * 0.81),
        color-mix(in srgb, var(--cocoa-900) 3%, transparent) calc(var(--hero-fade-start) + var(--hero-fade-span) * 0.89),
        transparent var(--hero-fade-end)),
      url("/static/img/new-design/hero-portrait-tall.webp");
    background-size: cover, var(--hero-zoom);
    background-position: center, var(--hero-pos-x) var(--hero-pos-y);
    background-repeat: no-repeat, no-repeat;
  }

  .nd-scope .hero h1 {
    max-width: var(--hero-h1-w);
  }

  .nd-scope .hero .lead {
    max-width: var(--hero-lead-w);
  }

  .nd-scope .hero .grid {
    position: relative;
    display: flex;
    flex-direction: column;

    min-height: 0;
    max-width: none;

    align-items: stretch;
  }

  .nd-scope .hero-copy {
    position: relative;
    z-index: 1;

    /* ⛔ DEN HAR RADEN AR DEN SOM STYR HOJDEN PA MOBIL.
       Att bara andra .hero ovan gor INGENTING — uppmatt renderat
       2026-10-23: min-height foll till 417 px medan hojden stod kvar
       pa 667. Tva deklarationer av samma hojd, och den jag skulle ha
       andrat var inte den som gallde. Bada maste folja at. */
    min-height: calc(100svh - 35px);
    max-width: none;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: calc(var(--nav-h) + clamp(var(--space-3), 2.5svh, var(--space-8)) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
    padding-inline: var(--gut);
  }

  .nd-scope .hero h1 {
    font-size: clamp(2.375rem, 1rem + 4.8vw + 1.3svh, 4rem);
    font-weight: 250;
    line-height: var(--lh-heading);
  }

  .nd-scope .hero .lead {
    font-size: clamp(1.0625rem, 0.95rem + 0.55vw + 0.2svh, 1.1875rem);
    line-height: var(--lh-body);
  }

  @media (max-width: 600px) {
    .nd-scope .hero .lead {
      font-size: 1rem;
      max-width: 56ch;
    }

    .nd-scope .hero h1 {
      font-size: clamp(2.25rem, 0.9rem + 4.6vw + 1svh, 3.5rem);
      max-width: 18ch;
    }
  }

  .nd-scope .heart-divider {
    margin-top: var(--space-5);
    margin-bottom: var(--space-3);
  }

  .nd-scope .hero .actions {
    margin-top: auto;
    margin-bottom: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-4);
  }

  .nd-scope .hero-play-badge {
    flex: none;
    min-width: 0;
  }

  .nd-scope .hero .actions .hero-contact-btn {
    flex: none;
  }

  @media (max-width: 600px) {
    .nd-scope .hero-play-badge {
      align-self: center;
    }

    .nd-scope .hero .actions .hero-contact-btn {
      display: none;
    }
  }

}

@media (min-width: 601px) and (max-width: 1199px) and (orientation: landscape) {
  .nd-scope .hero, .nd-scope .hero {
    --hero-zoom: cover;
    --hero-pos-x: var(--hero-tabl-x);
    --hero-pos-y: var(--hero-tabl-y);
  }

  .nd-scope .hero-copy::before {
    background-image:

      linear-gradient(90deg,
        color-mix(in srgb, var(--cocoa-900) 92%, transparent) 0%,
        color-mix(in srgb, var(--cocoa-900) 89%, transparent) 30%,
        color-mix(in srgb, var(--cocoa-900) 85%, transparent) 39%,
        color-mix(in srgb, var(--cocoa-900) 79%, transparent) 43%,
        color-mix(in srgb, var(--cocoa-900) 66%, transparent) 45.5%,
        color-mix(in srgb, var(--cocoa-900) 50%, transparent) 48%,
        color-mix(in srgb, var(--cocoa-900) 33%, transparent) 50.5%,
        color-mix(in srgb, var(--cocoa-900) 17%, transparent) 52.5%,
        color-mix(in srgb, var(--cocoa-900) 6%, transparent) 54%,
        transparent 55.5%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--cocoa-900) 42%, transparent) 0%,
        transparent 24%),
      url("/static/img/new-design/hero.webp");
    background-size: cover, cover, var(--hero-zoom);
    background-position: 0%, 80%, var(--hero-pos-x) var(--hero-pos-y);
  }

  .nd-scope .hero-copy {
    padding-inline: var(--gut);
    padding-top: calc(var(--nav-h) + var(--space-6));
  }

  .nd-scope .hero h1 {
    font-size: clamp(2.75rem, 1.1rem + 6.4vw, 4rem);
    max-width: 15ch;
  }

  .nd-scope .hero .lead {
    max-width: 40ch;
    font-size: 1.125rem;
  }

  .nd-scope .hero-play-badge {
    --pb-w: clamp(236px, 34vw, 300px);
  }

  .nd-scope .hero .actions {
    flex-direction: row;
    align-items: center;
    gap: clamp(var(--space-5), 3vw, var(--space-8));
  }
}

@media (min-width: 601px) and (max-width: 1199px) and (max-height: 560px) and (orientation: landscape) {
  .nd-scope .hero-copy {
    padding-top: calc(var(--nav-h) + var(--space-2));
    padding-bottom: var(--space-2);
  }

  .nd-scope .hero h1 {
    font-size: clamp(1.5rem, 1rem + 2.2vw, 2.125rem);
    max-width: 28ch;
  }

  .nd-scope .hero .lead {
    margin-top: var(--space-1);
    font-size: 0.875rem;
    max-width: 52ch;
  }

  .nd-scope .hero .actions {
    margin-top: var(--space-3);
    gap: var(--space-4);
  }

  .nd-scope .hero-play-badge {
    --pb-w: clamp(132px, 17vw, 165px);
  }
}

@media (max-width: 1199px) {
  .nd-scope .hero-play-badge .pb-label {
    text-shadow:
      0 1px 2px color-mix(in srgb, var(--cocoa-900) 96%, transparent),
      0 0 5px color-mix(in srgb, var(--cocoa-900) 94%, transparent),
      0 0 11px color-mix(in srgb, var(--cocoa-900) 90%, transparent),
      0 0 22px color-mix(in srgb, var(--cocoa-900) 78%, transparent);
  }
}

@media (max-width: 600px) and (orientation: portrait) and (max-height: 720px) {
  .nd-scope .hero, .nd-scope .hero {
    --hero-face-y: var(--hero-phone-face-y-short);
  }

  .nd-scope .hero-play-badge {
    --pb-w: clamp(142px, 38vw, 160px);
  }
}

@media (min-width: 601px) and (max-width: 1199px) and (orientation: portrait) {
  .nd-scope .hero, .nd-scope .hero {
    --hero-face-y: var(--hero-tabp-face-y);
    --hero-face-k: var(--hero-tabp-face-k);
    --hero-photo-h:
      min(max(100svh, calc(var(--hero-face-y) / var(--hero-face-k))),
          var(--hero-tabp-fit));
    --hero-zoom: auto var(--hero-photo-h);
    --hero-pos-x: var(--hero-tabp-x);
    --hero-pos-y: var(--hero-tabp-y);
    --hero-fade-start: var(--hero-tabp-fade-start);
    --hero-fade-end: var(--hero-tabp-fade-end);
    --hero-fade-span: calc(var(--hero-fade-end) - var(--hero-fade-start));

    --hero-h1-w: 20ch;
    --hero-lead-w: 46ch;
  }

  .nd-scope .hero-copy::before {
    background-image:
      linear-gradient(180deg,
        color-mix(in srgb, var(--cocoa-900) 80%, transparent) 0,
        color-mix(in srgb, var(--cocoa-900) 84%, transparent) 90px,
        color-mix(in srgb, var(--cocoa-900) 86%, transparent) 200px,
        color-mix(in srgb, var(--cocoa-900) 85%, transparent) 300px,
        color-mix(in srgb, var(--cocoa-900) 82%, transparent) var(--hero-fade-start),
        color-mix(in srgb, var(--cocoa-900) 70%, transparent) calc(var(--hero-fade-start) + var(--hero-fade-span) * 0.22),
        color-mix(in srgb, var(--cocoa-900) 55%, transparent) calc(var(--hero-fade-start) + var(--hero-fade-span) * 0.41),
        color-mix(in srgb, var(--cocoa-900) 38%, transparent) calc(var(--hero-fade-start) + var(--hero-fade-span) * 0.56),
        color-mix(in srgb, var(--cocoa-900) 22%, transparent) calc(var(--hero-fade-start) + var(--hero-fade-span) * 0.70),
        color-mix(in srgb, var(--cocoa-900) 10%, transparent) calc(var(--hero-fade-start) + var(--hero-fade-span) * 0.81),
        color-mix(in srgb, var(--cocoa-900) 3%, transparent) calc(var(--hero-fade-start) + var(--hero-fade-span) * 0.89),
        transparent var(--hero-fade-end)),
      url("/static/img/new-design/hero-portrait.webp");
  }

  .nd-scope .hero h1 {
    font-size: clamp(3.25rem, 0.9rem + 4.4vw + 1.7svh, 5.25rem);
  }

  .nd-scope .hero .lead {
    font-size: clamp(1.125rem, 0.95rem + 0.7vw + 0.3svh, 1.5rem);
  }
}

.nd-scope .hero .actions .btn {
  --btn-min-h: var(--btn-h-hero);
  padding-inline: var(--space-7);
  font-size: var(--fs-body);
}

@media (min-width: 1200px) {
  .nd-scope .hero-contact-btn {
    display: none;
  }
}

/* ═══ SECTION BANDS ══════════════════════════════════════════════════════ */

.nd-scope .sec {
  padding-block: var(--section-y);
}

.nd-scope .sec--tight-top {
  padding-top: var(--section-y-tight);
}

.nd-scope .sec--featured {
  padding-block: var(--section-y-tight) var(--space-8);
}

.nd-scope .sec--cream {
  background: var(--cream);
}

.nd-scope .sec--cream-2 {
  background: var(--sand);
}

.nd-scope .sec--cocoa {
  background-color: var(--cocoa);
  background-image: var(--grain), radial-gradient(60% 56% at 88% -8%, color-mix(in srgb, var(--gold-glow) 17%, transparent), transparent 66%);
  background-size: 160px 160px, auto;
  background-repeat: repeat, no-repeat;
  color: var(--cream);
}

.nd-scope .sec--tan {
  background: var(--sand);
}

.nd-scope .sec--tan .duvi-text b {
  color: var(--cocoa);
}

.nd-scope .sec--tan .duvi-text p, .nd-scope .sec--tan .duvi-note {
  color: var(--muted);
}

.nd-scope .sec--tan .duvi-mark {
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
}

/* ═══ SPLIT HEADINGS ═════════════════════════════════════════════════════ */

.nd-scope .head-split .kicker+h2, .nd-scope .news-band .kicker+h2, .nd-scope .cta-copy .kicker+h2 {
  margin-top: var(--heading-kicker-gap);
}

.nd-scope .head-split h2 {
  font-size: var(--fs-heading-section);
  margin-bottom: var(--heading-body-gap);
}

.nd-scope .head-split {
  display: block;
  text-align: center;
  max-width: 100%;
  margin-inline: auto;
}

.nd-scope .head-split .sub {
  margin-top: 0;
  max-width: var(--measure-lg);
  margin-inline: auto;
}

.nd-scope #hur .head-split {
  max-width: 100%;
}

.nd-scope #hur .head-split .sub {
  color: var(--muted);
}

.nd-scope #step .head-split h2 {
  color: var(--cocoa);
}

.nd-scope #step .head-split .sub {
  color: var(--muted);
}

/* ═══ STEPS ══════════════════════════════════════════════════════════════ */

.nd-scope .steps {
  margin-top: var(--section-content-gap);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}

.nd-scope .step {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--sand);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--cocoa) 8%, transparent);
  transition: transform 0.3s var(--ease), border-color 0.3s ease;
}

.nd-scope .step:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--gold) 45%, color-mix(in srgb, var(--cocoa) 8%, transparent));
}

.nd-scope .step-media {
  position: relative;
  overflow: hidden;
  flex: none;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.nd-scope .step-media .media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3/2;
  display: block;
  transform: scale(1.01);
  transition: transform .6s var(--ease);
}

.nd-scope .step:hover .step-media .media-img {
  transform: scale(1.05);
}

.nd-scope .step-num {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold);

  color: var(--cocoa);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: var(--lh-tight);
  z-index: 2;
}

.nd-scope .step-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
}

.nd-scope .step-header {
  margin-bottom: var(--space-3);
}

.nd-scope .step-content h3 {
  font-size: var(--fs-card-title);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--cocoa);
  text-wrap: balance;
  hyphens: auto;
  hyphenate-limit-chars: 14 6 6;
}

.nd-scope .step-content p {
  color: var(--muted);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  margin: 0 0 var(--space-5);
}

.nd-scope .step-link {
  margin-top: auto;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 600;
  color: var(--gold-text);
  text-decoration: none;
  transition: color .25s ease;
}

.nd-scope .step-link:hover {
  color: var(--cocoa);
}

@media (max-width: 999px) {
  .nd-scope .steps {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .nd-scope .steps {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-inline: auto;
  }

  .nd-scope .step-media .media-img {
    aspect-ratio: 16/9;
  }
}

/* ═══ SPLIT MEDIA ════════════════════════════════════════════════════════ */

.nd-scope .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap-lg);
  align-items: center;
}

@media (max-width: 900px) {
  .nd-scope .split {
    grid-template-columns: 1fr;
  }

  .nd-scope .split .media {
    order: -1;
  }
}

.nd-scope .split .media {
  position: relative;
}

.nd-scope .split .media .media-img {
  height: auto;
  aspect-ratio: 4/5;
  border-radius: var(--r-xl);
}

.nd-scope .split .media::after {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid color-mix(in srgb, var(--gold) 52%, transparent);
  border-radius: calc(var(--r-xl) + 8px);
  pointer-events: none;
}

.nd-scope #forsakringar .media .media-img {
  aspect-ratio: 43 / 24;
}

@media (min-width: 1200px) {
  .nd-scope #forsakringar {
    /* The photo is a full-bleed background and the cream veil covers the copy
       side. Anchor the veil's edge to the copy column itself so the photo keeps
       growing with the viewport — pinned a fixed distance from the right edge
       it shrank to a sliver on wide screens — but never veil less than the old
       fixed band did at the narrow end of this range. */
    --fx-copy: clamp(360px, 42vw, 460px);
    --fx-copy-end: calc(max(0px, (100% - var(--maxw)) / 2) + var(--gut) + var(--fx-copy));
    --fx-veil: min(calc(var(--fx-copy-end) + var(--space-10)), calc(100% - 700px));
    --fx-fade: clamp(180px, 14vw, 360px);

    position: relative;
    overflow: hidden;
    background-color: var(--cream);
    /* The stops trace an ease (1 - smoothstep) rather than a straight alpha
       ramp: a linear fade leaves a visible crease where it leaves solid cream
       and again where it meets the photo, so ease out of both ends. */
    background-image:
      linear-gradient(90deg,
        var(--cream) 0%,
        var(--cream) var(--fx-veil),
        color-mix(in srgb, var(--cream) 94%, transparent) calc(var(--fx-veil) + var(--fx-fade) * 0.15),
        color-mix(in srgb, var(--cream) 78%, transparent) calc(var(--fx-veil) + var(--fx-fade) * 0.3),
        color-mix(in srgb, var(--cream) 58%, transparent) calc(var(--fx-veil) + var(--fx-fade) * 0.45),
        color-mix(in srgb, var(--cream) 35%, transparent) calc(var(--fx-veil) + var(--fx-fade) * 0.6),
        color-mix(in srgb, var(--cream) 16%, transparent) calc(var(--fx-veil) + var(--fx-fade) * 0.75),
        color-mix(in srgb, var(--cream) 3%, transparent) calc(var(--fx-veil) + var(--fx-fade) * 0.9),
        transparent calc(var(--fx-veil) + var(--fx-fade))),
      url("/static/img/new-design/forsakringar.webp");
    background-position: 0 0, right center;
    background-size: auto, cover;
    background-repeat: no-repeat, no-repeat;
  }

  #forsakringar .wrap.split {
    grid-template-columns: 1fr;
    min-height: clamp(480px, 42vw, 620px);
  }

  #forsakringar .media {
    display: none;
  }

  #forsakringar .wrap.split>div:not(.media) {
    max-width: var(--fx-copy);
  }
}

.split.flip .media {
  order: 2;
}

@media (max-width: 900px) {
  .split.flip .media {
    order: -1;
  }
}

/* ═══ DU / VI ════════════════════════════════════════════════════════════ */

.duvi {
  margin-top: var(--section-content-gap);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto repeat(3, 1fr);
  gap: clamp(var(--space-6), 4vw, var(--space-9));
  align-items: start;
}

.duvi-col {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  gap: 0;
}

.duvi-tag {
  display: inline-block;
  margin-bottom: var(--space-6);
  font-size: var(--fs-caps);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--gold-text);
}

.duvi-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-row: 2 / -1;
  grid-template-rows: subgrid;
  gap: 0;
}

.duvi-step {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding-bottom: var(--space-6);
}

.duvi-mark {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  color: var(--gold-text);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  line-height: var(--lh-tight);
}

.duvi-text b {
  display: block;
  font-family: var(--serif);
  font-size: var(--fs-lead);
  font-weight: 300;
  color: var(--cream);
}

.duvi-text p {
  margin-top: var(--space-1);
  color: var(--cream-mut);
}

.duvi-arrow {
  grid-row: 1 / -1;
  align-self: center;
  display: grid;
  place-items: center;
  color: var(--gold-text);
}

.duvi-foot {
  margin-top: var(--space-9);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.duvi-note {
  color: var(--cream-mut);
}

@media (max-width: 860px) {
  .duvi {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: var(--space-6);
    max-width: 460px;
    margin-inline: auto;
  }

  .duvi-col,
  .duvi-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    grid-row: auto;
  }

  .duvi-steps {
    gap: var(--space-6);
  }

  .duvi-step {
    padding-bottom: 0;
  }

  .duvi-arrow {
    grid-row: auto;
    transform: rotate(90deg);
  }
}

/* ═══ FEATURE LIST ═══════════════════════════════════════════════════════ */

.feature-list {
  margin-top: var(--space-7);
  display: flex;
  flex-direction: column;
}

.feature {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--line);
  align-items: flex-start;
}

.feature:first-child {
  border-top: none;
}

.ck {
  --ck-size: 22px;
  flex: none;
  width: var(--ck-size);
  height: var(--ck-size);
  display: grid;
  place-items: center;
  margin-top: 1px;
  border: 1.5px solid color-mix(in srgb, var(--gold) 65%, transparent);
  border-radius: 50%;
  color: var(--gold);
}

.ck .ico {
  stroke-width: 2.4;
}

.feature .ck {
  --ck-size: var(--avatar-sm);
  margin-top: var(--space-1);
  border-width: 1px;
  background: var(--sand);
}

.feature .ck .ico,
.duvi-mark .ico {
  stroke-width: 2.6;
}

.feature h3 {
  font-family: var(--sans);
  font-weight: 600;
  margin: 0 0 var(--space-2);
  font-size: var(--fs-body);
  margin-bottom: var(--space-1);
}

/* ═══ APP BAND ═══════════════════════════════════════════════════════════ */

.app-band {
  position: relative;
  background-color: var(--sand);

  background-image:
    linear-gradient(270deg,
      color-mix(in srgb, var(--paper) 78%, transparent) 0,
      color-mix(in srgb, var(--paper) 66%, transparent) 34%,
      color-mix(in srgb, var(--paper) 24%, transparent) 52%,
      transparent 64%),
    url("/static/img/new-design/overview.webp");
  background-repeat: no-repeat;
  background-position: 0 0, left center;
  background-size: auto, cover;
  color: var(--cocoa);
}

.app-band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  align-items: center;
  min-height: clamp(560px, 46vw, 780px);
  padding-block: var(--section-y);
}

.app-copy {
  grid-column: 2;
}

.app-copy h2 {
  font-size: var(--fs-heading-section);
  color: var(--cocoa);
}

.app-copy h2 em {
  font-style: normal;
  color: var(--gold-text);
}

.app-rule {
  display: block;
  width: 46px;
  height: 2px;
  margin-block: var(--space-6);
  background: var(--gold);
}

.app-copy .sub {
  max-width: 44ch;
  color: color-mix(in srgb, var(--muted) 60%, var(--cocoa));
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

.app-checks {
  list-style: none;
  margin: var(--space-7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.app-checks li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 500;
  color: var(--cocoa);
}

.app-checks .check {
  flex: none;
  color: var(--gold);
}

.store-badges {
  margin-top: var(--space-9);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 9px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--white) 70%, transparent);
  background: var(--paper);
  color: var(--cocoa);
  text-decoration: none;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--cocoa) 16%, transparent);
  transition: transform .3s var(--ease), box-shadow .3s;
}

.store-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 24px color-mix(in srgb, var(--cocoa) 22%, transparent);
}

.store-badge svg {
  flex: none;
}

.store-badge .sb-small {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
  line-height: var(--lh-snug);
}

.store-badge .sb-big {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: var(--lh-heading);
}

@media (max-width: 1199px) {
  .app-band {
    --app-img-h: clamp(360px, 110vw, 520px);

    background-image: url("/static/img/new-design/overview.webp");
    background-size: auto var(--app-img-h);
    background-position: left -14vw top;

    background-color: var(--sand);
  }

  .app-band::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: var(--app-img-h);
    background: linear-gradient(to bottom, color-mix(in srgb, var(--sand) 0%, transparent) 68%, var(--sand) 97%);
    pointer-events: none;
  }

  .app-band-inner {
    position: relative;
    z-index: 1;
    display: block;
    min-height: 0;
    padding-top: calc(var(--app-img-h) + var(--space-4));
    padding-bottom: var(--section-y);
  }

  .app-copy h2 br {
    display: none;
  }
}

/* ═══ SERVICES ═══════════════════════════════════════════════════════════ */

#tjanster {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--gold) 35%, var(--cream));
  --mask-art-corner:
    radial-gradient(ellipse calc(var(--measure-md) * .86) calc(var(--measure-md) * .58)
      at 50% calc(var(--section-y) + 120px),
      transparent 0 52%, var(--black) 100%);
}

#tjanster::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;

  background: url("/static/img/new-design/price-bg.webp") right center / cover no-repeat;
  opacity: var(--tj-veil, .8);
  -webkit-mask: var(--mask-art-corner);
  mask: var(--mask-art-corner);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  pointer-events: none;
}

@media (max-width: 999px) {
  #tjanster::before {
    inset: 0;
    background-position: 90% 140px;
    background-size: auto 130%;
    opacity: .9;
    --mask-art-corner:
      linear-gradient(to bottom,
        transparent 0 calc(var(--section-y) + 265px),
        var(--black) calc(var(--section-y) + 325px),
        var(--black) calc(100% - 265px),
        transparent calc(100% - 155px)),
      linear-gradient(to left, var(--black) 0 35%, transparent 62%);
  }
}

@media (max-width: 900px) {
  .services-head .sub br {
    display: none;
  }
}

.services-head,
.price-head,
.stat-head {
  position: relative;
  z-index: 1;
  text-align: center;
}

.services-head h2,
.price-head h2,
.stat-head h2 {
  font-size: var(--fs-heading-section);
  margin-top: var(--heading-kicker-gap);
}

.stat-head h2 {
  max-width: var(--measure-2xl);
  margin-inline: auto;
}

.services-head .sub,
.price-head .sub,
.stat-head .sub {
  max-width: var(--measure-md);
  margin-inline: auto;
}

.services-divider,
.price-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-5) auto var(--space-6);
}

.services-divider {
  width: min(360px, 68%);
}

.price-divider {
  width: min(440px, 72%);
}

.services-divider .line,
.price-divider .line {
  flex: 1;
  height: 1px;
  background: var(--gold);
}

.services-divider .line--flip,
.price-divider .line--flip {
  transform: scaleX(-1);
}

.services-divider .dove,
.price-divider .dove {
  flex: none;
  width: 44px;
  height: 34px;
  background: var(--gold);
  -webkit-mask: var(--mask-bird);
  mask: var(--mask-bird);
}

.services-card,
.price {
  background: var(--paper);
  border: 1px solid var(--edge-hi);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-paper);
}

.services-card {
  position: relative;
  z-index: 1;
  margin-top: var(--section-content-gap);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: clamp(var(--space-7), 3.5vw, var(--space-9));
}

.services-col {
  padding-inline: clamp(var(--space-5), 2.5vw, var(--space-7));
}

.services-col:first-child {
  padding-left: 0;
}

.services-col:last-child {
  padding-right: 0;
}

.services-col:where(:not(:first-child)) {
  border-left: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line));
}

.services-col .price-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto var(--space-5);
}

.services-col .price-icon .ico {
  width: 26px;
  height: 26px;
}

.services-col-title {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--gold-text);
  text-align: center;
  margin-bottom: var(--space-5);
}

.services-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.services-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--cocoa);
}

.services-list .ck .ico {
  width: 11px;
  height: 11px;
}

.services-foot {
  position: relative;
  z-index: 1;
  margin-top: clamp(var(--space-8), 4vw, var(--space-9));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.services-foot p {
  font-size: var(--fs-body);
  color: var(--muted);
  max-width: var(--measure-lg);
}

.services-foot b {
  color: var(--gold-text);
}

@media (max-width: 980px) {
  .services-card {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8) 0;
  }

  .services-col:where(:nth-child(odd)) {
    padding-left: 0;
    border-left: none;
  }

  .services-col:where(:nth-child(even)) {
    padding-right: 0;
  }

  .services-col:where(:nth-child(3), :nth-child(4)) {
    padding-top: var(--space-7);
    border-top: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line));
  }

  .services-col:where(:nth-child(4)) {
    border-left: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line));
  }
}

@media (max-width: 640px) {
  .services-card {
    grid-template-columns: 1fr;
  }

  .services-col {
    padding-inline: 0;
    border: none;
  }

  .services-col:not(:first-child) {
    padding-top: var(--space-7);
    margin-top: var(--space-7);
    border-top: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line));
  }
}

.feature p {
  color: var(--muted);
}

/* ═══ QUOTE ══════════════════════════════════════════════════════════════ */

.quote {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: min(760px, 96svh);
  padding-block: clamp(var(--space-10), 12vw, 160px);
  isolation: isolate;
}

.quote-figure {
  position: absolute;
  inset: -8% -4%;
  z-index: -2;
  background: url("/static/img/new-design/hands.webp") center 30% / cover no-repeat;
  filter: grayscale(.4) brightness(.42) contrast(1.02);
  opacity: .5;
  transform: scale(1.06);
  animation: quote-drift 26s ease-in-out infinite alternate;
}

.quote-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(64% 46% at 50% 8%, color-mix(in srgb, var(--gold-glow) 26%, transparent), transparent 70%),
    radial-gradient(120% 90% at 50% 50%, transparent 38%, color-mix(in srgb, var(--cocoa-950) 74%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--cocoa-950) 55%, transparent), color-mix(in srgb, var(--cocoa-950) 30%, transparent) 40%, color-mix(in srgb, var(--cocoa-950) 80%, transparent));
  pointer-events: none;
}

@keyframes quote-drift {
  from {
    transform: scale(1.06) translate3d(0, 0, 0);
  }

  to {
    transform: scale(1.12) translate3d(0, -2%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .quote-figure {
    animation: none;
  }
}

.quote-inner {
  position: relative;
  z-index: 1;
  max-width: 980px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.quote-mark {
  display: block;
  font-family: var(--serif);
  font-size: clamp(120px, 20vw, 240px);
  line-height: .72;
  color: transparent;
  background: linear-gradient(180deg, var(--gold), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  opacity: .9;
  margin-bottom: clamp(-56px, -6vw, -84px);
  filter: drop-shadow(0 8px 26px color-mix(in srgb, var(--black) 35%, transparent));
}

.quote-text {
  margin: 0;
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(1.6rem, 1.05rem + 2.6vw, 3rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking);
  color: var(--cream);
  text-wrap: balance;
}

.quote-text em {
  font-style: italic;
  color: var(--gold);
  white-space: nowrap;
}

.quote-cite {
  margin-top: clamp(var(--space-7), 5vw, var(--space-9));
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.quote-source {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--cream-mut);
}

@media (max-width: 600px) {
  .quote {
    min-height: min(660px, 92svh);
  }

  .quote-cite {
    flex-direction: column;
    gap: var(--space-3);
  }

  .quote-text em {
    white-space: normal;
  }
}

/* ═══ PRICING ════════════════════════════════════════════════════════════ */

#priser {
  position: relative;
  overflow: hidden;
  background-color: var(--cream);
}

.prices {
  position: relative;
  z-index: 1;
  margin: var(--section-content-gap) auto 0;
  max-width: 940px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-6), 3vw, var(--space-8));
  align-items: stretch;
}

@media (max-width: 640px) {
  .prices {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
}

.price {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(var(--space-8), 4vw, var(--space-9)) var(--card-pad) var(--card-pad);
  transition: transform .35s var(--ease), box-shadow .35s;
}

.price:hover {
  transform: translateY(-5px);
  box-shadow:
    var(--edge-paper),
    0 2px 4px color-mix(in srgb, var(--cocoa) 7%, transparent),
    0 12px 22px color-mix(in srgb, var(--cocoa) 13%, transparent);
}

.price-icon {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold);
  background: var(--paper);
  box-shadow:
    inset 2px 3px 1px color-mix(in srgb, var(--white) 95%, transparent),
    inset -2px -3px 2px color-mix(in srgb, var(--cocoa) 7%, transparent),
    0 1px 2px color-mix(in srgb, var(--cocoa) 7%, transparent),
    0 6px 12px color-mix(in srgb, var(--cocoa) 12%, transparent);
  margin-bottom: var(--space-7);
}

.price .tag {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--gold-text);
}

.price .amount {
  font-family: var(--serif);
  font-size: calc(var(--fs-price) * 1.12);
  margin: var(--space-4) 0 0;
  line-height: var(--lh-tight);
  font-feature-settings: "onum";
}

.price .desc {
  margin-top: var(--space-4);
  color: var(--muted);
}

.price-list {
  list-style: none;
  width: 100%;
  margin: var(--space-6) 0 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--gold) 26%, var(--line));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  text-align: left;
}

.price-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--cocoa);
}

.price-list .ck {
  --ck-size: 24px;
}

.price-list .ck .ico {
  width: 12px;
  height: 12px;
}

.price-more {
  margin-top: auto;
  padding-top: var(--space-7);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--gold-text);
  transition: color .25s;
}

.price-more svg {
  transition: transform .3s var(--ease);
}

.price-more:hover {
  color: var(--cocoa);
}

.price-more:hover svg {
  transform: translateX(3px);
}

.price-note {
  position: relative;
  z-index: 1;
  margin: clamp(var(--space-7), 4vw, var(--space-8)) auto 0;
  max-width: 940px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  background: var(--paper);
  border: 1px solid var(--edge-hi);
  border-radius: var(--r-pill);
  padding: var(--space-4) clamp(var(--space-6), 3.5vw, var(--space-9));
  box-shadow:
    var(--edge-paper),
    0 1px 2px color-mix(in srgb, var(--cocoa) 6%, transparent),
    0 6px 14px color-mix(in srgb, var(--cocoa) 8%, transparent);
}

.pn-msg {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.pn-icon {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--gold);
}

.pn-msg p {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--cocoa);
  text-wrap: balance;
}

.pn-msg b {
  color: var(--gold-text);
}

.pn-sep {
  flex: none;
  width: 1px;
  align-self: stretch;
  margin-block: var(--space-3);
  background: var(--line-2);
}

.pn-pay {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--muted);
  font-size: var(--fs-md);
  white-space: nowrap;
}

.pn-pay .klarna {
  display: inline-flex;
  background: var(--klarna-pink);
  border-radius: 7px;
  padding: 7px 11px;
}

.pn-pay .klarna img {
  display: block;
  height: 15px;
  width: auto;
}

@media (max-width: 767px) {
  .price-note {
    flex-direction: column;
    text-align: center;
    border-radius: 28px;
    gap: var(--space-5);
    padding-block: var(--space-6);
  }

  .pn-msg {
    flex-direction: column;
    gap: var(--space-3);
  }

  .pn-sep {
    width: min(220px, 64%);
    height: 1px;
    align-self: center;
    margin-block: 0;
  }
}

/* ═══ CTA ROW ════════════════════════════════════════════════════════════ */

.cta-row {
  position: relative;
  background-color: var(--sand);
  background-image: radial-gradient(60% 78% at 50% 0%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 72%);
  color: var(--cocoa);
  padding-block: calc(var(--section-y) * 1.05);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cta-row .grid {
  max-width: var(--measure-2xl);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  text-align: center;
}

.cta-copy {
  padding-inline: var(--gut);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.brand-icon-lg,
.section-brand-icon {
  width: 72px;
  height: 72px;
  display: block;
  margin: 0 auto var(--space-5);
  -webkit-mask: var(--mask-bird);
  mask: var(--mask-bird);
}

.brand-icon-lg {
  background: var(--gold);
}

.section-brand-icon {
  background: var(--gold);
}

.cta-copy .brand-icon-lg {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-6);
}

.cta-copy h2 {
  font-size: var(--fs-heading-section);
  color: var(--cocoa);
  margin-bottom: 0;
  text-wrap: balance;
}

.cta-copy .heart-divider {
  width: min(300px, 60%);
  margin-block: var(--space-5) var(--space-6);
}

.cta-copy p {
  margin: 0 0 var(--space-8);
  color: var(--muted);
  max-width: var(--measure-md);
  font-size: var(--fs-lead);
}

.cta-copy .actions,
.cta-copy .inline-actions {
  display: flex;
  gap: var(--cluster-gap);
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 600px) {
  .cta-copy .actions {
    flex-direction: column;
    align-items: stretch;
    width: min(320px, 100%);
  }

  .cta-copy .actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* TESTA_DEMO (Emil 2026-10-15): den aerliga raden under knapparna.
 *
 * Egen regel darfor att ``.cta-copy p`` ar brodtext i ``--fs-lead``
 * med ``--space-8`` under sig — raden hade da tagit mer plats an
 * knapparna den beskriver och skjutit ner sidfoten. Har: mindre grad,
 * ingen extra luft under, och samma ``--muted`` som ovrig finstilt.
 *
 * Oprefixad som sina grannar i det har blocket. (Filens tidigare
 * halva ar ``.nd-scope``-prefixad; den har ar inte det, och en
 * prefixad regel bland oprefixade hade sett ut som ett misstag.)
 */
.cta-copy .demo-note {
  margin: var(--space-4) 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  /* --measure-md, inte --measure-sm: det senare FINNS INTE i filen
   * (uppmatt — bara --measure-md och --measure-2xl ar definierade),
   * och en odefinierad variabel ger tyst ingen begransning alls. */
  max-width: var(--measure-md);
  margin-inline: auto;
}

/* ═══ FOOTER ═════════════════════════════════════════════════════════════ */

.footer {
  background-color: var(--cocoa-900);
  background-image: var(--grain), radial-gradient(50% 40% at 12% -8%, color-mix(in srgb, var(--gold-glow) 15%, transparent), transparent 66%);
  background-size: 160px 160px, auto;
  background-repeat: repeat, no-repeat;
  color: var(--cream-mut);
  padding-block: var(--section-y-tight) 0;
  border-top: 1px solid;
  border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold-glow) 38%, transparent), transparent) 1;
}

.footer .top {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-9);
}

@media (max-width: 860px) {
  .footer .top {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

@media (max-width: 520px) {
  .footer .top {
    grid-template-columns: 1fr;
  }
}

.footer .brand {
  color: var(--cream);
}

.footer .about {
  margin-top: var(--space-5);
  max-width: var(--measure-xs);
}

.footer .contact-mini {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}

.footer .contact-mini a {
  display: inline-flex;
  gap: var(--space-3);
  align-items: center;
}

.footer .contact-mini svg {
  color: var(--gold);
}

.footer .contact-mini a:hover {
  color: var(--cream);
}

.footer h2 {
  position: relative;
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 700;
  line-height: var(--lh-body);
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-3);
}

.footer h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 1px;
  background: var(--gold);
  opacity: .75;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--fs-body);
}

.footer ul a:hover {
  color: var(--gold);
}

.footer .bar {
  margin-top: var(--section-y-tight);
  border-top: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
  padding-block: var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
}

.footer .bar-links {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
}

.footer .pay {
  margin-top: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

.footer .pay img {
  box-sizing: border-box;
  height: 34px;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--white) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--white) 8%, transparent);
  border-radius: 4px;
  display: block;
  filter: brightness(0) invert(1);
  margin: 0;
  opacity: 0.7;
  transition: opacity 0.2s, background-color 0.2s;
}

.footer .pay img:hover {
  opacity: 1;
  background-color: color-mix(in srgb, var(--white) 9%, transparent);
}

.footer .pay img[alt="Klarna"] {
  padding: 6px 12px;
}

.footer .pay img[alt="Mastercard"] {
  padding: 7px 12px;
}

.footer .pay img[alt="Visa"] {
  padding: 8px 12px;
}

@media (max-width: 600px) {
  .footer .pay {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .footer .pay img {
    height: 30px;
    flex: 0 1 auto;
    min-width: 0;
    object-fit: contain;
    padding-inline: 8px;
  }
}

.footer .bar a:hover {
  color: var(--cream);
}

/* ═══ SCROLL REVEAL ══════════════════════════════════════════════════════ */

@media (scripting: enabled) {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
  }

  .reveal.in {
    opacity: 1;
    transform: none;
  }

  .reveal.d1 {
    transition-delay: .12s;
  }

  .reveal.d2 {
    transition-delay: .24s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }
}

@media (hover: none) {
  .btn:hover,
  .price:hover,
  .post:hover .thumb .media-img,
  .step:hover .step-media .media-img,
  .feat .media-img {
    transform: none;
  }

  .price:hover {
    box-shadow: none;
    border-color: var(--line);
  }
}

/* ═══ BLOG — HERO & CRUMBS ═══════════════════════════════════════════════ */

.crumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking);
  color: var(--muted);
}

.blog-hero .crumbs {
  color: var(--cream-mut);
}

.blog-hero {
  background-color: var(--cocoa);
  background-image: var(--grain);
  background-size: 160px 160px;
  color: var(--cream);
  position: relative;
  overflow: hidden;
}

.blog-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 80% at 100% 0%, color-mix(in srgb, var(--gold-glow) 20%, transparent), transparent 64%);
  pointer-events: none;
}

.blog-hero .wrap {
  position: relative;
  padding-block: var(--section-y-tight);
}

.blog-hero .crumbs a:hover {
  color: var(--cream);
}

.blog-hero h1 {
  font-size: var(--fs-display-xl);
  color: var(--cream);
  margin-top: var(--space-5);
  letter-spacing: var(--tracking);
}

.blog-hero p {
  margin-top: var(--space-5);
  max-width: var(--measure-md);
  color: var(--cream-mut);
  font-size: var(--fs-lead);
}

/* ═══ BLOG — CATEGORY BAR ════════════════════════════════════════════════ */

.cat-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
  margin-top: var(--space-8);
  position: relative;
}

.cat-bar--light {
  margin-top: var(--space-6);
  margin-bottom: var(--space-9);
}

.cat {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--tracking);
  cursor: pointer;
  white-space: nowrap;
  padding: 0 0 var(--space-2);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  position: relative;
  transition: color .2s;
}

.cat::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s;
}

.cat:hover {
  color: var(--cocoa);
}

.cat.on {
  color: var(--cocoa);
}

.cat.on::after {
  transform: scaleX(1);
}

/* ═══ BLOG — FEATURED CARD ═══════════════════════════════════════════════ */

.feat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: center;
}

@media (max-width: 860px) {
  .feat {
    grid-template-columns: 1fr;
  }
}

.feat .media-img {
  height: auto;
  aspect-ratio: 16/10;
  border-radius: var(--r-lg);
}

.feat .tag-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.feat .pill {
  font-weight: 700;
  color: var(--cocoa);
  background: var(--sand);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-pill);
}

.feat .pill.featured {
  background: var(--cocoa);
  color: var(--cream);
}

.feat h2 {
  font-size: var(--fs-heading-label);
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}

.feat h2+p {
  margin-top: 0;
}

.feat p {
  color: var(--muted);
}

.feat .more {
  margin-top: var(--space-5);
}

/* ═══ BLOG — FÖRFATTARAVATAR (Emil 2026-09-26) ═════════════════ */
/* Flodet visade tidigare roterande standardbilder. De ar borta; identiteten
   bars nu av en liten rund avatar pa den som skrivit inlagget. Samma
   cocoa/cream-cirkel som artikelsidans byline. */

.av--sm {
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  border-radius: 50%;
  font-size: var(--fs-sm);
  line-height: 1;
}

.av--md {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  border-radius: 50%;
  font-size: var(--fs-md);
  line-height: 1;
}

.av--foto {
  /* Portrattet ritas som BAKGRUND, inte som <img> (Emil 2026-09-27).
     object-fit: cover kan bara beskara till kvadrat — den kan inte
     zooma in, och bada de forsta riktiga fotona har huvudet pa ca 40 %
     av bredden. Utan zoom blir ansiktet en flack i en 30 px cirkel.
     Fokuspunkt och zoom satts per person och skrivs som inline-stil;
     varderna har ar bara fallback. */
  display: block;
  background-repeat: no-repeat;
  background-position: 50% 30%;
  background-size: cover;
  aspect-ratio: 1 / 1;
}

/* Kategoripillret satt absolut ovanpa bilden. Utan bild maste det
   tillbaka in i flodet. */
.pill--inline {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-weight: 700;
  color: var(--cocoa);
  background: var(--sand);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking);
}

/* Utan bild har den utvalda artikeln ingen andra kolumn att fylla. */
.feat--noimg {
  grid-template-columns: 1fr;
  max-width: 68ch;
}

/* ═══ BLOG — POST GRID ═══════════════════════════════════════════════════ */

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8) var(--grid-gap);
}

@media (max-width: 900px) {
  .post-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .post-grid {
    grid-template-columns: 1fr;
  }
}

.post {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.post[hidden] {
  display: none;
}

.post .thumb {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
}

.post .thumb .media-img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  transition: transform .5s var(--ease);
}

.post:hover .thumb .media-img {
  transform: scale(1.04);
}

.post .pill {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 2;
  font-weight: 700;
  color: var(--cocoa);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-pill);
}

.post .pill--inline {
  /* .post .pill ar position:absolute — den satt ovanpa kortets bild.
     Utan bild maste pillret tillbaka in i floedet, annars lagger det
     sig over forfattarnamnet. */
  position: static;
  margin-bottom: var(--space-2);
  /* Bakgrunden var nastan genomskinlig for att lasas mot ett foto.
     Mot sidbakgrunden behovs sand, samma som den utvalda artikelns. */
  background: var(--sand);
}

.post .pmeta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* Var space-5 nar kortet hade en bild ovanfor (Emil 2026-09-26). */
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking);
  color: var(--muted);
}

.post h3 {
  font-size: var(--fs-card-title);
  margin-top: var(--space-3);
  transition: color .2s;
}

.post:hover h3 {
  color: var(--gold-text);
}

.post p {
  color: var(--muted);
  margin-top: var(--space-3);
}

.post .more {
  margin-top: var(--space-4);
}

/* ═══ BLOG — SECTION LABEL ═══════════════════════════════════════════════ */

.sec-label {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.sec-label h2 {
  font-size: var(--fs-heading-label);
  white-space: nowrap;
}

.sec-label .rule {
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ═══ NEWSLETTER BAND ════════════════════════════════════════════════════ */

.news-band {
  background: var(--sand);
}

.news-band .wrap {
  padding-block: var(--section-y-tight);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

@media (max-width: 767px) {
  .news-band .wrap {
    grid-template-columns: 1fr;
  }
}

.news-band h2 {
  font-size: var(--fs-heading-feature);
  margin-bottom: var(--heading-body-gap);
}

.news-band p {
  margin-top: 0;
  color: var(--cocoa);
  opacity: .72;
}

.news-form {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.news-form input {
  flex: 1;
  min-width: 200px;
  font: inherit;
  font-size: var(--fs-body);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--white) 72%, transparent);
  color: var(--cocoa);
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.news-form input:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--white);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent);
}

/* ═══ ARTICLE — HERO ═════════════════════════════════════════════════════ */

.art-hero {
  background: var(--cream);
}

.art-hero .wrap {
  padding-block: var(--section-y-tight) var(--section-y-compact);
  max-width: var(--measure-2xl);
}

.art-hero .crumbs a:hover {
  color: var(--cocoa);
}

.art-hero .pill {
  display: inline-block;
  margin-top: var(--space-6);
  font-weight: 700;
  color: var(--cocoa);
  background: var(--sand);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-pill);
}

.art-hero h1 {
  margin-top: var(--space-5);
}

.art-hero .lead {
  margin-top: var(--space-6);
  font-size: var(--fs-lead);
  color: var(--muted);
}

/* ── article byline ── */

.art-byline {
  display: flex;
  align-items: center;
  gap: var(--cluster-gap);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.av {
  flex: none;
  display: grid;
  place-items: center;
  background: var(--cocoa);
  color: var(--cream);
  font-family: var(--serif);
}

.art-byline .av {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  border-radius: 50%;
  font-size: var(--fs-lead);
}

.art-byline b {
  font-size: var(--fs-md);
}

.art-byline .role {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.art-byline .meta {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--muted);
  text-align: right;
}

.art-figure {
  background: transparent;
  /* <figure> har 40px sidmarginal fran webblasarens egen stilmall. Pa
     mobil gjorde den bilden 80px smalare an brodtexten bredvid (255 mot
     335 px vid 375px skarm). Emil 2026-09-26. */
  margin-inline: 0;
}

.art-figure .wrap {
  max-width: var(--measure-xl);
}

.art-figure .media-img {
  height: auto;
  aspect-ratio: 16/9;
  background: transparent;
  border: 0;
  border-radius: var(--r-xl);
}

.art-figure figcaption,
.about-figure figcaption {
  max-width: var(--measure-md);
  margin-top: var(--space-4);
  font-family: var(--serif);
  font-size: var(--fs-md);
  font-weight: 300;
  font-style: normal;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-body);
  color: var(--muted);
}

/* ═══ ARTICLE — BODY ═════════════════════════════════════════════════════ */

.art-body {
  max-width: var(--measure-xl);
  margin-inline: auto;
}

.art-body>*+* {
  margin-top: var(--space-6);
}

.art-body p {
  font-size: var(--fs-lead);
  line-height: var(--lh-prose);
  color: var(--cocoa);
}

.art-body>p:first-of-type::first-letter {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 3.2em;
  line-height: .78;
  float: left;
  padding: .1em .12em .02em 0;
  color: var(--cocoa);
}

.art-body h2 {
  font-size: var(--fs-heading-label);
  margin-top: var(--section-content-gap);
  margin-bottom: var(--heading-body-gap);
}

.art-body h2+p,
.art-body h2+ol,
.art-body h2+ul {
  margin-top: 0;
}

.art-body h3 {
  font-size: var(--fs-card-title);
  margin-top: var(--space-8);
}

.art-body ul,
.art-body ol {
  margin: 0;
  padding-left: var(--space-6);
  color: var(--cocoa);
  font-size: var(--fs-lead);
  line-height: var(--lh-prose);
}

.art-body li+li {
  margin-top: var(--space-3);
}

.art-body a.inline {
  color: var(--cocoa);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

.art-body a.inline:hover {
  color: var(--gold-text);
}

.art-body blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-7);
  border-left: 3px solid var(--gold);
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: var(--lh-snug);
  color: var(--cocoa);
  font-style: normal;
  font-weight: 300;
}

.art-body .callout {
  background: var(--cream);
  border: 1px solid var(--line);
  padding: var(--card-pad);
}

.art-body .callout b {
  font-family: var(--sans);
}

.art-body .callout p {
  margin-top: var(--space-2);
  color: var(--muted);
}

.art-body hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: var(--space-9) 0;
}

/* ═══ ARTICLE — FOOTER ═══════════════════════════════════════════════════ */

.art-foot {
  max-width: var(--measure-xl);
  margin: var(--space-10) auto 0;
  padding-top: var(--space-7);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  align-items: center;
}

.art-tags {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.art-tags span {
  font-size: var(--fs-sm);
  color: var(--muted);
  border: 1px solid var(--line);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-pill);
}

.art-share {
  display: flex;
  gap: var(--space-2);
}

.art-share a {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--cocoa);
  border-radius: 50%;
  transition: background .2s, color .2s, border-color .2s;
}

.art-share a:hover {
  background: var(--cocoa);
  color: var(--cream);
  border-color: var(--cocoa);
}

/* ── article author card ── */

.author-card {
  max-width: var(--measure-xl);
  margin: var(--space-9) auto 0;
  background: var(--cream);
  border: 1px solid var(--line);
  padding: var(--card-pad);
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.author-card .av {
  width: var(--avatar-xl);
  height: var(--avatar-xl);
  font-size: var(--fs-signature);
}

.author-card h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--fs-md);
}

.author-card .role {
  color: var(--gold-text);
  font-weight: 600;
  margin-top: var(--space-1);
}

.author-card p {
  color: var(--muted);
  margin-top: var(--space-3);
}

.related .sec-label {
  margin-bottom: var(--space-8);
}

.no-posts {
  text-align: center;
  color: var(--muted);
  padding: var(--space-8) 0;
}

/* ═══ CONTACT ════════════════════════════════════════════════════════════ */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
  gap: var(--grid-gap-lg);
  align-items: start;
}

.contact-intro h1 {
  font-size: var(--fs-display-lg);
  line-height: var(--lh-compact);
  margin-top: var(--heading-kicker-gap);
}

.contact-intro .sub {
  margin-top: var(--heading-body-gap);
  max-width: var(--measure-lg);
}

.contact-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--card-pad);
  box-shadow: var(--shadow-sm);
}

.contact-panel h2,
.contact-methods h2 {
  font-size: var(--fs-heading-feature);
}

.contact-form .field:first-child {
  margin-top: var(--space-5);
}

.contact-methods {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--grid-gap-lg);
  align-items: start;
}

.contact-methods .kicker+h2 {
  margin-top: var(--heading-kicker-gap);
}

.method-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.method-item {
  min-height: 150px;
  border-top: 1px solid var(--line);
  padding-top: var(--space-5);
}

.method-item b {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-card-title-sm);
}

.method-item span {
  display: block;
  margin-top: var(--space-3);
  color: var(--muted);
}

.method-item[href]:hover span {
  color: var(--gold-text);
}

@media (max-width: 900px) {
  .contact-grid,
  .contact-methods {
    grid-template-columns: 1fr;
  }

  .method-list {
    grid-template-columns: 1fr;
  }
}

/* ═══ FORM FIELDS ════════════════════════════════════════════════════════ */

.field {
  margin-top: var(--space-6);
}

.field label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-body);
  padding: var(--space-4);
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line-2);
  background: var(--white);
  color: var(--cocoa);
  transition: border-color .2s, box-shadow .2s;
}

.field input:hover:not(:focus),
.field select:hover:not(:focus),
.field textarea:hover:not(:focus) {
  border-color: color-mix(in srgb, var(--gold) 45%, var(--line-2));
}

.field textarea {
  min-height: 160px;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 55%, transparent);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent);
}

.btn-block {
  width: 100%;
  margin-top: var(--space-6);
}

/* ═══ PAGE HEROES ════════════════════════════════════════════════════════ */

.about-hero,
.legal-hero {
  position: relative;
  overflow: hidden;
  background: var(--warm-backdrop);
}

.about-hero h1,
.legal-hero h1,
.art-hero h1 {
  font-size: var(--fs-display-lg);
  line-height: var(--lh-compact);
}

/* ═══ LEGAL — HERO ═══════════════════════════════════════════════════════ */

.legal-hero {
  padding-block: calc(var(--nav-h) + var(--space-6)) var(--space-8);
}

/* ─── Hero med bakgrundsbild ───────────────────────────────────────────
   Bilden ligger till hoger och tonar ut at vanster, sa etikett, rubrik
   och ingress star mot ren yta.

   Toningen gors med color-mix mot --cream i stallet for `transparent`.
   `transparent` ar rgba(0,0,0,0), och en toning dit drar mot gratt pa
   mitten — en synlig smutsig rand tvars over hero:n. color-mix behaller
   kulortonen hela vagen.

   Tackningen ar tilltagen med flit: bilderna kommer fran olika kallor
   och kan ha vilken ljushet som helst. Rubriken ska sta lika lasbar mot
   en mork bild som mot en ljus. Darfor ar vanstra halvan helt tack och
   overgangen lang. */
.legal-hero--bild {
  --hero-tack: var(--cream);
  --hero-ut: color-mix(in srgb, var(--cream) 0%, transparent);
  background:
    linear-gradient(
      100deg,
      var(--hero-tack) 0%,
      var(--hero-tack) 46%,
      color-mix(in srgb, var(--cream) 78%, transparent) 62%,
      var(--hero-ut) 88%),
    var(--hero-bild) right center / cover no-repeat,
    var(--warm-backdrop);
}

/* Smala skarmar: ingen plats bredvid texten. Bilden far ligga bakom
   och tonas ned underifran i stallet, sa den anas utan att konkurrera. */
@media (max-width: 860px) {
  .legal-hero--bild {
    background:
      linear-gradient(
        180deg,
        var(--hero-tack) 0%,
        color-mix(in srgb, var(--cream) 88%, transparent) 52%,
        color-mix(in srgb, var(--cream) 70%, transparent) 100%),
      var(--hero-bild) right 22% center / cover no-repeat,
      var(--warm-backdrop);
  }
}

/* Den som bett om mindre rorelse och dekor far den tomma ytan. */
@media (prefers-reduced-motion: reduce) {
  .legal-hero--bild { background: var(--warm-backdrop); }
}

.legal-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
}

.legal-hero .wrap {
  position: relative;
  max-width: var(--measure-xl);
}

.legal-hero h1 {
  margin: var(--space-4) 0 var(--space-5);
}

.legal-hero .sub {
  max-width: 60ch;
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.legal-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.legal-chip svg {
  width: 15px;
  height: 15px;
  color: var(--gold-text);
}

.legal-chip strong {
  color: var(--cocoa);
  font-weight: 600;
}

/* ═══ LEGAL — BODY ═══════════════════════════════════════════════════════ */

.legal-body {
  padding-block: var(--space-8) var(--section-y);
}

.legal-body .wrap {
  max-width: 800px;
  margin-inline: auto;
}

.legal-body .wrap:has(.legal-toc) {
  max-width: 1080px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: calc(var(--nav-h) + var(--space-6));
}

.legal-toc__label {
  font-family: var(--sans);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: var(--space-4);
  padding-left: var(--space-4);
}

.legal-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--line);
}

.legal-toc__list a {
  position: relative;
  display: block;
  padding: var(--space-2) var(--space-4);
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}

.legal-toc__list a:hover {
  color: var(--cocoa);
}

.legal-toc__list a.is-active {
  color: var(--gold-text);
  border-left-color: var(--gold);
  font-weight: 500;
}

.legal-prose {
  color: var(--cocoa);
  line-height: var(--lh-prose);
  max-width: 68ch;
  counter-reset: legal;
}

.legal-section {
  scroll-margin-top: calc(var(--nav-h) + var(--space-6));
  padding-top: var(--space-9);
  margin-top: var(--space-9);
  border-top: 1px solid var(--line);
}

.legal-section:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.legal-section h2 {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.9rem);
  line-height: var(--lh-snug);
  color: var(--cocoa);
  margin: 0 0 var(--space-5);
}

.legal-section h2::before {
  counter-increment: legal;
  content: counter(legal, decimal-leading-zero);
  flex: none;
  font-family: var(--serif);
  font-size: 0.9em;
  color: var(--gold-text);
  opacity: .85;
}

.legal-section h3 {
  font-weight: 500;
  font-size: 1.1875rem;
  color: var(--cocoa);
  margin: var(--space-7) 0 var(--space-2);
}

.legal-prose p {
  margin: 0 0 var(--space-4);
}

.legal-prose ul {
  margin: 0 0 var(--space-5);
  padding-left: 0;
  list-style: none;
}

.legal-prose ul li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
}

.legal-prose ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.legal-prose a {
  color: var(--gold-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--gold) 45%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s ease;
}

.legal-prose a:hover {
  text-decoration-color: var(--gold);
}

.legal-prose strong {
  font-weight: 600;
  color: var(--cocoa);
}

.legal-basis {
  display: flex;
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gold) 7%, var(--cream)) 0%, var(--cream) 100%);
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: var(--lh-body);
}

.legal-basis::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: var(--gold);
  -webkit-mask: var(--mask-scales);
  mask: var(--mask-scales);
}

.legal-basis strong {
  color: var(--cocoa);
}

.legal-card {
  padding: var(--space-6) var(--space-7);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--cream);
  box-shadow: var(--shadow-sm);
}

.legal-card p {
  margin: 0;
  line-height: var(--lh-prose);
}

.legal-cta {
  margin-top: var(--space-9);
  padding: var(--space-8);
  border-radius: 20px;
  background:
    radial-gradient(120% 160% at 0% 0%, var(--sand) 0%, transparent 60%),
    var(--cream);
  border: 1px solid var(--line);
  text-align: center;
}

.legal-cta h2 {
  display: block;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--cocoa);
  margin: 0 0 var(--space-2);
}

.legal-cta h2::before {
  content: none;
}

.legal-cta p {
  color: var(--muted);
  max-width: 42ch;
  margin: 0 auto var(--space-6);
}

.legal-prose .legal-updated {
  margin-top: var(--space-8);
  font-size: var(--fs-sm);
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 900px) {
  .legal-body .wrap {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .legal-toc {
    position: static;
    padding: var(--space-5) var(--space-5) var(--space-4);
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--cream);
  }

  .legal-toc__label {
    padding-left: 0;
  }

  .legal-toc__list {
    border-left: 0;
    columns: 2;
    column-gap: var(--space-6);
  }

  .legal-toc__list a {
    padding: var(--space-2) 0;
    margin-left: 0;
    border-left: 0;
  }

  .legal-toc__list a.is-active {
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .legal-toc__list {
    columns: 1;
  }
}

/* ═══ ABOUT ══════════════════════════════════════════════════════════════ */

.about-hero {
  padding-block: var(--section-y-tight) var(--space-8);
  text-align: center;
}

.about-hero h1 {
  max-width: var(--measure-2xl);
  margin: var(--heading-kicker-gap) auto var(--heading-body-gap);
}

.about-hero h1 em {
  color: var(--gold-text);
}

.about-hero .sub {
  max-width: var(--measure-lg);
  margin-inline: auto;
}

.story-quote {
  margin-top: var(--space-6);
  padding-left: var(--space-5);
  border-left: 2px solid color-mix(in srgb, var(--gold) 55%, transparent);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--cocoa);
  text-wrap: balance;
}

.about-col {
  max-width: var(--measure-lg);
  margin-inline: auto;
}

.about-col> *+* {
  margin-top: var(--section-content-gap);
}

.about-block h2 {
  font-size: var(--fs-heading-label);
  line-height: var(--lh-heading);
  margin-bottom: var(--heading-body-gap);
}

.about-block h2::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin-bottom: var(--space-5);
  background: var(--gold);
}

.about-block p {
  line-height: var(--lh-prose);
  color: var(--cocoa);
}

.about-block p+p {
  margin-top: var(--space-5);
}

.about-block--creed {
  padding-left: var(--space-7);
  border-left: 2px solid color-mix(in srgb, var(--gold) 55%, transparent);
}

.about-block--creed h2::before {
  content: none;
}

.about-block--creed p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: var(--lh-prose);
  color: var(--cocoa);
}

.about-block .feature-list {
  margin-top: var(--space-6);
}

.about-block .feature p {
  line-height: var(--lh-prose);
}

.about-block .feature b {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--gold-text);
}

@media (max-width: 600px) {
  .about-block--creed {
    padding-left: var(--space-5);
  }
}

.about-figure {
  margin-inline: 0;
  margin-bottom: 0;
}

.about-col> .about-figure {
  margin-top: var(--space-8);
}

.about-figure .media-img {
  height: auto;
  aspect-ratio: 3 / 2;
  border: 0;
  border-radius: var(--r-xl);
}

/* ═══ STEGEN ═════════════════════════════════════════════════════════════ */

.steg-index {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.steg-index a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--cocoa);
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  transition: border-color .25s ease, background .25s ease;
}

.steg-index a:hover {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 18%, transparent);
}

.steg-index a b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: var(--lh-tight);
  color: var(--gold-text);
}

.steg-detail {
  padding-block: var(--section-y-tight);
}

.steg-detail-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.steg-detail-num {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);

  color: var(--cocoa);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: var(--lh-tight);
}

.steg-detail p {
  line-height: var(--lh-prose);
}

.steg-detail p+p {
  margin-top: var(--space-5);
}

.steg-detail p+.story-quote {
  margin-top: var(--space-6);
}

.steg-detail .media .media-img {
  aspect-ratio: 4/3;
}

@media (max-width: 900px) {
  .steg-detail .media .media-img {
    aspect-ratio: 3/2;
  }
}


/* MAIN_NAV_CLEARANCE_v1 (Emil 2026-08-24): fixed nav overlappar content pa
   sidor som inte har hero (om-oss, priser, blogg osv). Standardpadding pa
   main. Landing-hero far behalla noll padding via :has()-check. */
.nd-scope main {
  padding-top: calc(var(--nav-h) + var(--space-6));
}
@supports selector(:has(*)) {
  .nd-scope main:has(> .hero) {
    padding-top: 0;
  }
}

/* ═══ BROWN_STATUSBAR_v1 (Emil 2026-08-24) ═══════════════════════════════
   Safe-area strip above the ND nav must be dark brown so that white/light
   system status-bar icons contrast against it (previously cream, clashed
   with dark iOS/Android status icons).
   - Web: only the safe-area strip is painted brown via ::before overlay.
   - Native (html.is-native-app): whole nav bg is brown so the statusbar
     blends seamlessly with the nav (call StatusBar.setStyle Light on client).
   Uses --cocoa-900 (#2a1c0e) — closest existing token to the requested
   ~#3A2416 dark-brown accent. Nav is already position:fixed so ::before
   anchors correctly. */
.nd-scope .nav {
  padding-top: env(safe-area-inset-top, 0px);
}
.nd-scope .nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--cocoa-900, #2a1c0e);
  z-index: 1;
  pointer-events: none;
}
.nd-scope .nav .wrap {
  position: relative;
  z-index: 2;
}
html.is-native-app .nd-scope .nav {
  background: var(--cocoa-900, #2a1c0e);
}
/* ═══ /BROWN_STATUSBAR_v1 ═══════════════════════════════════════════════ */


/* ═══ NOTIFBELL_v1 (Emil 2026-08-24) ═══════════════════════════════════════
   Notis-klocka i ND-header (portad från gamla base.html-headern). Ligger
   direkt före .nav-toggle (burger) inne i .nav-right. Storlek/färg matchar
   burger (44x44, currentColor via --nav-fg). Röd badge top-right med antal
   olästa (fylls av _notification_center.html-JS). Döljs i native-appen
   (Capacitor) eftersom appen har sin egen native notis-hantering.
*/
.nd-scope .nd-notif-btn,
.nd-scope .nd-ai-btn {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nav-fg);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, color .2s ease;
  flex-shrink: 0;
}
.nd-scope .nd-notif-btn:hover,
.nd-scope .nd-ai-btn:hover {
  color: var(--gold-text, var(--nav-fg));
  background: rgba(0, 0, 0, 0.05);
}
.nd-scope .nav.scrolled .nd-notif-btn:hover,
.nd-scope .nav.scrolled .nd-ai-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}
.nd-scope .nd-notif-btn:active,
.nd-scope .nd-ai-btn:active {
  transform: scale(0.96);
}
.nd-scope .nd-notif-btn svg,
.nd-scope .nd-ai-btn svg {
  display: block;
  width: 22px;
  height: 22px;
  stroke-width: 1.6;
  pointer-events: none;
}
.nd-scope .nd-notif-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
/* NOTIFBELL_NATIVE_SHOW_v1 (Emil 2026-08-24): Emil vill visa bell:en
   aven pa native. Native-navens bakgrund ar morkbrun (BROWN_STATUSBAR_v1)
   sa bell:en behover ljusare farg — speglar BURGER_BROWNFIX_v1 som satter
   burgern till var(--gold). SVG har stroke="currentColor" sa color racker.
   (Tidigare: display:none pa native — borttaget.) */
html.is-native-app .nd-scope .nd-notif-btn,
html.is-native-app .nd-scope .nd-ai-btn { color: var(--gold) !important; }
html.is-native-app .nd-scope .nd-notif-btn svg,
html.is-native-app .nd-scope .nd-ai-btn svg { stroke: currentColor; }
/* ═══ /NOTIFBELL_v1 ═══════════════════════════════════════════════════════ */


/* BURGER_BROWNFIX_v1 (Emil 2026-08-24): NAV_ALWAYS_DARK_v1 (ovan) gjorde
   burgaren morkbrun oavsett scroll-lage. Nar nav-bakgrunden ar brun
   (html.is-native-app, BROWN_STATUSBAR_v1 safe-area-strip, eller mobila
   sidor med brun body-topp) forsvinner burgaren helt (brun pa brun).
   Fix: gyllene burger nar nav ar transparent/brun (default), morkbrun
   nar nav ar cream/paper (scrolled), morkbrun nar mobilmenyn ar oppen
   (mobile-menu-bakgrunden ar paper). Samma for --nav-mark (svg-ikoner
   som notis-bell). */
.nd-scope .nav .nav-toggle {
  color: var(--gold);
}
.nd-scope .nav.scrolled .nav-toggle {
  color: var(--cocoa-900);
}
.nd-scope .nav .nav-toggle[aria-expanded="true"] {
  color: var(--cocoa-900);
}
.nd-scope .nav:not(.scrolled) {
  --nav-mark: var(--gold);
}
html.is-native-app .nd-scope .nav .nav-toggle {
  color: var(--gold);
}
html.is-native-app .nd-scope .nav {
  --nav-mark: var(--gold);
}
/* /BURGER_BROWNFIX_v1 */



/* ═══ CMSBRACKET 2026-08-24 (Emil) ═════════════════════════════════════════
   Fix for horizontal overflow on /integritetspolicy (and other legal-body
   pages) when CMS content contains long words/urls or wide tables.
   Constrain the prose block plus its descendants to the container width,
   break long words, and let tables scroll internally instead of pushing the
   whole page sideways. */
.legal-body .legal-prose,
.legal-body .legal-prose * {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.legal-body .legal-prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.legal-body .legal-prose img,
.legal-body .legal-prose video,
.legal-body .legal-prose iframe {
  max-width: 100%;
  height: auto;
}

/* AIBTN_v1 (Emil 2026-08-25): AI-chatt-knapp .nd-ai-btn mirrors .nd-notif-btn
   (see comma-list ovan). Enda skillnaden: stroke-width 2 vs 1.6 for att
   matcha Lucide message-square-ikonens optiska tyngd. */
.nd-scope .nd-ai-btn svg { stroke-width: 2; }

/* ═══ AIBTN_v2 (Emil 2026-08-25) ═══════════════════════════════════════════
   Uppdaterar AI-chatt-triggern (bade header #pek-ai-btn/.nd-ai-btn OCH
   flytande #ai-support-fab) sa den matchar gamla designens badge/pill-look:
   person-avatar + gron online-prick, brun bakgrund, gyllene accent, cream
   text. v1 var en plain Lucide message-square utan avatar/prick.
   ────────────────────────────────────────────────────────────────────── */

/* Header-knappen behover overflow:visible sa green-dot far sticka ut
   utanfor 44x44-boxen (annars klipps den av border-radius:999px). */
.nd-scope .nd-ai-btn { overflow: visible; }

/* Person-avatar-SVG: fyller nastan hela 44x44-knappen (28x28) sa
   den lasas som en avatar, inte som en linjefigur. */
.nd-scope .nd-ai-btn svg {
  width: 28px;
  height: 28px;
  stroke: none;
}

/* Gron aktiv-prick i overkant-hoger (samma pattern som gamla
   .chat-header-online-dot). Border matchar nav-bg sa den ser ut som
   den sitter ovanpa knappen: cream nar scrolled (paper nav), cocoa
   annars (transparent/brun nav). */
.nd-scope .nd-ai-btn .nd-ai-online-dot {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--cocoa-900, #2a1c0e);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.nd-scope .nav.scrolled .nd-ai-btn .nd-ai-online-dot {
  border-color: var(--cream, #F2EBE1);
}
html.is-native-app .nd-scope .nd-ai-btn .nd-ai-online-dot {
  border-color: var(--cocoa-900, #2a1c0e);
}

/* ── FAB (floating) — pill/badge med avatar + text + gron prick ─────────
   OBS: #ai-support-fab ligger UTANFOR .nd-scope (renderas i
   base.html-body eller via _ai_support_widget.html direkt i body).
   Selektorn ar darfor oskopad — ID:t racker for att undvika lackage. */
#ai-support-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10040;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 20px 6px 6px;
  border-radius: 999px;
  background: var(--cocoa-900, #2a1c0e);
  color: var(--cream, #F2EBE1);
  border: 2px solid var(--gold, #cda765);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  -webkit-tap-highlight-color: transparent;
}
#ai-support-fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.34);
  background: var(--cocoa, #46321c);
}
#ai-support-fab:active { transform: translateY(0); }
#ai-support-fab:focus-visible {
  outline: 2px solid var(--gold, #cda765);
  outline-offset: 3px;
}
#ai-support-fab .ai-fab-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold, #cda765) 32%, var(--cream, #F2EBE1));
  color: var(--cocoa-900, #2a1c0e);
  box-shadow: inset 0 0 0 1.5px var(--gold, #cda765);
  flex-shrink: 0;
}
#ai-support-fab .ai-fab-avatar svg {
  width: 24px;
  height: 24px;
  display: block;
}
#ai-support-fab .ai-fab-label {
  white-space: nowrap;
  font-family: 'Playfair Display', Georgia, serif;
}
#ai-support-fab .ai-fab-dot {
  position: absolute;
  bottom: -4px;
  right: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--cocoa-900, #2a1c0e);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
/* Mobile: knappen kan bli for bred pa smala skarmar — dolj text under
   400px och gor knappen kompakt cirkulr istallet. */
@media (max-width: 400px) {
  #ai-support-fab {
    padding: 6px;
    gap: 0;
  }
  #ai-support-fab .ai-fab-label { display: none; }
  #ai-support-fab .ai-fab-dot { right: -2px; bottom: -2px; }
}
/* ═══ /AIBTN_v2 ═══════════════════════════════════════════════════════════ */


/* AIBTN_v3 (Emil 2026-08-25): support-agent-v2.gif fyller 44x44-knappen
   som rund avatar. Ersatter tidigare inline person-SVG (AIBTN_v2). Rund
   maskning via border-radius:50%; object-fit:cover garanterar att gif:en
   inte deformeras oavsett kallformat. */
.nd-scope .nd-ai-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  pointer-events: none;
}

/* FABHIDE_v3 — FAB hidden on all breakpoints; header AI icon is the only entry point */
#ai-support-fab { display: none !important; }

/* "Visste du att" + besparingen bredvid (Emil 2026-09-21) */
.stat-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
.stat-save {
  position: relative;
  z-index: 1;
  text-align: center;
}
.stat-save-lead {
  font-size: 1.25rem;
  line-height: 1.5;
  max-width: var(--measure-md);
  margin: 0 auto var(--space-4);
}
.stat-save .sub {
  max-width: var(--measure-md);
  margin-inline: auto;
}
@media (max-width: 900px) {
  .stat-pair {
    grid-template-columns: 1fr;
  }
}

/* ═══ Jämförelseguiden (2026-09-21) ═══
   Återanvänder ADMINISTRATION-kortets klasser (.services-card, .price-icon,
   .services-col-title, .services-list). Här finns bara det nya: en spalt,
   scenen där panelerna byts, och övertoningen. */
.services-card--single {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin-inline: auto;
}
.services-card--single .services-col {
  padding-inline: 0;
  border: none;
}
.jg-sektion { padding-block: clamp(var(--space-8), 5vw, var(--space-10)); }
.jg-sektion .services-card { margin-top: 0; }
.jg-intro {
  text-align: center;
  max-width: 520px;
  margin: 0 auto var(--space-6);
  color: var(--cocoa);
  line-height: var(--lh-body);
}
.jg:not(.js-aktiv) .jg-scen { display: none; }
.jg.js-aktiv .jg-fallback { display: none; }

.jg-topp {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  min-height: 32px;
}
.jg-tillbaka {
  background: none;
  border: 0;
  padding: 6px 0;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--gold-text);
  cursor: pointer;
  white-space: nowrap;
}
/* Behåller sin plats när den är dold, så stapeln inte hoppar i sidled. */
.jg-tillbaka[hidden] { display: inline-block; visibility: hidden; }
.jg-stapel {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--gold) 18%, var(--line));
}
.jg-stapel-fyll {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width .35s ease;
}

/* Alla paneler i samma rutnätscell: kortet blir lika högt som den
   högsta frågan och hoppar inte mellan stegen. */
.jg-paneler {
  display: grid;
  transition: height .35s ease;
}
.jg-panel {
  grid-area: 1 / 1;
  /* Knapparna i botten: de ligger på samma höjd i varje fråga, oavsett
     hur lång frågan är, och flyttar sig aldrig under fingret. */
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  text-align: center;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.jg-panel.aktiv {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease .1s, visibility 0s;
}
.jg-fraga {
  font-family: var(--serif);
  font-size: var(--fs-lg);
  line-height: 1.3;
  margin: 0 0 var(--space-3);
  outline: none;
}
.jg-hjalp {
  max-width: 540px;
  margin: 0 auto var(--space-6);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: color-mix(in srgb, var(--cocoa) 82%, transparent);
}
.jg-knappar {
  margin-top: auto;
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}
.jg-knapp { min-width: 132px; }

.jg-resultat { text-align: left; }
.jg-resultat .jg-fraga { text-align: center; }
.jg-sammanfattning { text-align: center; margin: 0 0 var(--space-4); }
.jg-del {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--gold-text);
  margin: var(--space-6) 0 var(--space-3);
}
.jg-lista b { display: block; }
.jg-lista-text { display: block; }
.jg-not {
  display: block;
  margin-top: 2px;
  font-size: .9em;
  color: color-mix(in srgb, var(--cocoa) 75%, transparent);
}
.jg-sarkull {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--gold) 9%, var(--paper));
  line-height: var(--lh-body);
}
.jg-sarkull .jg-del { margin-top: 0; }
.jg-pekunia { margin-bottom: 0; }
.jg-tjanster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  text-align: left;
}
.jg-tjanst-rad,
.jg-summa-rad {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.jg-pris { white-space: nowrap; }
.jg-summa {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line));
}
.jg-uppskattning {
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: color-mix(in srgb, var(--cocoa) 82%, transparent);
}
.jg-cta {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: var(--space-5);
}
@media (max-width: 640px) {
  .jg-knappar .jg-knapp { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .jg-panel, .jg-panel.aktiv, .jg-paneler, .jg-stapel-fyll { transition: none; }
}

/* Tre priskort (förrättningspersoner, 2026-09-21): tre spalter på bred
   skärm, två på mellanbred, en på mobil som förut. */
.prices.prices--tre {
  max-width: 1180px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px) {
  .prices.prices--tre { grid-template-columns: 1fr 1fr; max-width: 940px; }
}
@media (max-width: 640px) {
  .prices.prices--tre { grid-template-columns: 1fr; max-width: 480px; }
}

/* Jämförelseguiden, resultatet (2026-09-21): uppmaningen att svara på
   frågorna döljs när svaret har kommit; jämförelsen med juristbyrå sist. */
.jg.jg--resultat .jg-intro { display: none; }
.jg-jamfor {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--gold) 9%, var(--paper));
}
.jg-jamfor .jg-del { margin-top: 0; }
.jg-jamfor-tabell { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.jg-jamfor-tabell th, .jg-jamfor-tabell td {
  padding: var(--space-2) 0;
  text-align: right;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line));
}
.jg-jamfor-tabell th:first-child, .jg-jamfor-tabell td:first-child { text-align: left; }
.jg-jamfor-tabell th { font-weight: 600; color: var(--gold-text); }
.jg-jamfor-summa td { font-weight: 700; border-bottom: none; }
.jg-jamfor .jg-not { margin-top: var(--space-3); }

/* Jämförelseguiden: hopfällda moment (2026-09-21). Rubrik och "Läs mer"
   på samma rad; texten fälls ut med samma övertoning som frågorna. */
.jg-moment { gap: var(--space-2); }
.jg-moment-kropp { flex: 1; min-width: 0; }
.jg-moment-rad {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.jg-mer {
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 4px 0;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--gold-text);
  cursor: pointer;
  white-space: nowrap;
}
.jg-mer:hover { text-decoration: underline; }
.jg-mer:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.jg-detalj {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .25s ease, opacity .25s ease;
}
.jg-detalj > div { overflow: hidden; }
.jg-detalj.oppen { grid-template-rows: 1fr; opacity: 1; }
.jg-detalj.oppen > div { padding-top: var(--space-1); }
@media (prefers-reduced-motion: reduce) {
  .jg-detalj { transition: none; }
}

/* Rutnätsobjekt krymper annars inte under sitt bredaste innehåll — i mobil
   sköt jämförelsetabellen kortet utanför skärmen (mätt 403 px på 375). */
.services-card--single .services-col, .jg-panel { min-width: 0; }
@media (max-width: 640px) {
  .jg-jamfor { padding: var(--space-4); }
  .jg-jamfor-tabell { font-size: .8rem; }
  .jg-jamfor-tabell th:not(:first-child), .jg-jamfor-tabell td:not(:first-child) { padding-left: var(--space-2); }
}

/* Förbehållet under prisjämförelsen (2026-09-21): liten, dämpad fotnot
   med asterisk. Dämpningen är genomskinlig kakao, avvägd så att den blandade
   färgen mot rutans bakgrund håller WCAG AA för liten text (≥ 4,5:1). */
.jg-fotnot {
  margin: var(--space-3) 0 0;
  font-size: .75rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--cocoa) 78%, transparent);
}
.jg-fotnot-tecken { font-size: .75em; margin-left: 1px; }

/* Jämförelseguiden, luft och rytm (2026-09-21). Sidans typografiåterställning
   (.nd-scope h1–h4 / .nd-scope p { margin: 0; … }) väger tyngre än en ensam
   klass, så guidens marginaler och etikettens typsnitt slog aldrig igenom.
   Allt här är därför förankrat i .nd-scope .jg. Samma steg som resten av
   sidan: 40 px mellan grupper (32 i mobil), 16 px från etikett till innehåll,
   etiketten i samma stil som sidans kicker. */
.nd-scope .jg .jg-intro { margin: 0 auto var(--space-6); }
.nd-scope .jg .jg-fraga { margin: 0 0 var(--space-3); }
.nd-scope .jg .jg-hjalp { margin: 0 auto var(--space-6); }
.nd-scope .jg .jg-resultat .jg-fraga { margin-bottom: var(--space-2); }
.nd-scope .jg .jg-sammanfattning { margin: 0; line-height: var(--lh-body); }
.nd-scope .jg .jg-del {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  letter-spacing: var(--tracking-caps);
  line-height: 1.4;
  margin: var(--space-8) 0 var(--space-4);
}
.nd-scope .jg .jg-sarkull .jg-del,
.nd-scope .jg .jg-jamfor .jg-del { margin-top: 0; }
.nd-scope .jg .jg-uppskattning { margin: var(--space-5) 0 0; }
.nd-scope .jg .jg-fotnot { margin: var(--space-3) 0 0; }
/* Momentraderna: mer andrum mellan raderna, så att en rubrik som bryts på
   två rader inte smälter ihop med nästa rad. Radavståndet är sidans brödtext. */
.nd-scope .jg .jg-moment { gap: var(--space-4); }
@media (max-width: 640px) {
  .nd-scope .jg .jg-del { margin-top: var(--space-7); }
  .nd-scope .jg .jg-moment { gap: var(--space-3); }
}

.jg-jamfor-tabell .jg-ingar { font-style: italic; white-space: normal; }
@media (max-width: 640px) {
  /* Byråkolumnen får brytas och långa tjänstenamn avstavas — annars stack
     tabellen ut ur rutan i mobil (302 px i 238). */
  .jg-jamfor-tabell th:last-child,
  .jg-jamfor-tabell td:last-child { white-space: normal; }
  .jg-jamfor-tabell td:first-child { hyphens: auto; -webkit-hyphens: auto; }
}

/* ═══════════════════════════════════════════════════════════════════
   Kontaktsidan och Vanliga frågor (Emil 2026-09-28)
   ───────────────────────────────────────────────────────────────────
   Formgivning av CMS-innehåll, scopad på sidans slug. Texten i CMS:et
   är orörd — det är bara utseendet som ändras här. Inga nya färger:
   allt kommer ur variablerna högst upp i filen.
   ═══════════════════════════════════════════════════════════════════ */

/* Legal-prosan ar satt pa 68ch — en lasbredd for lopande avtalstext.
   De har tva sidorna ar inte lopande text utan block och rader, och blir
   for smala i den maten. Bredare mat, men fortfarande med lasbar radlangd
   pa brodtexten (den begransas per element nedan). */
.nd-scope .cms--kontakt,
.nd-scope .cms--vanliga-fragor { max-width: 900px; }

/* Det som faktiskt satter bredden ar .legal-body .wrap (800px med 64px
   luft = 672px innehall). :has() later oss vidga den for just de har tva
   sidorna utan att rora integritetspolicy och villkor, som ar lopande
   text och mar bra av den smalare maten. */
.nd-scope .legal-body .wrap:has(.cms--kontakt),
.nd-scope .legal-body .wrap:has(.cms--vanliga-fragor) { max-width: 1040px; }

/* ── Kontakt: ett block per kanal, med ikon i en rund cirkel ────────── */

.nd-scope .cms--kontakt > p:first-child {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.55;
  color: var(--cocoa);
  max-width: 42em;
  margin: 0 0 var(--space-11);
}

/* Rubriken bär blocket: ikonen ligger i en cirkel till vänster, och
   brödtexten under dras in lika mycket så kanten blir rak. */
.nd-scope .cms--kontakt h2 {
  position: relative;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.45rem, 2vw, 1.8rem);
  line-height: 1.2;
  color: var(--cocoa);
  margin: var(--space-11) 0 var(--space-3);
  padding-left: 88px;
  min-height: 62px;
  display: flex;
  align-items: center;
}

.nd-scope .cms--kontakt h2:first-child { margin-top: 0; }

/* Chattens badge: ett litet piller i sandtonen med en fargad prick.
   Pricken bar besked om oppet/stangt, inte hela pillret — en helrod
   etikett hade skrikit pa en sida som annars ar lugn. */
.nd-scope .cms--kontakt .chatt-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: var(--space-3);
  padding: 4px 11px 4px 9px;
  border-radius: var(--r-pill);
  background: var(--sand);
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
  /* Rubriken ar serif i stor grad; badgen ska inte folja med upp. */
  line-height: 1.2;
}
.nd-scope .cms--kontakt .chatt-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
.nd-scope .cms--kontakt .chatt-badge--oppen i { background: var(--status-gron); }
.nd-scope .cms--kontakt .chatt-badge--stangd i { background: var(--status-rod); }

/* Lagesraden: en rad, inte ett stycke. Flex sa delarna bryter snyggt
   pa telefon i stallet for att dela sig mitt i ett klockslag. */
.nd-scope .cms--kontakt p.chatt-lage {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
  margin-top: var(--space-3);
  font-size: 0.92rem;
  color: var(--muted);
}
.nd-scope .cms--kontakt p.chatt-lage > * + *::before {
  content: '·';
  margin-right: var(--space-3);
  color: var(--line-2);
}
.nd-scope .cms--kontakt p.chatt-lage > span:first-child { font-weight: 600; }
/* Lanken ar en vag vidare, inte en rubrik — den ska inte fetstilas som
   ovriga lankar i brodtexten pa den har sidan. */
.nd-scope .cms--kontakt p.chatt-lage a {
  font-weight: 500;
  color: var(--gold-text);
}

/* Knappen i chattstycket (Emil 2026-10-08). Besokaren ar redan pa
   kontaktsidan — att skicka henne vidare for att borja chatta ar ett
   steg for mycket, sa knappen oppnar widgeten dar hon star.

   FARGERNA AR SAJTENS EGNA TOKENS. Forsta versionen anvande --ink och
   --paper. --ink finns inte: bakgrunden blev genomskinlig, ramen 0 px,
   och --paper ar #fbf6ea — alltsa gradde pa gradde. Knappen var
   OSYNLIG, och den hade layout sa bade is_visible() och alla
   renderingsprov sa att den fanns. Den syntes bara pa en skarmbild.
   Kontrollera nya variabelnamn mot en levande sida.

   Samma brun som widgetens egen flytknapp (--cocoa = #46321c), sa de
   tva ingangarna till chatten ser ut att hora ihop.

   Ar chatten STANGD renderas ett <a> till kontaktformularet med samma
   klass: samma plats i stycket och samma vag vidare, darfor samma
   form och inga elementselektorer. */
/* Indragningen i det har avsnittet ar POSITIONELL: h2 + p ger 88 px,
   h2 + p + p ger 88 px, och dar tar kedjan slut. Knapp-raden ar den
   TREDJE paragrafen och fick darfor 0 — den hangde ut till vanster
   under ikonen medan allt annat var indraget. Syntes bara pa en
   skarmbild; alla matt sa att elementet fanns och var synligt.

   Varning for nasta person: en FJARDE rad i avsnittet far samma
   problem. Rannilen borde vara en klass och inte en position. */
.nd-scope .cms--kontakt p.chatt-knapp-rad {
  padding-left: 88px;
  margin-top: var(--space-4);
}
.nd-scope .cms--kontakt .chatt-knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-h);
  padding: 0 24px;
  border-radius: var(--r-pill);
  border: 1px solid var(--cocoa);
  background: var(--cocoa);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.nd-scope .cms--kontakt .chatt-knapp:hover {
  background: var(--cocoa-900);
  border-color: var(--cocoa-900);
}
.nd-scope .cms--kontakt .chatt-knapp:focus-visible {
  outline: 2px solid var(--cocoa);
  outline-offset: 3px;
}
/* Stangt: samma form, dovare ton. Den ska inte se ut som den oppnar
   chatten nar den inte gor det. */
.nd-scope .cms--kontakt a.chatt-knapp {
  background: transparent;
  color: var(--cocoa);
}
.nd-scope .cms--kontakt a.chatt-knapp:hover {
  background: var(--sand);
  border-color: var(--cocoa);
}
@media (max-width: 640px) {
  /* Full bredd pa telefon, latt att traffa med tummen. width: 100%
     behovs: en <button> krymper till sitt innehall aven med
     display:flex, sa forsta versionen blev 154 px och kommentaren som
     lovade full bredd var osann. Matt till 39 % av 390 px. */
  .nd-scope .cms--kontakt .chatt-knapp {
    display: flex;
    width: 100%;
  }
}

.nd-scope .cms--kontakt h2[data-ikon]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 62px;
  height: 62px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--sand) 55%, var(--white));
}

.nd-scope .cms--kontakt h2[data-ikon]::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 19px;
  width: 24px;
  height: 24px;
  background: var(--gold-text);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Ikonerna ritas med samma tunna streck som resten av sajtens ikoner. */
.nd-scope .cms--kontakt h2[data-ikon="mail"]::after {
  -webkit-mask-image: var(--ikon-mail);
  mask-image: var(--ikon-mail);
}
.nd-scope .cms--kontakt h2[data-ikon="plats"]::after {
  -webkit-mask-image: var(--ikon-plats);
  mask-image: var(--ikon-plats);
}
.nd-scope .cms--kontakt h2[data-ikon="chatt"]::after {
  -webkit-mask-image: var(--ikon-chatt);
  mask-image: var(--ikon-chatt);
}
.nd-scope .cms--kontakt h2[data-ikon="video"]::after {
  -webkit-mask-image: var(--ikon-video);
  mask-image: var(--ikon-video);
}
.nd-scope .cms--kontakt h2[data-ikon="telefon"]::after {
  -webkit-mask-image: var(--ikon-telefon);
  mask-image: var(--ikon-telefon);
}

.nd-scope .cms--kontakt h2 + p {
  padding-left: 88px;
  margin: 0;
  max-width: 50em;
  color: var(--muted);
  line-height: 1.7;
}

.nd-scope .cms--kontakt h2 + p + p {
  padding-left: 88px;
  max-width: 50em;
  color: var(--muted);
  line-height: 1.7;
  margin-top: var(--space-4);
}

/* E-postadressen är den enda länken i blocken och ska synas som en. */
.nd-scope .cms--kontakt p strong,
.nd-scope .cms--kontakt p a {
  color: var(--gold-text);
  font-weight: 600;
}

.nd-scope .cms--kontakt blockquote {
  margin: var(--space-11) 0 0;
  padding: var(--space-6) 0 var(--space-6) var(--space-6);
  border-left: 2px solid var(--line-2);
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--cocoa);
  max-width: 44em;
}

@media (max-width: 640px) {
  /* Samma teknik som pa desktop, bara mindre — cirkeln och ikonen ligger
     kvar absolut placerade. Ett forsok att gora dem inline med negativa
     marginaler lade ikonen OVANPA rubriktexten (matt 2026-09-28). */
  .nd-scope .cms--kontakt h2 {
    padding-left: 60px;
    min-height: 46px;
    margin-top: var(--space-10);
  }
  .nd-scope .cms--kontakt h2[data-ikon]::before {
    width: 46px;
    height: 46px;
  }
  .nd-scope .cms--kontakt h2[data-ikon]::after {
    left: 14px;
    top: 14px;
    width: 18px;
    height: 18px;
  }
  .nd-scope .cms--kontakt h2 + p,
  .nd-scope .cms--kontakt h2 + p + p,
  .nd-scope .cms--kontakt p.chatt-knapp-rad { padding-left: 0; }
  .nd-scope .cms--kontakt > p:first-child { margin-bottom: var(--space-9); }
}

/* ── Vanliga frågor: kategorirubrik med linje, och ett dragspel ─────── */

.nd-scope .cms--vanliga-fragor > p:first-child {
  color: var(--muted);
  max-width: 46em;
  margin-bottom: var(--space-9);
}

/* Samma rubrikrad som "Senaste artiklarna" i bloggen: rubrik till
   vänster, tunn linje som fortsätter ut till höger. */
.nd-scope .cms--vanliga-fragor h2 {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  color: var(--cocoa);
  margin: var(--space-10) 0 var(--space-4);
}

.nd-scope .cms--vanliga-fragor h2:first-of-type { margin-top: 0; }

.nd-scope .cms--vanliga-fragor h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.nd-scope .cms--vanliga-fragor details {
  background: color-mix(in srgb, var(--sand) 42%, var(--white));
  border: 1px solid color-mix(in srgb, var(--cocoa) 8%, transparent);
  border-radius: var(--r-xl);
  margin-bottom: var(--space-2);
  overflow: hidden;
  transition: background .15s ease;
}

.nd-scope .cms--vanliga-fragor details[open] {
  background: color-mix(in srgb, var(--sand) 26%, var(--white));
}

.nd-scope .cms--vanliga-fragor summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-6);
  cursor: pointer;
  list-style: none;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--cocoa);
}

.nd-scope .cms--vanliga-fragor summary::-webkit-details-marker { display: none; }

/* Plustecknet till höger. Blir ett minus när svaret är öppet. */
.nd-scope .cms--vanliga-fragor summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--muted);
  -webkit-mask-image: var(--ikon-plus);
  mask-image: var(--ikon-plus);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: transform .18s ease;
}

.nd-scope .cms--vanliga-fragor details[open] summary::after {
  -webkit-mask-image: var(--ikon-minus);
  mask-image: var(--ikon-minus);
}

.nd-scope .cms--vanliga-fragor summary:hover { color: var(--gold-text); }

.nd-scope .cms--vanliga-fragor details > p {
  margin: 0;
  padding: 0 var(--space-6) var(--space-5);
  color: var(--muted);
  line-height: 1.7;
  font-size: .95rem;
  max-width: 54em;
}

@media (max-width: 640px) {
  .nd-scope .cms--vanliga-fragor summary { padding: var(--space-4); }
  .nd-scope .cms--vanliga-fragor details > p {
    padding: 0 var(--space-4) var(--space-4);
  }
}

/* ── CTA-raden längst ned i heron, i mobil (Emil 2026-10-19) ───────
 *
 * Emil, efter att ha sett två andra förslag: *"Lägg knapparna inne i
 * heron, men längst ner under hero-filmrutan"*. Alltså kvar i heron,
 * men sist — under videorutan.
 *
 * INGEN DUBBLERAD MARKUP OCH INGEN MALLÄNDRING. ``.hero-copy`` är
 * redan en flexkolumn, så ``order`` flyttar raden utan att en andra
 * uppsättning länkar läggs i DOM:en. Skrivbordsvyn rörs inte: där
 * saknar raden ``order`` och står kvar på sin plats.
 *
 * BREDVID VARANDRA FRÅN 390 PX OCH UPPÅT — inte generellt.
 *
 * Talet 213 + 111 + 12 = 336 px i en heroyta som mäter 336,25 är
 * uppmätt **vid 390 px bredd**, och marginalen är 0,25 px. Varje
 * smalare skärm faller över. Uppmätt 2026-10-19 på sex skärmar:
 *
 *     375x667, 375x812, 360x740   knapparna på två rader
 *     390x844, 412x915, 430x932   bredvid varandra
 *
 * Raden står kvar som den är. **Emil 2026-10-19, ordagrant: *"Det
 * blir bra som det är."*** Radbrytningen på de smala skärmarna fanns
 * också före flytten av raden — prods baslinje visar samma sak — så
 * den är ingen följd av den här regeln. Kölistans punkt 142 bär
 * beslutet; ändra inte uppställningen utan ett nytt besked.
 *
 * Formuleringen här löd tidigare "de ryms" utan villkor. Den sortens
 * mening blir nästa läsares premiss, och den var sann bara för en
 * skärmbredd.
 *
 * DEN MÖRKA PLATTAN STÅR KVAR HÄR, till skillnad från de två andra
 * förslagen: raden ligger fortfarande på fotot, och plattan finns
 * till just för att "Testa demo" ska gå att läsa mot det (uppmätt
 * kontrast 1.46:1 utan den).
 */
@media (max-width: 600px) {
  .nd-scope .hero .hero-cta {
    order: 99;
    margin-top: var(--space-5);
    /* LYFTER RADEN UR CHATTBUBBLANS YTA, i stallet for att flytta
     * chatten — det senare hade rort varje sida i produkten.
     *
     * Talet ar uppmatt mot TVA krav samtidigt, pa sex skarmstorlekar:
     * raden far inte krocka med den hopfallda bubblan, OCH heron far
     * inte vaxa forbi vyn. En trappa 0-64 px gav fonstret 16-20 px.
     * Allt darover vaxer heron pa iPhone SE: 375x812 har slack kvar, 375x667
     * har ingen: 24 px ger +2, 32 px ger +10 px overrullning.
     *
     * Utan marginal ligger radens underkant 15 px NED i bubblans yta
     * pa alla sex; krocken slar igenom pa 390x844 (7 %) och 412x915
     * (2 %). Marginalen flyttar raden hela sitt tal — inte halva,
     * som det stod har forut: 20 px ger +5 px luft, matt. */
    margin-bottom: var(--space-5);
  }
}