/* Snilld forside 2026 – ting man kan vende, åbne og prøve i sektionerne. Almindelig CSS, afgrænset til #snilld-frontier. */

/* ---------- kort, der kan vendes ---------- */

#snilld-frontier .sfx-flip {
  --sfx-rx: 0deg;
  --sfx-ry: 0deg;
  --sfx-turn: 0deg;
  display: block;
  height: 100%;
  perspective: 1300px;
  cursor: pointer;
  border-radius: 22px;
  -webkit-tap-highlight-color: transparent;
}

#snilld-frontier .sfx-flip:focus-visible {
  outline: 3px solid #2f6bff;
  outline-offset: 4px;
}

#snilld-frontier .sfx-flip-card {
  position: relative;
  display: grid;
  height: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  transform: rotateX(var(--sfx-rx)) rotateY(calc(var(--sfx-ry) + var(--sfx-turn)));
  transition: transform 720ms cubic-bezier(0.2, 0.85, 0.2, 1);
  border-radius: inherit;
}

#snilld-frontier .sfx-flip.is-tilting .sfx-flip-card {
  transition-duration: 120ms;
}

#snilld-frontier .sfx-flip.is-flipped {
  --sfx-turn: 180deg;
}

#snilld-frontier .sfx-face {
  grid-area: 1 / 1;
  position: relative;
  min-width: 0;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 1px 0 rgba(36, 20, 57, 0.08), 0 18px 40px rgba(36, 20, 57, 0.14);
  transition: box-shadow 300ms;
}

#snilld-frontier .sfx-flip:hover .sfx-face {
  box-shadow: 0 1px 0 rgba(36, 20, 57, 0.08), 0 28px 60px rgba(36, 20, 57, 0.22);
}

#snilld-frontier .sfx-back {
  transform: rotateY(180deg);
}

/* uden JavaScript ligger bagsiden under forsiden, så intet indhold er skjult */
#snilld-frontier:not(.sfx-on) .sfx-flip-card {
  display: block;
  transform: none;
}

#snilld-frontier:not(.sfx-on) .sfx-back {
  transform: none;
  margin-top: 10px;
}

#snilld-frontier .sfx-turn {
  position: absolute;
  right: 16px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "DM Mono", SFMono-Regular, Consolas, monospace;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b3eb8;
  opacity: 0.9;
}

#snilld-frontier .sfx-turn:before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  transition: transform 500ms;
}

#snilld-frontier .sfx-flip:hover .sfx-turn:before {
  transform: rotate(200deg);
}

#snilld-frontier:not(.sfx-on) .sfx-turn {
  display: none;
}

/* ---------- Sådan foregår det: tre kort med noget på bagsiden ---------- */

#snilld-frontier .sf-steps > li.sfx-step {
  padding: 0;
  border: 0;
  background: none;
  min-height: 330px;
}

#snilld-frontier .sfx-step .sfx-face {
  padding: 26px 26px 46px;
  border: 1px solid rgba(36, 20, 57, 0.2);
  background: #fff;
  color: #0e0a14;
}

#snilld-frontier .sfx-step.sf-steps-you .sfx-face {
  background: #241439;
  border-color: #241439;
  color: #fff;
}

#snilld-frontier .sfx-step.sf-steps-you .sfx-turn {
  color: #cdc2f8;
}

#snilld-frontier .sfx-step .sfx-back {
  background: #efeaff;
  display: flex;
  flex-direction: column;
}

#snilld-frontier .sfx-step.sf-steps-you .sfx-back {
  background: #33205a;
}

#snilld-frontier .sfx-step .sfx-back .sf-steps-get {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: 19px;
  line-height: 1.4;
}

/* den lille ting, man får i hånden: tegnet i CSS, så den følger kortet rundt */
#snilld-frontier .sfx-thing {
  position: relative;
  width: 148px;
  height: 104px;
  margin: auto 0 0;
  padding-top: 22px;
  flex: none;
}

#snilld-frontier .sfx-thing i {
  position: absolute;
  display: block;
  border-radius: 6px;
  background: #fff;
  border: 1px solid rgba(36, 20, 57, 0.25);
  box-shadow: 0 8px 18px rgba(36, 20, 57, 0.18);
}

#snilld-frontier .sfx-thing-report i {
  left: 0;
  bottom: 0;
  width: 70px;
  height: 92px;
  background: linear-gradient(#6b3eb8, #6b3eb8) 10px 12px / 34px 5px no-repeat, repeating-linear-gradient(transparent 0 7px, rgba(36, 20, 57, 0.28) 7px 9px) 10px 26px / 50px 50px no-repeat, #fff;
}

#snilld-frontier .sfx-thing-report i:nth-child(2) {
  left: 36px;
  transform: rotate(7deg);
}

#snilld-frontier .sfx-thing-report i:nth-child(3) {
  left: 74px;
  transform: rotate(14deg);
  background: linear-gradient(#0f9d76, #0f9d76) 10px 12px / 26px 5px no-repeat, repeating-linear-gradient(transparent 0 7px, rgba(36, 20, 57, 0.28) 7px 9px) 10px 26px / 50px 50px no-repeat, #fff;
}

#snilld-frontier .sfx-thing-cards i {
  bottom: 0;
  width: 44px;
  height: 62px;
  background: linear-gradient(#cdc2f8, #cdc2f8) 8px 10px / 28px 4px no-repeat, linear-gradient(#cdc2f8, #cdc2f8) 8px 20px / 20px 4px no-repeat, #fff;
  transition: transform 300ms;
}

#snilld-frontier .sfx-thing-cards i:nth-child(1) { left: 0; }
#snilld-frontier .sfx-thing-cards i:nth-child(2) { left: 52px; transform: translateY(-16px) rotate(-4deg); box-shadow: 0 0 0 3px #2f6bff, 0 14px 22px rgba(0, 0, 0, 0.3); }
#snilld-frontier .sfx-thing-cards i:nth-child(3) { left: 104px; }

#snilld-frontier .sfx-thing-demo i {
  left: 0;
  bottom: 0;
  width: 132px;
  height: 84px;
  border-radius: 8px;
  background: linear-gradient(#241439, #241439) 0 0 / 100% 14px no-repeat, linear-gradient(#0f9d76, #0f9d76) 12px 30px / 46px 8px no-repeat, linear-gradient(#cdc2f8, #cdc2f8) 12px 46px / 86px 6px no-repeat, linear-gradient(#cdc2f8, #cdc2f8) 12px 60px / 64px 6px no-repeat, #fff;
}

/* ---------- 20 minutter mod 20 sekunder ---------- */

#snilld-frontier .sfx-race {
  --sfx-a: 0;
  --sfx-b: 0;
  display: grid;
  gap: 10px;
  margin-top: 22px;
  max-width: 520px;
}

#snilld-frontier .sfx-race-row {
  display: grid;
  grid-template-columns: 74px 1fr 64px;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 1.2;
}

#snilld-frontier .sfx-race-row > span:first-child {
  font-family: "DM Mono", SFMono-Regular, Consolas, monospace;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.86;
}

#snilld-frontier .sfx-race-bar {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

#snilld-frontier .sfx-race-bar:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #2f6bff;
  transform-origin: 0 50%;
  transform: scaleX(var(--sfx-a));
}

#snilld-frontier .sfx-race-row-b .sfx-race-bar:after {
  background: #12c493;
  transform: scaleX(var(--sfx-b));
}

#snilld-frontier .sfx-race output {
  font-family: "DM Mono", SFMono-Regular, Consolas, monospace;
  font-size: 15px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#snilld-frontier .sfx-race-go {
  justify-self: start;
  margin-top: 6px;
  min-height: 44px;
  padding: 8px 20px 9px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  transition: background-color 180ms, color 180ms;
}

#snilld-frontier .sfx-race-go:hover {
  background: #fff;
  color: #241439;
}

#snilld-frontier .sfx-race-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0;
  transition: opacity 400ms;
}

#snilld-frontier .sfx-race.is-done .sfx-race-note {
  opacity: 0.9;
}

#snilld-frontier .sf-saving-steps li.is-now {
  outline: 2px solid #2f6bff;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Færdige programmer: kort med en prøve på bagsiden ---------- */

#snilld-frontier .sf-product-list > li.sfx-prod {
  min-height: 360px;
}

#snilld-frontier .sfx-prod .sfx-face {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 48px;
  background: #fff;
  border: 1px solid rgba(36, 20, 57, 0.2);
  color: #0e0a14;
}

#snilld-frontier .sfx-prod .sfx-back {
  background: #241439;
  border-color: #241439;
  color: #f8f8fb;
  padding-bottom: 24px;
}

#snilld-frontier .sfx-prod .sfx-back .sf-product-n {
  color: #cdc2f8;
  margin-bottom: 14px;
}

#snilld-frontier .sfx-prod .sfx-front > p:not(.sf-product-n) {
  font-size: 17px;
  line-height: 1.45;
}

#snilld-frontier .sfx-prod-how {
  margin: 0 0 14px;
  font-size: 16.5px;
  line-height: 1.45;
}

#snilld-frontier .sfx-prod a.sf-product-go {
  display: inline-flex;
  flex-direction: row;
  align-self: flex-start;
  height: auto;
  margin-top: auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(205, 194, 248, 0.6);
  text-underline-offset: 5px;
  transform: none;
}

#snilld-frontier .sfx-prod a.sf-product-go:hover {
  background: none;
  color: #cdc2f8;
  transform: none;
}

#snilld-frontier .sf-steps > li.sfx-step.sf-steps-you {
  background: none;
  border: 0;
}

#snilld-frontier .sfx-prod .sf-product-go:hover span {
  transform: translateX(5px);
}

#snilld-frontier .sfx-try {
  margin: 0 0 16px;
  padding: 12px 14px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(205, 194, 248, 0.3);
}

#snilld-frontier .sfx-try-out {
  min-height: 3.9em;
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.3;
  color: #fff;
}

#snilld-frontier .sfx-try.is-on .sfx-try-out:after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: -0.15em;
  background: #12c493;
  animation: sfx-caret 0.9s steps(2) infinite;
}

@keyframes sfx-caret {
  50% { opacity: 0; }
}

#snilld-frontier .sfx-try button {
  min-height: 44px;
  padding: 8px 18px 9px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #241439;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
}

#snilld-frontier .sfx-try button[aria-pressed="true"] {
  background: #2f6bff;
  color: #fff;
}

#snilld-frontier .sfx-try small {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(248, 248, 251, 0.74);
}

/* ---------- dreje-knapperne: under modellen, fri af chatten i hjørnet ---------- */

@media (min-width: 1000px) {
  #snilld-frontier .sf-turn {
    left: 62%;
    right: auto;
    /* lige under modellen i det, man ser uden at rulle – også når toppen er højere end skærmen */
    top: calc(min(100svh - var(--usm-consent-bar-height, 0px), 100%) - 62px);
    bottom: auto;
    transform: translateX(-50%);
    gap: 10px;
    color: rgba(255, 255, 255, 0.7);
  }

  #snilld-frontier .sf-turn button {
    width: 40px;
    height: 40px;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }

  #snilld-frontier .sf-turn button:hover {
    background: #fff;
    color: #241439;
  }
}

/* ---------- lydknappen ---------- */

#snilld-frontier .sfs-toggle {
  position: fixed;
  left: 14px;
  bottom: calc(14px + var(--usm-consent-bar-height, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(14, 10, 20, 0.86);
  color: #fff;
  font-family: "DM Mono", SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color 180ms, transform 180ms;
}

#snilld-frontier .sfs-toggle:hover {
  background: #6b3eb8;
  transform: translateY(-2px);
}

#snilld-frontier .sfs-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#snilld-frontier .sfs-toggle[aria-pressed="true"] .sfs-off,
#snilld-frontier .sfs-toggle[aria-pressed="false"] .sfs-wave {
  display: none;
}

#snilld-frontier .sfs-toggle[aria-pressed="true"] {
  background: #6b3eb8;
  border-color: #6b3eb8;
}

@media (max-width: 699px) {
  #snilld-frontier .sfs-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  #snilld-frontier .sfs-toggle {
    padding: 0 12px;
  }
}

@media (min-width: 1000px) {
  #snilld-frontier .sf-steps > li.sfx-step {
    min-height: 400px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #snilld-frontier .sfx-flip-card {
    transition: none;
  }
}

@media print {
  #snilld-frontier .sfx-flip-card {
    display: block;
    transform: none !important;
  }

  #snilld-frontier .sfx-face {
    transform: none !important;
    backface-visibility: visible !important;
    margin-bottom: 8px;
  }
}

/* ---------- listen fra rapporten: forslag sorteret efter, hvad der bedst betaler sig ---------- */

#snilld-frontier .sfx-roi {
  margin: auto 0 0;
  padding: 14px 16px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(36, 20, 57, 0.18);
  box-shadow: 0 10px 22px rgba(36, 20, 57, 0.14);
}

#snilld-frontier .sfx-roi-head,
#snilld-frontier .sfx-roi li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 10px;
  margin: 0;
}

#snilld-frontier .sfx-roi-head {
  grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1.4fr);
  margin-bottom: 8px;
  font-family: "DM Mono", SFMono-Regular, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  color: rgba(36, 20, 57, 0.66);
}

#snilld-frontier .sfx-roi-head span:first-child {
  grid-column: 1;
  white-space: nowrap;
  overflow: visible;
}

#snilld-frontier .sfx-roi-head span:nth-child(2) {
  text-align: left;
  padding-left: 26px;
}

#snilld-frontier .sfx-roi ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#snilld-frontier .sfx-roi li b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #241439;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
}

#snilld-frontier .sfx-roi-c,
#snilld-frontier .sfx-roi-s {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: rgba(36, 20, 57, 0.08);
  overflow: hidden;
}

#snilld-frontier .sfx-roi-c:before,
#snilld-frontier .sfx-roi-s:before {
  content: "";
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: #6b3eb8;
  transform-origin: 0 50%;
}

#snilld-frontier .sfx-roi-s:before {
  background: #0f9d76;
}

/* søjlerne vokser frem, når kortet er vendt */
#snilld-frontier .sfx-on .sfx-roi-c:before,
#snilld-frontier .sfx-on .sfx-roi-s:before {
  transform: scaleX(0);
  transition: transform 700ms cubic-bezier(0.2, 0.85, 0.2, 1);
}

#snilld-frontier .sfx-flip.is-flipped .sfx-roi-c:before,
#snilld-frontier .sfx-flip.is-flipped .sfx-roi-s:before {
  transform: none;
}

#snilld-frontier .sfx-flip.is-flipped .sfx-roi li:nth-child(1) span:before { transition-delay: 350ms; }
#snilld-frontier .sfx-flip.is-flipped .sfx-roi li:nth-child(2) span:before { transition-delay: 480ms; }
#snilld-frontier .sfx-flip.is-flipped .sfx-roi li:nth-child(3) span:before { transition-delay: 610ms; }

#snilld-frontier .sfx-roi-note {
  margin: 10px 0 0;
  font-family: "DM Mono", SFMono-Regular, Consolas, monospace;
  font-size: 10.5px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3 !important;
  color: #0a7256;
}

#snilld-frontier .sfx-step .sfx-back .sf-steps-get {
  font-size: 17.5px;
  margin-bottom: 16px;
}

@media (prefers-reduced-motion: reduce) {
  #snilld-frontier .sfx-on .sfx-roi-c:before,
  #snilld-frontier .sfx-on .sfx-roi-s:before {
    transform: none;
    transition: none;
  }
}

/* billedtekst under tingen på bagsiden af et trin-kort */
#snilld-frontier .sfx-cap {
  margin: 12px 0 0;
  font-family: "DM Mono", SFMono-Regular, Consolas, monospace;
  font-size: 11px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35 !important;
  color: #6b3eb8;
}

#snilld-frontier .sfx-step.sf-steps-you .sfx-cap {
  color: #cdc2f8;
}

/* ---------- de tre slags møder: en lille tidslinje på bagsiden af trin 3 ---------- */

#snilld-frontier .sfx-meet {
  position: relative;
  display: grid;
  gap: 12px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

#snilld-frontier .sfx-meet:before {
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  bottom: 22px;
  width: 2px;
  background: rgba(107, 62, 184, 0.35);
}

#snilld-frontier .sfx-meet li {
  position: relative;
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0 0 0 30px;
  border: 0;
  background: none;
}

#snilld-frontier .sfx-meet li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #6b3eb8;
  border: 3px solid #efeaff;
  box-shadow: 0 0 0 1.5px #6b3eb8;
}

/* statusmødet kommer igen og igen: en ring, der drejer en omgang, når kortet vendes */
#snilld-frontier .sfx-meet-loop:before {
  background: #efeaff;
  border-color: transparent;
  box-shadow: none;
  border: 3px solid #0f9d76;
  border-right-color: transparent;
}

#snilld-frontier .sfx-flip.is-flipped .sfx-meet-loop:before {
  animation: sfx-loop 1.4s cubic-bezier(0.3, 0.1, 0.2, 1) 500ms both;
}

@keyframes sfx-loop {
  from { transform: rotate(0); }
  to { transform: rotate(720deg); }
}

#snilld-frontier .sfx-meet b {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.25;
  color: #241439;
}

#snilld-frontier .sfx-meet span {
  font-size: 14.5px;
  line-height: 1.35;
  color: rgba(14, 10, 20, 0.78);
}

@media (prefers-reduced-motion: reduce) {
  #snilld-frontier .sfx-flip.is-flipped .sfx-meet-loop:before {
    animation: none;
  }
}

/* rettelser: overskrifterne i ROI-listen står over hver sin kolonne, og statusmødets ring vinder over den almindelige prik */
#snilld-frontier .sfx-roi-head span:nth-child(2) {
  padding-left: 0;
}

#snilld-frontier .sfx-meet li.sfx-meet-loop:before {
  background: #efeaff;
  border: 3px solid #0f9d76;
  border-right-color: transparent;
  box-shadow: none;
}
/* ---------- Snilld Studios hylde: programkortene som butikskort ---------- */

#snilld-frontier .sf-product-list > li.sfx-prod {
  min-height: 520px;
}

#snilld-frontier .sfx-prod .sfx-front {
  padding-bottom: 46px;
}

/* et lille billede af programmet, tegnet i CSS */
#snilld-frontier .sfx-shot {
  position: relative;
  height: 132px;
  margin: -6px -6px 20px;
  border-radius: 16px;
  background: #241439;
  overflow: hidden;
}

#snilld-frontier .sfx-shot i {
  position: absolute;
  display: block;
}

/* Transcriber: der optages, og linjerne skriver sig selv */
#snilld-frontier .sfx-shot-transcriber i:nth-child(1) {
  left: 18px;
  top: 18px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2f6bff;
  animation: sfx-rec 1.4s ease-in-out infinite;
}

#snilld-frontier .sfx-shot-transcriber i:nth-child(2),
#snilld-frontier .sfx-shot-transcriber i:nth-child(3),
#snilld-frontier .sfx-shot-transcriber i:nth-child(4) {
  left: 18px;
  height: 8px;
  border-radius: 999px;
  background: #cdc2f8;
  transform-origin: 0 50%;
  animation: sfx-write 5s cubic-bezier(0.3, 0, 0.2, 1) infinite;
}

#snilld-frontier .sfx-shot-transcriber i:nth-child(2) { top: 48px; width: 68%; }
#snilld-frontier .sfx-shot-transcriber i:nth-child(3) { top: 66px; width: 82%; animation-delay: 0.5s; }
#snilld-frontier .sfx-shot-transcriber i:nth-child(4) { top: 84px; width: 52%; animation-delay: 1s; }

#snilld-frontier .sfx-shot-transcriber i:nth-child(5) {
  right: 14px;
  bottom: 12px;
  width: 78px;
  height: 22px;
  border-radius: 999px;
  background: #0f9d76;
}

@keyframes sfx-rec {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 107, 255, 0.6); }
  50% { box-shadow: 0 0 0 8px rgba(47, 107, 255, 0); }
}

@keyframes sfx-write {
  0% { transform: scaleX(0); }
  30%, 85% { transform: scaleX(1); }
  100% { transform: scaleX(1); opacity: 0; }
}

/* Chatbot: et spørgsmål, et svar, og et nyt svar på vej */
#snilld-frontier .sfx-shot-chatbot i:nth-child(1) {
  left: 16px;
  top: 16px;
  width: 52%;
  height: 28px;
  border-radius: 14px 14px 14px 4px;
  background: #fff;
}

#snilld-frontier .sfx-shot-chatbot i:nth-child(2) {
  right: 16px;
  top: 52px;
  width: 62%;
  height: 28px;
  border-radius: 14px 14px 4px 14px;
  background: #6b3eb8;
}

#snilld-frontier .sfx-shot-chatbot i:nth-child(3) {
  left: 16px;
  top: 90px;
  width: 58px;
  height: 26px;
  border-radius: 13px 13px 13px 4px;
  background: radial-gradient(circle at 16px 13px, #6b3eb8 0 3.5px, transparent 4px), radial-gradient(circle at 29px 13px, #6b3eb8 0 3.5px, transparent 4px), radial-gradient(circle at 42px 13px, #6b3eb8 0 3.5px, transparent 4px), #fff;
  animation: sfx-typing 1.6s ease-in-out infinite;
}

@keyframes sfx-typing {
  0%, 100% { transform: translateY(0); opacity: 0.75; }
  50% { transform: translateY(-3px); opacity: 1; }
}

/* Voice Agent: en stemme, der læser en mail op */
#snilld-frontier .sfx-shot-voice i:nth-child(1) {
  left: 26px;
  top: 50%;
  width: 62px;
  height: 62px;
  margin-top: -31px;
  border-radius: 50%;
  border: 2px solid #cdc2f8;
  animation: sfx-voice 2.2s ease-out infinite;
}

#snilld-frontier .sfx-shot-voice i:nth-child(2) {
  left: 42px;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border-radius: 50%;
  background: #fff;
}

#snilld-frontier .sfx-shot-voice i:nth-child(3),
#snilld-frontier .sfx-shot-voice i:nth-child(4),
#snilld-frontier .sfx-shot-voice i:nth-child(5) {
  left: 116px;
  right: 18px;
  height: 8px;
  border-radius: 999px;
  background: rgba(205, 194, 248, 0.5);
}

#snilld-frontier .sfx-shot-voice i:nth-child(3) { top: 40px; right: 40%; background: #fff; }
#snilld-frontier .sfx-shot-voice i:nth-child(4) { top: 62px; }
#snilld-frontier .sfx-shot-voice i:nth-child(5) { top: 82px; right: 30%; }

@keyframes sfx-voice {
  0% { transform: scale(0.7); opacity: 1; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* pris og vej ind */
#snilld-frontier .sfx-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  margin: auto 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(36, 20, 57, 0.16);
}

#snilld-frontier .sfx-buy-price {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#snilld-frontier .sfx-buy-price b {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #241439;
}

#snilld-frontier .sfx-buy-price small {
  font-size: 13.5px;
  line-height: 1.3;
  color: rgba(14, 10, 20, 0.72);
}

#snilld-frontier .sfx-prod a.sfx-buy-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: auto;
  min-height: 46px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: #6b3eb8;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transform: none;
  transition: background-color 180ms;
}

#snilld-frontier .sfx-prod a.sfx-buy-btn:hover {
  background: #241439;
  color: #fff;
  transform: none;
}

#snilld-frontier .sfx-prod a.sfx-buy-btn span {
  transition: transform 200ms;
}

#snilld-frontier .sfx-prod a.sfx-buy-btn:hover span {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  #snilld-frontier .sfx-shot i {
    animation: none !important;
  }
}

/* ---------- "Sådan foregår det" er en del af pakken: samme mørke flade som tilbuddet ovenover, uden skel imellem ---------- */

#snilld-frontier .sf-offer {
  padding-bottom: 40px;
}

#snilld-frontier .sf-method {
  background: #0e0a14;
  color: #f8f8fb;
  padding-top: 0;
}

#snilld-frontier .sf-method > .sf-wrap {
  padding-top: 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

#snilld-frontier .sf-method .sf-kicker {
  color: #cdc2f8;
}

#snilld-frontier .sf-method .sf-h2 {
  color: #fff;
}

#snilld-frontier .sf-method .sf-h2 span {
  color: #cdc2f8;
}

/* kortene: det mørke kort får en kant, så det ikke forsvinder mod baggrunden */
#snilld-frontier .sf-method .sfx-step.sf-steps-you .sfx-face {
  border-color: rgba(205, 194, 248, 0.4);
}

#snilld-frontier .sf-method .sfx-step .sfx-face {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 22px 46px rgba(0, 0, 0, 0.45);
}

#snilld-frontier .sf-method .sf-h2 strong {
  color: #fff;
}

/* ---------- trappen: en rigtig trappe i rummet ---------- */
/* Fem trin af glas på pakkens mørke flade. Hvert trin har en forside (knappen), en trædeflade og et stykke sidevæg.
   Målene står som variabler på .sft-scene og følger scenens bredde. Stjernen flyttes af explore.js.
   Elementer med transform-style: preserve-3d må ikke få opacity, filter eller overflow – så bliver rummet fladt. */

@property --sft-turn {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

#snilld-frontier .sft {
  --lvl: 0;
  margin-top: 88px;
}

#snilld-frontier .sft h3 {
  margin: 0 0 14px;
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
}

#snilld-frontier .sft p.sft-sum {
  margin: 0;
  max-width: 44em;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

#snilld-frontier .sft-body {
  display: grid;
  gap: 18px 56px;
  margin-top: 26px;
}

/* scenen */

#snilld-frontier .sft-stage {
  position: relative;
  min-width: 0;
  overflow: hidden;
  container: sft / inline-size;
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

#snilld-frontier .sft-stage.is-drag {
  cursor: grabbing;
}

/* lyset bag trappen bliver stærkere, jo højere man går */
#snilld-frontier .sft-stage:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 46% 52% at 66% 34%, rgba(124, 82, 214, calc(0.1 + var(--lvl) * 0.075)), transparent 72%);
  transition: background 600ms;
  pointer-events: none;
}

#snilld-frontier .sft-scene {
  --w: min(60cqw, 500px);
  --d: calc(var(--w) * 0.25);
  --h: max(44px, calc(var(--w) * 0.125));
  --rx: -20deg;
  --ry: -32deg;
  --ox: 0.11;
  --px: 0;
  --py: 0;
  position: relative;
  height: calc(4.7 * var(--h) + 0.3 * var(--w) + 134px);
  perspective: calc(var(--w) * 3.2);
  perspective-origin: 50% 35%;
}

@container sft (max-width: 560px) {
  #snilld-frontier .sft-scene {
    --w: 74cqw;
    --ry: -24deg;
    --ox: 0.19;
  }
}

#snilld-frontier .sft-world {
  position: absolute;
  left: calc(50% + var(--w) * var(--ox));
  bottom: calc(var(--w) * 0.07 + 14px);
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--rx) + var(--py) * 1deg)) rotateY(calc(var(--ry) + var(--sft-turn) * 4deg + var(--px) * 1deg));
}

#snilld-frontier .sft-steps,
#snilld-frontier .sft-step {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
}

#snilld-frontier .sft-world i {
  display: block;
  position: absolute;
  font-style: normal;
  pointer-events: none;
}

/* gulvet: et net af tynde linjer, der toner ud, og et skær under trappen */
#snilld-frontier .sft-floor {
  left: calc(var(--d) * -7);
  top: calc(var(--d) * -9);
  width: calc(var(--d) * 12);
  height: calc(var(--d) * 9);
  transform-origin: 50% 100%;
  transform: translateZ(calc(var(--d) * 2)) rotateX(90deg);
  background:
    radial-gradient(ellipse 34% 40% at 42% 52%, rgba(124, 82, 214, calc(0.26 + var(--lvl) * 0.08)), transparent 72%),
    repeating-linear-gradient(0deg, rgba(205, 194, 248, 0.2) 0 1px, transparent 1px var(--d)),
    repeating-linear-gradient(90deg, rgba(205, 194, 248, 0.2) 0 1px, transparent 1px var(--d));
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 44% 52%, #000 16%, transparent 70%);
  mask-image: radial-gradient(ellipse 50% 50% at 44% 52%, #000 16%, transparent 70%);
}

/* trinets forside: knappen */
#snilld-frontier .sft-riser {
  position: absolute;
  z-index: 0;
  left: calc(var(--w) * -1);
  top: calc((var(--i) + 1) * var(--h) * -1);
  width: var(--w);
  height: var(--h);
  transform: translateZ(calc(var(--i) * var(--d) * -1));
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin: 0;
  padding: 0 calc(var(--w) * 0.05);
  border: 1px solid rgba(205, 194, 248, 0.36);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(180deg, rgba(205, 194, 248, 0.15), rgba(205, 194, 248, 0.04));
  box-shadow: none;
  color: rgba(255, 255, 255, 0.8);
  font: inherit;
  font-size: clamp(13.5px, calc(var(--w) * 0.046), 22px);
  font-weight: 700;
  line-height: 1.12;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  transition: opacity 500ms linear calc(var(--i) * 90ms), color 300ms, border-color 300ms, box-shadow 400ms;
}

#snilld-frontier .sft-no {
  flex: none;
  font-family: "DM Mono", SFMono-Regular, Consolas, monospace;
  font-size: 0.68em;
  font-weight: 400;
  color: #cdc2f8;
  transition: color 300ms;
}

#snilld-frontier .sft-name {
  max-width: 72%;
}

/* lyset i trinet: løber ind fra den nærmeste ende, når stjernen når trinet */
#snilld-frontier .sft-riser:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(107, 62, 184, 0.18), rgba(124, 82, 214, 0.5));
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 420ms cubic-bezier(0.2, 0.85, 0.2, 1), background-color 300ms;
}

/* lyslisten på trinets forkant */
#snilld-frontier .sft-riser:after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -2px;
  height: 3px;
  background: #cdc2f8;
  opacity: 0.4;
  transition: opacity 300ms, box-shadow 300ms, background-color 300ms;
}

#snilld-frontier .sft-riser:hover {
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

#snilld-frontier .sft-riser:hover:after {
  opacity: 0.9;
}

#snilld-frontier .sft-riser:focus-visible {
  outline: 2px solid #12c493;
  outline-offset: 3px;
}

#snilld-frontier .sft-step.is-lit .sft-riser,
#snilld-frontier .sft-step.is-on .sft-riser {
  border-color: rgba(205, 194, 248, 0.7);
  color: #fff;
}

#snilld-frontier .sft-step.is-lit .sft-riser:before,
#snilld-frontier .sft-step.is-on .sft-riser:before {
  transform: none;
}

#snilld-frontier .sft-step.is-lit .sft-riser:after,
#snilld-frontier .sft-step.is-on .sft-riser:after {
  opacity: 1;
  box-shadow: 0 0 14px 1px rgba(205, 194, 248, 0.75);
}

#snilld-frontier .sft-step.is-on .sft-riser {
  border-color: #cdc2f8;
  box-shadow: 0 0 60px -4px rgba(124, 82, 214, 0.95);
}

#snilld-frontier .sft-step.is-on .sft-riser:before {
  background: linear-gradient(90deg, #5a34ad, #8257e0);
}

#snilld-frontier .sft-step.is-on .sft-riser:after {
  background: #fff;
  box-shadow: 0 0 18px 2px rgba(255, 255, 255, 0.8);
}

#snilld-frontier .sft-step.is-on .sft-no {
  color: #fff;
}

/* trædefladen */
#snilld-frontier .sft-tread {
  left: calc(var(--w) * -1);
  top: calc((var(--i) + 1) * var(--h) * -1 - var(--d));
  width: var(--w);
  height: var(--d);
  transform-origin: 0 100%;
  transform: translateZ(calc(var(--i) * var(--d) * -1)) rotateX(90deg);
  border: 1px solid rgba(205, 194, 248, 0.26);
  border-bottom: 0;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  transition: opacity 500ms linear calc(var(--i) * 90ms), background-color 300ms;
}

#snilld-frontier .sft-step.is-lit .sft-tread {
  background: linear-gradient(0deg, rgba(150, 112, 232, 0.34), rgba(107, 62, 184, 0.1));
}

/* stjernens lys på trinet, den står på */
#snilld-frontier .sft-step.is-on .sft-tread {
  background:
    radial-gradient(ellipse 20% 62% at 87% 50%, rgba(18, 196, 147, 0.7), transparent 72%),
    linear-gradient(0deg, rgba(150, 112, 232, 0.62), rgba(107, 62, 184, 0.2));
}

/* ringen, når stjernen lander */
#snilld-frontier .sft-tread:after {
  content: "";
  position: absolute;
  left: 87%;
  top: 50%;
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) * -0.5) 0 0 calc(var(--d) * -0.5);
  border: 2px solid #12c493;
  border-radius: 50%;
  opacity: 0;
}

#snilld-frontier .sft-step.is-land .sft-tread:after {
  animation: sft-ring 620ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes sft-ring {
  from { opacity: 0.95; transform: scale(0.15); }
  to { opacity: 0; transform: scale(1.9); }
}

/* sidevæggen: ét stykke under hvert trin, så man ser trappens profil */
#snilld-frontier .sft-wall {
  left: 0;
  top: calc((var(--i) + 1) * var(--h) * -1);
  width: var(--d);
  height: calc((var(--i) + 1) * var(--h));
  transform-origin: 0 0;
  transform: translateZ(calc(var(--i) * var(--d) * -1)) rotateY(90deg);
  border-top: 1px solid rgba(205, 194, 248, 0.5);
  background: linear-gradient(180deg, rgba(205, 194, 248, 0.16), rgba(205, 194, 248, 0.02) 85%);
  transition: opacity 500ms linear calc(var(--i) * 90ms), background-color 300ms;
}

#snilld-frontier .sft-wall:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: var(--h);
  background: rgba(205, 194, 248, 0.5);
}

#snilld-frontier .sft-step.is-lit .sft-wall,
#snilld-frontier .sft-step.is-on .sft-wall {
  background: linear-gradient(180deg, rgba(124, 82, 214, 0.55), rgba(107, 62, 184, 0.06) 90%);
}

/* stjernen: står over det valgte trin og vender altid mod den, der ser på */
#snilld-frontier .sft-world .sft-star {
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

#snilld-frontier .sft-star b {
  --s: clamp(28px, calc(var(--w) * 0.085), 44px);
  display: block;
  position: absolute;
  left: calc(var(--s) * -0.5);
  top: calc(var(--s) * -0.5);
  width: var(--s);
  height: var(--s);
  transform: rotateY(calc((var(--ry) + var(--sft-turn) * 4deg + var(--px) * 1deg) * -1)) rotateX(calc((var(--rx) + var(--py) * 1deg) * -1));
  transition: opacity 400ms 700ms;
}

#snilld-frontier .sft-star b:before {
  content: "";
  position: absolute;
  inset: calc(var(--s) * -0.9);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(18, 196, 147, 0.5), rgba(18, 196, 147, 0.13) 40%, transparent 68%);
}

#snilld-frontier .sft-star .sf-star {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  fill: #12c493;
  filter: drop-shadow(0 0 9px rgba(18, 196, 147, 0.9));
  animation: sft-float 3.4s ease-in-out infinite;
}

@keyframes sft-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(10deg); }
}

/* øverst klarer opgaven sig selv: lyset løber selv op ad trappen, igen og igen */
#snilld-frontier .sft.is-top .sft-riser:after {
  animation: sft-run 1.7s linear infinite;
  animation-delay: calc(var(--i) * 0.17s);
}

@keyframes sft-run {
  0%, 46%, 100% { background-color: #cdc2f8; box-shadow: 0 0 12px 1px rgba(205, 194, 248, 0.7); }
  14% { background-color: #fff; box-shadow: 0 0 24px 4px #12c493; }
}

/* trappen bygger sig selv, første gang den kommer til syne */
#snilld-frontier.sfx-on .sft-step {
  transition: transform 780ms cubic-bezier(0.2, 1.15, 0.3, 1) calc(var(--i) * 90ms);
}

#snilld-frontier.sfx-on .sft:not(.is-in) .sft-step {
  transform: translate3d(0, calc(var(--h) * 1.3), 0);
}

#snilld-frontier.sfx-on .sft:not(.is-in) .sft-riser,
#snilld-frontier.sfx-on .sft:not(.is-in) .sft-tread,
#snilld-frontier.sfx-on .sft:not(.is-in) .sft-wall,
#snilld-frontier.sfx-on .sft:not(.is-in) .sft-star b {
  opacity: 0;
}

/* kameraet glider en smule rundt om trappen, mens man ruller forbi (kun i browsere, der kan det) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    #snilld-frontier .sft-scene {
      animation: sft-turn linear both;
      animation-timeline: view();
    }
  }
}

@keyframes sft-turn {
  from { --sft-turn: -1; }
  to { --sft-turn: 1; }
}

/* ---------- trappen som levende model (trappe-model.js) ---------- */
/* Lærredet fylder scenen. Trin-knapperne bliver til mærkater, som explore.js holder fast ved hver afsats. */

#snilld-frontier .sft-canvas,
#snilld-frontier .sft-wide {
  display: none;
}

#snilld-frontier .sft-live .sft-scene {
  height: min(88cqw, 680px);
  perspective: none;
  animation: none;
}

@container sft (max-width: 560px) {
  #snilld-frontier .sft-live .sft-scene {
    height: 126cqw;
  }
}

#snilld-frontier .sft-live .sft-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* billedet toner ud mod kanterne, så modellen aldrig ender i en hård firkant, når man er tæt på */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 89%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 13%, #000 89%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 88%, transparent);
  mask-composite: intersect;
}

#snilld-frontier .sft-live .sft-world,
#snilld-frontier .sft-live .sft-steps,
#snilld-frontier .sft-live .sft-step {
  position: static;
  width: auto;
  height: auto;
  transform: none !important;
  transform-style: flat;
  transition: none;
}

#snilld-frontier .sft-live .sft-floor,
#snilld-frontier .sft-live .sft-tread,
#snilld-frontier .sft-live .sft-wall,
#snilld-frontier .sft-live .sft-world .sft-star {
  display: none;
}

#snilld-frontier .sft-live .sft-riser {
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  transform: translate(-999px, -999px);
  gap: 0;
  padding: 10px 14px 11px;
  border: 1px solid rgba(205, 194, 248, 0.42);
  border-radius: 999px;
  background: rgba(22, 14, 30, 0.82);
  color: rgba(255, 255, 255, 0.88);
  font-size: 14.5px;
  white-space: nowrap;
  will-change: transform;
  transition: opacity 500ms linear, color 250ms, border-color 250ms, background-color 250ms, box-shadow 300ms;
}

#snilld-frontier .sft-live .sft-riser:before,
#snilld-frontier .sft-live .sft-riser:after {
  content: none;
}

/* mærkaten viser kun nummeret; navnet folder sig ud, når man peger på den, og på den valgte afsats */
#snilld-frontier .sft-live .sft-name {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 320ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 220ms, padding 320ms;
}

#snilld-frontier .sft-live .sft-step.is-hover .sft-name,
#snilld-frontier .sft-live .sft-riser:hover .sft-name,
#snilld-frontier .sft-live .sft-riser:focus-visible .sft-name,
#snilld-frontier .sft-live:not(.is-close) .sft-riser[aria-pressed="true"] .sft-name {
  max-width: 250px;
  padding-left: 8px;
  opacity: 1;
}

#snilld-frontier .sft-live .sft-step.is-hover .sft-riser,
#snilld-frontier .sft-live .sft-riser:hover {
  border-color: #fff;
  background: rgba(46, 30, 66, 0.92);
}

#snilld-frontier .sft-live .sft-step.is-lit .sft-riser {
  border-color: rgba(205, 194, 248, 0.8);
  box-shadow: none;
}

#snilld-frontier .sft-live .sft-riser[aria-pressed="true"] {
  border-color: #cdc2f8;
  background: #6b3eb8;
  color: #fff;
  box-shadow: 0 0 34px -4px rgba(124, 82, 214, 0.95);
}

#snilld-frontier .sft-live .sft-riser[aria-pressed="true"] .sft-no {
  color: #fff;
}

@container sft (max-width: 560px) {
  #snilld-frontier .sft-live .sft-riser {
    padding: 7px 10px 8px;
  }

  #snilld-frontier .sft-live .sft-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #snilld-frontier .sft-live .sft-no {
    font-size: 13px;
  }
}

#snilld-frontier .sft-live .sft-wide:not([hidden]) {
  display: inline-flex;
  align-items: center;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 8px;
  min-height: 40px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid rgba(205, 194, 248, 0.5);
  border-radius: 999px;
  background: rgba(22, 14, 30, 0.82);
  box-shadow: none;
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
}

#snilld-frontier .sft-live .sft-wide:hover {
  border-color: #fff;
}

#snilld-frontier .sft p.sft-hint {
  position: relative;
  margin: 0;
  font-family: "DM Mono", SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: #cdc2f8;
}

/* feltet med det valgte trin */

#snilld-frontier .sft-panel {
  min-width: 0;
}

#snilld-frontier .sft-read p {
  margin: 0;
}

#snilld-frontier .sft p.sft-count {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
  color: #cdc2f8;
}

#snilld-frontier .sft-count span {
  font-family: "DM Mono", SFMono-Regular, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* det store tal står i sidens egen skrift: DM Monos nul har en streg igennem og ligner et Ø */
#snilld-frontier .sft-count b {
  font-size: clamp(68px, 8.4vw, 118px);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: #cdc2f8;
}

@supports (-webkit-text-stroke: 1px #000) {
  #snilld-frontier .sft-count b {
    color: transparent;
    -webkit-text-stroke: 1.5px #cdc2f8;
  }
}

#snilld-frontier .sft p.sft-tag {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  font-family: "DM Mono", SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cdc2f8;
}

#snilld-frontier .sft-tag:before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #12c493;
  box-shadow: 0 0 10px rgba(18, 196, 147, 0.9);
}

#snilld-frontier .sft p.sft-title {
  margin-bottom: 10px;
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
}

#snilld-frontier .sft p.sft-text {
  min-height: 4.5em;
  max-width: 30em;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}

#snilld-frontier .sft p.sft-own {
  display: inline-block;
  margin-top: 14px;
  padding: 7px 14px 8px;
  border: 1px solid rgba(18, 196, 147, 0.65);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #7fe6c8;
}

#snilld-frontier .sft p.sft-own[hidden] {
  display: none;
}

#snilld-frontier .sft-read.is-swap > * {
  animation: sft-swap 440ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

#snilld-frontier .sft-read.is-swap > :nth-child(2) { animation-delay: 40ms; }
#snilld-frontier .sft-read.is-swap > :nth-child(3) { animation-delay: 80ms; }
#snilld-frontier .sft-read.is-swap > :nth-child(4) { animation-delay: 120ms; }
#snilld-frontier .sft-read.is-swap > :nth-child(5) { animation-delay: 160ms; }

@keyframes sft-swap {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

#snilld-frontier .sft-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}

#snilld-frontier .sft-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid rgba(205, 194, 248, 0.5);
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  transition: background-color 200ms, border-color 200ms, opacity 200ms;
}

#snilld-frontier .sft-nav button.sft-prev {
  padding: 0;
}

#snilld-frontier .sft-nav button.sft-next {
  flex: none;
  white-space: nowrap;
  border-color: #6b3eb8;
  background: #6b3eb8;
}

#snilld-frontier .sft-nav button:hover:not(:disabled) {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

#snilld-frontier .sft-nav button.sft-next:hover:not(:disabled) {
  border-color: #8257e0;
  background: #8257e0;
}

#snilld-frontier .sft-nav button:disabled {
  opacity: 0.35;
  cursor: default;
}

#snilld-frontier .sft-rail {
  display: flex;
  gap: 5px;
}

#snilld-frontier .sft-rail i {
  width: 20px;
  height: 3px;
  background: rgba(205, 194, 248, 0.25);
  transition: background-color 300ms, box-shadow 300ms;
}

#snilld-frontier .sft-rail i.is-lit {
  background: #cdc2f8;
}

#snilld-frontier .sft-rail i.is-on {
  background: #12c493;
  box-shadow: 0 0 10px rgba(18, 196, 147, 0.9);
}

@media (min-width: 1000px) {
  #snilld-frontier .sft-body {
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    align-items: center;
    margin-top: 6px;
  }

  #snilld-frontier .sft-panel {
    order: -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #snilld-frontier .sft-riser,
  #snilld-frontier .sft-riser:before,
  #snilld-frontier .sft-riser:after,
  #snilld-frontier .sft-tread,
  #snilld-frontier .sft-wall,
  #snilld-frontier.sfx-on .sft-step {
    transition: none;
  }

  #snilld-frontier .sft-star .sf-star,
  #snilld-frontier .sft.is-top .sft-riser:after,
  #snilld-frontier .sft-step.is-land .sft-tread:after,
  #snilld-frontier .sft-read.is-swap > * {
    animation: none;
  }
}

@media print {
  #snilld-frontier .sft-stage,
  #snilld-frontier .sft-nav {
    display: none;
  }
}

/* ---------- luft: én fælles rytme for hele siden ---------- */
/* Målt 12. nov. 2026: der var 24 px mellem en overskrift på 60 px og dens indhold, 14-16 px mellem kort og 88-96 px
   mellem sektioner. Det læses som trængsel. Her får sektioner, overskrifter og kort samme, større afstande.
   Selektorerne begynder med #snilld-frontier.sf, så de også gælder over de enkelte sektioners egne stylesheets. */

#snilld-frontier.sf .sf-people,
#snilld-frontier.sf .sf-products,
#snilld-frontier.sf .sf-book,
#snilld-frontier.sf .sf-courses,
#snilld-frontier.sf .sf-meet {
  padding-top: 96px;
  padding-bottom: 96px;
}

#snilld-frontier.sf .sf-offer {
  padding-top: 96px;
}

#snilld-frontier.sf .sf-method {
  padding-bottom: 104px;
}

#snilld-frontier.sf .sf-method > .sf-wrap {
  padding-top: 72px;
}

#snilld-frontier.sf .sf-clients {
  padding-bottom: 96px;
}

/* den lille linje over en overskrift og overskriften selv */
#snilld-frontier.sf > section:not(.sf-stage) .sf-wrap > .sf-kicker {
  margin-bottom: 20px;
}

/* fra overskrift til det, den hører til: mere, når det er en række kort, end når det er en tekst */
#snilld-frontier.sf .sf-method .sf-wrap > .sf-h2,
#snilld-frontier.sf .sf-products .sf-wrap > .sf-h2,
#snilld-frontier.sf .sf-courses .sf-h2 {
  margin-bottom: 40px;
}

#snilld-frontier.sf .sf-people .sf-h2,
#snilld-frontier.sf .sf-offer .sf-h2,
#snilld-frontier.sf .sf-book .sf-h2 {
  margin-bottom: 32px;
}

/* kort i rækker får afstand, så hvert kort står for sig */
#snilld-frontier.sf .sf-steps,
#snilld-frontier.sf .sf-product-list {
  gap: 22px;
}

#snilld-frontier.sf .sf-client-list {
  gap: 16px;
}

/* pakkens tre blokke: tilbuddet, besparelsen og regnestykket er tre ting, ikke én */
#snilld-frontier.sf .sf-saving {
  margin-top: 88px;
  padding-top: 72px;
}

#snilld-frontier.sf .sf-calc {
  margin-top: 72px;
  padding: 30px 28px 28px;
}

#snilld-frontier.sf .sf-calc-note {
  max-width: 62ch;
  margin-top: 22px;
  line-height: 1.55;
}

#snilld-frontier.sf .sft {
  margin-top: 104px;
}

@media (min-width: 1000px) {
  #snilld-frontier.sf .sf-people,
  #snilld-frontier.sf .sf-products,
  #snilld-frontier.sf .sf-book,
  #snilld-frontier.sf .sf-courses,
  #snilld-frontier.sf .sf-meet {
    padding-top: 152px;
    padding-bottom: 144px;
  }

  #snilld-frontier.sf .sf-offer {
    padding-top: 152px;
  }

  #snilld-frontier.sf .sf-method {
    padding-bottom: 152px;
  }

  #snilld-frontier.sf .sf-method > .sf-wrap {
    padding-top: 120px;
  }

  #snilld-frontier.sf .sf-clients {
    padding-bottom: 144px;
  }

  #snilld-frontier.sf > section:not(.sf-stage) .sf-wrap > .sf-kicker {
    margin-bottom: 24px;
  }

  #snilld-frontier.sf .sf-method .sf-wrap > .sf-h2,
  #snilld-frontier.sf .sf-products .sf-wrap > .sf-h2,
  #snilld-frontier.sf .sf-courses .sf-h2 {
    margin-bottom: 64px;
  }

  #snilld-frontier.sf .sf-people .sf-h2,
  #snilld-frontier.sf .sf-offer .sf-h2,
  #snilld-frontier.sf .sf-book .sf-h2 {
    margin-bottom: 40px;
  }

  #snilld-frontier.sf .sf-steps,
  #snilld-frontier.sf .sf-product-list {
    gap: 32px;
  }

  #snilld-frontier.sf .sf-client-list {
    gap: 20px;
  }

  #snilld-frontier.sf .sf-saving {
    margin-top: 136px;
    padding-top: 104px;
  }

  #snilld-frontier.sf .sf-calc {
    margin-top: 104px;
    padding: 40px 44px 38px;
  }

  #snilld-frontier.sf .sft {
    margin-top: 168px;
  }
}

/* ---------- kundevæggen: et roligt net med tynde linjer ---------- */
/* Før: 41 logoer i løse hvide fliser under en lille etiket. Nu: en overskrift, ét net, ens felter, og navnet under
   logoet, når man peger på det. Sidste felt fører op til firmanavn-feltet. */

#snilld-frontier.sf .sf-clients {
  padding-top: 96px;
  background: #fff;
}

#snilld-frontier.sf .sf-clients .sf-h2 {
  margin-bottom: 40px;
}

#snilld-frontier.sf .sf-client-list.sfx-wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #e7e2f3;
  border-radius: 22px;
  background: #e7e2f3;
}

#snilld-frontier.sf .sfx-wall li {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1.45;
  padding: 10px 12px;
  border-radius: 0;
  background: #fff;
  overflow: hidden;
  transition: background-color 220ms;
}

/* højden styres af de regler, der i forvejen holder hvert logo på niveau med de andre (home-frontier.css) */
#snilld-frontier.sf .sfx-wall img {
  max-width: min(129px, 84%);
  opacity: 0.72;
  transition: filter 260ms, opacity 260ms, transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

#snilld-frontier.sf .sfx-wall-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11px;
  padding: 0 10px;
  overflow: hidden;
  font-family: "DM Mono", SFMono-Regular, Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #6b3eb8;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 220ms, transform 260ms;
  pointer-events: none;
}

/* de første logoer er tegnet på et lærred med luft omkring; de forstørres, så de står på niveau med resten */
#snilld-frontier.sf .sfx-wall img[src*="Kunde_"] {
  transform: scale(1.24);
}

#snilld-frontier.sf .sfx-wall-name .sf-client-name {
  font-size: 15px;
  color: #241439;
}

@media (hover: hover) {
  #snilld-frontier.sf .sfx-wall li:hover {
    background: #f6f3ff;
  }

  #snilld-frontier.sf .sfx-wall li:hover img {
    filter: none;
    opacity: 1;
    transform: translateY(-7px);
  }

  #snilld-frontier.sf .sfx-wall li:hover img[src*="Kunde_"] {
    transform: translateY(-7px) scale(1.24);
  }

  #snilld-frontier.sf .sfx-wall li:hover .sfx-wall-cap {
    opacity: 1;
    transform: none;
  }
}

@media (hover: none) {
  #snilld-frontier.sf .sfx-wall-cap {
    display: none;
  }
}

/* det sidste felt: jeres firma */
#snilld-frontier.sf .sfx-wall li.sfx-wall-you {
  grid-column: span var(--s3, 1);
  padding: 0;
  background: #241439;
}

#snilld-frontier.sf .sfx-wall-you a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 100%;
  padding: 10px;
  color: #fff;
  text-align: center;
  transition: background-color 220ms;
}

#snilld-frontier.sf .sfx-wall-you a:hover,
#snilld-frontier.sf .sfx-wall-you a:focus-visible {
  background: #6b3eb8;
}

#snilld-frontier.sf .sfx-wall-you .sf-star {
  width: 18px;
  height: 18px;
  color: #12c493;
}

#snilld-frontier.sf .sfx-wall-you b {
  font-size: 15px;
  line-height: 1.2;
}

#snilld-frontier.sf .sfx-wall-you span {
  display: none;
  max-width: 13em;
  font-size: 12.5px;
  line-height: 1.3;
  color: #cdc2f8;
}

@media (min-width: 700px) {
  #snilld-frontier.sf .sf-client-list.sfx-wall {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #snilld-frontier.sf .sfx-wall li {
    aspect-ratio: 1.75;
    padding: 14px 20px;
  }

  #snilld-frontier.sf .sfx-wall img {
    max-width: min(129px, 72%);
  }

  #snilld-frontier.sf .sfx-wall li.sfx-wall-you {
    grid-column: span var(--s4, 1);
  }

  #snilld-frontier.sf .sfx-wall-you b {
    font-size: 17px;
  }

  #snilld-frontier.sf .sfx-wall-you span {
    display: block;
  }
}

@media (min-width: 1000px) {
  #snilld-frontier.sf .sf-clients {
    padding-top: 152px;
  }

  #snilld-frontier.sf .sf-clients .sf-h2 {
    margin-bottom: 64px;
  }

  #snilld-frontier.sf .sf-client-list.sfx-wall {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  #snilld-frontier.sf .sfx-wall li {
    aspect-ratio: 1.85;
  }

  #snilld-frontier.sf .sfx-wall li.sfx-wall-you {
    grid-column: span var(--s6, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #snilld-frontier.sf .sfx-wall img,
  #snilld-frontier.sf .sfx-wall-cap {
    transition: none;
  }
}

/* ---------- mens modellen starter ---------- */
/* Før lå et stort billede af kontoret hen over toppen, til modellen var klar. Nu står der "Starter" dér, hvor modellen
   kommer. Billedet bruges kun, når browseren slet ikke kan tegne modellen, og holder sig så til modellens egen plads. */

#snilld-frontier .sf-poster {
  opacity: 0;
}

#snilld-frontier.sf-no3d .sf-poster {
  opacity: 1;
}

#snilld-frontier .sf-starting {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  font-family: "DM Mono", SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #cdc2f8;
  transition: opacity 400ms;
  pointer-events: none;
}

#snilld-frontier .sf-starting i {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: sf-starting 1.2s ease-in-out infinite;
}

#snilld-frontier .sf-starting i:nth-child(2) { animation-delay: 0.18s; }
#snilld-frontier .sf-starting i:nth-child(3) { animation-delay: 0.36s; }

@keyframes sf-starting {
  0%, 70%, 100% { opacity: 0.25; transform: none; }
  35% { opacity: 1; transform: translateY(-3px); }
}

#snilld-frontier.sf-3d-shown .sf-starting,
#snilld-frontier.sf-no3d .sf-starting {
  opacity: 0;
}

@media (min-width: 1000px) {
  /* modellen står i højre side under feltet til firmanavnet */
  #snilld-frontier .sf-starting {
    left: 72%;
    top: min(64%, 600px);
  }

  #snilld-frontier.sf-no3d .sf-poster {
    top: 44%;
    right: 3%;
    left: auto;
    width: 50%;
    height: 50%;
    object-position: 50% 50%;
  }
}

/* ---------- lydknappen, når lyden lige er gået i gang ---------- */
/* Lyden er til som standard. De første sekunder står der, at den er til, og hvordan man slår den fra. */
#snilld-frontier .sfs-toggle.is-hint {
  gap: 8px;
  width: auto;
  padding: 0 16px 0 12px;
  opacity: 1;
}

#snilld-frontier .sfs-toggle.is-hint span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
}