/* d1.css: the direction-1 port ("Samma märke, skarpare") of ovkplan.se, built by build-port.cjs. Sources, in order (sha256 of each as read):
   options/shared/base.css 890d3bf3e3837790ca311bbd35793e5a704727db5e2e59ab80e199e16b25c50d
   options/d1/tokens.css cfa3f357808065f00fd66b2afbe98ef9410c8a1da79736309bc6fe8fd8f16e5a
   options/d1/sections.css 0fa000db26888fe4cd42eca097cd1665e00fb504ced1b67f67938375bebb38f4
   d1-port/polish.css e08624bd3b7f722f8171eea834c76bb7440c523e08ffdb9e85a7028b0907573b
   d1-port/path-b.css 2415c911b22632d79793beda2e9ff4f1d450709d7c0533e26b1fa6f57408e967
   d1-1-images/images.css 2ff06434544a3537b9666cbca6922d3dcdcb7e0c059e6334151b6e9698c508cd
   The only rewrites: font and image paths to the release's (PORT.md section 2). */

/* ===== options/shared/base.css ===== */
/* Shared base for every direction (SECTIONS.md section 2). Tokens only: every colour, font, size, radius, shadow and
   duration here comes from the direction's tokens.css, which loads after this file. Blocks are styled in each
   direction's sections.css; this file owns only the reset, accessibility basics, the wrap, buttons and the menu fold. */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-text);
  font-weight: var(--fw-text);
  font-size: var(--step-0);
  line-height: var(--lh-text);
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p { text-wrap: pretty; }

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

a { color: var(--c-link); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }

strong, b { font-weight: var(--fw-strong); }

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--c-surface);
  color: var(--c-ink);
  border-radius: var(--radius-s);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Buttons: the mechanics. Each direction's sections.css may restyle them inside its own blocks. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-btn);
  font-family: var(--font-text);
  font-weight: var(--fw-strong);
  font-size: var(--step-0);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary { background: var(--c-accent); color: var(--c-on-accent); }
.btn--secondary { background: transparent; color: var(--c-ink); border-color: currentColor; }
.btn--quiet { background: transparent; color: var(--c-ink); }

@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
}

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

/* The header and the menu fold. One row at 1024 px; the inline menu and the login give way to the fold below 900 px. */
.hdr-in {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 64px;
}
.hdr-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
  font-weight: var(--fw-strong);
  flex: none;
}
.hdr-logo img { width: 40px; height: 40px; }
.hdr-nav { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; white-space: nowrap; }
.hdr-nav a { color: inherit; text-decoration: none; }
.hdr-nav a[aria-current="page"] { text-decoration: underline; }
.hdr-login { flex: none; }

.nav-fold { display: none; position: relative; margin-left: auto; }
.nav-fold > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: var(--border-w) solid currentColor;
  border-radius: var(--radius-btn);
  cursor: pointer;
  list-style: none;
  font-weight: var(--fw-strong);
}
.nav-fold > summary::-webkit-details-marker { display: none; }
.nav-fold > nav {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 50;
  display: grid;
  min-width: 15rem;
  padding: var(--space-2);
  background: var(--c-surface);
  border: var(--border-w) solid var(--c-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-2);
}
.nav-fold > nav a {
  display: block;
  padding: var(--space-3) var(--space-4);
  color: var(--c-ink);
  text-decoration: none;
  border-radius: var(--radius-s);
}
.nav-fold > nav a[aria-current="page"] { font-weight: var(--fw-strong); }

@media (max-width: 899.98px) {
  .hdr-nav, .hdr-login { display: none; }
  .nav-fold { display: block; }
}

/* The film: film.js replaces the link with the player inside .film-frame, so the frame keeps the 16:9 box and the
   player fills it. Without the script the link still opens the film. */
.film-frame { position: relative; aspect-ratio: 16 / 9; }
.film-frame--4x3 { aspect-ratio: 4 / 3; }
.film-frame > .video-load {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-decoration: none;
}
.film-frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-load__icon { width: 64px; height: 64px; }

details > summary { cursor: pointer; }

/* ===== options/d1/tokens.css ===== */
/* D1 Samma märke, skarpare: tokens only (SECTIONS.md section 4). Today's colours (navy, green, dark green, mint,
   grey, near-black ink, line), Red Hat type, one accent (the green, on the primary action). */

@font-face {
  font-family: "Red Hat Display";
  src: url("/site-assets/fonts/red-hat-display/red-hat-display.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Red Hat Text";
  src: url("/site-assets/fonts/red-hat-text/red-hat-text.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour: the release's palette. The old link green #00ca5a fails on white and is gone; links use the dark green. */
  --c-bg: #ffffff;
  --c-bg-alt: #f6f6f6;
  --c-surface: #ecfff5;
  --c-ink: #0b1620;
  --c-ink-muted: #4a5560;
  --c-line: #dcdcdc;
  --c-brand: #003a70;
  --c-on-brand: #ffffff;
  --c-accent: #007a3e;
  --c-on-accent: #ffffff;
  --c-link: #026536;
  --c-focus: #003a70;
  --c-dark: #002a52;
  --c-on-dark: #ffffff;
  --c-overlay: rgb(0 26 51 / 0.62);

  /* Type: Red Hat Display for headings and figures, Red Hat Text for reading. Six sizes in use, far apart. */
  --font-display: "Red Hat Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-text: "Red Hat Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-figures: "Red Hat Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fw-text: 400;
  --fw-strong: 600;
  --fw-display: 700;
  --lh-text: 1.55;
  --lh-tight: 1.1;
  --track-display: -0.02em;
  --track-label: 0.01em;
  --step--1: 0.9375rem;                                          /* 15 at every width */
  --step-0: clamp(1.0625rem, 1.0393rem + 0.0952vw, 1.125rem);    /* 17 at 390, 18 at 1440 */
  --step-1: clamp(1.1875rem, 1.1179rem + 0.2857vw, 1.375rem);    /* 19 to 22 */
  --step-2: clamp(1.375rem, 1.2357rem + 0.5714vw, 1.75rem);      /* 22 to 28 */
  --step-3: clamp(1.625rem, 1.3rem + 1.3333vw, 2.5rem);          /* 26 to 40 */
  --step-4: clamp(1.875rem, 1.4107rem + 1.9048vw, 3.125rem);     /* 30 to 50 */
  --step-5: clamp(2.125rem, 1.3821rem + 3.0476vw, 4.125rem);     /* 34 to 66 */
  --measure: 66ch;

  /* Space and layout: one scale, a 12-column grid inside a 1240 px wrap. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --band-pad: clamp(3.5rem, 2.25rem + 5vw, 7rem);

  /* Shape (wave 2): one corner rule, square, on every card, panel, frame, button and marker. */
  --radius-s: 0;
  --radius-m: 0;
  --radius-l: 0;
  --radius-btn: 0;
  --border-w: 2px;
  --shadow-1: 0 1px 2px rgb(11 22 32 / 0.06), 0 6px 18px rgb(11 22 32 / 0.08);
  --shadow-2: 0 18px 44px rgb(0 26 51 / 0.22), 0 2px 6px rgb(0 26 51 / 0.1);

  /* Motion */
  --dur-1: 150ms;
  --dur-2: 280ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ===== options/d1/sections.css ===== */
/* D1 Samma märke, skarpare: block styles (SECTIONS.md section 5). Every selector starts with
   .blk-<name>[data-variant="d1"]. Colours, fonts, sizes, radii, shadows and durations come from tokens.css; grid tracks,
   widths and line lengths are literal. The page sits on one 12-column grid with a 24 px gap (var(--space-5)). */


/* ============================== hdr: the navy bar, as today, sharper ============================== */

.blk-hdr[data-variant="d1"] {
  position: relative;
  z-index: 30;
  background: var(--c-brand);
  color: var(--c-on-brand);
}
.blk-hdr[data-variant="d1"] .hdr-in {
  position: relative;
  min-height: 72px;
  gap: var(--space-4);
}
.blk-hdr[data-variant="d1"] .hdr-logo {
  gap: var(--space-3);
  min-height: 44px;
  color: var(--c-on-brand);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--fw-display);
  letter-spacing: var(--track-display);
}
.blk-hdr[data-variant="d1"] .hdr-logo img {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-s);
}
.blk-hdr[data-variant="d1"] .hdr-logo:hover span {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.blk-hdr[data-variant="d1"] .hdr-nav {
  gap: var(--space-2);
}
.blk-hdr[data-variant="d1"] .hdr-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-3);
  color: var(--c-on-brand);
  font-size: var(--step-0);
  border-radius: var(--radius-s);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.55em;
}
.blk-hdr[data-variant="d1"] .hdr-nav a:hover {
  text-decoration-color: color-mix(in srgb, var(--c-on-brand) 55%, transparent);
}
.blk-hdr[data-variant="d1"] .hdr-nav a[aria-current="page"] {
  font-weight: var(--fw-strong);
  text-decoration-color: var(--c-on-brand);
}
/* Round two (J3, D-BRIEF 3b): Skapa konto stays in the header; Logga in is a quiet text link. Wave 2: the header's Skapa
   konto is a white outline on the navy, so the hero's green is the one filled Skapa konto in the first screen. */
.blk-hdr[data-variant="d1"] .hdr-signup {
  flex: none;
  min-height: 44px;
  margin-left: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  color: var(--c-on-brand);
  border-color: var(--c-on-brand);
}
.blk-hdr[data-variant="d1"] .hdr-signup:hover {
  background: color-mix(in srgb, var(--c-on-brand) 14%, transparent);
  color: var(--c-on-brand);
}
.blk-hdr[data-variant="d1"] .hdr-login {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  color: var(--c-on-brand);
  font-weight: var(--fw-text);
  border-color: transparent;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.blk-hdr[data-variant="d1"] .hdr-login:hover {
  text-decoration-color: var(--c-on-brand);
}
/* At 1024 the logo, the five links and both actions hold one row: from 1100 down, the links and actions step down a
   size and the links tighten. Below the 900 fold the open menu carries Skapa konto, so the header's copy goes. */
@media (max-width: 1099.98px) {
  .blk-hdr[data-variant="d1"] .hdr-nav {
    gap: var(--space-1);
  }
  .blk-hdr[data-variant="d1"] .hdr-nav a {
    padding-inline: var(--space-2);
  }
  .blk-hdr[data-variant="d1"] .hdr-nav a,
  .blk-hdr[data-variant="d1"] .hdr-signup,
  .blk-hdr[data-variant="d1"] .hdr-login {
    font-size: var(--step--1);
  }
}
@media (max-width: 899.98px) {
  .blk-hdr[data-variant="d1"] .hdr-signup {
    display: none;
  }
}
/* Focus on the navy bar is white; links inside the folded menu (a mint panel) keep the navy ring from base.css. */
.blk-hdr[data-variant="d1"] .hdr-in > a:focus-visible,
.blk-hdr[data-variant="d1"] .hdr-nav a:focus-visible,
.blk-hdr[data-variant="d1"] .nav-fold > summary:focus-visible {
  outline-color: var(--c-on-brand);
}

/* The folded menu, below 900 px: a full-width mint panel under the bar, the app actions as real buttons at its foot. */
.blk-hdr[data-variant="d1"] .nav-fold {
  position: static;
}
.blk-hdr[data-variant="d1"] .nav-fold > summary {
  gap: var(--space-3);
  color: var(--c-on-brand);
  border-color: color-mix(in srgb, var(--c-on-brand) 50%, transparent);
  font-size: var(--step-0);
}
.blk-hdr[data-variant="d1"] .nav-fold > summary:hover {
  background: color-mix(in srgb, var(--c-on-brand) 12%, transparent);
}
.blk-hdr[data-variant="d1"] .nav-fold > summary::before {
  content: "";
  flex: none;
  width: 18px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
}
.blk-hdr[data-variant="d1"] .nav-fold[open] > summary::before {
  width: 14px;
  height: 14px;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}
.blk-hdr[data-variant="d1"] .nav-fold > nav {
  left: 0;
  right: 0;
  top: 100%;
  min-width: 0;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  grid-template-columns: minmax(0, 30rem);
  gap: var(--space-1);
  padding: var(--space-4) var(--gutter) var(--space-6);
  background: var(--c-surface);
  border: 0;
  border-radius: 0 0 var(--radius-l) var(--radius-l);
  box-shadow: var(--shadow-2);
}
.blk-hdr[data-variant="d1"] .nav-fold > nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--fw-strong);
  border-radius: var(--radius-s);
}
.blk-hdr[data-variant="d1"] .nav-fold > nav a:hover {
  background: color-mix(in srgb, var(--c-brand) 8%, var(--c-surface));
  color: var(--c-brand);
}
.blk-hdr[data-variant="d1"] .nav-fold > nav a[aria-current="page"] {
  color: var(--c-brand);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.blk-hdr[data-variant="d1"] .nav-fold > nav a[href$="/register-email"],
.blk-hdr[data-variant="d1"] .nav-fold > nav a[href$="/demo"],
.blk-hdr[data-variant="d1"] .nav-fold > nav a[href$="/login"] {
  justify-content: center;
  margin-top: var(--space-2);
  font-family: var(--font-text);
  font-size: var(--step-0);
  border-radius: var(--radius-btn);
}
.blk-hdr[data-variant="d1"] .nav-fold > nav a[href$="/register-email"] {
  margin-top: var(--space-5);
  background: var(--c-accent);
  color: var(--c-on-accent);
}
.blk-hdr[data-variant="d1"] .nav-fold > nav a[href$="/register-email"]:hover {
  background: color-mix(in srgb, var(--c-accent) 82%, var(--c-ink));
  color: var(--c-on-accent);
}
.blk-hdr[data-variant="d1"] .nav-fold > nav a[href$="/demo"] {
  border: var(--border-w) solid var(--c-ink);
}
@supports (height: 100svh) {
  .blk-hdr[data-variant="d1"] .nav-fold > nav {
    max-height: calc(100svh - 72px);
  }
}


/* ============================== hero: the words left, the product close-up right, a duct detail behind ============================== */

/* Wave 2: a two-column first screen. The words take five columns (the h1 sets in three lines: "Lämna",
   "Excel-mallarna", "bakom dig"), the product card the other seven, so the real product is the dominant object. The
   hero is a little shorter than the screen, so the four facts (the proof block, which continues the hero's dark
   ground) share the first screen at 1440 by 900. */
.blk-hero[data-variant="d1"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-dark);
  color: var(--c-on-dark);
}
.blk-hero[data-variant="d1"] .hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(var(--space-6), 1fr) auto auto auto auto var(--space-5);
  column-gap: var(--space-5);
  min-height: clamp(32rem, calc(100vh - 72px - 7.5rem), 52rem);
  padding-block: var(--space-6) var(--space-5);
}
@supports (height: 100svh) {
  .blk-hero[data-variant="d1"] .hero-grid {
    min-height: clamp(32rem, calc(100svh - 72px - 7.5rem), 52rem);
  }
}

/* The photograph, cropped to a detail: scaled 1.8 times about the big duct's seams, so the sky drops out and the
   ground reads as ductwork an inspector measures (at 1440 the scaled photo is at about its own resolution, so it stays
   sharp). Wave 2 (V3): a deeper scrim behind the words, `--c-dark` at 86% over the left 46%, easing to the overlay
   token by 62% and to 40% of it on the right; and a fade to `--c-dark` at the foot, where the facts continue. White
   text keeps 9.53:1 over a pure-white pixel under the deep layer. */
.blk-hero[data-variant="d1"] .hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.blk-hero[data-variant="d1"] .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 45%;
  transform: scale(1.8);
  transform-origin: 60% 72%;
}
.blk-hero[data-variant="d1"] .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 60%, var(--c-dark) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--c-dark) 86%, transparent) 0%, color-mix(in srgb, var(--c-dark) 86%, transparent) 46%, var(--c-overlay) 62%, color-mix(in srgb, var(--c-overlay) 40%, transparent) 100%);
}

.blk-hero[data-variant="d1"] h1 {
  grid-column: 1 / span 5;
  grid-row: 2;
  max-width: 12em;
  margin-bottom: var(--space-5);
  color: var(--c-on-dark);
  font-size: var(--step-5);
}
.blk-hero[data-variant="d1"] .hero-nowrap {
  white-space: nowrap;
}
.blk-hero[data-variant="d1"] .hero-lead {
  grid-column: 1 / span 5;
  grid-row: 3;
  max-width: 40ch;
  margin-bottom: var(--space-6);
  font-size: var(--step-1);
}
.blk-hero[data-variant="d1"] .actions {
  grid-column: 1 / span 5;
  grid-row: 4;
}
.blk-hero[data-variant="d1"] .hero-note {
  grid-column: 1 / span 5;
  grid-row: 5;
  max-width: 52ch;
  margin-top: var(--space-4);
  font-size: var(--step--1);
}

/* One primary action: the green. The demo is a white outline; both sit on the dark scrim. */
.blk-hero[data-variant="d1"] .btn {
  min-height: 52px;
  padding-inline: var(--space-5);
}
.blk-hero[data-variant="d1"] .btn--primary:hover {
  background: color-mix(in srgb, var(--c-accent) 82%, var(--c-ink));
}
.blk-hero[data-variant="d1"] .btn--secondary {
  color: var(--c-on-dark);
}
.blk-hero[data-variant="d1"] .btn--secondary:hover {
  background: color-mix(in srgb, var(--c-on-dark) 14%, transparent);
}
.blk-hero[data-variant="d1"] a:focus-visible {
  outline-color: var(--c-on-dark);
}

/* Wave 2: the product card is a deliberate close-up. Its frame shows one window of the dashboard, from the table's
   left edge to the column line after "Skapad av" and from the green "Nytt OVK-protokoll" button down to the line under
   the fifth row (dashboard.png x 24 to 480, y 30 to 275), at about 1.45 times the screen's size at 1440, so the rows
   read and the right edge ends on a column line. The peek block shows the whole table, so the two uses read as a
   close-up and the full view. The frame is a wrapper span added in index.html; the image inside it is positioned in
   percentages of the frame, so the window holds at every width. */
.blk-hero[data-variant="d1"] .hero-all {
  grid-column: 6 / -1;
  grid-row: 2 / 6;
  align-self: center;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-left: var(--space-4);
  overflow: hidden;
  background: var(--c-bg);
  color: var(--c-brand);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
  text-decoration: none;
}
.blk-hero[data-variant="d1"] .hero-card__frame {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 456 / 245;
  background: var(--c-bg);
}
.blk-hero[data-variant="d1"] .hero-card__shot {
  position: absolute;
  left: -5.263%;
  top: -12.245%;
  width: 224.561%;
  max-width: none;
  height: auto;
}
.blk-hero[data-variant="d1"] .hero-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-3) var(--space-5);
  color: var(--c-link);
  font-size: var(--step-0);
  font-weight: var(--fw-strong);
  line-height: 1.25;
  border-top: 1px solid var(--c-line);
}
.blk-hero[data-variant="d1"] .hero-card__arrow {
  flex: none;
  width: 20px;
  height: 20px;
}
.blk-hero[data-variant="d1"] .hero-all:hover .hero-card__bar > span {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

@media (prefers-reduced-motion: no-preference) {
  .blk-hero[data-variant="d1"] .hero-card__arrow {
    transition: transform var(--dur-1) var(--ease);
  }
  .blk-hero[data-variant="d1"] .hero-all:hover .hero-card__arrow {
    transform: translateX(3px);
  }
}

/* Tablet: the words take nine columns, so the deep layer of the scrim runs further right; the card goes under them,
   full width, and its window widens to the column line after "Kommun" (x 24 to 663), still at about 1.45 times at
   944 px. */
@media (max-width: 1023.98px) {
  .blk-hero[data-variant="d1"] .hero-grid {
    grid-template-rows: minmax(var(--space-6), 1fr) auto auto auto auto var(--space-6) auto var(--space-5);
    min-height: 0;
  }
  .blk-hero[data-variant="d1"] h1 {
    grid-column: 1 / -1;
  }
  .blk-hero[data-variant="d1"] .hero-lead,
  .blk-hero[data-variant="d1"] .actions,
  .blk-hero[data-variant="d1"] .hero-note {
    grid-column: 1 / span 9;
  }
  .blk-hero[data-variant="d1"] .hero-all {
    grid-column: 1 / -1;
    grid-row: 7;
    align-self: auto;
    margin-left: 0;
  }
  .blk-hero[data-variant="d1"] .hero-card__frame {
    aspect-ratio: 639 / 245;
  }
  .blk-hero[data-variant="d1"] .hero-card__shot {
    left: -3.756%;
    width: 160.250%;
  }
  .blk-hero[data-variant="d1"] .hero-media::after {
    background:
      linear-gradient(180deg, transparent 60%, var(--c-dark) 100%),
      linear-gradient(90deg, color-mix(in srgb, var(--c-dark) 86%, transparent) 0%, color-mix(in srgb, var(--c-dark) 86%, transparent) 76%, var(--c-overlay) 100%);
  }
}

/* Phone (wave 2, V2): the words full width under an even deep layer (`--c-dark` at 80%: 7.82:1 for white over a white
   pixel), and the four facts directly under the buttons and the microline, where the thumb is. The card is an optional
   slot (`all`), so it is not shown on a phone: it would sit between the buttons and the facts, and the peek block two
   screens down opens on the same close-up of the list, magnified so a row reads. */
@media (max-width: 767.98px) {
  .blk-hero[data-variant="d1"] .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 0 auto auto auto auto var(--space-4);
    padding-block: var(--space-7) var(--space-4);
  }
  .blk-hero[data-variant="d1"] h1,
  .blk-hero[data-variant="d1"] .hero-lead,
  .blk-hero[data-variant="d1"] .actions,
  .blk-hero[data-variant="d1"] .hero-note {
    grid-column: 1 / -1;
  }
  .blk-hero[data-variant="d1"] .hero-lead {
    margin-bottom: var(--space-5);
  }
  .blk-hero[data-variant="d1"] .actions .btn {
    flex: 1 1 auto;
    padding-inline: var(--space-4);
  }
  .blk-hero[data-variant="d1"] .hero-all {
    display: none;
  }
  .blk-hero[data-variant="d1"] .hero-media img {
    object-position: 30% 50%;
    transform: scale(1.5);
    transform-origin: 45% 62%;
  }
  .blk-hero[data-variant="d1"] .hero-media::after {
    background:
      linear-gradient(180deg, transparent 60%, var(--c-dark) 100%),
      color-mix(in srgb, var(--c-dark) 80%, transparent);
  }
}


/* ============================== proof: four plain facts, under the hero, on its dark ground ============================== */

/* Wave 2 (V3, V2): the facts move up to the hero. The block takes the hero's dark navy, which the hero's photo fades
   into at its foot, so the four facts read as the last line of the first screen, directly under the microline, white on
   dark. Their marker is their own: a short mint bar at the left of each fact, not the checkbox the feature list uses,
   so the two lists read as different things. */
.blk-proof[data-variant="d1"] {
  background: var(--c-dark);
  color: var(--c-on-dark);
}
.blk-proof[data-variant="d1"] .wrap {
  padding-block: 0 var(--space-6);
}
.blk-proof[data-variant="d1"] .proof-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid color-mix(in srgb, var(--c-on-dark) 22%, transparent);
  color: var(--c-on-dark);
  font-size: var(--step--1);
}
.blk-proof[data-variant="d1"] .proof-items li {
  position: relative;
  padding-left: var(--space-4);
  border-left: 3px solid var(--c-surface);
}
/* The last fact is a link: white and underlined, its hit area the whole fact (at least 44 px tall). */
.blk-proof[data-variant="d1"] .proof-items a {
  color: var(--c-on-dark);
  font-weight: var(--fw-strong);
  text-decoration-color: color-mix(in srgb, var(--c-on-dark) 60%, transparent);
}
.blk-proof[data-variant="d1"] .proof-items a::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--space-3)) 0;
}
.blk-proof[data-variant="d1"] .proof-items a:hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}
.blk-proof[data-variant="d1"] .proof-items a:focus-visible {
  outline-color: var(--c-on-dark);
}

@media (max-width: 1023.98px) {
  .blk-proof[data-variant="d1"] .proof-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 599.98px) {
  .blk-proof[data-variant="d1"] .proof-items {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ============================== film: a sharp still from the product, in a capped 16:9 frame ============================== */

/* Wave 2 (V1, V2, V3): the frame no longer spans the wrap. From 1024 up the heading takes four columns and the frame
   the other eight, so at 1440 the frame is about 765 by 430 px (16:9, under the 480 px cap); below 1024 it stacks under
   the heading and stops at 853 px wide (480 px tall). The peek block now starts within one scroll of the hero. */
.blk-film[data-variant="d1"] {
  background: var(--c-bg-alt);
}
.blk-film[data-variant="d1"] .wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-5);
  align-items: start;
  padding-block: var(--band-pad);
}
.blk-film[data-variant="d1"] h2 {
  grid-column: 1 / span 4;
  color: var(--c-brand);
  font-size: var(--step-3);
}
.blk-film[data-variant="d1"] .film-frame {
  grid-column: 5 / -1;
  background: var(--c-brand);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
}
/* The poster: nothing blurred and no text over text. The link is a small grid on the navy: row one is a sharp crop of
   the product's own map screen (skapa-ovk.png, the property search and the "Val av fastighet" panel, downscaled, so it
   stays crisp) inside a 12 px navy frame; under it, on solid navy, the play mark, the title and the note. The picture
   is the link's ::before, placed in the grid's first row. The film contract (a.video-load, its title and note) is
   untouched. */
.blk-film[data-variant="d1"] .video-load {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-items: center;
  justify-items: start;
  gap: 0 var(--space-4);
  overflow: hidden;
  padding: var(--space-3) var(--space-3) var(--space-4);
  color: var(--c-on-brand);
  text-align: left;
  background: var(--c-brand);
}
.blk-film[data-variant="d1"] .video-load::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: stretch;
  justify-self: stretch;
  margin-bottom: var(--space-4);
  background: url("/site-assets/img/film-poster-1280-3ae7e2d4.jpg") 50% 45% / cover no-repeat, var(--c-bg);
}
.blk-film[data-variant="d1"] .video-load__icon {
  grid-column: 1;
  grid-row: 2 / span 2;
  width: 56px;
  height: 56px;
  margin-left: var(--space-2);
  color: var(--c-on-brand);
}
.blk-film[data-variant="d1"] .video-load__title {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--fw-display);
  line-height: 1.25;
  letter-spacing: var(--track-display);
}
.blk-film[data-variant="d1"] .video-load__note {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  margin-top: var(--space-1);
  color: color-mix(in srgb, var(--c-on-brand) 82%, var(--c-brand));
  font-size: var(--step--1);
}
.blk-film[data-variant="d1"] .video-load:hover {
  background: var(--c-dark);
}
.blk-film[data-variant="d1"] .video-load:hover .video-load__title {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

@media (prefers-reduced-motion: no-preference) {
  .blk-film[data-variant="d1"] .video-load {
    transition: background-color var(--dur-1) var(--ease);
  }
  .blk-film[data-variant="d1"] .video-load__icon {
    transition: transform var(--dur-2) var(--ease);
  }
  .blk-film[data-variant="d1"] .video-load:hover .video-load__icon {
    transform: scale(1.06);
  }
}

@media (max-width: 1023.98px) {
  .blk-film[data-variant="d1"] h2,
  .blk-film[data-variant="d1"] .film-frame {
    grid-column: 1 / -1;
  }
  .blk-film[data-variant="d1"] .film-frame {
    width: 100%;
    max-width: 53.3rem;
    margin-top: var(--space-6);
  }
}
@media (max-width: 599.98px) {
  .blk-film[data-variant="d1"] .film-frame {
    margin-top: var(--space-5);
  }
  .blk-film[data-variant="d1"] .video-load {
    column-gap: var(--space-3);
    padding-bottom: var(--space-3);
  }
  .blk-film[data-variant="d1"] .video-load::before {
    margin-bottom: var(--space-3);
  }
  .blk-film[data-variant="d1"] .video-load__icon {
    width: 40px;
    height: 40px;
    margin-left: var(--space-1);
  }
  .blk-film[data-variant="d1"] .video-load__title {
    font-size: var(--step-0);
  }
}


/* ============================== peek: the real screens, large ============================== */

.blk-peek[data-variant="d1"] {
  background: var(--c-bg);
}
.blk-peek[data-variant="d1"] .wrap {
  padding-block: var(--band-pad);
}
.blk-peek[data-variant="d1"] h2 {
  margin-bottom: var(--space-7);
  color: var(--c-brand);
  font-size: var(--step-3);
}
/* Row two's tracks follow the two images' own proportions (917/715 and 780/825), so both images end level. */
.blk-peek[data-variant="d1"] .shots {
  display: grid;
  grid-template-columns: minmax(0, 1.2825fr) minmax(0, 0.9455fr);
  gap: var(--space-8) var(--space-6);
}
.blk-peek[data-variant="d1"] .shot > img {
  width: 100%;
  height: auto;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
}
.blk-peek[data-variant="d1"] .shot figcaption {
  max-width: 46ch;
  margin-top: var(--space-4);
}
.blk-peek[data-variant="d1"] .shot figcaption strong {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--c-brand);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--fw-display);
  line-height: 1.25;
  letter-spacing: var(--track-display);
}
.blk-peek[data-variant="d1"] .shot figcaption span {
  display: block;
  color: var(--c-ink-muted);
}
/* Wave 2 (V1, V2): the dashboard is the full view of the list, the hero's card its close-up. It spans the wrap as a
   clean, tight crop of the table alone (dashboard.png x 24 to 966, y 64 to 402: no notice bar, no page margin, ending
   on a row line), at about 1.23 times at 1440, with its caption under it. The magnified inset that hung over its foot
   is gone. The frame is a wrapper span added in index.html; the image inside is positioned in percentages of it. */
.blk-peek[data-variant="d1"] .shot:first-child {
  grid-column: 1 / -1;
}
.blk-peek[data-variant="d1"] .shot-frame {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 942 / 338;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
}
.blk-peek[data-variant="d1"] .shot-frame > img {
  position: absolute;
  left: -2.548%;
  top: -18.935%;
  width: 108.705%;
  max-width: none;
  height: auto;
}

@media (max-width: 767.98px) {
  .blk-peek[data-variant="d1"] h2 {
    margin-bottom: var(--space-6);
  }
  .blk-peek[data-variant="d1"] .shots {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }
  /* Round two (J1, J2, D-BRIEF 3b point 2): on a phone each screen shows one readable area, never the whole desktop
     screen shrunk. Wave 2: the dashboard's window is the hero card's close-up (the first two columns, the header and
     five rows: x 24 to 250, y 64 to 275) at about 1.58 times, so a row reads; the map and the checklist stay 1:1 crops
     of the property search and of the system type with one checklist column. */
  .blk-peek[data-variant="d1"] .shot-frame {
    aspect-ratio: 226 / 211;
  }
  .blk-peek[data-variant="d1"] .shot-frame > img {
    left: -10.619%;
    top: -30.332%;
    width: 453.097%;
  }
  .blk-peek[data-variant="d1"] .shot > img {
    height: 18.75rem;
    object-fit: none;
  }
  .blk-peek[data-variant="d1"] .shot:nth-child(2) > img {
    object-position: 0 -62px;
  }
  .blk-peek[data-variant="d1"] .shot:nth-child(3) > img {
    object-position: -205px 0;
  }
}


/* ============================== who: three cases, read as rows ============================== */

.blk-who[data-variant="d1"] {
  background: var(--c-bg-alt);
}
.blk-who[data-variant="d1"] .wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  align-items: start;
  padding-block: var(--band-pad);
}
.blk-who[data-variant="d1"] h2 {
  grid-column: 1 / span 4;
  color: var(--c-brand);
  font-size: var(--step-3);
}
/* Wave 2 (V3, V1): no white cards. The three cases are rows of one list, ruled like a protocol: a navy rule over the
   first, a hairline under each, the question left and the answer right. */
.blk-who[data-variant="d1"] .cases {
  grid-column: 5 / -1;
  display: grid;
  border-top: var(--border-w) solid var(--c-brand);
}
.blk-who[data-variant="d1"] .case {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2) var(--space-6);
  align-items: baseline;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--c-line);
}
.blk-who[data-variant="d1"] .case h3 {
  color: var(--c-brand);
  font-size: var(--step-1);
  line-height: 1.25;
}
.blk-who[data-variant="d1"] .case p {
  max-width: var(--measure);
  color: var(--c-ink);
}

@media (max-width: 1023.98px) {
  .blk-who[data-variant="d1"] h2,
  .blk-who[data-variant="d1"] .cases {
    grid-column: 1 / -1;
  }
}
@media (max-width: 599.98px) {
  .blk-who[data-variant="d1"] .case {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--space-4) var(--space-5);
  }
}


/* ============================== features: the list, in two columns, with the rest behind a real control ============================== */

.blk-features[data-variant="d1"] {
  background: var(--c-bg);
  scroll-margin-top: var(--space-4);
}
.blk-features[data-variant="d1"] .wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-5);
  align-items: end;
  padding-block: var(--band-pad);
}
.blk-features[data-variant="d1"] h2 {
  grid-column: 1 / span 5;
  color: var(--c-brand);
  font-size: var(--step-3);
}
.blk-features[data-variant="d1"] .features-intro {
  grid-column: 6 / -1;
  max-width: 44ch;
  color: var(--c-ink-muted);
  font-size: var(--step-1);
}
.blk-features[data-variant="d1"] .features-sub,
.blk-features[data-variant="d1"] .wrap > .feat-list,
.blk-features[data-variant="d1"] .feat-more,
.blk-features[data-variant="d1"] .features-link {
  grid-column: 1 / -1;
}
.blk-features[data-variant="d1"] .features-sub {
  margin-top: var(--space-7);
  margin-bottom: var(--space-5);
  color: var(--c-ink);
  font-size: var(--step-1);
  line-height: 1.25;
}
.blk-features[data-variant="d1"] .feat-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-7);
}
.blk-features[data-variant="d1"] .feat-list li {
  position: relative;
  max-width: 52ch;
  padding-left: 2.1em;
}
/* Wave 2: the marker is a ticked square, the protocol's checkbox (one corner rule: square). */
.blk-features[data-variant="d1"] .feat-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.25em;
  height: 1.25em;
  background: var(--c-brand);
}
.blk-features[data-variant="d1"] .feat-list li::after {
  content: "";
  position: absolute;
  left: 0.47em;
  top: 0.37em;
  width: 0.32em;
  height: 0.6em;
  border: solid var(--c-on-brand);
  border-width: 0 0.12em 0.12em 0;
  transform: rotate(45deg);
}

/* "Visa alla funktioner" reads as a button: a navy edge, a plus that turns into a minus when open. */
.blk-features[data-variant="d1"] .feat-more {
  margin-top: var(--space-7);
}
.blk-features[data-variant="d1"] .feat-more > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-2) var(--space-5);
  list-style: none;
  color: var(--c-brand);
  font-weight: var(--fw-strong);
  border: var(--border-w) solid var(--c-brand);
  border-radius: var(--radius-btn);
}
.blk-features[data-variant="d1"] .feat-more > summary::-webkit-details-marker {
  display: none;
}
.blk-features[data-variant="d1"] .feat-more > summary::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) 50% 50% / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 50% / 2px 100% no-repeat;
}
.blk-features[data-variant="d1"] .feat-more[open] > summary::before {
  background-size: 100% 2px, 2px 0;
}
.blk-features[data-variant="d1"] .feat-more > summary:hover {
  background: color-mix(in srgb, var(--c-brand) 8%, var(--c-bg));
}
.blk-features[data-variant="d1"] .feat-more > summary + .feat-list {
  margin-top: var(--space-6);
}
/* What is coming stands apart: a mint panel, empty boxes instead of ticked ones. */
.blk-features[data-variant="d1"] .feat-coming {
  margin-top: var(--space-7);
  padding: var(--space-6);
  background: var(--c-surface);
  border-radius: var(--radius-m);
}
.blk-features[data-variant="d1"] .feat-coming .features-sub {
  margin-top: 0;
}
.blk-features[data-variant="d1"] .feat-list--coming li::before {
  background: transparent;
  border: 0.12em solid var(--c-brand);
}
.blk-features[data-variant="d1"] .feat-list--coming li::after {
  content: none;
}
.blk-features[data-variant="d1"] .features-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  margin-top: var(--space-6);
  color: var(--c-link);
  font-weight: var(--fw-strong);
}
.blk-features[data-variant="d1"] .features-link::after {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}
.blk-features[data-variant="d1"] .features-link:hover {
  color: var(--c-ink);
  text-decoration-thickness: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .blk-features[data-variant="d1"] .feat-more > summary {
    transition: background-color var(--dur-1) var(--ease);
  }
}

@media (max-width: 1023.98px) {
  .blk-features[data-variant="d1"] h2,
  .blk-features[data-variant="d1"] .features-intro {
    grid-column: 1 / -1;
  }
  .blk-features[data-variant="d1"] .features-intro {
    margin-top: var(--space-4);
  }
}
@media (max-width: 767.98px) {
  .blk-features[data-variant="d1"] .feat-list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
  .blk-features[data-variant="d1"] .feat-coming {
    padding: var(--space-5);
  }
}


/* ============================== prices: a navy price list beside the terms ============================== */

.blk-prices[data-variant="d1"] {
  background: var(--c-bg-alt);
}
.blk-prices[data-variant="d1"] .wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-5);
  align-items: start;
  padding-block: var(--band-pad);
}
.blk-prices[data-variant="d1"] h1,
.blk-prices[data-variant="d1"] h2 {
  grid-column: 1 / -1;
  grid-row: 1;
  color: var(--c-brand);
}
.blk-prices[data-variant="d1"] h1 {
  font-size: var(--step-5);
}
.blk-prices[data-variant="d1"] h2 {
  font-size: var(--step-3);
}
.blk-prices[data-variant="d1"] .prices-framing {
  grid-column: 1 / span 7;
  grid-row: 2;
  max-width: 40ch;
  margin-top: var(--space-4);
  color: var(--c-ink-muted);
  font-size: var(--step-1);
}
.blk-prices[data-variant="d1"] .plans {
  grid-column: 1 / span 7;
  grid-row: 3 / span 2;
  margin-top: var(--space-7);
  padding: var(--space-2) var(--space-6);
  background: var(--c-brand);
  color: var(--c-on-brand);
  border-radius: var(--radius-l);
}
.blk-prices[data-variant="d1"] .plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "role price" "note price";
  align-items: center;
  column-gap: var(--space-5);
  padding-block: var(--space-5);
}
.blk-prices[data-variant="d1"] .plan + .plan {
  border-top: 1px solid color-mix(in srgb, var(--c-on-brand) 22%, transparent);
}
.blk-prices[data-variant="d1"] .plan-role {
  grid-area: role;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--fw-display);
  line-height: 1.25;
  letter-spacing: var(--track-display);
}
.blk-prices[data-variant="d1"] .plan-note {
  grid-area: note;
  margin-top: var(--space-1);
  color: color-mix(in srgb, var(--c-on-brand) 82%, var(--c-brand));
  font-size: var(--step--1);
}
.blk-prices[data-variant="d1"] .plan-price {
  grid-area: price;
  justify-self: end;
  white-space: nowrap;
  font-size: var(--step-0);
}
.blk-prices[data-variant="d1"] .plan-amount {
  margin-right: 0.12em;
  font-family: var(--font-figures);
  font-size: var(--step-4);
  font-weight: var(--fw-display);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--track-display);
  line-height: 1;
}
.blk-prices[data-variant="d1"] .terms-list {
  grid-column: 9 / -1;
  grid-row: 3;
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-7);
  color: var(--c-ink);
}
.blk-prices[data-variant="d1"] .terms-list li {
  position: relative;
  padding-left: 2.1em;
}
.blk-prices[data-variant="d1"] .terms-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.25em;
  height: 1.25em;
  background: var(--c-brand);
}
.blk-prices[data-variant="d1"] .terms-list li::after {
  content: "";
  position: absolute;
  left: 0.47em;
  top: 0.37em;
  width: 0.32em;
  height: 0.6em;
  border: solid var(--c-on-brand);
  border-width: 0 0.12em 0.12em 0;
  transform: rotate(45deg);
}
.blk-prices[data-variant="d1"] .prices-link {
  grid-column: 9 / -1;
  grid-row: 4;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  margin-top: var(--space-5);
  color: var(--c-link);
  font-weight: var(--fw-strong);
}
.blk-prices[data-variant="d1"] .prices-link::after {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}
.blk-prices[data-variant="d1"] .prices-link:hover {
  color: var(--c-ink);
  text-decoration-thickness: 2px;
}
/* Round two (J2, J3, D-BRIEF 3b): on the pricing page, Skapa konto stands under the terms, level with the foot of the
   price list, so the price and the action share the first screen at 1440. */
.blk-prices[data-variant="d1"] .prices-actions {
  grid-column: 9 / -1;
  grid-row: 4;
  align-self: end;
  display: flex;
  margin-top: var(--space-6);
}
.blk-prices[data-variant="d1"] .prices-actions .btn {
  min-height: 52px;
  padding-inline: var(--space-7);
}
.blk-prices[data-variant="d1"] .prices-actions .btn--primary:hover {
  background: color-mix(in srgb, var(--c-accent) 82%, var(--c-ink));
}

@media (max-width: 1023.98px) {
  .blk-prices[data-variant="d1"] .prices-framing,
  .blk-prices[data-variant="d1"] .plans,
  .blk-prices[data-variant="d1"] .terms-list,
  .blk-prices[data-variant="d1"] .prices-link,
  .blk-prices[data-variant="d1"] .prices-actions {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .blk-prices[data-variant="d1"] .terms-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
    margin-top: var(--space-6);
  }
}
/* Phone: each price keeps its role and figure on one line (the note under them), the terms tighten, and the action is
   a full-width button, so on a 390 by 844 screen the price list and Skapa konto share the first screen. */
@media (max-width: 599.98px) {
  .blk-prices[data-variant="d1"] .plans {
    margin-top: var(--space-6);
    padding-inline: var(--space-4);
  }
  .blk-prices[data-variant="d1"] .plan {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: var(--space-4);
    padding-block: var(--space-4);
  }
  .blk-prices[data-variant="d1"] .plan-role {
    font-size: var(--step-0);
  }
  .blk-prices[data-variant="d1"] .plan-note {
    flex-basis: 100%;
  }
  .blk-prices[data-variant="d1"] .terms-list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    margin-top: var(--space-5);
  }
  .blk-prices[data-variant="d1"] .prices-actions {
    margin-top: var(--space-5);
  }
  .blk-prices[data-variant="d1"] .prices-actions .btn {
    flex: 1 1 auto;
  }
}


/* ============================== terms (pricing page): the trial in full ============================== */

.blk-terms[data-variant="d1"] {
  background: var(--c-bg-alt);
}
.blk-terms[data-variant="d1"] .wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
  padding-block: var(--band-pad);
}
.blk-terms[data-variant="d1"] h2 {
  grid-column: 1 / span 5;
  color: var(--c-brand);
  font-size: var(--step-3);
}
.blk-terms[data-variant="d1"] .terms-items {
  grid-column: 6 / -1;
  display: grid;
  gap: var(--space-4);
  max-width: var(--measure);
  color: var(--c-ink);
  font-size: var(--step-1);
}

@media (max-width: 1023.98px) {
  .blk-terms[data-variant="d1"] h2,
  .blk-terms[data-variant="d1"] .terms-items {
    grid-column: 1 / -1;
  }
}


/* ============================== help: four ways in, and the questions people ask ============================== */

.blk-help[data-variant="d1"] {
  background: var(--c-bg);
}
.blk-help[data-variant="d1"] .wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  align-items: start;
  padding-block: var(--band-pad);
}
.blk-help[data-variant="d1"] h2 {
  grid-column: 1 / -1;
  color: var(--c-brand);
  font-size: var(--step-3);
}
.blk-help[data-variant="d1"] .paths {
  grid-column: 1 / span 7;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-6);
}
/* Wave 2 (V3, V1): no grey tiles. Each way in is a ruled entry: a navy rule on top, the title, its line under it, an
   arrow at the right. The rule turns green on hover. */
.blk-help[data-variant="d1"] .paths li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-7) var(--space-5) 0;
  border-top: var(--border-w) solid var(--c-brand);
}
.blk-help[data-variant="d1"] .paths li::before {
  content: "";
  position: absolute;
  right: var(--space-2);
  top: calc(var(--space-4) + 0.45em);
  width: 0.55em;
  height: 0.55em;
  border: solid var(--c-brand);
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}
.blk-help[data-variant="d1"] .paths a {
  color: var(--c-brand);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--fw-display);
  line-height: 1.25;
  letter-spacing: var(--track-display);
  text-decoration: none;
}
.blk-help[data-variant="d1"] .paths a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-m);
}
.blk-help[data-variant="d1"] .paths a:focus-visible {
  outline: none;
}
.blk-help[data-variant="d1"] .paths a:focus-visible::after {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}
.blk-help[data-variant="d1"] .paths span {
  color: var(--c-ink-muted);
  font-size: var(--step--1);
}
.blk-help[data-variant="d1"] .paths li:hover {
  border-top-color: var(--c-accent);
}
.blk-help[data-variant="d1"] .paths li:hover a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.blk-help[data-variant="d1"] .questions {
  grid-column: 9 / -1;
  display: grid;
  gap: var(--space-2);
}
.blk-help[data-variant="d1"] .questions a {
  position: relative;
  display: block;
  min-height: 44px;
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  color: var(--c-link);
  font-weight: var(--fw-strong);
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.blk-help[data-variant="d1"] .questions a::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: calc(var(--space-2) + 0.55em);
  width: 0.45em;
  height: 0.45em;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}
.blk-help[data-variant="d1"] .questions a:hover {
  color: var(--c-ink);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .blk-help[data-variant="d1"] .paths li {
    transition: border-color var(--dur-1) var(--ease);
  }
}

@media (max-width: 1023.98px) {
  .blk-help[data-variant="d1"] .paths,
  .blk-help[data-variant="d1"] .questions {
    grid-column: 1 / -1;
  }
}
@media (max-width: 599.98px) {
  .blk-help[data-variant="d1"] .paths {
    grid-template-columns: minmax(0, 1fr);
  }
  .blk-help[data-variant="d1"] .paths li {
    padding-bottom: var(--space-4);
  }
}


/* ============================== cta: the photograph again, as the closing panel ============================== */

.blk-cta[data-variant="d1"] {
  background: var(--c-bg);
}
.blk-cta[data-variant="d1"] .wrap {
  padding-block: 0 var(--band-pad);
}
.blk-cta[data-variant="d1"] .cta-panel {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-5);
  padding: var(--space-8) var(--space-7);
  color: var(--c-on-dark);
  /* Wave 2: square (the one corner rule), and the photograph cropped to the same duct detail as the hero: drawn at 300%
     of the panel's height, so the sky drops out and the seams fill the panel. As the hero, the deep layer (`--c-dark`
     at 86%) sits behind the words, the left 52%, easing to the overlay token by 70% and to 40% of it on the right.
     Below 1024 the words run wider, so the deep layer runs to 85% there. */
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--c-dark) 86%, transparent) 0%, color-mix(in srgb, var(--c-dark) 86%, transparent) 52%, var(--c-overlay) 70%, color-mix(in srgb, var(--c-overlay) 40%, transparent) 100%),
    url("/wp-content/uploads/2024/08/iStock-XL-scaled.jpg") 58% 80% / auto 300% no-repeat,
    var(--c-dark);
  border-radius: var(--radius-l);
}
.blk-cta[data-variant="d1"] h2 {
  grid-column: 1 / span 8;
  max-width: 16em;
  color: var(--c-on-dark);
  font-size: var(--step-4);
}
.blk-cta[data-variant="d1"] .actions {
  grid-column: 1 / span 8;
  margin-top: var(--space-6);
}
.blk-cta[data-variant="d1"] .cta-note {
  grid-column: 1 / span 8;
  margin-top: var(--space-4);
  font-size: var(--step--1);
}
.blk-cta[data-variant="d1"] .btn {
  min-height: 52px;
  padding-inline: var(--space-6);
}
.blk-cta[data-variant="d1"] .btn--primary:hover {
  background: color-mix(in srgb, var(--c-accent) 82%, var(--c-ink));
}
.blk-cta[data-variant="d1"] .btn--secondary {
  color: var(--c-on-dark);
}
.blk-cta[data-variant="d1"] .btn--secondary:hover {
  background: color-mix(in srgb, var(--c-on-dark) 14%, transparent);
}
.blk-cta[data-variant="d1"] a:focus-visible {
  outline-color: var(--c-on-dark);
}

@media (max-width: 1023.98px) {
  .blk-cta[data-variant="d1"] .cta-panel {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--c-dark) 86%, transparent) 0%, color-mix(in srgb, var(--c-dark) 86%, transparent) 85%, var(--c-overlay) 100%),
      url("/wp-content/uploads/2024/08/iStock-XL-scaled.jpg") 58% 80% / auto 300% no-repeat,
      var(--c-dark);
  }
}
@media (max-width: 767.98px) {
  .blk-cta[data-variant="d1"] .cta-panel {
    padding: var(--space-7) var(--space-5);
    background:
      linear-gradient(color-mix(in srgb, var(--c-dark) 80%, transparent), color-mix(in srgb, var(--c-dark) 80%, transparent)),
      url("/wp-content/uploads/2024/08/iStock-XL-scaled.jpg") 50% 75% / auto 300% no-repeat,
      var(--c-dark);
  }
  .blk-cta[data-variant="d1"] h2,
  .blk-cta[data-variant="d1"] .actions,
  .blk-cta[data-variant="d1"] .cta-note {
    grid-column: 1 / -1;
  }
  .blk-cta[data-variant="d1"] .actions .btn {
    flex: 1 1 auto;
    padding-inline: var(--space-4);
  }
}


/* ============================== ftr: dark navy, the mark, the links, the address ============================== */

.blk-ftr[data-variant="d1"] {
  background: var(--c-dark);
  color: var(--c-on-dark);
}
.blk-ftr[data-variant="d1"] .wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  align-items: start;
  padding-block: var(--space-8) var(--space-7);
}
.blk-ftr[data-variant="d1"] .ftr-brand {
  grid-column: 1 / span 4;
  display: grid;
  justify-items: start;
  gap: var(--space-4);
}
.blk-ftr[data-variant="d1"] .ftr-mark {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-s);
}
.blk-ftr[data-variant="d1"] .ftr-company {
  max-width: 24ch;
  color: color-mix(in srgb, var(--c-on-dark) 78%, var(--c-dark));
  font-size: var(--step--1);
}
.blk-ftr[data-variant="d1"] .ftr-links {
  grid-column: 5 / span 5;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-5);
}
.blk-ftr[data-variant="d1"] .ftr-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-on-dark);
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
}
.blk-ftr[data-variant="d1"] .ftr-links a:hover {
  text-decoration-color: currentColor;
}
.blk-ftr[data-variant="d1"] .ftr-mail {
  grid-column: 10 / -1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-on-dark);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--fw-display);
  letter-spacing: var(--track-display);
  text-decoration-thickness: 2px;
  text-decoration-color: color-mix(in srgb, var(--c-on-dark) 45%, transparent);
}
.blk-ftr[data-variant="d1"] .ftr-mail:hover {
  text-decoration-color: currentColor;
}
.blk-ftr[data-variant="d1"] a:focus-visible {
  outline-color: var(--c-on-dark);
}

@media (max-width: 1023.98px) {
  .blk-ftr[data-variant="d1"] .ftr-brand {
    grid-column: 1 / span 5;
  }
  .blk-ftr[data-variant="d1"] .ftr-links {
    grid-column: 6 / -1;
  }
  .blk-ftr[data-variant="d1"] .ftr-mail {
    grid-column: 1 / -1;
    justify-self: start;
  }
}
@media (max-width: 599.98px) {
  .blk-ftr[data-variant="d1"] .ftr-brand,
  .blk-ftr[data-variant="d1"] .ftr-links {
    grid-column: 1 / -1;
  }
}


/* =====================================================================================================================
   Round two (2026-10-23): the blocks of the other eight pages (D-BRIEF.md section 4). Same 12-column grid, same
   grounds (white and today's grey), same marks: navy headings, the ticked square for what is in the service, the
   empty square for what is coming, a plus square on anything that opens. Wave 2: every corner square (the leaf corner
   of rounds one and two is gone). No new sizes: the six steps of round one.
   ===================================================================================================================== */


/* ============================== pagehead: the hero, scaled down, with no photograph ============================== */

/* The hero's scrim without the photo: the dark navy on the left easing into the brand navy. Wave 2: square at its foot
   (the one corner rule). Every block that follows a page head has the white ground. */
.blk-pagehead[data-variant="d1"] {
  background: linear-gradient(90deg, var(--c-dark) 0%, var(--c-dark) 38%, var(--c-brand) 100%);
  color: var(--c-on-dark);
}
.blk-pagehead[data-variant="d1"] .wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-5);
  padding-block: var(--space-8) var(--space-7);
}
.blk-pagehead[data-variant="d1"] h1 {
  grid-column: 1 / span 9;
  max-width: 18em;
  color: var(--c-on-dark);
  font-size: var(--step-4);
}
.blk-pagehead[data-variant="d1"] .pagehead-lead {
  grid-column: 1 / span 7;
  display: grid;
  gap: var(--space-4);
  max-width: 48ch;
  margin-top: var(--space-5);
  color: color-mix(in srgb, var(--c-on-dark) 86%, var(--c-dark));
  font-size: var(--step-1);
}
/* A lead of two paragraphs (Om OVK, the privacy policy) drops to body size, at the reading measure. */
.blk-pagehead[data-variant="d1"] .pagehead-lead:has(> p + p) {
  grid-column: 1 / span 8;
  max-width: var(--measure);
  font-size: var(--step-0);
}

@media (max-width: 1023.98px) {
  .blk-pagehead[data-variant="d1"] h1,
  .blk-pagehead[data-variant="d1"] .pagehead-lead,
  .blk-pagehead[data-variant="d1"] .pagehead-lead:has(> p + p) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 599.98px) {
  .blk-pagehead[data-variant="d1"] .wrap {
    padding-block: var(--space-7) var(--space-6);
  }
  .blk-pagehead[data-variant="d1"] .pagehead-lead {
    margin-top: var(--space-4);
  }
}


/* ============================== faq: eight questions that open in place ============================== */

.blk-faq[data-variant="d1"] {
  background: var(--c-bg);
}
.blk-faq[data-variant="d1"] .wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-5);
  padding-block: var(--space-7);
}
.blk-faq[data-variant="d1"] .faq-items {
  grid-column: 1 / span 9;
  border-bottom: 1px solid var(--c-line);
}
.blk-faq[data-variant="d1"] .faq-item {
  border-top: 1px solid var(--c-line);
}
/* The question is the control: the whole row, at least 44 px tall, with a navy square that shows a plus when closed
   and a minus when open. */
.blk-faq[data-variant="d1"] .faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 44px;
  padding: var(--space-5) var(--space-2) var(--space-5) 0;
  list-style: none;
  border-radius: var(--radius-s);
}
.blk-faq[data-variant="d1"] .faq-item > summary::-webkit-details-marker {
  display: none;
}
.blk-faq[data-variant="d1"] .faq-item > summary::after {
  content: "";
  flex: none;
  width: 2rem;
  height: 2rem;
  background:
    linear-gradient(var(--c-on-brand), var(--c-on-brand)) 50% 50% / 0.8rem 2px no-repeat,
    linear-gradient(var(--c-on-brand), var(--c-on-brand)) 50% 50% / 2px 0.8rem no-repeat,
    var(--c-brand);
}
.blk-faq[data-variant="d1"] .faq-item[open] > summary::after {
  background-size: 0.8rem 2px, 2px 0;
}
.blk-faq[data-variant="d1"] .faq-item > summary:hover::after {
  background-color: var(--c-dark);
}
.blk-faq[data-variant="d1"] .faq-q {
  color: var(--c-brand);
  font-size: var(--step-1);
  line-height: 1.3;
}
.blk-faq[data-variant="d1"] .faq-item > summary:hover .faq-q {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.blk-faq[data-variant="d1"] .faq-a {
  max-width: var(--measure);
  padding-bottom: var(--space-6);
  color: var(--c-ink);
}
.blk-faq[data-variant="d1"] .faq-a > * + * {
  margin-top: var(--space-3);
}
.blk-faq[data-variant="d1"] .faq-a li {
  position: relative;
  padding-left: 1.75em;
}
.blk-faq[data-variant="d1"] .faq-a li + li {
  margin-top: var(--space-1);
}
.blk-faq[data-variant="d1"] .faq-a li::before {
  content: "";
  position: absolute;
  left: 0.45em;
  top: 0.6em;
  width: 0.42em;
  height: 0.42em;
  background: var(--c-brand);
}
.blk-faq[data-variant="d1"] .faq-a a {
  color: var(--c-link);
  font-weight: var(--fw-strong);
}
.blk-faq[data-variant="d1"] .faq-a a:hover {
  color: var(--c-ink);
  text-decoration-thickness: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .blk-faq[data-variant="d1"] .faq-item > summary::after {
    transition: background-color var(--dur-1) var(--ease), background-size var(--dur-1) var(--ease);
  }
}
@media (max-width: 1023.98px) {
  .blk-faq[data-variant="d1"] .faq-items {
    grid-column: 1 / -1;
  }
}
@media (max-width: 599.98px) {
  .blk-faq[data-variant="d1"] .faq-item > summary {
    gap: var(--space-4);
    padding-block: var(--space-4);
  }
  .blk-faq[data-variant="d1"] .faq-item > summary::after {
    width: 1.75rem;
    height: 1.75rem;
  }
}


/* ============================== prose: running text under a side heading ============================== */

/* The start page's side-heading pattern (who, terms): the h2 on the left four columns, sticky while its text scrolls,
   the text on the right eight at the reading measure. */
.blk-prose[data-variant="d1"] {
  background: var(--c-bg);
}
.blk-prose[data-variant="d1"] .wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  align-items: start;
  padding-block: var(--band-pad);
}
/* Two prose blocks in a row: a hairline between them, not two full band paddings. */
.blk-prose[data-variant="d1"]:has(+ .blk-prose[data-variant="d1"]) .wrap {
  padding-bottom: var(--space-7);
}
.blk-prose[data-variant="d1"] + .blk-prose[data-variant="d1"] .wrap {
  padding-top: var(--space-7);
  background: linear-gradient(var(--c-line), var(--c-line)) 50% 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.blk-prose[data-variant="d1"] h2 {
  grid-column: 1 / span 4;
  position: sticky;
  top: var(--space-6);
  color: var(--c-brand);
  font-size: var(--step-3);
}
.blk-prose[data-variant="d1"] .prose-body,
.blk-prose[data-variant="d1"] .actions {
  grid-column: 5 / -1;
}
.blk-prose[data-variant="d1"] .prose-body {
  max-width: var(--measure);
  color: var(--c-ink);
}
/* Om oss has no title: its text starts on the page's left edge under the page head, a size up, read as a letter. */
.blk-prose[data-variant="d1"] .prose-body:first-child {
  grid-column: 1 / span 8;
  font-size: var(--step-1);
}
.blk-prose[data-variant="d1"] .prose-body > * + * {
  margin-top: var(--space-4);
}
.blk-prose[data-variant="d1"] .prose-body > h3 {
  margin-top: var(--space-7);
  color: var(--c-brand);
  font-size: var(--step-1);
}
.blk-prose[data-variant="d1"] .prose-body > h3 + * {
  margin-top: var(--space-3);
}
.blk-prose[data-variant="d1"] .prose-body a {
  color: var(--c-link);
  font-weight: var(--fw-strong);
}
.blk-prose[data-variant="d1"] .prose-body a:hover {
  color: var(--c-ink);
  text-decoration-thickness: 2px;
}

/* Lists: a small navy square by default; a dash one level down. */
.blk-prose[data-variant="d1"] .prose-body ul > li {
  position: relative;
  padding-left: 1.75em;
}
.blk-prose[data-variant="d1"] .prose-body li + li {
  margin-top: var(--space-2);
}
.blk-prose[data-variant="d1"] .prose-body ul > li::before {
  content: "";
  position: absolute;
  left: 0.45em;
  top: 0.6em;
  width: 0.42em;
  height: 0.42em;
  background: var(--c-brand);
}
.blk-prose[data-variant="d1"] .prose-body li > ul {
  margin-top: var(--space-2);
}
.blk-prose[data-variant="d1"] .prose-body li > ul > li::before {
  top: 0.75em;
  width: 0.6em;
  height: 2px;
}
/* What is in the service today: the ticked square of the start page's feature list. */
.blk-prose[data-variant="d1"] .prose-ticks > ul > li {
  padding-left: 2.1em;
}
.blk-prose[data-variant="d1"] .prose-ticks > ul > li + li {
  margin-top: var(--space-3);
}
.blk-prose[data-variant="d1"] .prose-ticks > ul > li::before {
  left: 0;
  top: 0.15em;
  width: 1.25em;
  height: 1.25em;
}
.blk-prose[data-variant="d1"] .prose-ticks > ul > li::after {
  content: "";
  position: absolute;
  left: 0.47em;
  top: 0.37em;
  width: 0.32em;
  height: 0.6em;
  border: solid var(--c-on-brand);
  border-width: 0 0.12em 0.12em 0;
  transform: rotate(45deg);
}
/* What is coming: the start page's empty square for "På gång". */
.blk-prose[data-variant="d1"] .prose-rings > ul > li {
  padding-left: 2.1em;
}
.blk-prose[data-variant="d1"] .prose-rings > ul > li + li {
  margin-top: var(--space-3);
}
.blk-prose[data-variant="d1"] .prose-rings > ul > li::before {
  left: 0;
  top: 0.15em;
  width: 1.25em;
  height: 1.25em;
  background: transparent;
  border: 0.12em solid var(--c-brand);
}
/* Numbered conditions (Om OVK, the terraced houses): the numeral in a navy square. */
.blk-prose[data-variant="d1"] .prose-body ol {
  counter-reset: d1-step;
}
.blk-prose[data-variant="d1"] .prose-body ol > li {
  position: relative;
  min-height: 1.75em;
  padding-left: 2.6em;
  counter-increment: d1-step;
}
.blk-prose[data-variant="d1"] .prose-body ol > li + li {
  margin-top: var(--space-4);
}
.blk-prose[data-variant="d1"] .prose-body ol > li::before {
  content: counter(d1-step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.75em;
  height: 1.75em;
  background: var(--c-brand);
  color: var(--c-on-brand);
  font-family: var(--font-figures);
  font-size: var(--step--1);
  font-weight: var(--fw-display);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
}
/* The release log (Nya funktioner): each date on the left, its list on the right, a hairline over each pair. */
.blk-prose[data-variant="d1"] .prose-log {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  column-gap: var(--space-6);
}
.blk-prose[data-variant="d1"] .prose-log > * + * {
  margin-top: 0;
}
.blk-prose[data-variant="d1"] .prose-log > p,
.blk-prose[data-variant="d1"] .prose-log > ul {
  padding-block: var(--space-4) var(--space-5);
  border-top: 1px solid var(--c-line);
}
.blk-prose[data-variant="d1"] .prose-log > p {
  grid-column: 1;
  color: var(--c-brand);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
}
.blk-prose[data-variant="d1"] .prose-log > ul {
  grid-column: 2;
}
/* The OVK interval table: a navy head row, hairlines between rows, the interval in navy display type. */
.blk-prose[data-variant="d1"] .prose-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.blk-prose[data-variant="d1"] .prose-body th,
.blk-prose[data-variant="d1"] .prose-body td {
  padding: var(--space-4);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.blk-prose[data-variant="d1"] .prose-body thead th {
  padding-block: var(--space-3);
  background: var(--c-brand);
  color: var(--c-on-brand);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  vertical-align: bottom;
}
.blk-prose[data-variant="d1"] .prose-body tbody td {
  border-bottom: 1px solid var(--c-line);
}
.blk-prose[data-variant="d1"] .prose-body tbody tr:nth-child(even) td {
  background: var(--c-bg-alt);
}
.blk-prose[data-variant="d1"] .prose-body tbody td:last-child {
  width: 30%;
  color: var(--c-brand);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
}
.blk-prose[data-variant="d1"] .prose-body table + p {
  color: var(--c-ink-muted);
  font-size: var(--step--1);
}
/* Actions under the text: the green for the trial, a navy outline for the rest, as "Visa alla funktioner". */
.blk-prose[data-variant="d1"] .btn {
  min-height: 52px;
  padding-inline: var(--space-6);
}
.blk-prose[data-variant="d1"] .btn--primary:hover {
  background: color-mix(in srgb, var(--c-accent) 82%, var(--c-ink));
}
.blk-prose[data-variant="d1"] .btn--secondary {
  color: var(--c-brand);
}
.blk-prose[data-variant="d1"] .btn--secondary:hover {
  background: color-mix(in srgb, var(--c-brand) 8%, var(--c-bg));
}

@media (max-width: 1023.98px) {
  .blk-prose[data-variant="d1"] h2 {
    grid-column: 1 / -1;
    position: static;
  }
  .blk-prose[data-variant="d1"] .prose-body,
  .blk-prose[data-variant="d1"] .prose-body:first-child,
  .blk-prose[data-variant="d1"] .actions {
    grid-column: 1 / -1;
  }
}
@media (max-width: 599.98px) {
  .blk-prose[data-variant="d1"] .wrap {
    row-gap: var(--space-5);
  }
  .blk-prose[data-variant="d1"] .prose-log {
    grid-template-columns: minmax(0, 1fr);
  }
  .blk-prose[data-variant="d1"] .prose-log > p,
  .blk-prose[data-variant="d1"] .prose-log > ul {
    grid-column: 1;
  }
  .blk-prose[data-variant="d1"] .prose-log > ul {
    padding-top: 0;
    border-top: 0;
  }
  .blk-prose[data-variant="d1"] .prose-log > p {
    padding-bottom: var(--space-3);
  }
  .blk-prose[data-variant="d1"] .prose-body th,
  .blk-prose[data-variant="d1"] .prose-body td {
    padding: var(--space-3);
  }
  .blk-prose[data-variant="d1"] .prose-body tbody td:last-child {
    width: 34%;
  }
  .blk-prose[data-variant="d1"] .actions .btn {
    flex: 1 1 auto;
  }
}


/* ============================== cards: white cards on the grey band, as the start page's cases ============================== */

.blk-cards[data-variant="d1"] {
  background: var(--c-bg-alt);
}
.blk-cards[data-variant="d1"] .wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-7) var(--space-5);
  align-items: start;
  padding-block: var(--band-pad);
}
.blk-cards[data-variant="d1"] h2 {
  grid-column: 1 / -1;
  color: var(--c-brand);
  font-size: var(--step-3);
}
.blk-cards[data-variant="d1"] .cards {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.blk-cards[data-variant="d1"] .card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--c-bg);
  border-radius: var(--radius-m);
}
.blk-cards[data-variant="d1"] .card-title {
  color: var(--c-brand);
  font-size: var(--step-1);
  line-height: 1.25;
}
.blk-cards[data-variant="d1"] .card > ul {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-line);
}
.blk-cards[data-variant="d1"] .card li {
  position: relative;
  padding-left: 2.1em;
}
.blk-cards[data-variant="d1"] .card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.25em;
  height: 1.25em;
  background: var(--c-brand);
}
.blk-cards[data-variant="d1"] .card li::after {
  content: "";
  position: absolute;
  left: 0.47em;
  top: 0.37em;
  width: 0.32em;
  height: 0.6em;
  border: solid var(--c-on-brand);
  border-width: 0 0.12em 0.12em 0;
  transform: rotate(45deg);
}
/* Three reasons (Om OVK) are not a row of three equal cards: they read as the start page's cases, title left, text
   right, under a side heading. */
.blk-cards[data-variant="d1"]:has(.cards--rows) h2 {
  grid-column: 1 / span 4;
}
.blk-cards[data-variant="d1"] .cards--rows {
  grid-column: 5 / -1;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
.blk-cards[data-variant="d1"] .cards--rows .card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--space-6);
  align-items: start;
}
.blk-cards[data-variant="d1"] .cards--rows .card-title {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.blk-cards[data-variant="d1"] .cards--rows .card > p {
  grid-column: 2;
}

@media (max-width: 1023.98px) {
  .blk-cards[data-variant="d1"] .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .blk-cards[data-variant="d1"]:has(.cards--rows) h2,
  .blk-cards[data-variant="d1"] .cards--rows {
    grid-column: 1 / -1;
  }
  .blk-cards[data-variant="d1"] .cards--rows {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 767.98px) {
  .blk-cards[data-variant="d1"] .wrap {
    row-gap: var(--space-6);
  }
  .blk-cards[data-variant="d1"] .cards {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
  .blk-cards[data-variant="d1"] .card {
    padding: var(--space-5);
  }
}
@media (max-width: 599.98px) {
  .blk-cards[data-variant="d1"] .cards--rows .card {
    grid-template-columns: minmax(0, 1fr);
  }
  .blk-cards[data-variant="d1"] .cards--rows .card-title,
  .blk-cards[data-variant="d1"] .cards--rows .card > p {
    grid-column: 1;
    grid-row: auto;
  }
}


/* ============================== films: seven tutorials, framed as the start page's film ============================== */

.blk-films[data-variant="d1"] {
  background: var(--c-bg);
}
.blk-films[data-variant="d1"] .wrap {
  padding-block: var(--space-7) var(--band-pad);
}
/* The three screen recordings (4:3) share a row; the four 16:9 films go two by two under them. */
.blk-films[data-variant="d1"] .films {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  counter-reset: d1-film;
}
.blk-films[data-variant="d1"] .film-item {
  grid-column: span 3;
  counter-increment: d1-film;
}
.blk-films[data-variant="d1"] .film-item:has(> .film-frame--4x3) {
  grid-column: span 2;
}
.blk-films[data-variant="d1"] .film-frame {
  overflow: hidden;
  background: var(--c-brand);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
}
.blk-films[data-variant="d1"] .video-load {
  gap: var(--space-2);
  padding: var(--space-5);
  color: var(--c-on-brand);
  text-align: center;
}
/* The film's number, large and faint in the corner. It only repeats the order the titles already give, it is drawn
   by CSS, and its alternative text is empty. */
.blk-films[data-variant="d1"] .video-load::after {
  content: counter(d1-film) / "";
  position: absolute;
  left: var(--space-5);
  top: var(--space-4);
  color: color-mix(in srgb, var(--c-on-brand) 24%, var(--c-brand));
  font-family: var(--font-figures);
  font-size: var(--step-5);
  font-weight: var(--fw-display);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
}
.blk-films[data-variant="d1"] .video-load__icon {
  width: 56px;
  height: 56px;
}
.blk-films[data-variant="d1"] .video-load__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--fw-display);
  line-height: 1.25;
  letter-spacing: var(--track-display);
}
.blk-films[data-variant="d1"] .video-load__note {
  color: color-mix(in srgb, var(--c-on-brand) 82%, var(--c-brand));
  font-size: var(--step--1);
}
.blk-films[data-variant="d1"] .video-load:hover {
  background: var(--c-dark);
}
.blk-films[data-variant="d1"] .video-load:hover .video-load__title {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.blk-films[data-variant="d1"] .video-load:focus-visible {
  outline: 3px solid var(--c-on-brand);
  outline-offset: -10px;
}

@media (prefers-reduced-motion: no-preference) {
  .blk-films[data-variant="d1"] .video-load {
    transition: background-color var(--dur-1) var(--ease);
  }
  .blk-films[data-variant="d1"] .video-load__icon {
    transition: transform var(--dur-2) var(--ease);
  }
  .blk-films[data-variant="d1"] .video-load:hover .video-load__icon {
    transform: scale(1.06);
  }
}
@media (max-width: 1023.98px) {
  .blk-films[data-variant="d1"] .films {
    column-gap: var(--space-4);
  }
  .blk-films[data-variant="d1"] .video-load {
    gap: var(--space-1);
    padding: var(--space-3);
  }
  .blk-films[data-variant="d1"] .video-load__icon {
    width: 40px;
    height: 40px;
  }
  .blk-films[data-variant="d1"] .video-load__title {
    font-size: var(--step-0);
  }
  .blk-films[data-variant="d1"] .video-load::after {
    left: var(--space-3);
    top: var(--space-3);
    font-size: var(--step-3);
  }
}
@media (max-width: 767.98px) {
  .blk-films[data-variant="d1"] .films {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-5);
  }
  .blk-films[data-variant="d1"] .film-item,
  .blk-films[data-variant="d1"] .film-item:has(> .film-frame--4x3) {
    grid-column: 1 / -1;
  }
  .blk-films[data-variant="d1"] .video-load {
    gap: var(--space-2);
    padding: var(--space-5);
  }
  .blk-films[data-variant="d1"] .video-load__icon {
    width: 56px;
    height: 56px;
  }
}


/* ============================== links: the rules library, eleven groups that open in place ============================== */

.blk-links[data-variant="d1"] {
  background: var(--c-bg);
}
.blk-links[data-variant="d1"] .wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-5);
  padding-block: var(--space-7) var(--band-pad);
}
.blk-links[data-variant="d1"] .link-groups {
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--c-line);
}
.blk-links[data-variant="d1"] .link-group {
  border-top: 1px solid var(--c-line);
}
/* The group title is the control, as the FAQ's question: the whole row, with the plus square. */
.blk-links[data-variant="d1"] .link-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 44px;
  padding: var(--space-5) var(--space-2) var(--space-5) 0;
  list-style: none;
  border-radius: var(--radius-s);
}
.blk-links[data-variant="d1"] .link-group > summary::-webkit-details-marker {
  display: none;
}
.blk-links[data-variant="d1"] .link-group > summary::after {
  content: "";
  flex: none;
  width: 2rem;
  height: 2rem;
  background:
    linear-gradient(var(--c-on-brand), var(--c-on-brand)) 50% 50% / 0.8rem 2px no-repeat,
    linear-gradient(var(--c-on-brand), var(--c-on-brand)) 50% 50% / 2px 0.8rem no-repeat,
    var(--c-brand);
}
.blk-links[data-variant="d1"] .link-group[open] > summary::after {
  background-size: 0.8rem 2px, 2px 0;
}
.blk-links[data-variant="d1"] .link-group > summary:hover::after {
  background-color: var(--c-dark);
}
.blk-links[data-variant="d1"] .link-group-title {
  color: var(--c-brand);
  font-size: var(--step-1);
  line-height: 1.3;
}
.blk-links[data-variant="d1"] .link-group > summary:hover .link-group-title {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.blk-links[data-variant="d1"] .link-body {
  display: grid;
  gap: var(--space-5);
  padding-bottom: var(--space-6);
}
/* Each list flows down two columns on a desktop, so a chronological list keeps its order top to bottom. */
.blk-links[data-variant="d1"] .link-list {
  columns: 2;
  column-gap: var(--space-7);
}
.blk-links[data-variant="d1"] .link-list + .link-list {
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-line);
}
.blk-links[data-variant="d1"] .link-list li {
  position: relative;
  margin-bottom: var(--space-2);
  padding-left: 1.4em;
  break-inside: avoid;
}
.blk-links[data-variant="d1"] .link-list li::before {
  content: "";
  position: absolute;
  left: 0.1em;
  top: calc(var(--space-2) + 0.58em);
  width: 0.42em;
  height: 0.42em;
  border: solid var(--c-link);
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}
/* The link is the clear target (at least 44 px tall); its note sits under it, smaller and quieter. */
.blk-links[data-variant="d1"] .link-list a {
  display: inline-block;
  padding-block: var(--space-2);
  color: var(--c-link);
  font-weight: var(--fw-strong);
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  overflow-wrap: anywhere;
}
.blk-links[data-variant="d1"] .link-list a:hover {
  color: var(--c-ink);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}
.blk-links[data-variant="d1"] .link-note {
  display: block;
  max-width: 60ch;
  margin-top: calc(-1 * var(--space-1));
  color: var(--c-ink-muted);
  font-size: var(--step--1);
}

@media (prefers-reduced-motion: no-preference) {
  .blk-links[data-variant="d1"] .link-group > summary::after {
    transition: background-color var(--dur-1) var(--ease), background-size var(--dur-1) var(--ease);
  }
}
@media (max-width: 1023.98px) {
  .blk-links[data-variant="d1"] .link-list {
    columns: 1;
  }
}
@media (max-width: 599.98px) {
  .blk-links[data-variant="d1"] .link-group > summary {
    gap: var(--space-4);
    padding-block: var(--space-4);
  }
  .blk-links[data-variant="d1"] .link-group > summary::after {
    width: 1.75rem;
    height: 1.75rem;
  }
}


/* ============================== doc: the privacy policy, a long legal read ============================== */

.blk-doc[data-variant="d1"] {
  background: var(--c-bg);
}
.blk-doc[data-variant="d1"] .wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-5);
  padding-block: var(--space-7) var(--band-pad);
}
.blk-doc[data-variant="d1"] .doc-body {
  grid-column: 1 / span 8;
  max-width: var(--measure);
  color: var(--c-ink);
}
.blk-doc[data-variant="d1"] .doc-body > * + * {
  margin-top: var(--space-4);
}
/* Each numbered section starts on a navy rule, so the eye finds 1.1 to 1.9 while scrolling. */
.blk-doc[data-variant="d1"] .doc-body > h2 {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 2px solid var(--c-brand);
  color: var(--c-brand);
  font-size: var(--step-1);
  line-height: 1.25;
}
.blk-doc[data-variant="d1"] .doc-body > h2:first-child {
  margin-top: 0;
}
.blk-doc[data-variant="d1"] .doc-body > h3 {
  margin-top: var(--space-6);
  color: var(--c-ink);
  font-size: var(--step-0);
  line-height: 1.3;
}
.blk-doc[data-variant="d1"] .doc-body > h2 + *,
.blk-doc[data-variant="d1"] .doc-body > h3 + * {
  margin-top: var(--space-3);
}
.blk-doc[data-variant="d1"] .doc-body a {
  color: var(--c-link);
  font-weight: var(--fw-strong);
}
.blk-doc[data-variant="d1"] .doc-body a:hover {
  color: var(--c-ink);
  text-decoration-thickness: 2px;
}
/* The rights (a bold line, then its text) read as small navy heads. */
.blk-doc[data-variant="d1"] .doc-body > p:has(> strong:only-child) {
  margin-top: var(--space-5);
  color: var(--c-brand);
  font-family: var(--font-display);
}
.blk-doc[data-variant="d1"] .doc-body > p:has(> strong:only-child) + p {
  margin-top: var(--space-1);
}
.blk-doc[data-variant="d1"] .doc-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.blk-doc[data-variant="d1"] .doc-body th,
.blk-doc[data-variant="d1"] .doc-body td {
  padding: var(--space-3) 0;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
/* Label and value tables: the label in navy on the left, the value beside it, a hairline under each row. */
.blk-doc[data-variant="d1"] .doc-body table:has(td) {
  border-top: 1px solid var(--c-line);
}
.blk-doc[data-variant="d1"] .doc-body tr:has(td) > th,
.blk-doc[data-variant="d1"] .doc-body tr:has(td) > td {
  border-bottom: 1px solid var(--c-line);
}
.blk-doc[data-variant="d1"] .doc-body tr:has(td) > th {
  width: 32%;
  padding-right: var(--space-5);
  color: var(--c-brand);
  font-weight: var(--fw-strong);
}
/* Tables whose rows each hold one sentence read as a mint panel. */
.blk-doc[data-variant="d1"] .doc-body table:not(:has(td)) {
  background: var(--c-surface);
  border-radius: var(--radius-m);
}
.blk-doc[data-variant="d1"] .doc-body th:only-child {
  padding: var(--space-4) var(--space-5);
  color: var(--c-ink);
  font-weight: var(--fw-text);
}
.blk-doc[data-variant="d1"] .doc-body tr + tr > th:only-child {
  border-top: 1px solid color-mix(in srgb, var(--c-brand) 14%, var(--c-surface));
}

@media (max-width: 1023.98px) {
  .blk-doc[data-variant="d1"] .doc-body {
    grid-column: 1 / -1;
  }
}
/* Phone: each label sits over its value, full width, so nothing is squeezed into a narrow column. */
@media (max-width: 599.98px) {
  .blk-doc[data-variant="d1"] .doc-body table:has(td),
  .blk-doc[data-variant="d1"] .doc-body table:has(td) tbody,
  .blk-doc[data-variant="d1"] .doc-body tr:has(td),
  .blk-doc[data-variant="d1"] .doc-body tr:has(td) > th,
  .blk-doc[data-variant="d1"] .doc-body tr:has(td) > td {
    display: block;
    width: auto;
  }
  .blk-doc[data-variant="d1"] .doc-body tr:has(td) > th {
    padding-right: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .blk-doc[data-variant="d1"] .doc-body tr:has(td) > td {
    padding-top: var(--space-1);
  }
}


/* ============================== notfound: small and kind, a mint panel ============================== */

.blk-notfound[data-variant="d1"] {
  background: var(--c-bg);
}
.blk-notfound[data-variant="d1"] .wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-5);
  align-content: center;
  min-height: clamp(28rem, 70vh, 46rem);
  padding-block: var(--band-pad);
}
.blk-notfound[data-variant="d1"] .notfound-panel {
  grid-column: 1 / span 8;
  padding: var(--space-8) var(--space-7);
  background: var(--c-surface);
  border-radius: var(--radius-l);
}
.blk-notfound[data-variant="d1"] h1 {
  color: var(--c-brand);
  font-family: var(--font-figures);
  font-size: var(--step-5);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
}
.blk-notfound[data-variant="d1"] .notfound-lead {
  max-width: 36ch;
  margin-top: var(--space-5);
  color: var(--c-ink);
  font-size: var(--step-1);
}
.blk-notfound[data-variant="d1"] .actions {
  align-items: center;
  margin-top: var(--space-6);
}
.blk-notfound[data-variant="d1"] .btn {
  min-height: 52px;
  padding-inline: var(--space-6);
}
.blk-notfound[data-variant="d1"] .btn--primary:hover {
  background: color-mix(in srgb, var(--c-accent) 82%, var(--c-ink));
}
.blk-notfound[data-variant="d1"] .btn--secondary {
  color: var(--c-brand);
}
.blk-notfound[data-variant="d1"] .btn--secondary:hover {
  background: color-mix(in srgb, var(--c-brand) 8%, var(--c-surface));
}
.blk-notfound[data-variant="d1"] .btn--quiet {
  padding-inline: var(--space-4);
  color: var(--c-link);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
.blk-notfound[data-variant="d1"] .btn--quiet:hover {
  color: var(--c-ink);
  text-decoration-thickness: 2px;
}

@media (max-width: 1023.98px) {
  .blk-notfound[data-variant="d1"] .notfound-panel {
    grid-column: 1 / -1;
  }
}
@media (max-width: 599.98px) {
  .blk-notfound[data-variant="d1"] .wrap {
    min-height: 0;
  }
  .blk-notfound[data-variant="d1"] .notfound-panel {
    padding: var(--space-7) var(--space-5);
  }
  .blk-notfound[data-variant="d1"] .actions .btn--primary,
  .blk-notfound[data-variant="d1"] .actions .btn--secondary {
    flex: 1 1 100%;
  }
}


/* =====================================================================================================================
   Wave 2 (2026-10-23): the light motion layer (W2-BRIEF.md section 2). Everything below sits inside
   prefers-reduced-motion: no-preference, so with reduced motion, or in a browser without these features, every word
   and button is whole and still. Nothing starts hidden and waits: the fade-ins are tied to scroll position, and an
   element in view is past its range, so it is whole.
   - Page transitions: the browser's own cross-fade between the ten pages, at --dur-2 with --ease.
   - Scroll fade-ins: a fade with a 10 px rise on text and figures as they enter, finished by 30% of the entry. Only the
     content moves: no band, ground, panel, header, hero headline, lead or button is animated. Each animated element is
     either one text element (a heading, a paragraph, a list row, a question row) or a figure whose text sits at its
     foot, so no text is fully in view while it is still faded.
   - The signature moment, "the close-up settles": once, as the start page opens, the dashboard close-up in the hero
     card drifts 12 px into its framing over about 360 ms, like a camera finding its subject. The picture is whole and
     unfaded throughout; only its position in the window moves, and nothing else waits for it.
   ===================================================================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--dur-2);
    animation-timing-function: var(--ease);
  }

  @keyframes d1-closeup {
    from {
      transform: translate(12px, 8px);
    }
    to {
      transform: none;
    }
  }
  @keyframes d1-rise {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .blk-hero[data-variant="d1"] .hero-card__shot {
    animation: d1-closeup calc(var(--dur-2) * 1.3) var(--ease) both;
  }

  @supports (animation-timeline: view()) {
    .blk-film[data-variant="d1"] h2,
    .blk-film[data-variant="d1"] .film-frame,
    .blk-peek[data-variant="d1"] h2,
    .blk-peek[data-variant="d1"] .shot,
    .blk-who[data-variant="d1"] h2,
    .blk-who[data-variant="d1"] .case > *,
    .blk-features[data-variant="d1"] h2,
    .blk-features[data-variant="d1"] .features-intro,
    .blk-features[data-variant="d1"] .features-sub,
    .blk-features[data-variant="d1"] .feat-list > li,
    .blk-prices[data-variant="d1"] h2,
    .blk-prices[data-variant="d1"] .prices-framing,
    .blk-prices[data-variant="d1"] .plan,
    .blk-prices[data-variant="d1"] .terms-list > li,
    .blk-terms[data-variant="d1"] h2,
    .blk-terms[data-variant="d1"] .terms-items > *,
    .blk-help[data-variant="d1"] h2,
    .blk-help[data-variant="d1"] .paths > li,
    .blk-help[data-variant="d1"] .questions > li,
    .blk-faq[data-variant="d1"] .faq-item > summary,
    .blk-prose[data-variant="d1"] h2,
    .blk-prose[data-variant="d1"] .prose-body > p,
    .blk-prose[data-variant="d1"] .prose-body > h3,
    .blk-prose[data-variant="d1"] .prose-body > ul > li,
    .blk-prose[data-variant="d1"] .prose-body > ol > li,
    .blk-cards[data-variant="d1"] h2,
    .blk-cards[data-variant="d1"] .card-title,
    .blk-cards[data-variant="d1"] .card > p,
    .blk-cards[data-variant="d1"] .card li,
    .blk-films[data-variant="d1"] .film-item,
    .blk-links[data-variant="d1"] .link-group > summary,
    .blk-links[data-variant="d1"] .link-list > li,
    .blk-doc[data-variant="d1"] .doc-body > h2,
    .blk-doc[data-variant="d1"] .doc-body > h3,
    .blk-doc[data-variant="d1"] .doc-body > p,
    .blk-doc[data-variant="d1"] .doc-body > ul > li {
      animation: d1-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }
  }
}

/* ===== d1-port/polish.css ===== */
/* d1-port/polish.css: the polish plan's items 2 to 5 on d1 (../d3-port/POLISH-PLAN.md), appended to d1.css after d1's
   own sections.css. Website lane, 2026-10-27. d1 already has item 1 (fade-ins on every block), the page cross-fade and
   its signature moment (sections.css, "Wave 2: the light motion layer"), and base.css already sets text-wrap on
   headings and paragraphs. Everything here sits inside prefers-reduced-motion: no-preference, the scroll-driven part
   also behind @supports, and it animates only opacity, transform, translate and block-size. Without a feature, or with
   reduced motion, every word and control is whole and still, as before. */

@media (prefers-reduced-motion: no-preference) {

  /* Item 2: page transitions with a fixed frame. The header and the footer are captured on their own and shown in
     their new state at once, so they never blink; only the content between them cross-fades, with d1's 10 px rise.
     The header is already its own stacking context (position: relative; z-index: 30), so the name changes no
     stacking. Browsers without cross-document view transitions load the next page as before. */
  .blk-hdr[data-variant="d1"] {
    view-transition-name: d1-hdr;
  }
  .blk-ftr[data-variant="d1"] {
    view-transition-name: d1-ftr;
  }
  ::view-transition-group(d1-hdr),
  ::view-transition-group(d1-ftr),
  ::view-transition-new(d1-hdr),
  ::view-transition-new(d1-ftr) {
    animation: none;
  }
  ::view-transition-old(d1-hdr),
  ::view-transition-old(d1-ftr) {
    display: none;
  }
  ::view-transition-new(root) {
    animation-name: d1-rise;
  }

  /* Item 3: one depth moment, not a parallax site. The hero's photograph drifts 24 px down over the first screen's
     scroll, so the ductwork sits a little deeper than the words and the product card. It moves on `translate`, which
     leaves the photo's scale(1.8) crop alone, and the crop leaves far more than 24 px of picture above the frame, so
     no edge can show. The photo is never faded, so its Largest Contentful Paint is untouched. Nothing else moves
     against the scroll. */
  @supports (animation-timeline: scroll()) {
    @keyframes d1-depth {
      from {
        translate: 0 0;
      }
      to {
        translate: 0 24px;
      }
    }
    .blk-hero[data-variant="d1"] .hero-media img {
      animation: d1-depth linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
  }

  /* Item 4: the FAQ rows, the link groups and "Visa alla funktioner" open and close smoothly. The height eases where
     the browser can interpolate to auto (Chrome); Safari and Firefox fade the content in at its full height. The Meny
     (nav-fold) is left out, by d1's own rule that the header never animates. */
  .blk-faq[data-variant="d1"] .faq-item,
  .blk-links[data-variant="d1"] .link-group,
  .blk-features[data-variant="d1"] .feat-more {
    interpolate-size: allow-keywords;
  }
  .blk-faq[data-variant="d1"] .faq-item::details-content,
  .blk-links[data-variant="d1"] .link-group::details-content,
  .blk-features[data-variant="d1"] .feat-more::details-content {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    transition: block-size var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease), content-visibility var(--dur-2) allow-discrete;
  }
  .blk-faq[data-variant="d1"] .faq-item[open]::details-content,
  .blk-links[data-variant="d1"] .link-group[open]::details-content,
  .blk-features[data-variant="d1"] .feat-more[open]::details-content {
    block-size: auto;
    opacity: 1;
  }

  /* Item 5: the small finishes. The card's arrow already nudges on hover (sections.css); it now does on keyboard focus
     too. Buttons press in 1 px. In-page links (the skip link, "Se alla funktioner") scroll smoothly; the features block
     already keeps a scroll margin. The cards' lift is left out: d1's cards hold no link, and a lift would promise a
     click that does nothing. */
  .blk-hero[data-variant="d1"] .hero-all:focus-visible .hero-card__arrow {
    transform: translateX(3px);
  }
  [data-variant="d1"] .btn:active {
    transform: translateY(1px);
  }
  html {
    scroll-behavior: smooth;
  }
}

/* ===== d1-port/path-b.css ===== */
/* d1-port/path-b.css: the two parts of AC's path B for release d1 that need a style, appended to d1.css after
   polish.css. Website lane, 2026-10-27. The help page's FAQ v2 puts its 16 questions under five group headings, and
   Priser says "Alla priser är exklusive moms." under the price list. Nothing here moves. */

/* FAQ v2: each group opens with its heading. A rule closes the group above it, since the questions carry only a top
   rule, and the heading gets room above it. The questions stay h3 under it, styled as before by .faq-q. */
.blk-faq[data-variant="d1"] .faq-group {
  padding-block: var(--space-4);
  color: var(--c-ink);
  font-size: var(--step-2);
}
.blk-faq[data-variant="d1"] .faq-item + .faq-group {
  margin-top: 0;
  padding-top: var(--space-7);
  border-top: 1px solid var(--c-line);
}

/* Priser: the moms line sits under the navy price list, in the list's columns. */
.blk-prices[data-variant="d1"] .prices-vat {
  grid-column: 1 / span 7;
  grid-row: 5;
  margin-top: var(--space-3);
  color: var(--c-ink);
  font-size: var(--step--1);
}
@media (max-width: 1023.98px) {
  .blk-prices[data-variant="d1"] .prices-vat {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* ===== d1-1-images/images.css ===== */
/* ===== d1.1: sharp images (website lane, 2026-10-28; PLAN.md) =====
   Appended to d1.css after path-b.css. Each image file under /site-assets/img/ carries the first eight hex of its
   sha256 in its name, because /site-assets/ is cached for a day (site.conf): a changed picture gets a new name. */

/* The film poster: the film's own first frame (Vimeo's thumbnail of video 1158179463), cropped above its burned-in
   subtitle (the band starts at row 620 of 720), in place of the map screen. The 1280 px file serves ratio 1 and the
   1920 px file ratio 2; the plain url() is for a browser that knows neither image-set form. Aligned to the bottom, so
   every box from phone to desktop keeps the face and the OVK-Plan mark, and no box shows the cut edge. */
.blk-film[data-variant="d1"] .video-load::before {
  background-image: url("/site-assets/img/film-poster-1280-3ae7e2d4.jpg");
  background-image: -webkit-image-set(url("/site-assets/img/film-poster-1280-3ae7e2d4.jpg") 1x, url("/site-assets/img/film-poster-1920-99369b49.jpg") 2x);
  background-image: image-set(url("/site-assets/img/film-poster-1280-3ae7e2d4.jpg") 1x, url("/site-assets/img/film-poster-1920-99369b49.jpg") 2x);
  background-position: 50% 100%;
}

/* The hero card's shot and the peek block's list: the demo company's OVK list, captured from /demo at device scale 4
   (capture-demo-list.cjs) and cut by crop-demo-list.cjs from the columns that stay (crops.json: no building name and no
   "Skapad av"). Each file is its frame's own window, so it is drawn from the frame's top-left corner with cover: the
   desktop hero frame (456 / 245) shows the left part of the tablet window (639 / 245). The srcset and sizes in the page
   give each screen a file at least as wide as it is drawn. These rules come after sections.css, so they also win over
   its tablet rules. */
.blk-hero[data-variant="d1"] .hero-card__shot {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 0;
}
.blk-peek[data-variant="d1"] .shot-frame picture {
  display: block;
}
.blk-peek[data-variant="d1"] .shot-frame img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 0 0;
}
/* On a phone the window is the first two columns, the header and five rows (D-BRIEF 3b point 2), so the frame takes
   that window's shape. */
@media (max-width: 767.98px) {
  .blk-peek[data-variant="d1"] .shot-frame {
    aspect-ratio: 360 / 385.5;
  }
}