/* ------------------------------------------------------------------------
   Front page design pass 2026-11-03 (owner): big rounded section boxes with
   square tiles inside, left-aligned display type in several sizes, one load
   animation in the hero (scattered documents sorted into a list), a role
   picker instead of one card per role. Loaded by index.html (Norwegian page
   first). Keep this file ASCII-only. Never use a coloured left-border accent.
   ------------------------------------------------------------------------ */

[data-theme] {
  --fs-radius-box: 32px;
  --fs-radius-tile: 22px;
  --fs-navy: #0b2540;
  --fs-navy-soft: #123760;
  --fs-sky: #8fc4ff;
  --fs-mint: #7ee0c6;
  --fs-warm: #ffb547;
  --fs-tint: color-mix(in srgb, var(--brand) 9%, transparent);
  --fs-tint-strong: color-mix(in srgb, var(--brand) 16%, transparent);
  --fs-tint-mint: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ---------- One width for the whole page ----------
   The shared layout lets .container grow to 1440/1920/2560px on big screens;
   then the header spread to the window edges while the content did not, and
   the hero tile became huge. On this page header, sections and demo share one
   1320px column, so the logo lines up with the text and the header button
   with the right edge of the content. */
@media (min-width: 1280px) {
  .container, .demo-section .container { max-width: 1320px; }
}

/* ---------- Type ---------- */
.fs-display {
  font-size: clamp(36px, 5.4vw, 78px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin: 0 0 var(--space-6);
  text-align: left;
}
.fs-h2 {
  font-size: clamp(30px, 3.9vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-align: left;
  margin: 0;
}
.fs-display span, .fs-h2 span { display: block; }

/* One line per row (owner): every heading line is its own span and must stay
   on one line. Each heading carries --fit = its longest line measured in em
   (plus a little air) and is a size container, so its lines scale to the
   column they stand in, never past --fs-max. The problem heading sits in an
   inline-block (for the handwritten note) and scales to the box instead. */
.fs-box, .fs-h2, .fs-display { container-type: inline-size; }
.fs-headline .fs-h2 { container-type: normal; }
.fs-h2 span, .fs-display span {
  white-space: nowrap;
  font-size: clamp(24px, calc(100cqi / var(--fit, 10.5)), var(--fs-max, 48px));
}
.fs-display { --fs-max: 54px; }
/* Phones: section headings may wrap again at a fixed size; the hero keeps fitting. */
@media (max-width: 860px) {
  .fs-h2 span { white-space: normal; font-size: clamp(28px, 7vw, 36px); }
}

/* ---------- Building blocks ---------- */
.fs-box {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--fs-radius-box);
  padding: clamp(24px, 4.6vw, 64px);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.fs-box--navy {
  background: var(--fs-navy);
  border-color: transparent;
  color: #fff;
}
.fs-box--navy .fs-h2 { color: #fff; }

.fs-tile {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--fs-radius-tile);
  background: var(--fs-tint);
}
.fs-tile__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
}
.fs-tile__title--lg { font-size: clamp(22px, 2vw, 30px); }
.fs-tile p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-muted); }

.fs-grid { display: grid; gap: var(--space-4); }

/* ---------- 1. Hero ---------- */
.fs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.fs-hero__lead { margin: 0; max-width: 52ch; font-size: var(--text-lg); line-height: 1.6; color: var(--text-muted); }
.fs-hero__lead span { display: block; }
.fs-hero__lead span + span { margin-top: var(--space-3); color: var(--text); font-weight: 600; }
.fs-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
/* "Se demoen" (owner 2026-11-03): first and clearly visible, in a very light
   blue so it does not compete with the orange access button. */
.fs-hero__actions a.btn.fs-btn-demo:not(.btn-primary) { background-image: none; }
.fs-hero__actions .btn.fs-btn-demo::before { display: none; }   /* the white glass sheen washed the text out */
[data-theme] .fs-hero__actions a.btn.fs-btn-demo:not(.btn-primary) {
  background: #dcecff;
  color: #0b3a6b;
  border: 1px solid #b7d6fb;
  box-shadow: 0 4px 14px rgba(47, 127, 214, .16);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
[data-theme] .fs-hero__actions a.btn.fs-btn-demo:not(.btn-primary):hover,
[data-theme] .fs-hero__actions a.btn.fs-btn-demo:not(.btn-primary):focus-visible { background: #cde3ff; border-color: #9cc7f8; color: #0b3a6b; }
.fs-hero__actions .btn.fs-btn-demo:focus-visible { outline: 2px solid #2f7fd6; outline-offset: 2px; }
[data-theme="dark"] .fs-hero__actions a.btn.fs-btn-demo:not(.btn-primary) {
  background: rgba(143, 196, 255, .16);
  color: #e3f0ff;
  border-color: rgba(143, 196, 255, .38);
  box-shadow: none;
}
[data-theme="dark"] .fs-hero__actions a.btn.fs-btn-demo:not(.btn-primary):hover { background: rgba(143, 196, 255, .26); color: #fff; }

.fs-sort {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--fs-radius-box);
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .09) 1px, transparent 0) 0 0 / 22px 22px,
    linear-gradient(160deg, var(--fs-navy-soft), var(--fs-navy));
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.fs-sort__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: 18px;
  color: #dbe7f3;
}
.fs-sort__count {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  font-size: 14px;
}
.fs-doc {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  column-gap: 9px;
  row-gap: 3px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
  color: #1b2a3d;
  box-shadow: 0 14px 28px rgba(3, 14, 30, .35);
  animation: fs-sort-in 1.05s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(.35s + var(--i) * .13s);
}
.fs-doc svg { grid-row: 1 / span 2; width: 22px; height: 22px; color: #2f7fd6; }
.fs-doc__title {
  grid-column: 2;
  font-family: var(--font-family-ui);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fs-doc__meta { grid-column: 2; font-size: 12px; color: #5b6b80; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-doc__chip {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e6f1ff;
  color: #1f5fa3;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  animation: fs-pop .45s ease both;
  animation-delay: calc(1.55s + var(--i) * .1s);
}
/* Bells and alerts (owner 2026-11-03): every agreement with a date has a bell,
   joined by a dashed line to a box on the right listing the alerts set for it. */
.fs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 205px;
  column-gap: 18px;
  align-items: center;
}
.fs-sort__head { display: grid; grid-template-columns: minmax(0, 1fr) 205px; column-gap: 18px; }
.fs-sort__head > span { display: inline-flex; align-items: center; gap: 10px; }
.fs-doc__bell {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff1db;
  color: #c26a00;
  animation: fs-pop .45s cubic-bezier(.2, .9, .3, 1.4) both;
  animation-delay: calc(1.75s + var(--i) * .12s);
}
.fs-doc__bell svg { width: 16px; height: 16px; }
.fs-alerts {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 8px 12px;
  display: grid;
  gap: 3px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 181, 71, .45);
  animation: fs-alerts-in .5s ease-out both;
  animation-delay: calc(1.95s + var(--i) * .15s);
}
.fs-alerts::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 18px;
  border-top: 2px dashed rgba(255, 181, 71, .7);
}
.fs-alerts li {
  position: relative;
  padding-left: 14px;
  font-family: var(--font-family-ui);
  font-size: 12px;
  line-height: 1.35;
  color: #f3f7fc;
}
.fs-alerts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fs-warm);
}
@keyframes fs-alerts-in {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}
@keyframes fs-sort-in {
  from { transform: translate(var(--x), var(--y)) rotate(var(--r)); }
  to { transform: none; }
}
@keyframes fs-pop {
  from { opacity: 0; transform: scale(.85); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1100px) {
  .fs-hero { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .fs-row, .fs-sort__head { grid-template-columns: minmax(0, 1fr); }
  .fs-sort__head-alerts { display: none !important; }
  .fs-doc__title, .fs-doc__meta { white-space: normal; }
  .fs-doc__chip { margin: 3px 0 0; }
  .fs-alerts { margin: 8px 0 4px 36px; }
  .fs-alerts::before { right: auto; left: -18px; top: -8px; width: 0; height: calc(50% + 8px); border-top: 0; border-left: 2px dashed rgba(255, 181, 71, .7); }
}

/* ---------- 2. Problem: a full-width white band ---------- */
[data-theme] { --fs-band-bg: #ffffff; }
[data-theme="dark"] { --fs-band-bg: #151922; }
[data-theme="pastel"] { --fs-band-bg: #fffaf9; }
.fs-band {
  background: var(--fs-band-bg);
  padding-top: clamp(56px, 7vw, 104px);
  padding-bottom: clamp(56px, 7vw, 104px);
}
/* Inside the band the box keeps its role as size container but loses its frame. */
.fs-box--plain {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Headline with a handwritten note. Narrow: the note sits under the heading,
   right-aligned, without arrow. Wide (box at least 900px): the note moves out
   to the right of "overalt!" and a curved arrow runs from its "V" up to the word. */
.fs-headline { position: relative; display: inline-block; max-width: 100%; }
.fs-note {
  position: relative;
  margin: var(--space-4) 0 0;
  display: flex;
  justify-content: flex-end;
  font-family: 'Caveat', 'Segoe Print', cursive;
  font-weight: 600;
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1;
  color: var(--brand);
  white-space: nowrap;
  transform: rotate(-4deg);
  transform-origin: right top;
}
.fs-note svg { display: none; }
@container (min-width: 900px) {
  .fs-note {
    position: absolute;
    left: calc(100% + 6px);
    top: calc(100% + 34px);
    margin: 0;
    transform-origin: left top;
  }
  /* viewBox 140x60 drawn 1:1: the curve starts just above-left of the "V"
     (2px left of the note) and ends 92px further left and 40px higher, which
     lands under the middle of "overalt!". */
  .fs-note svg {
    display: block;
    position: absolute;
    left: -130px;
    top: -52px;
    width: 140px;
    height: 60px;
    overflow: visible;
  }
}
.fs-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(72px, 8vw, 96px);
}
.fs-grid--3 .fs-tile { justify-content: flex-end; }
/* Wide: the three tiles share their rows (subgrid), so drawing, title and text
   start at the same height in every tile whatever the text length. */
@media (min-width: 861px) {
  .fs-grid--3 { grid-template-rows: 200px auto auto; row-gap: 0; }
  .fs-grid--3 .fs-tile {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: var(--space-3);
    align-content: start;
  }
  .fs-grid--3 .fs-illu { min-height: 0; }
}
.fs-illu { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 110px; }
.fs-illu svg { width: 100%; max-width: 230px; height: auto; overflow: visible; }

/* Illustration paints (theme aware through the brand tokens) */
.fs-f1 { fill: var(--brand); }
.fs-f2 { fill: color-mix(in srgb, var(--brand) 55%, #fff); }
.fs-f3 { fill: color-mix(in srgb, var(--brand) 30%, #fff); }
.fs-paper { fill: #fff; stroke: color-mix(in srgb, var(--brand) 40%, transparent); stroke-width: 1.5; }
.fs-ink { stroke: color-mix(in srgb, var(--brand) 60%, #8899aa); stroke-width: 3; stroke-linecap: round; fill: none; }
.fs-neq { stroke: var(--fs-warm); stroke-width: 5; stroke-linecap: round; fill: none; }
.fs-line-white { stroke: #fff; stroke-width: 4; fill: none; stroke-linejoin: round; }
.fs-clip { stroke: var(--text-muted); stroke-width: 4; fill: none; stroke-linecap: round; }
.fs-badge { fill: var(--fs-warm); }
.fs-badge-text { fill: #2b1600; font: 700 20px var(--font-family-ui); }
.fs-logo-text { fill: #fff; font: 800 15px var(--font-family-ui); }
.fs-link { fill: none; stroke: color-mix(in srgb, var(--brand) 55%, transparent); stroke-width: 2; stroke-dasharray: 4 4; stroke-linecap: round; }
.fs-window { fill: #fff; fill-opacity: .75; }
.fs-price--a { fill: var(--fs-mint); }
.fs-price--b { fill: var(--fs-warm); }
.fs-price-text { fill: #10233a; font: 700 11px var(--font-family-ui); }
[data-theme="dark"] .fs-window { fill-opacity: .35; }

/* The solution is its own dark band, edge to edge. */
.fs-band--navy { --fs-band-bg: var(--fs-navy); color: #fff; }
.fs-solution {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: var(--space-9);
  align-items: center;
  color: #fff;
}
.fs-solution__title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
}
.fs-solution p { margin: 0; font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, .82); }
.fs-solution p span { display: block; }
.fs-solution p .fs-solution__strong { margin-top: var(--space-4); color: var(--fs-mint); font-weight: 700; font-size: 19px; }
.fs-tree { width: 100%; max-width: 660px; justify-self: end; overflow: visible; }
.fs-band--navy .fs-h2 { color: #fff; }
/* Below 1024px the page column is only 768px wide: stack text over the tree. */
@media (max-width: 1023px) {
  .fs-solution { grid-template-columns: 1fr; gap: var(--space-7); }
  .fs-tree { justify-self: start; }
}
.fs-tree__line { stroke: rgba(255, 255, 255, .35); stroke-width: 2; fill: none; }
.fs-tree__root { fill: #fff; }
.fs-tree__node { fill: rgba(255, 255, 255, .12); stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; }
.fs-tree__rows { stroke: rgba(255, 255, 255, .28); stroke-width: 5; stroke-linecap: round; }
.fs-tree__text { fill: var(--fs-navy); font: 700 15px var(--font-family-ui); }
.fs-tree__small { fill: #fff; font: 600 13px var(--font-family-ui); }
.fs-tree__arrow { stroke: rgba(255, 255, 255, .55); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fs-tree__group { fill: rgba(126, 224, 198, .06); stroke: rgba(126, 224, 198, .55); stroke-width: 1.5; stroke-dasharray: 5 5; }
.fs-tree__pill { fill: rgba(143, 196, 255, .16); stroke: rgba(143, 196, 255, .45); stroke-width: 1.2; }
.fs-tree__pilltext { fill: #dbe9ff; font: 600 11.5px var(--font-family-ui); }

@media (max-width: 860px) {
  .fs-grid--3 { grid-template-columns: 1fr; margin-top: var(--space-7); }
  .fs-solution { grid-template-columns: 1fr; }
  .fs-tree { justify-self: start; }
}

/* ---------- 5. One document: heading left, lead right ---------- */
.fs-split-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: end;
}
.fs-split-head p { margin: 0; justify-self: end; max-width: 42ch; font-size: var(--text-lg); line-height: 1.6; color: var(--text-muted); }
.fs-box .doc-facts { background: var(--fs-tint); }
/* Heading across the full width, lead under it (long two-line heading, owner 2026-11-03) */
.fs-split-head--stack { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.fs-split-head--stack p { justify-self: start; max-width: 62ch; }
@media (max-width: 860px) {
  .fs-split-head { grid-template-columns: 1fr; }
  .fs-split-head p { justify-self: start; }
}

/* ---------- 6. Tools (owner 2026-11-03): replaces the four feature tiles ----------
   Two large rows (the alert e-mail in an inbox, the counterparty profile) and
   a toolkit of four small drawings. Inside the mint band, so surfaces use
   --fs-on-mint (white / dark). */
.fs-tools { margin-top: clamp(72px, 9vw, 128px); }
.fs-feature {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin-top: clamp(36px, 5vw, 64px);
}
.fs-feature--flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.fs-feature--flip .fs-feature__text { order: 2; }
.fs-feature__text h3 {
  margin: 0 0 var(--space-5);
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: clamp(22px, 2.3vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
  hyphens: manual;
}
.fs-feature__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.fs-feature__points li { position: relative; max-width: none; padding-left: 32px; font-size: 17px; line-height: 1.55; color: var(--text); }
.fs-feature__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
}
.fs-feature__points li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: calc(.2em + 4px);
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
[data-theme="dark"] .fs-feature__points li::after { border-color: #0f1115; }

/* The inbox */
.fs-inbox {
  border-radius: 18px;
  overflow: hidden;
  background: var(--fs-on-mint);
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px rgba(11, 37, 64, .12);
  font-family: var(--font-family-ui);
}
.fs-inbox__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.fs-inbox__bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.fs-inbox__bar i:nth-child(2) { background: #febc2e; }
.fs-inbox__bar i:nth-child(3) { background: #28c840; }
.fs-inbox__bar span { margin-left: 10px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.fs-inbox__body { display: grid; grid-template-columns: 190px minmax(0, 1fr); }
.fs-inbox__list { list-style: none; margin: 0; padding: 6px; border-right: 1px solid var(--line); }
.fs-inbox__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 6px;
  max-width: none;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 12px;
}
.fs-inbox__list b { font-size: 13px; color: var(--text); }
.fs-inbox__list span { grid-column: 1 / -1; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-inbox__list time { grid-row: 1; grid-column: 2; font-size: 11px; color: var(--text-muted); }
.fs-inbox__list li.is-open { background: color-mix(in srgb, var(--brand) 13%, transparent); }
.fs-inbox__list li.is-open b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--brand); }
.fs-inbox__mail { position: relative; padding: 18px 20px 22px; }
.fs-inbox__from { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); }
.fs-inbox__from b { display: block; font-size: 13px; color: var(--text); }
.fs-inbox__logo { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: 15px; }
.fs-inbox__mail h4 { margin: 14px 0 6px; font-family: var(--font-family-display); font-weight: 800; font-size: 18px; color: var(--text); }
.fs-inbox__mail p { max-width: none; margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--text); }
.fs-inbox__mail dl { margin: 0 0 16px; display: grid; gap: 4px; font-size: 12.5px; }
.fs-inbox__mail dl div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; }
.fs-inbox__mail dt { color: var(--text-muted); }
.fs-inbox__mail dd { margin: 0; color: var(--text); }
.fs-inbox__btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 700; font-size: 13px; }
.fs-inbox__btn svg { width: 16px; height: 16px; }
.fs-inbox__event {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 9px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 14px 30px rgba(11, 37, 64, .2);
  font-size: 12px;
  color: var(--text-muted);
}
[data-theme="dark"] .fs-inbox__event { background: #222a38; }
.fs-inbox__event b { display: block; font-size: 13px; color: var(--text); }
.fs-inbox__date { display: grid; place-items: center; align-content: center; width: 40px; height: 44px; border-radius: 9px; background: #fff1db; color: #c26a00; font-weight: 800; font-size: 18px; line-height: 1; }
.fs-inbox__date small { display: block; font-size: 9px; letter-spacing: .08em; }

/* The counterparty profile */
.fs-cp {
  padding: clamp(16px, 2vw, 22px);
  border-radius: 18px;
  background: var(--fs-on-mint);
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px rgba(11, 37, 64, .12);
  font-family: var(--font-family-ui);
}
.fs-cp__head { display: flex; align-items: center; gap: 12px; }
.fs-cp__avatar { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--brand); color: #fff; font-weight: 800; font-size: 16px; }
.fs-cp__name { min-width: 0; font-size: 13px; color: var(--text-muted); }
.fs-cp__name b { display: block; font-family: var(--font-family-display); font-weight: 800; font-size: 20px; color: var(--text); }
.fs-cp__grid { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.fs-cp__box { padding: 14px; border-radius: 14px; background: var(--fs-tint); }
.fs-cp__box--ours { grid-column: 1 / -1; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.fs-cp__label { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.fs-cp__label--gap { margin-top: 12px; }
.fs-cp__kpis { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fs-cp__kpis span { font-size: 11px; color: var(--text-muted); }
.fs-cp__kpis b { display: block; font-family: var(--font-family-display); font-weight: 800; font-size: 17px; color: var(--text); }
.fs-cp__bars { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 44px auto; gap: 4px 8px; margin-top: 12px; align-items: end; }
.fs-cp__bars i { height: var(--h); border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--brand) 40%, transparent); }
.fs-cp__bars i:nth-child(3) { background: var(--brand); }
.fs-cp__bars span { font-size: 10px; text-align: center; color: var(--text-muted); }
.fs-cp__box p { display: flex; justify-content: space-between; gap: 10px; max-width: none; margin: 0 0 4px; font-size: 12.5px; }
.fs-cp__box p span { color: var(--text-muted); }
.fs-cp__box p b { color: var(--text); white-space: nowrap; }
.fs-cp__src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.fs-cp__src span { padding: 3px 9px; border-radius: 999px; background: var(--fs-tint); font-size: 11px; font-weight: 600; color: var(--text-muted); }

/* The toolkit */
.fs-kit { list-style: none; margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.fs-kit > li { display: flex; flex-direction: column; gap: 10px; max-width: none; }
.fs-kit h4 { margin: 8px 0 0; font-family: var(--font-family-display); font-weight: 800; font-size: 19px; color: var(--text); }
.fs-kit p { max-width: none; margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-muted); }
.fs-kit__illu, .fs-kit__chat, .fs-kit__fx { height: 136px; }
.fs-kit__illu { width: 100%; overflow: visible; }
.fs-kit__wire { fill: none; stroke: color-mix(in srgb, var(--brand) 50%, transparent); stroke-width: 2; stroke-dasharray: 4 4; }
.fs-kit__node { fill: var(--fs-on-mint); stroke: color-mix(in srgb, var(--brand) 35%, transparent); stroke-width: 1.5; }
.fs-kit__node--top, .fs-kit__hub { fill: var(--fs-navy); stroke: none; }
.fs-kit__chip { fill: var(--fs-mint); }
.fs-kit__chip--b { fill: var(--fs-warm); }
.fs-kit__t { font: 600 10px var(--font-family-ui); fill: var(--text); }
.fs-kit__t--w { fill: #fff; }
.fs-kit__t--s { font-size: 9px; fill: #10233a; }
.fs-kit__t--b { font-weight: 800; font-size: 13px; }
.fs-kit__chat { display: flex; flex-direction: column; justify-content: center; gap: 8px; font-family: var(--font-family-ui); }
.fs-kit__q { align-self: flex-end; max-width: 85%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--brand); color: #fff; font-size: 13px; font-weight: 600; }
.fs-kit__a { align-self: flex-start; max-width: 94%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--fs-on-mint); border: 1px solid var(--line); color: var(--text); font-size: 12.5px; line-height: 1.45; }
.fs-kit__fx { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--fs-on-mint); border: 1px solid var(--line); font-family: var(--font-family-ui); }
.fs-kit__fxhead { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.fs-kit .fs-kit__fx p { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; }
.fs-kit__fx b { font-size: 15px; font-weight: 800; color: var(--text); white-space: nowrap; }
.fs-kit__fx em { margin-left: 4px; font-style: normal; font-size: 11px; color: #0d7a5a; }
[data-theme="dark"] .fs-kit__fx em { color: var(--accent); }

/* The calendar event slides in after the button is "pressed" (forside.js sets data-fs-reveal) */
@media (prefers-reduced-motion: no-preference) {
  [data-fs-reveal="wait"] .fs-inbox__event { opacity: 0; }
  [data-fs-reveal="in"] .fs-inbox__btn { animation: fs-press .55s ease .9s both; }
  [data-fs-reveal="in"] .fs-inbox__event { animation: fs-event-in .5s cubic-bezier(.2, .9, .3, 1.25) 1.45s both; }
}
@keyframes fs-press {
  0%, 100% { transform: none; box-shadow: none; }
  40% { transform: scale(.94); box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 28%, transparent); }
}
@keyframes fs-event-in {
  from { opacity: 0; transform: translateY(14px) scale(.95); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1100px) {
  .fs-kit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .fs-feature, .fs-feature--flip { grid-template-columns: minmax(0, 1fr); }
  .fs-feature--flip .fs-feature__text { order: 0; }
}
@media (max-width: 640px) {
  .fs-inbox__body { grid-template-columns: minmax(0, 1fr); }
  .fs-inbox__list { display: none; }
  .fs-inbox__event { position: static; margin-top: 14px; width: max-content; }
  .fs-cp__grid { grid-template-columns: minmax(0, 1fr); }
  .fs-kit { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 6b. Reduce costs (owner 2026-11-03): three steps, from doing it
   yourself to letting Indexo do it. The last step is dark to mark the hand-over. */
.fs-save { list-style: none; margin: clamp(36px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.fs-save > li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: none;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--fs-radius-tile);
  background: var(--fs-tint);
}
.fs-save > li:last-child { background: linear-gradient(160deg, var(--fs-navy-soft), var(--fs-navy)); color: #fff; }
.fs-save__step { font-family: var(--font-family-ui); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.fs-save > li:last-child .fs-save__step { color: var(--fs-mint); }
.fs-save__illu { display: flex; align-items: center; justify-content: center; min-height: 150px; }
.fs-save h3 { margin: 4px 0 0; font-family: var(--font-family-display); font-weight: 800; font-size: 22px; letter-spacing: -0.01em; color: var(--text); }
.fs-save p { max-width: none; margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--text-muted); }
.fs-save > li:last-child h3 { color: #fff; }
.fs-save > li:last-child p { color: rgba(255, 255, 255, .78); }
.fs-save__link { margin-top: auto; align-self: flex-start; padding: 10px 18px; border-radius: 999px; background: var(--fs-warm); color: #2b1600; font-family: var(--font-family-ui); font-size: 14px; font-weight: 700; text-decoration: none; }
.fs-save__link:hover { filter: brightness(1.05); }
.fs-save__link:focus-visible { outline: 3px solid var(--fs-sky); outline-offset: 2px; }

.fs-cmp { flex-direction: column; align-items: stretch; gap: 4px; font-family: var(--font-family-ui); }
.fs-cmp__row { display: grid; grid-template-columns: 1.15fr repeat(3, minmax(0, 1fr)); gap: 4px; }
.fs-cmp__row span { padding: 7px 6px; border-radius: 7px; background: var(--fs-band-bg); font-size: 12px; text-align: center; color: var(--text); white-space: nowrap; }
.fs-cmp__row span:first-child { background: none; text-align: left; color: var(--text-muted); }
.fs-cmp__row--head span { background: none; font-weight: 700; color: var(--text-muted); }
.fs-cmp__row span.is-best { background: color-mix(in srgb, var(--accent) 22%, var(--fs-band-bg)); font-weight: 700; color: var(--text); }
.fs-cmp__row--head span.is-best { background: none; color: #0d7a5a; }
[data-theme="dark"] .fs-cmp__row--head span.is-best { color: var(--accent); }

.fs-fwd { flex-direction: column; align-items: stretch; gap: 10px; font-family: var(--font-family-ui); }
.fs-fwd__mail { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--fs-band-bg); border: 1px solid var(--line); font-size: 11.5px; color: var(--text-muted); }
.fs-fwd__mail b { display: block; font-size: 13px; color: var(--text); }
.fs-fwd__icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; }
.fs-fwd__icon svg { width: 16px; height: 16px; }
.fs-fwd__reply { margin-left: 22px; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: color-mix(in srgb, var(--accent) 20%, var(--fs-band-bg)); font-size: 13px; line-height: 1.45; color: var(--text); }

.fs-hunt svg { width: 100%; max-width: 260px; overflow: visible; }
.fs-hunt__doc { fill: #fff; }
.fs-hunt__ink { fill: none; stroke: #b9c6d6; stroke-width: 3; stroke-linecap: round; }
.fs-hunt__lens { fill: rgba(143, 196, 255, .15); stroke: var(--fs-sky); stroke-width: 4; }
.fs-hunt__handle { stroke: var(--fs-sky); stroke-width: 6; stroke-linecap: round; }
.fs-hunt__wire { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 2; stroke-dasharray: 4 4; }
.fs-hunt__offer { fill: rgba(255, 255, 255, .12); stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; }
.fs-hunt__offer--best { fill: var(--fs-mint); stroke: none; }
.fs-hunt__t { font: 700 11px var(--font-family-ui); fill: #fff; }
.fs-hunt__t--best { fill: #06352a; }

@media (max-width: 980px) {
  .fs-save { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
}

/* ---------- 7. Roles as a hub diagram (owner 2026-11-03) ----------
   Indexo in the middle, the five roles evenly round it (Konsern due north),
   each joined to the middle by a line. Hover, focus or tap shows the role's
   sentence in the box beside the diagram; otherwise forside.js steps through
   the roles every 2.6 s while the section is on screen. */
.fs-hub-wrap {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin-top: clamp(28px, 4vw, 48px);
}
/* Text box on the left, diagram on the right (owner 2026-11-03); on phones the diagram stays first */
@media (min-width: 901px) { .fs-hub__box { order: -1; } }
.fs-hub { position: relative; width: 100%; max-width: 580px; aspect-ratio: 1; margin: 0 auto; }
.fs-hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fs-hub__lines line {
  stroke: color-mix(in srgb, var(--brand) 35%, transparent);
  stroke-width: 2;
  stroke-dasharray: 5 6;
  vector-effect: non-scaling-stroke;
  transition: stroke .3s ease, stroke-width .3s ease;
}
.fs-hub__lines line.is-active { stroke: var(--brand); stroke-width: 3; stroke-dasharray: none; }
.fs-hub__core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--fs-navy-soft), var(--fs-navy));
  box-shadow: 0 18px 40px rgba(11, 37, 64, .35), 0 0 0 10px color-mix(in srgb, var(--brand) 10%, transparent);
}
.fs-hub__core img { width: 68%; height: auto; }
.fs-hub__node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 23%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--brand) 30%, transparent);
  background: color-mix(in srgb, var(--brand) 9%, var(--bg));
  color: var(--brand);
  cursor: pointer;
  font: inherit;
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.3), background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.fs-hub__node svg { width: 30%; max-width: 30px; height: auto; }
.fs-hub__node span {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: clamp(11px, 1.15vw, 15px);
  line-height: 1.1;
  color: var(--text);
}
.fs-hub__node:hover,
.fs-hub__node.is-active {
  transform: translate(-50%, -50%) scale(1.1);
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 18%, var(--bg));
  box-shadow: 0 14px 32px color-mix(in srgb, var(--brand) 30%, transparent);
}
.fs-hub__node:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 50%, transparent); outline-offset: 4px; }

.fs-hub__box {
  position: relative;
  padding: clamp(22px, 3vw, 36px);
  border-radius: var(--fs-radius-tile);
  background: color-mix(in srgb, var(--brand) 7%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  box-shadow: 0 24px 50px rgba(11, 37, 64, .10);
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fs-hub__name { font-family: var(--font-family-display); font-weight: 800; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -0.02em; color: var(--text); }
.fs-hub__text { max-width: none; margin: var(--space-3) 0 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--text-muted); }
.fs-hub__box.is-changing .fs-hub__name,
.fs-hub__box.is-changing .fs-hub__text { animation: fs-hub-in .4s ease both; }
@keyframes fs-hub-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fs-hub__dots { display: flex; gap: 6px; margin-top: var(--space-5); }
.fs-hub__dots i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 25%, transparent); transition: background-color .3s ease, width .3s ease; }
.fs-hub__dots i.is-active { width: 22px; border-radius: 4px; background: var(--brand); }
.fs-hub__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .fs-hub__node, .fs-hub__lines line, .fs-hub__dots i { transition: none; }
  .fs-hub__box.is-changing .fs-hub__name, .fs-hub__box.is-changing .fs-hub__text { animation: none; }
}
@media (max-width: 900px) {
  .fs-hub-wrap { grid-template-columns: minmax(0, 1fr); }
  .fs-hub__box { min-height: 170px; }
}
@media (max-width: 480px) {
  .fs-hub__node { width: 25%; gap: 3px; }
  .fs-hub__node svg { width: 28%; }
}

/* ---------- 8. Security ---------- */
.fs-security {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: var(--space-9);
  align-items: center;
}
.fs-checks { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; gap: var(--space-6); }
.fs-checks li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; }
.fs-checks li > svg { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: rgba(126, 224, 198, .16); color: var(--fs-mint); }
.fs-checks strong { display: block; font-family: var(--font-family-display); font-size: 19px; color: #fff; margin-bottom: 2px; }
.fs-checks li span span { display: block; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .76); }
.fs-shield {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: var(--fs-radius-tile);
  background: radial-gradient(circle at 50% 45%, rgba(143, 196, 255, .18), rgba(255, 255, 255, .03) 70%);
}
.fs-shield svg { width: 72%; }
.fs-shield__ring { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1.5; stroke-dasharray: 3 7; }
.fs-shield__ring--2 { stroke: rgba(126, 224, 198, .3); stroke-dasharray: none; }
.fs-shield__body { fill: rgba(143, 196, 255, .2); stroke: var(--fs-sky); stroke-width: 3; stroke-linejoin: round; }
.fs-shield__lock { fill: #fff; }
.fs-shield__shackle { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; }
/* In the full-width navy band (owner 2026-11-03): the checks in two columns on
   wide screens, a footnote in small type under them. */
.fs-band--navy .fs-security .fs-h2 { color: #fff; }
@media (min-width: 1100px) {
  .fs-band--navy .fs-security { grid-template-columns: minmax(0, 1.6fr) minmax(0, .6fr); }
  .fs-band--navy .fs-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-8); }
}
.fs-footnote { margin: var(--space-7) 0 0; max-width: 70ch; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .6); }
@media (max-width: 860px) {
  .fs-security { grid-template-columns: 1fr; }
  .fs-shield { max-width: 260px; }
}

/* ---------- 9. FAQ: heading on the left ---------- */
/* Heading on top, the questions under it across the full width: the question
   text starts at the left, the lines and plus icons reach the right edge (owner 2026-11-03). */
.fs-faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
.fs-faq .faq { margin: 0; max-width: none; }
.fs-faq__aside p { margin: var(--space-5) 0 0; font-size: var(--text-lg); line-height: 1.6; color: var(--text-muted); }
.fs-faq__aside a { color: var(--brand); font-weight: 600; }
@media (max-width: 860px) { .fs-faq { grid-template-columns: 1fr; } }

/* ---------- 10. Contact, now under the FAQ list (owner 2026-11-03) ---------- */
.fs-ask { margin-top: clamp(32px, 4vw, 48px); scroll-margin-top: 110px; }
.fs-ask__title { margin: 0 0 var(--space-5); font-family: var(--font-family-display); font-weight: 800; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.01em; color: var(--text); }
.fs-ask__title span { color: var(--brand); }
/* The contact form (owner 2026-11-03): a clean panel, framed fields with a
   blue focus ring, and a blue "Send" button centred with the reply-time note
   to its right. Scoped under #kontakt so it beats the older #kontakt rules in
   4-components.css (one of them forces dark text on submit buttons). */
.fs-contact__form { padding: clamp(22px, 3vw, 38px); }
#kontakt .fs-contact__form {
  border-radius: 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 7%, #ffffff), #ffffff 140px);
  border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent);
  box-shadow: 0 24px 60px rgba(11, 37, 64, .10);
}
[data-theme="dark"] #kontakt .fs-contact__form {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, #151922), #151922 140px);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
#kontakt .fs-contact__form label {
  margin-bottom: 6px;
  font-family: var(--font-family-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text-muted);
}
#kontakt .fs-contact__form input,
#kontakt .fs-contact__form textarea {
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  border-radius: 12px;
  background: #f6f9fd;
  box-shadow: none;
  color: var(--text);
  font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
[data-theme="dark"] #kontakt .fs-contact__form input,
[data-theme="dark"] #kontakt .fs-contact__form textarea { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); }
#kontakt .fs-contact__form input:hover,
#kontakt .fs-contact__form textarea:hover { border-color: color-mix(in srgb, var(--brand) 45%, transparent); box-shadow: none; }
#kontakt .fs-contact__form input:focus,
#kontakt .fs-contact__form textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--bg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent);
}
#kontakt .fs-contact__form input::placeholder,
#kontakt .fs-contact__form textarea::placeholder { color: var(--text-muted); opacity: .7; }
/* The button sits exactly in the middle; the reply-time note to its right (owner 2026-11-03) */
.fs-contact__submit { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
.fs-contact__submit .fs-send { grid-column: 2; }
.fs-contact__submit #formStatus { grid-column: 3; justify-self: start; }
@media (max-width: 520px) {
  .fs-contact__submit { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-2); }
  .fs-contact__submit .fs-send, .fs-contact__submit #formStatus { grid-column: 1; justify-self: center; }
}
#kontakt .fs-contact__form button.fs-send {
  min-height: 46px;
  padding: 12px 30px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 35%, transparent);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
[data-theme="dark"] #kontakt .fs-contact__form button.fs-send { background: linear-gradient(135deg, #3a7cc0, #2b5f97); }
#kontakt .fs-contact__form button.fs-send svg { width: 17px; height: 17px; }
#kontakt .fs-contact__form button.fs-send:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 14px 28px color-mix(in srgb, var(--brand) 40%, transparent); }
#kontakt .fs-contact__form button.fs-send:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 3px; }
#kontakt .fs-contact__submit #formStatus { margin: 0; font-size: 14px; color: var(--text-muted); }
/* Centred under the FAQ (owner 2026-11-03) */
.fs-ask--center { max-width: 760px; margin-left: auto; margin-right: auto; margin-top: clamp(48px, 6vw, 80px); }
.fs-ask--center .fs-ask__title { text-align: center; }

/* Underlined word in running text (owner 2026-11-03: "ett" in "Slutt aa lete") */
.fs-ul { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; color: var(--text); font-weight: 600; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .fs-doc, .fs-doc__chip, .fs-doc__bell, .fs-alerts { animation: none; }
}

/* ------------------------------------------------------------------------
   Round 2026-11-03 (owner): step illustrations, demo as a modal over the
   blurred live demo in its own band, merged "one document" + features.
   ------------------------------------------------------------------------ */

/* ---------- 3. Small illustrations under the three steps ----------
   One sequence, step by step, while the steps are on screen (forside.js, see
   "Steps in sync" below): 1 documents drop into the tray, 2 the page is scanned and the
   extracted fields appear, 3 the bars grow and the bell rings. Without
   JavaScript, or with reduced motion, the final picture simply shows. */
/* Side by side the three steps start at the same height, so the numbers line
   up (the shorter text in step 3 used to push it down). */
.steps-animated[data-fs-steps] { align-items: stretch; }
.steps-animated[data-fs-steps] .fs-step-illu { margin-top: auto; padding-top: var(--space-5); }
.steps-animated[data-fs-steps] > .step-animated-arrow { align-self: flex-end; margin-bottom: var(--fs-arrow-bottom, 31px); }
@media (max-width: 1024px) {
  .steps-animated[data-fs-steps] { align-items: center; }
  .steps-animated[data-fs-steps] .fs-step-illu { margin-top: var(--space-5); padding-top: 0; }
  .steps-animated[data-fs-steps] > .step-animated-arrow { align-self: center; margin-bottom: 0; }
}
.fs-step-illu { display: flex; justify-content: center; margin-top: var(--space-5); }
.fs-step-illu svg { width: 210px; max-width: 100%; height: auto; overflow: visible; }
.fs-s-page { fill: #fff; stroke: color-mix(in srgb, var(--brand) 45%, transparent); stroke-width: 2; }
.fs-s-lines { stroke: color-mix(in srgb, var(--brand) 35%, #9aa8b8); stroke-width: 3; stroke-linecap: round; }
.fs-s-scan { fill: var(--brand); opacity: .75; }
.fs-s-chip--1 { fill: var(--brand); }
.fs-s-chip--2 { fill: var(--fs-mint); }
.fs-s-chip--3 { fill: var(--fs-warm); }
.fs-s-card { fill: #fff; stroke: color-mix(in srgb, var(--brand) 30%, transparent); stroke-width: 2; }
.fs-s-bar { fill: color-mix(in srgb, var(--brand) 55%, #fff); }
.fs-s-bar--4 { fill: var(--brand); }
.fs-s-bellbody { fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fs-s-dot { fill: var(--fs-warm); }
[data-theme="dark"] .fs-s-page, [data-theme="dark"] .fs-s-card { fill: #1b2230; }

/* Steps in sync (owner 2026-11-03): forside.js plays the steps one at a time
   while the section is on screen. For each step the number lifts
   (.is-current on the step) and that step's drawing plays (.fs-play-N on the
   container, kept until the round ends). After step 3 a short pause, then
   everything resets and step 1 starts again. Leaving the section stops and
   resets it; coming back starts from step 1. */
@media (prefers-reduced-motion: no-preference) {
  [data-fs-steps] .step-animated { animation: none; }
  .fs-steps-ready .step-animated-number {
    transition: transform .5s cubic-bezier(.2, .9, .3, 1.25), box-shadow .5s ease, background-color .5s ease;
  }
  .fs-steps-ready .step-animated.is-current .step-animated-number {
    transform: translateY(-12px) scale(1.06);
    background-color: color-mix(in srgb, var(--brand) 14%, transparent);
    box-shadow: 0 18px 36px rgba(0, 100, 255, .24), 0 6px 14px rgba(0, 100, 255, .14);
  }

  .fs-steps-ready:not(.fs-play-1) .fs-s1-check,
  .fs-steps-ready:not(.fs-play-2) .fs-s-scan,
  .fs-steps-ready:not(.fs-play-2) .fs-s-chip,
  .fs-steps-ready:not(.fs-play-3) .fs-s-bar,
  .fs-steps-ready:not(.fs-play-3) .fs-s-dot { opacity: 0; }

  /* 1: the pointer drags the document onto the upload box; it drops in and the box ticks. */
  .fs-play-1 .fs-s1-drag { animation: fs-s1-move 1s cubic-bezier(.5, 0, .3, 1) .15s both; }
  .fs-play-1 .fs-s1-file { transform-box: fill-box; transform-origin: center; animation: fs-s1-drop .35s ease-in 1.15s both; }
  .fs-play-1 .fs-s1-hand { animation: fs-fade-out .3s ease-out 1.35s both; }
  .fs-play-1 .fs-s1-zone { animation: fs-s1-zone .5s ease-out 1.2s both; }
  .fs-play-1 .fs-s1-up { animation: fs-fade-out .2s ease-out 1.2s both; }
  .fs-play-1 .fs-s1-check { animation: fs-fade-in .3s ease-out 1.35s both; }

  /* The arrows between the drawings: hidden until the drawing before them has
     finished, then they slide in and the next step waits a moment. */
  .fs-steps-ready .step-animated-arrow { animation: none; opacity: 0; transform: translateX(-12px); transition: opacity .45s ease, transform .45s ease; }
  .fs-steps-ready .step-animated-arrow.is-shown { opacity: .9; transform: none; }
  @media (max-width: 980px) {
    .fs-steps-ready .step-animated-arrow { transform: rotate(90deg) translateX(-12px); }
    .fs-steps-ready .step-animated-arrow.is-shown { transform: rotate(90deg); }
  }

  /* 2: the page is scanned, the extracted fields appear one by one. */
  .fs-play-2 .fs-s-scan { animation: fs-s-scan 1s ease-in-out .1s both; }
  .fs-play-2 .fs-s-chip { transform-box: fill-box; transform-origin: left center; animation: fs-s-grow .45s ease-out both; }
  .fs-play-2 .fs-s-chip--1 { animation-delay: .55s; }
  .fs-play-2 .fs-s-chip--2 { animation-delay: .8s; }
  .fs-play-2 .fs-s-chip--3 { animation-delay: 1.05s; }

  /* 3: the bars grow, the bell rings and gets its dot. */
  .fs-play-3 .fs-s-bar { transform-box: fill-box; transform-origin: center bottom; animation: fs-s-rise .5s ease-out both; }
  .fs-play-3 .fs-s-bar--1 { animation-delay: .1s; }
  .fs-play-3 .fs-s-bar--2 { animation-delay: .2s; }
  .fs-play-3 .fs-s-bar--3 { animation-delay: .3s; }
  .fs-play-3 .fs-s-bar--4 { animation-delay: .4s; }
  .fs-play-3 .fs-s-bell { transform-box: fill-box; transform-origin: center top; animation: fs-s-ring .7s ease-in-out .9s both; }
  .fs-play-3 .fs-s-dot { transform-box: fill-box; transform-origin: center; animation: fs-pop .35s cubic-bezier(.2, .9, .3, 1.4) 1s both; }
}
@keyframes fs-s1-move { from { transform: none; } to { transform: translate(55px, 12px); } }
@keyframes fs-s1-drop { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.4); } }
@keyframes fs-s1-zone { from { fill-opacity: .12; } 50% { fill-opacity: .4; } to { fill-opacity: .22; } }
@keyframes fs-fade-out { to { opacity: 0; } }
@keyframes fs-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fs-s-scan { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .75; } 85% { opacity: .75; } 100% { opacity: 0; transform: translateY(60px); } }
@keyframes fs-s-grow { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes fs-s-rise { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: none; } }
@keyframes fs-s-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 45% { transform: rotate(-12deg); } 70% { transform: rotate(7deg); } }

/* ---------- 4. Demo band: the form floats over the blurred live demo ---------- */
[data-theme] .fs-band--demo { --fs-band-bg: #e8f1fc; }
[data-theme="dark"] .fs-band--demo { --fs-band-bg: #0f1c2e; }
.fs-band--demo .demo-window { max-width: none; box-shadow: 0 30px 70px rgba(11, 37, 64, .22); }
.demo-window--blur .demo-window__stage[hidden] { display: block; }
.demo-window--blur:not(.is-live) .demo-window__stage iframe {
  filter: blur(6px) saturate(1.05);
  pointer-events: none;
}
.demo-window--blur .demo-window__start {
  position: absolute;
  inset: 0;
  z-index: 2;
  min-height: 0;
  padding: var(--space-6);
  overflow: auto;
  background: rgba(8, 26, 48, .30);
  color: #0b2540;
}
.demo-window--blur .demo-window__start[hidden] { display: none; }
.demo-modal {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: clamp(24px, 3vw, 40px);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 60px rgba(3, 14, 30, .35);
  text-align: center;
}
.demo-window--blur .demo-modal h2 { color: #0b2540; margin: 0; }
.demo-window--blur .demo-modal .lead { color: #3a4a60; margin: 0; font-size: var(--text-base); max-width: 54ch; }
.demo-window--blur .demo-modal .demo-window__note { color: #5b6b80; }
.demo-window--blur .demo-modal .demo-gate input[type="text"],
.demo-window--blur .demo-modal .demo-gate input[type="email"],
.demo-window--blur .demo-modal .demo-gate input[type="tel"] { background: #f4f7fb; border-color: #c9d6e6; }
.demo-window--blur .demo-modal .demo-gate input:focus { box-shadow: 0 0 0 3px rgba(47, 127, 214, .25); border-color: #2f7fd6; }
.demo-window--blur .demo-modal .demo-window__open { background: #0b2540; color: #fff; box-shadow: 0 12px 28px rgba(11, 37, 64, .3); }
[data-theme="dark"] .demo-window--blur .demo-window__start { background: rgba(3, 10, 20, .45); }
@media (max-width: 1023px) {
  .demo-window--blur .demo-modal { gap: var(--space-3); padding: 20px 24px; }
  .demo-window--blur .demo-modal .lead { font-size: var(--text-sm); line-height: 1.5; }
}
/* Phones get no live demo in the page (it opens in a new tab), so the form stands on its own. */
@media (max-width: 700px) {
  .demo-window--blur .demo-window__stage { display: none !important; }
  .demo-window--blur .demo-window__start { position: static; padding: var(--space-4); background: var(--gradient-brand-dark); }
}



/* Step 1 drawing: pointer, document, upload box */
.fs-s1-zone { fill: var(--brand); fill-opacity: .12; stroke: var(--brand); stroke-width: 2; stroke-dasharray: 5 4; }
.fs-s1-icon { fill: none; stroke: var(--brand); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fs-s1-check { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.fs-s1-doc { fill: #fff; stroke: #b9c6d6; stroke-width: 1.2; filter: drop-shadow(0 3px 4px rgba(11, 37, 64, .18)); }
.fs-s1-fold { fill: #dfe6ef; }
.fs-s1-head { fill: #1d2633; }
.fs-s1-lines { fill: none; stroke: #c3ccd8; stroke-width: 1.8; stroke-linecap: round; }
.fs-s1-sign { fill: none; stroke: var(--brand); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fs-s1-seal { fill: none; stroke: var(--fs-warm); stroke-width: 1.8; }
.fs-s1-hand path { fill: #fff; stroke: #0b2540; stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; }
.fs-s1-hand .fs-s1-knuckle { fill: none; }

/* Demo: a still of the demo's first screen sits behind the form, so nothing
   loads until the visitor asks for it. The window is wider than the page
   column, but never taller than the screen. */
.fs-band--demo.demo-section .container { max-width: 1680px; }
.fs-band--demo .demo-window { max-width: max(700px, calc((100vh - 140px) * 16 / 9)); }
.demo-window__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
.demo-window--blur:not(.is-live) .demo-window__poster { filter: blur(5px) saturate(1.05); transform: scale(1.02); }
.demo-window--blur:not(.is-live) .demo-window__loading { display: none; }
.demo-window--blur .demo-window__loading { z-index: 1; background: rgba(244, 246, 250, .55); }
.demo-window--blur .demo-window__stage iframe { z-index: 2; }

/* ---------- 5+6. Documents and accounting on one row (owner 2026-11-03) ----------
   One green band from the heading down to the role section. The two sources
   sit left and right, both arrows point at the facts in the middle. A blue dot
   marks what comes from the document, a green dot what comes from accounting. */
[data-theme] .fs-band--mint { --fs-band-bg: color-mix(in srgb, var(--accent) 14%, #ffffff); --fs-on-mint: #ffffff; }
[data-theme="dark"] .fs-band--mint { --fs-band-bg: color-mix(in srgb, var(--accent) 12%, #151922); --fs-on-mint: #151922; }
.fs-band--mint .fs-tile,
.fs-band--mint .doc-facts { background: var(--fs-on-mint); }
.fs-band--mint .fs-split-head p { color: var(--text); }

.fs-merge {
  display: grid;
  grid-template-columns: minmax(0, .82fr) auto minmax(0, 1.3fr) auto minmax(0, .82fr);
  gap: clamp(16px, 2vw, 32px);
  align-items: center;
  margin-top: clamp(40px, 5vw, 72px);
}
.fs-merge__src { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); min-width: 0; }
.fs-merge__src { align-self: stretch; }
.fs-merge__src .doc-paper { width: 100%; max-width: 340px; flex: 1; display: flex; flex-direction: column; }
.fs-merge__src .doc-paper__foot { margin-top: auto; padding-top: var(--space-5); }
.fs-merge__src .fs-ledger__sum { margin-top: auto; }
.fs-ledger__row:has(+ .fs-ledger__sum) { margin-bottom: var(--space-3); }
.fs-merge__src:last-child .doc-paper { transform: rotate(2deg); }
.fs-merge__src figcaption {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-ui);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text);
}
.fs-merge__arrow { color: var(--brand); width: 40px; height: 40px; }
.fs-merge__arrow--back { color: var(--accent); }
.fs-merge__arrow svg { width: 100%; height: 100%; }
.fs-merge__facts { box-shadow: 0 18px 40px rgba(11, 37, 64, .08); }
.fs-merge__facts > div { grid-template-columns: minmax(150px, 38%) 1fr; }
.fs-merge__facts dt { display: flex; align-items: baseline; gap: var(--space-2); }

.fs-dot { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }
.fs-dot--acc { background: var(--accent); }
.doc-facts__alert--warn { background: rgba(255, 181, 71, .22); color: #8a5300; }
[data-theme="dark"] .doc-facts__alert--warn { color: var(--fs-warm); }

/* The accounting "page": same paper as the contract, with invoice rows */
.fs-ledger .doc-paper__title { margin-bottom: var(--space-4); }
.fs-ledger__row,
.fs-ledger__sum {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: #4a5668;
}
.fs-ledger__row b { font-weight: 600; font-variant-numeric: tabular-nums; color: #1d2633; }
.fs-ledger__row:nth-child(odd) { background: color-mix(in srgb, var(--accent) 12%, #ffffff); }
.fs-ledger__row--off b { color: #b45f00; }
.fs-ledger__sum { padding-top: var(--space-3); border-top: 1px solid #e4e9f0; border-radius: 0; font-weight: 700; color: #1d2633; }

/* The gains, as a list under the row */
.fs-gains {
  list-style: none;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--space-7);
}
.fs-gains li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.fs-gains svg {
  width: 30px; height: 30px; padding: 6px; border-radius: 50%;
  background: var(--accent); fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
[data-theme="dark"] .fs-gains svg { stroke: #0f1115; }
.fs-gains span { font-size: 15px; line-height: 1.55; color: var(--text-muted); }
.fs-gains strong { display: block; margin-bottom: 2px; font-family: var(--font-family-ui); font-size: 17px; color: var(--text); }

/* Narrower: the two sources side by side, both arrows pointing down at the facts */
@media (max-width: 1100px) {
  .fs-merge {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "doc acc" "a1 a2" "facts facts";
    row-gap: var(--space-4);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
  .fs-merge > .fs-merge__src:first-child { grid-area: doc; }
  .fs-merge > .fs-merge__src:last-child { grid-area: acc; }
  .fs-merge > .fs-merge__arrow { grid-area: a1; justify-self: center; transform: rotate(90deg); }
  .fs-merge > .fs-merge__arrow--back { grid-area: a2; transform: rotate(-90deg); }
  .fs-merge > .fs-merge__facts { grid-area: facts; }
  .fs-gains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones: one column, the contract, its arrow, the facts, the arrow up from accounting, accounting */
@media (max-width: 640px) {
  .fs-merge { grid-template-columns: minmax(0, 1fr); grid-template-areas: "doc" "a1" "facts" "a2" "acc"; }
  .fs-merge > .fs-merge__arrow--back { transform: rotate(90deg); }
  .fs-merge__src .doc-paper { max-width: 320px; }
  .fs-merge__facts > div { grid-template-columns: 1fr; gap: var(--space-1); }
  .fs-gains { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 0. Intro film: black band in full width, the film as large as the first screen allows ---------- */
.fs-film { background: #0b1220; }
.fs-film__frame {
  position: relative;
  width: min(100%, calc((100vh - var(--nav-height)) * 16 / 9), 1920px);
  width: min(100%, calc((100svh - var(--nav-height)) * 16 / 9), 1920px);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}
.fs-film__video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0b1220; }
.fs-film__replay {
  position: absolute;
  right: clamp(12px, 2vw, 28px);
  bottom: clamp(12px, 2vw, 28px);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-full);
  background: rgba(11, 18, 31, .72);
  color: #fff;
  font: 600 14px var(--font-family-ui);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.fs-film__replay:hover { background: rgba(11, 18, 31, .9); border-color: rgba(255, 255, 255, .5); }
.fs-film__replay:focus-visible { outline: 3px solid var(--fs-sky); outline-offset: 2px; }
.fs-film__replay svg { width: 18px; height: 18px; }
/* Film controls (owner 2026-11-03): the whole film is a pause/play button with
   a large icon in the middle, and a semi-transparent arrow at the bottom skips
   past the film to the first section. */
.fs-film__toggle {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.fs-film__toggle:focus-visible { outline: 3px solid var(--fs-sky); outline-offset: -6px; }
.fs-film__icon {
  display: grid;
  place-items: center;
  width: clamp(56px, 7vw, 88px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(11, 18, 32, .55);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .25s ease, transform .25s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.fs-film__icon svg { width: 42%; height: 42%; fill: currentColor; }
.fs-film__i-play { display: none; margin-left: 6%; }
.fs-film__frame.is-paused .fs-film__i-pause { display: none; }
.fs-film__frame.is-paused .fs-film__i-play { display: block; }
.fs-film__frame.is-paused .fs-film__icon,
.fs-film__frame.is-flash .fs-film__icon,
.fs-film__toggle:focus-visible .fs-film__icon { opacity: 1; transform: none; }
@media (hover: hover) {
  .fs-film__toggle:hover .fs-film__icon { opacity: .9; transform: none; }
}
.fs-film__frame.is-ended .fs-film__icon { opacity: 0; }   /* the "play again" button takes over */
.fs-film__replay { z-index: 3; }

.fs-film__next {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 2.4vw, 28px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(40px, 4vw, 52px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(11, 18, 32, .45);
  border: 1px solid rgba(255, 255, 255, .55);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  transform: translateX(-50%);
  opacity: .8;
  transition: opacity .2s ease, background-color .2s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.fs-film__next svg { width: 55%; height: 55%; }
.fs-film__next:hover { opacity: 1; background: rgba(11, 18, 32, .65); }
.fs-film__next:focus-visible { opacity: 1; outline: 3px solid var(--fs-sky); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .fs-film__next { animation: fs-next-bob 2.2s ease-in-out infinite; }
}
@keyframes fs-next-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}
#om { scroll-margin-top: var(--nav-height); }
/* Phones held upright (owner 2026-11-03): the portrait film fills the screen under the
   menu, cropped a little at the edges where the phone is not exactly 9:16 (the film keeps
   its content away from the edges). The arrow at the bottom then leads on to the page.
   --fs-film-top is the real height of the menu, set by forside.js. */
@media (orientation: portrait) and (max-width: 767px) {
  .fs-film__frame {
    width: 100%;
    aspect-ratio: auto;
    height: calc(100vh - var(--fs-film-top, var(--nav-height)));
    height: calc(100svh - var(--fs-film-top, var(--nav-height)));
    min-height: 420px;
  }
  .fs-film__video { object-fit: cover; background: #eef2f7; }
  .fs-film__next { width: 48px; bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  .fs-film__replay { padding: 6px 10px; font-size: 12px; }
  .fs-film__replay svg { width: 14px; height: 14px; }
}