/* ==========================================================================
   pages/features.css — de pagina "features"
   Alleen voor deze pagina; klassen beginnen met ft-. De gedeelde vormen
   (secties, kopkaarten, tegels, schermen, toolkaart, pillen) staan in
   styles.css. Volgorde: tegels → getallen → maken → wie mag wat → connectors →
   thema's → beweging.
   ========================================================================== */

/* korte notities onder een sectie: links uitgelijnd, niet over de hele breedte */
.section > .wrap > p.note { padding-right: max(0px, calc(100% - 76ch)); }

/* ---------- 1. tien dingen ---------- */

/* Vier, drie of twee kolommen; tegel 1 en 10 zijn twee kolommen breed. Zo
   lopen de rijen altijd vol, en buren hebben nooit hetzelfde palet. */
.ft-tiles { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) {
  .ft-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-tile--wide { grid-column: span 2; }
}
@media (min-width: 900px) {
  .ft-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .ft-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* onder de kaart is altijd plek voor de gloed en zijn ogen, ook als de tekst lang is */
.ft-tiles > .tile { padding-bottom: 190px; }
@media (max-width: 600px) {
  .ft-tiles > .tile { padding-bottom: 140px; }
}
.ft-meta-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.ft-meta-link:hover { text-decoration-thickness: 2px; }

/* tegel 1: het team van Bistro de Maan op een kaartje met stippen, elk in zijn
   eigen kleur (het blauwe bolletje met hue-rotate, zoals in de tool) */
.ft-tiles > .ft-tile--team { padding-bottom: 0; }
.ft-tile--team::before {
  content: "";
  position: absolute;
  inset: 44% 0 0;
  background-image: radial-gradient(circle, rgba(12, 19, 48, .14) 1px, transparent 1.4px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(transparent, #000 45%);
  mask-image: linear-gradient(transparent, #000 45%);
  pointer-events: none;
}
.ft-team {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 6px;
  margin: auto 0;
  padding: 34px 12px 30px;
  list-style: none;
}
.ft-team .orb { --s: 54px; }
@media (min-width: 620px) {
  .ft-team { grid-template-columns: repeat(6, minmax(0, 1fr)); padding-inline: 18px; }
}
@media (min-width: 900px) {
  .ft-team .orb { --s: 64px; }
}
.ft-team li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-align: center;
}
.ft-team .orb-name { font-size: 13px; color: var(--ink-2); text-wrap: balance; }
.ft-team .orb-role { margin-top: -6px; }
.ft-tile--wide .glow { width: 460px; top: calc(100% - 206px); }
.ft-tile--wide:hover .glow { --op: -22px; }
@media (max-width: 600px) {
  .ft-tile--wide .glow { width: 300px; top: calc(100% - 140px); }
  .ft-tile--wide:hover .glow { --op: -16px; }
}

/* ---------- 2. de getallen: vraag → tool → antwoord ---------- */

.ft-flow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;                              /* de pijlen staan in de tussenruimte */
}
@media (min-width: 760px) {
  .ft-flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-write { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .ft-flow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft-write { grid-column: auto; }
}

.ft-step {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(18px, 2vw, 24px);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.ft-step-n {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font: 500 15px/1.2 var(--sans);
  letter-spacing: -.005em;
}
.ft-step-n span {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;

}

/* de pijl tussen twee stappen: onder elkaar naar beneden, naast elkaar naar rechts */
.ft-arrow {
  position: absolute;
  z-index: 2;
  top: -34px;
  left: calc(50% - 17px);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 8px 18px -8px rgba(12, 19, 48, .35);
}
.ft-arrow::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
@media (min-width: 760px) {
  .ft-count .ft-arrow { top: calc(50% - 17px); left: -34px; }
  .ft-count .ft-arrow::before { margin: 0 0 0 -4px; transform: rotate(-45deg); }
}
@media (min-width: 1200px) {
  .ft-write .ft-arrow { top: calc(50% - 17px); left: -34px; }
  .ft-write .ft-arrow::before { margin: 0 0 0 -4px; transform: rotate(-45deg); }
}
.ft-arrow.is-pass { animation: ft-pass .75s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes ft-pass {
  40% { transform: scale(1.25); background: var(--c); color: #fff; box-shadow: 0 0 0 8px transparent; box-shadow: 0 0 0 8px color-mix(in srgb, var(--c) 22%, transparent); }
}

/* 01: de vraag, en wat de agent aan de tool gaf, met de herkomst van elk getal */
.ft-ask-q {
  padding: 14px 16px 16px;
  border-radius: 18px 18px 18px 6px;
  background: var(--panel);
}
.ft-who { display: block; margin-bottom: 6px; font-size: 12px; line-height: 1; color: var(--ink-3); }
.ft-quote {
  margin: 0;
  font-size: clamp(16.5px, 1.35vw, 18.5px);
  line-height: 1.45;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.ft-label { margin: 18px 2px 8px; font-size: 13px; line-height: 1.45; color: var(--tag); }
/* naast elkaar lopen de drie kaarten gelijk af: de aanroep en het uitvoerblok
   vullen hun kaart, Copy en Save staan onderaan */
@media (min-width: 760px) {
  .ft-ask .ft-code { flex: 1; }
  .ft-write .ft-out { display: flex; flex: 1; flex-direction: column; }
  .ft-write .ft-out-body { display: flex; flex: 1; flex-direction: column; }
  .ft-write .ft-out-acts { margin-top: auto; padding-top: 14px; }
}
.ft-label--end { margin: 12px 2px 0; }
.ft-code {
  padding: 9px 7px;
  border-radius: 12px;
  background: rgba(12, 19, 48, .045);
  font-size: 12.5px;
  line-height: 1.55;
}
.ft-code code { font-variant-numeric: normal; }
.ft-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1px 10px;
  padding: 1px 6px;
  border-radius: 7px;
}
.ft-line code { white-space: pre; }
.ft-from {
  margin-left: auto;
  padding: 0 7px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
}
.ft-from--guess { background: transparent; box-shadow: none; outline: 1px dashed var(--line-2); outline-offset: -1px; }

/* 02: de toolkaart, open, met de samenvatting van de tool zelf */
.ft-tc > summary { padding: 9px 12px; }
.ft-tc-sum { margin: 0 12px 10px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.ft-tc .toolcard-json { max-height: none; font-size: 12px; line-height: 1.55; }
.ft-json [data-k] { margin: -1px -3px; padding: 1px 3px; border-radius: 5px; }

/* 03: het uitvoerblok, zoals de tool een artefact met Copy en Save laat zien */
.ft-out {
  overflow: hidden;
  border-radius: 16px;
  background: rgba(12, 19, 48, .035);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ft-out-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
}
.ft-out-icon { display: grid; place-items: center; color: var(--ink-3); }
.ft-out-icon svg { width: 17px; height: 17px; }
.ft-out-title {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}
.ft-out-kind {
  flex: none;
  padding: 2px 8px;
  border-radius: 7px;
  background: #fff;
  color: var(--ink-3);
  font-size: 12px;
}
.ft-out-body { padding: 8px 12px 14px; }
.ft-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  line-height: 1.4;
}
.ft-table th,
.ft-table td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  transition: background-color .25s ease;
}
.ft-table th { width: 44%; font-weight: 400; color: var(--ink-2); }
.ft-table td { font-weight: 600; }
.ft-table tr:last-child > * { border-bottom-color: transparent; }
.ft-table tr { cursor: default; }
/* een rij met tabindex krijgt een echte ring, op de rij zelf */
.ft-table tr:focus { outline: none; }
.ft-table tr:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.ft-table tr > :first-child { border-radius: 8px 0 0 8px; }
.ft-table tr > :last-child { border-radius: 0 8px 8px 0; }
.ft-out-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 480px) {
  .ft-out-body { padding-inline: 8px; }
  .ft-table { font-size: 13.5px; }
  .ft-table th, .ft-table td { padding: 8px 6px; }
  .ft-out-note { margin-inline: 4px; }
  .ft-out-acts { margin-inline: 4px; }
}
.ft-out-acts { display: flex; gap: 8px; margin-top: 14px; }
.ft-btn {
  min-width: 66px;
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: 500 13px/1.2 var(--sans);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}
.ft-btn:hover { background: var(--panel); }
.ft-btn:active { transform: translateY(1px); }
.ft-btn--strong { border-color: var(--btn); background: var(--btn); color: var(--btn-ink); }
.ft-btn--strong:hover { background: #26305a; }

/* herkomst: een rij en de getallen waar hij vandaan komt lichten samen op */
.ft-line.is-lit,
.ft-json .is-lit,
.ft-table tr.is-lit > * { background: var(--tint, #f4f5f7); background: color-mix(in srgb, var(--c) 30%, #fff); }
.ft-line,
.ft-json [data-k] { transition: background-color .25s ease; }

.ft-flow-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 16px;
}
.ft-flow-foot .replica-cap { margin: 0 8px; }
.ft-ctrl { display: flex; gap: 6px; }
.ft-ctrl .pill {
  min-height: 32px;
  padding: 5px 13px;
  font-size: 13px;
  box-shadow: 0 0 0 1px var(--line), 0 6px 14px -8px rgba(12, 19, 48, .35);
}
.ft-ctrl .pill[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); }
.ft-hint { margin: 6px 8px 0; }
/* zonder JavaScript doen deze knoppen niets, dus staan ze er dan niet */
html:not(.js) .ft-ctrl,
html:not(.js) .ft-out-acts,
html:not(.js) .ft-hint { display: none; }

/* de replay (alleen tijdens het afspelen): de aanroep verschijnt regel voor
   regel, en waar de uitkomst en het antwoord komen staat een geraamte van
   grijze balken tot ze er zijn */
.ft-flow [data-ft-in],
.ft-flow [data-ft-card],
.ft-flow [data-ft-block],
.ft-flow div[data-ft-row] {
  transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1), background-color .25s ease;
}
.ft-flow [data-ft-out],
.ft-flow p[data-ft-row],
.ft-flow tr[data-ft-row] > * { transition: color .45s ease, background-color .25s ease; }
.ft-run [data-ft-in]:not(.is-on),
.ft-run [data-ft-card]:not(.is-on),
.ft-run [data-ft-block]:not(.is-on),
.ft-run div[data-ft-row]:not(.is-on) { opacity: 0; transform: translateY(6px); }
.ft-run [data-ft-out]:not(.is-on),
.ft-run p[data-ft-row]:not(.is-on) {
  color: transparent;
  background-image: repeating-linear-gradient(to bottom, rgba(12, 19, 48, .075) 0 .56lh, transparent .56lh 1lh);
}
.ft-run .ft-json:not(.is-on) {
  background: repeating-linear-gradient(to bottom, rgba(12, 19, 48, .075) 0 .56lh, transparent .56lh 1lh) content-box, rgba(255, 255, 255, .8);
}
.ft-run tr[data-ft-row]:not(.is-on) > * {
  color: transparent;
  background: linear-gradient(rgba(12, 19, 48, .075) 0 0) 8px 50% / calc(100% - 22px) .75em no-repeat;
}
/* het geraamte ademt alleen als zijn kaart al in beeld is */
.ft-run [data-ft-card].is-on [data-ft-out]:not(.is-on),
.ft-run [data-ft-block].is-on p[data-ft-row]:not(.is-on),
.ft-run [data-ft-block].is-on tr[data-ft-row]:not(.is-on) > * { animation: ft-wacht 1s ease-in-out infinite alternate; }
@keyframes ft-wacht { from { opacity: .5; } }

/* het gereedschap: vier rekentools en de dertien ingebouwde tools per blok */
.ft-kit {
  display: grid;
  gap: var(--gap);
  margin-top: clamp(28px, 4vw, 48px);
}
@media (min-width: 960px) {
  .ft-kit { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.ft-kit-card {
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.ft-kit-h {
  margin: 0 0 16px;
  font: 500 clamp(20px, 1.8vw, 24px)/1.15 var(--sans);
  letter-spacing: -.025em;
}
.ft-calc {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) {
  .ft-calc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ft-calc li {
  position: relative;
  padding: 14px 15px 16px;
  border-radius: 16px;
  background: var(--panel);
}
.ft-calc li.is-used { background: var(--tint); box-shadow: inset 0 0 0 1.5px var(--c); }
.ft-tool { font-size: 14.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ft-calc p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ft-calc li.is-used p { padding-right: 0; }
.ft-used {
  display: inline-block;
  margin-top: 10px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  font-size: 12px;
}
.ft-blocks { display: grid; margin: 0; }
.ft-blocks > div { padding: 11px 0; border-bottom: 1px solid var(--line); }
.ft-blocks > div:first-child { padding-top: 0; }
.ft-blocks > div:last-child { border-bottom: 0; }
.ft-blocks dt { font-size: 14.5px; font-weight: 500; }
.ft-blocks dd { margin: 3px 0 0; }
.ft-blocks .tags { font-size: 14px; overflow-wrap: anywhere; }
.ft-kit-all .note { margin-top: 12px; }

/* ---------- 3. maken: bestanden, grafieken en kerncijfers ---------- */

.ft-mk { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
@media (min-width: 760px) { .ft-mk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ft-mk-card {
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 1.4vw, 18px) clamp(14px, 1.4vw, 18px) clamp(22px, 2.2vw, 28px);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.ft-mk-card > :not(.ft-mk-vis) { margin-inline: clamp(8px, 1vw, 14px); }
.ft-mk-card .tile-tags { margin-top: 20px; }
.ft-mk-t { margin: 8px 0 0; font: 500 clamp(26px, 2.4vw, 36px)/1.05 var(--sans); letter-spacing: -.035em; }
.ft-mk-d { margin-top: 10px; margin-bottom: 0; max-width: 56ch; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.ft-mk-vis {
  display: grid;
  place-items: center;
  min-height: 230px;
  padding: 20px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--tint);
}

/* een werkblad, met de formule van de totaalrij bovenin */
.ft-sheet {
  width: min(100%, 360px);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 14px 30px -18px rgba(12, 19, 48, .4);
  overflow: hidden;
  font-size: 12.5px;
}
.ft-sheet-bar { display: flex; gap: 10px; margin: 0; padding: 7px 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.ft-sheet-bar b { color: var(--ink-3); font-weight: 500; font-style: italic; }
.ft-sheet table { width: 100%; border-collapse: collapse; }
.ft-sheet th, .ft-sheet td { padding: 5px 8px; border: 1px solid var(--line); text-align: left; white-space: nowrap; }
.ft-sheet th { width: 1%; background: var(--panel); color: var(--ink-3); font-weight: 400; text-align: center; }
.ft-sheet tr:first-child th { text-align: center; }
.ft-sheet td:nth-child(n + 3) { text-align: right; }
.ft-sheet tr:nth-child(2) td { font-weight: 600; }
.ft-sheet-sum td { font-weight: 600; }
.ft-sheet td.is-on { box-shadow: inset 0 0 0 2px var(--c); }

/* een Word-pagina in het klein */
.ft-doc {
  display: grid;
  gap: 7px;
  width: min(100%, 250px);
  padding: 20px 22px 24px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 18px 34px -20px rgba(12, 19, 48, .45);
  transform: rotate(-2deg);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.ft-mk-card:hover .ft-doc { transform: rotate(0deg) translateY(-4px); }
.ft-doc-title { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.ft-doc-sub { margin: -4px 0 4px; color: var(--ink-3); font-size: 12px; }
.ft-doc > i { display: block; height: 6px; border-radius: 4px; background: rgba(12, 19, 48, .1); }
.ft-doc > i.ft-doc-h { width: 55%; height: 8px; margin-top: 4px; background: rgba(12, 19, 48, .3); }
.ft-doc > i.short { width: 70%; }
.ft-doc-li { display: grid; gap: 6px; padding-left: 14px; }
.ft-doc-li i { position: relative; display: block; width: 80%; height: 6px; border-radius: 4px; background: rgba(12, 19, 48, .1); }
.ft-doc-li i::before { content: ""; position: absolute; left: -11px; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.ft-doc-table { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 4px; }
.ft-doc-table i { height: 11px; border-radius: 2px; background: rgba(12, 19, 48, .07); }
.ft-doc-table i:nth-child(-n + 3) { background: rgba(12, 19, 48, .2); }

/* de zes grafiekvormen, in de kleuren van de tool */
.ft-shapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; place-items: stretch; }
.ft-shapes figure {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 12px 10px 9px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.ft-shapes figure:hover { transform: translateY(-3px); }
.ft-shapes svg { width: 100%; height: auto; overflow: visible; }
.ft-shapes svg * { fill: #16294a; }
.ft-shapes svg .b { fill: #a8cbeb; }
.ft-shapes svg .ln { fill: none; stroke: #16294a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ft-shapes svg .ln.b { stroke: #a8cbeb; }
.ft-shapes svg .ring { fill: none; stroke: #16294a; stroke-width: 7; }
.ft-shapes svg .ring.b { stroke: #a8cbeb; }
.ft-shapes figcaption { color: var(--ink-3); font-size: 12.5px; text-align: center; }
.js .ft-shapes figure { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.js .ft-mk-card.is-in .ft-shapes figure { opacity: 1; transform: none; }
.js .ft-mk-card.is-in .ft-shapes figure:nth-child(2) { transition-delay: .06s; }
.js .ft-mk-card.is-in .ft-shapes figure:nth-child(3) { transition-delay: .12s; }
.js .ft-mk-card.is-in .ft-shapes figure:nth-child(4) { transition-delay: .18s; }
.js .ft-mk-card.is-in .ft-shapes figure:nth-child(5) { transition-delay: .24s; }
.js .ft-mk-card.is-in .ft-shapes figure:nth-child(6) { transition-delay: .3s; }
.js .ft-mk-card.is-in .ft-shapes figure:hover { transform: translateY(-3px); transition-delay: 0s; }

/* kerncijfers en de afdrukknop */
.ft-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: center; place-items: stretch; }
.ft-fig {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.ft-fig span { color: var(--ink-3); font-size: 13px; }
.ft-fig b { font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; letter-spacing: -.025em; }
.ft-fig small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12.5px; }
.ft-fig em { padding: 2px 7px; border-radius: 6px; background: var(--panel); font-style: normal; }
.ft-print {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 9px 14px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line-2);
  font-size: 13.5px;
  font-weight: 500;
}
@media (max-width: 420px) {
  .ft-mk-vis { padding: 14px; }
  .ft-sheet { font-size: 12px; }
  .ft-sheet th, .ft-sheet td { padding: 4px 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-doc, .ft-mk-card:hover .ft-doc { transform: none; }
}

/* ---------- 4. wie mag wat ---------- */

.ft-rules {
  display: grid;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) {
  .ft-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ft-rule {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px 10px clamp(20px, 2.2vw, 26px);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.ft-rule-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px clamp(12px, 1.6vw, 18px) 0;
}
.ft-rule-n { margin: 0; font-size: 14px; color: var(--tag); }
.ft-rule-t {
  margin: 8px 0 0;
  font: 500 clamp(25px, 2.3vw, 32px)/1.05 var(--sans);
  letter-spacing: -.035em;
}
.ft-rule-d {
  max-width: 46ch;
  margin: 10px 0 18px;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.55;
}
.ft-rule-r {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  align-items: baseline;
  margin: auto 0 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--panel);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}
.ft-rule-r span { color: var(--tag); font-weight: 400; }

/* het schema: een vel met stippen zoals de infrastructuurlaag; de lijnen
   (svg.ft-edges) tekent features.js onder de knopen */
.ft-dia {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 250px;
  padding: 22px 12px;
  border-radius: 22px;
  background-color: #fafbfc;
  background-image: radial-gradient(circle, rgba(12, 19, 48, .11) 1px, transparent 1.3px);
  background-position: 8px 8px;
  background-size: 16px 16px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.ft-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.ft-dia-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ft-dia-row + .ft-dia-row { margin-top: 40px; }
.ft-dia-row--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; gap: 10px; }
.ft-dia-row--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
/* "works together" onder het midden van de lijn tussen twee groepen: daar loopt verder niets */
.ft-dia-row--link .ft-dia-tag {
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.ft-node { position: relative; z-index: 1; }

/* een groep: een pil met drie paarse stippen, zoals het groepsblok op de kaart */
.ft-grp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: #f8eefb;
  box-shadow: 0 0 0 1px #e6cbef, 0 6px 14px -9px rgba(122, 40, 150, .5);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.ft-grp-ico {
  flex: none;
  width: 14px;
  height: 14px;
  background:
    radial-gradient(circle at 50% 24%, #a23dbb 0 2.1px, transparent 2.5px),
    radial-gradient(circle at 21% 74%, #a23dbb 0 2.1px, transparent 2.5px),
    radial-gradient(circle at 79% 74%, #a23dbb 0 2.1px, transparent 2.5px);
}
/* een blok gereedschap: wit, met het rastertje van "Tools" in de balk */
.ft-blk {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line-2), 0 6px 14px -10px rgba(12, 19, 48, .45);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.25;
}
.ft-blk-ico {
  flex: none;
  width: 11px;
  height: 11px;
  background: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Crect width='4.6' height='4.6' rx='1.1'/%3E%3Crect x='6.4' width='4.6' height='4.6' rx='1.1'/%3E%3Crect y='6.4' width='4.6' height='4.6' rx='1.1'/%3E%3Crect x='6.4' y='6.4' width='4.6' height='4.6' rx='1.1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Crect width='4.6' height='4.6' rx='1.1'/%3E%3Crect x='6.4' width='4.6' height='4.6' rx='1.1'/%3E%3Crect y='6.4' width='4.6' height='4.6' rx='1.1'/%3E%3Crect x='6.4' y='6.4' width='4.6' height='4.6' rx='1.1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ft-agent { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.ft-dia .orb { --s: 42px; }
.ft-solo .orb { --s: 58px; }
.ft-both-hub .orb { --s: 64px; }
@media (min-width: 1100px) {
  .ft-dia .orb { --s: 50px; }
  .ft-solo .orb { --s: 70px; }
  .ft-both-hub .orb { --s: 64px; }
  .ft-dia .ft-grp { font-size: 13.5px; }
  .ft-dia .ft-blk { font-size: 13px; }
  .ft-dia-name { font-size: 12.5px; }
}
.ft-dia-name { color: var(--ink-2); font-size: 12px; line-height: 1.2; white-space: nowrap; }
.ft-dia-sub {
  position: relative;
  z-index: 1;
  margin: 12px 0 0;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}
.ft-dia-tag { padding: 1px 6px; border-radius: 6px; background: #fafbfc; color: var(--ink-3); font-size: 12px; line-height: 1.3; text-align: center; }

/* heel smal: kleinere knopen, en een groepsnaam mag over twee regels */
@media (max-width: 400px) {
  .ft-dia { padding-inline: 8px; }
  .ft-dia-row--2 { gap: 6px; }
  .ft-grp { gap: 5px; padding: 5px 9px 5px 6px; border-radius: 14px; font-size: 12px; white-space: normal; }
  .ft-blk { gap: 6px; padding: 5px 8px; font-size: 12px; }
}

/* regel 2: een agent zonder groep en alles wat hij mag, zonder één lijn */
.ft-dia--two { flex-direction: row; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 40px); }
.ft-solo { flex: none; }
.ft-solo .ft-dia-sub { margin: 0; }
.ft-blk-list { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ft-blk-list .ft-blk { display: flex; gap: 8px; padding-right: 7px; }
.ft-ok {
  position: relative;
  flex: none;
  width: 17px;
  height: 17px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--ink);
}
.ft-ok::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 4.5px;
  width: 7px;
  height: 4px;
  border-left: 1.8px solid #fff;
  border-bottom: 1.8px solid #fff;
  transform: rotate(-45deg);
}

/* regel 3 en 4: iets meer lucht tussen de rijen, voor de lijnen */
.ft-dia--three .ft-dia-row + .ft-dia-row,
.ft-dia--four .ft-dia-row + .ft-dia-row { margin-top: 36px; }
.ft-dia--three .ft-blk,
.ft-dia--four .ft-blk { text-align: center; }

/* de lijnen: lid van een groep (paars, zoals op de kaart), gereedschap (grijs),
   samenwerken (paars gestreept) en wat samenwerken erbij geeft (inkt, gestippeld) */
.ft-edge {
  --len: 1200;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.ft-edge--member { stroke: #a23dbb; }
.ft-edge--tool,
.ft-edge--plain { stroke: rgba(12, 19, 48, .3); }
.ft-edge--link { stroke: #a23dbb; stroke-dasharray: 5 5; }
.ft-edge--gain { stroke: var(--ink); stroke-width: 2; stroke-dasharray: .5 6; }

/* ---------- de weigering van de agent loop ---------- */

.ft-loop {
  display: grid;
  gap: 18px 40px;
  align-items: center;
  margin-top: 14px;
  padding: clamp(22px, 3vw, 40px);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--shadow-card);
}
@media (min-width: 900px) {
  .ft-loop { grid-template-columns: 6fr 5fr; }
}
.ft-loop-line {
  max-width: 22ch;
  margin: 0;
  font: 600 clamp(25px, 2.7vw, 38px)/1.1 var(--sans);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.ft-loop-fig { margin: 0; min-width: 0; }
.ft-loop-fig .toolcard-json { font-size: 13px; }
.ft-loop-fig .replica-cap { margin-top: 10px; }

.ft-perm-shots { margin-top: clamp(28px, 4vw, 48px); align-items: center; }

/* ---------- 5. connectors ---------- */

.ft-plug { display: grid; gap: var(--gap); }
@media (min-width: 1040px) {
  .ft-plug { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}
.ft-cat {
  padding: clamp(6px, 1vw, 12px) clamp(20px, 2.6vw, 34px);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.ft-cat-row {
  display: grid;
  gap: 12px 28px;
  padding: clamp(18px, 2vw, 24px) 0;
  border-bottom: 1px solid var(--line);
}
.ft-cat-row:last-child { border-bottom: 0; }
@media (min-width: 700px) {
  .ft-cat-row { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
}
.ft-cat-h {
  margin: 0;
  font: 500 clamp(19px, 1.7vw, 23px)/1.15 var(--sans);
  letter-spacing: -.025em;
}
.ft-cat-head p { margin: 6px 0 0; color: var(--ink-3); font-size: 14px; line-height: 1.5; }
.ft-pills {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ft-pills .pill { min-height: 38px; padding: 7px 15px 7px 13px; font-size: 14.5px; }
.ft-pills .pill--dashed { padding: 6px 14px 6px 12px; color: var(--ink-2); }
.ft-pills .dot { width: 10px; height: 10px; }

.ft-both {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.ft-both-h {
  margin: 0;
  font: 500 clamp(25px, 2.3vw, 32px)/1.05 var(--sans);
  letter-spacing: -.035em;
}
.ft-dia--both {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 0;
  margin: 18px 0 20px;
  padding: 18px 20px 18px 14px;
}
.ft-both-clients { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ft-both-clients .ft-blk { font-size: 12.5px; white-space: nowrap; }
.ft-both-hub { flex: none; }
.ft-both-p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.ft-both-k { margin: 20px 0 8px; color: var(--tag); font-size: 14px; }
.ft-both-list { display: grid; margin: 0; }
.ft-both-list > div {
  display: grid;
  grid-template-columns: 7.2em minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.45;
}
.ft-both-list dt { font-weight: 500; }
.ft-both-list dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }

/* ---------- 6. thema's ---------- */

.ft-look { display: grid; gap: 18px; align-items: center; }
@media (min-width: 900px) {
  .ft-look { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 40px); }
}

/* de schuif: dezelfde kaart twee keer, de nachtversie rechts van de lijn */
.ft-compare {
  min-width: 0;
  margin: 0;
  padding: 8px;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.ft-compare-stage {
  --pos: 50%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 2880 / 1800;
  border-radius: 15px;
  background: var(--panel);
  -webkit-user-select: none;
  user-select: none;
}
.ft-compare-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ft-compare-night { clip-path: inset(0 0 0 var(--pos)); }
.ft-compare-range {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
}
.ft-compare-range::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.ft-compare-range::-webkit-slider-thumb { width: 2px; height: 100%; -webkit-appearance: none; appearance: none; }
.ft-compare-range::-moz-range-track { height: 100%; background: transparent; }
.ft-compare-range::-moz-range-thumb { width: 2px; height: 100%; border: 0; }
.ft-compare-handle {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 .5px rgba(12, 19, 48, .15), 0 0 16px rgba(12, 19, 48, .28);
  pointer-events: none;
}
/* de knop blijft binnen het beeld, ook als de lijn helemaal links of rechts staat */
.ft-compare-knob {
  --kn: 46px;
  position: absolute;
  z-index: 3;
  top: 50%;
  left: clamp(calc(var(--kn) / 2 + 6px), var(--pos), calc(100% - var(--kn) / 2 - 6px));
  display: grid;
  place-items: center;
  width: var(--kn);
  height: var(--kn);
  pointer-events: none;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 10px 24px -8px rgba(12, 19, 48, .5);
  translate: -50% -50%;
  transition: scale .2s ease;
}
.ft-compare-knob svg { width: 22px; height: 22px; }
.ft-compare-stage:hover .ft-compare-knob { scale: 1.07; }
.ft-compare-range:focus-visible ~ .ft-compare-knob { outline: 2px solid var(--signal); outline-offset: 3px; }
.ft-compare-tag {
  position: absolute;
  z-index: 4;
  bottom: 12px;
  min-height: 32px;
  padding: 6px 13px;
  border: 0;
  border-radius: 999px;
  font: 500 13px/1.2 var(--sans);
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(12, 19, 48, .08), 0 6px 16px -8px rgba(0, 0, 0, .45);
  transition: transform .2s ease;
}
.ft-compare-tag:hover { transform: translateY(-1px); }
.ft-compare-tag--day { left: 12px; background: #fff; color: var(--ink); }
.ft-compare-tag--night { right: 12px; background: #2b2e36; color: #e4e7ee; }
@media (max-width: 560px) {
  .ft-compare-tag { bottom: 8px; min-height: 26px; padding: 4px 10px; font-size: 12px; }
  .ft-compare-tag--day { left: 8px; }
  .ft-compare-tag--night { right: 8px; }
  .ft-compare-knob { --kn: 38px; }
  .ft-compare-knob svg { width: 18px; height: 18px; }
}
.ft-compare .shot-cap { margin-top: 10px; }
html:not(.js) .ft-compare-tag,
html:not(.js) .ft-compare-knob { display: none; }

.ft-phone { width: 100%; max-width: 250px; margin-inline: auto; }

.ft-look2 { margin-top: var(--gap); align-items: start; }
.ft-settings { max-width: none; }
.ft-themes {
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.ft-theme-list { display: grid; margin: 0; padding: 0; list-style: none; }
.ft-theme-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.ft-theme-list li:first-child { padding-top: 2px; }
.ft-theme-list li:last-child { border-bottom: 0; }
/* een staaltje zoals de tegels in de instellingen: vlak, inkt en accent */
.ft-sw {
  position: relative;
  grid-row: span 2;
  width: 62px;
  height: 40px;
  border-radius: 10px;
  background-color: var(--bg);
  box-shadow: inset 0 0 0 1px rgba(12, 19, 48, .14);
}
.ft-sw::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 21px;
  height: 9px;
  background:
    radial-gradient(circle at 4.5px 50%, var(--fg) 0 4px, transparent 4.5px),
    radial-gradient(circle at 16.5px 50%, var(--ac) 0 4px, transparent 4.5px);
}
.ft-sw--dots {
  background-image: radial-gradient(circle, rgba(255, 255, 255, .22) .7px, transparent 1.1px);
  background-size: 7px 7px;
}
.ft-sw--custom {
  background: conic-gradient(from 210deg, #ff6d5a, #ffb42e, #7cc72c, #1bb5e3, #8b6cff, #ff5c9a, #ff6d5a);
  opacity: .85;
}
.ft-sw--custom::after { display: none; }
.ft-theme-name { font-size: 15.5px; font-weight: 500; line-height: 1.25; }
.ft-theme-what { color: var(--ink-3); font-size: 14px; line-height: 1.4; }
.ft-themes .note { margin-top: 14px; }

/* ==========================================================================
   Beweging (met "minder beweging" staat alles meteen in zijn eindstand)
   ========================================================================== */

/* de tegels komen na elkaar binnen; features.js zet .ft-anim en .is-shown */
@media (prefers-reduced-motion: no-preference) {
  .ft-anim .ft-tiles > .tile:not(.is-shown) { opacity: 0; }
  .ft-anim .ft-tiles > .tile.is-shown { animation: ft-rise 1s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) backwards; }
}
@keyframes ft-rise { from { opacity: 0; transform: translateY(34px) scale(.985); } }

/* de lijnen in een schema worden getekend zodra de kaart binnenkomt */
.ft-edge--draw {
  stroke-dasharray: var(--len) var(--len);
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s cubic-bezier(.4, 0, .2, 1);
  transition-delay: calc(.3s + var(--i, 0) * .12s);
}
.ft-edge--link,
.ft-edge--gain { transition: opacity .6s ease; transition-delay: calc(.5s + var(--i, 0) * .12s); }
.js .reveal:not(.is-in) .ft-edge--draw { stroke-dashoffset: var(--len); }
.js .reveal:not(.is-in) .ft-edge--link,
.js .reveal:not(.is-in) .ft-edge--gain { opacity: 0; }

/* regel 2: de vinkjes springen er één voor één in */
.ft-ok { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), opacity .3s ease; transition-delay: calc(.45s + var(--i, 0) * .12s); }
.js .reveal:not(.is-in) .ft-ok { opacity: 0; transform: scale(0); }

/* de connectors schuiven er na elkaar in, en hun stip gaat aan */
.ft-pills .pill { transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.15s + var(--i, 0) * .035s); }
.ft-pills .dot { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(.4s + var(--i, 0) * .035s); }
.js .ft-cat.reveal:not(.is-in) .pill { opacity: 0; transform: translateY(10px); }
.js .ft-cat.reveal:not(.is-in) .dot { transform: scale(0); }

@media (prefers-reduced-motion: reduce) {
  .ft-arrow.is-pass { animation: none; }
}

/* ---------- 4b. de agenda ---------- */

.ft-ag {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "when review safe" "when who who";
  gap: var(--gap);
}
.ft-ag-card:nth-child(1) { grid-area: when; }
.ft-ag-card:nth-child(2) { grid-area: review; }
.ft-ag-card:nth-child(3) { grid-area: safe; }
.ft-ag-card:nth-child(4) { grid-area: who; }
.ft-ag-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2vw, 28px);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.ft-ag-card p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.ft-ag-h { margin: 0; font: 500 clamp(22px, 2vw, 28px)/1.1 var(--sans); letter-spacing: -.03em; }
.ft-ag-kinds { display: grid; gap: 0; margin: 0; }
.ft-ag-kinds > div { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.ft-ag-kinds > div:last-child { border-bottom: 1px solid var(--line); }
.ft-ag-kinds dt { font-weight: 600; font-size: 15.5px; }
.ft-ag-kinds dd { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.ft-ag-kinds q { color: var(--ink); }
.ft-ag .ft-ag-small { color: var(--ink-3); font-size: 14px; }
.ft-ag-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.ft-ag-btn {
  padding: 7px 12px;
  border-radius: 9px;
  box-shadow: 0 0 0 1px var(--line-2);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}
.ft-ag-btn--ink { background: var(--btn); color: var(--btn-ink); box-shadow: none; }
.ft-ag-btn--stil { box-shadow: none; color: var(--ink-2); }
@media (max-width: 1099px) {
  .ft-ag { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "when when" "review safe" "who who"; }
}
@media (min-width: 700px) {
  .ft-ag-kinds > div { grid-template-columns: 150px minmax(0, 1fr); align-items: baseline; }
}
@media (max-width: 699px) {
  .ft-ag { grid-template-columns: minmax(0, 1fr); grid-template-areas: "when" "review" "safe" "who"; }
}

/* aanraken: het label dag/nacht is klein; het doel eromheen is 44px hoog */
@media (pointer: coarse) {
  .ft-compare-tag::after { content: ""; position: absolute; inset: -9px -4px; border-radius: 999px; }
}