/* Snilld forside 2026 – AI-værten: indgangen i forsidens top, samtalen og den personlige side. */
/* Almindelig CSS (ikke Stylus), afgrænset til #snilld-frontier. Farver som i home-frontier.styl. */

#snilld-frontier {
  --sfh-ink: #0e0a14;
  --sfh-inksoft: #241439;
  --sfh-violet: #6b3eb8;
  --sfh-signal: #2f6bff;
  --sfh-green: #0f9d76;
  --sfh-bone: #f8f8fb;
  --sfh-mono: "DM Mono", SFMono-Regular, Consolas, monospace;
}

/* ---------- indgangen ---------- */
/* Feltet hører til forsidens mørke top: samme tynde linje foroven som tal-rækken over det, ingen hvid kasse. */

#snilld-frontier .sfh-entry {
  margin: 0 0 24px;
  padding: 18px 0 0;
  max-width: 560px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

#snilld-frontier .sfh-entry-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}

#snilld-frontier .sfh-entry-title label {
  margin: 0;
  font: inherit;
  color: inherit;
}

#snilld-frontier .sfh-badge {
  display: inline-block;
  padding: 3px 8px 2px;
  border-radius: 999px;
  background: var(--sfh-signal);
  color: #fff;
  font-family: var(--sfh-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ét samlet felt: teksten til venstre, knappen ligger inde i feltet til højre */
#snilld-frontier .sfh-entry-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(205, 194, 248, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  transition: border-color 180ms, background-color 180ms, box-shadow 180ms;
}

#snilld-frontier .sfh-entry-row:hover {
  border-color: rgba(255, 255, 255, 0.8);
}

#snilld-frontier .sfh-entry-row:focus-within {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.55);
}

#snilld-frontier .sfh-entry-row input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  margin: 0;
  padding: 0 12px 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 17px;
  box-shadow: none;
}

#snilld-frontier .sfh-entry-row input::placeholder {
  color: rgba(255, 255, 255, 0.62);
  opacity: 1;
}

#snilld-frontier .sfh-entry-row input:focus,
#snilld-frontier .sfh-entry-row input:focus-visible {
  outline: none;
}

#snilld-frontier .sfh-form textarea:focus-visible {
  outline: 3px solid rgba(47, 107, 255, 0.55);
  outline-offset: 2px;
  border-color: var(--sfh-violet);
}

#snilld-frontier .sfh-entry-row .sf-btn {
  flex: none;
  min-height: 46px;
  padding: 10px 22px;
  white-space: nowrap;
}

#snilld-frontier .sfh-entry-row .sf-btn:hover {
  background: #fff;
  color: var(--sfh-inksoft);
  transform: none;
}

#snilld-frontier .sfh-entry-note {
  margin: 10px 2px 0;
  max-width: 34em;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 520px) {
  #snilld-frontier .sfh-entry-row {
    border-radius: 24px;
    padding: 6px;
  }

  #snilld-frontier .sfh-entry-row input {
    width: 100%;
    text-align: center;
    padding: 0 12px;
  }

  #snilld-frontier .sfh-entry-row .sf-btn {
    width: 100%;
  }
}

/* ---------- værtstilstand: forsidens egne visninger viger ---------- */

#snilld-frontier .sf-stage[data-host="1"] .sf-view,
#snilld-frontier .sf-stage[data-host="1"] .sf-progress,
#snilld-frontier .sf-stage[data-host="1"] .sf-spot {
  display: none !important;
}

#snilld-frontier .sfh {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 560px;
  animation: sfh-rise 420ms ease both;
}

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

#snilld-frontier .sfh-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#snilld-frontier .sfh-head .sf-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

#snilld-frontier .sfh-head .sf-link {
  padding: 6px 4px;
  font-size: 14.5px;
}

#snilld-frontier .sfh-firm {
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  background: var(--sfh-ink);
  color: #fff;
  border-radius: 14px;
}

#snilld-frontier .sfh-firm b {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

#snilld-frontier .sfh-firm span {
  font-size: 14.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.86);
}

#snilld-frontier .sfh-firm small {
  font-family: var(--sfh-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

#snilld-frontier .sfh-pick-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--sfh-inksoft);
}

#snilld-frontier .sfh-pick ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#snilld-frontier .sfh-pick li {
  margin: 0;
  padding: 0;
}

#snilld-frontier .sfh-pick-btn {
  display: grid;
  gap: 1px;
  width: 100%;
  min-height: 52px;
  padding: 9px 16px 10px;
  background: #fff;
  border: 1px solid rgba(107, 62, 184, 0.3);
  border-radius: 12px;
  color: var(--sfh-inksoft);
  text-align: left;
  transition: border-color 160ms, transform 160ms, background-color 160ms;
}

#snilld-frontier .sfh-pick-btn:hover {
  background: #f1effc;
  border-color: var(--sfh-violet);
  transform: translateX(3px);
}

#snilld-frontier .sfh-pick-btn b {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

#snilld-frontier .sfh-pick-btn span {
  font-size: 13.5px;
  line-height: 1.3;
  color: rgba(14, 10, 20, 0.7);
}

#snilld-frontier .sfh-pick-free {
  background: transparent;
  border-style: dashed;
}

/* ---------- samtalen ---------- */

#snilld-frontier .sfh-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(40vh, 340px);
  margin: 0;
  padding: 2px 4px 2px 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

#snilld-frontier .sfh-log:empty {
  display: none;
}

#snilld-frontier .sfh-msg {
  max-width: 88%;
  margin: 0;
  padding: 10px 15px 11px;
  border-radius: 16px 16px 16px 4px;
  background: #fff;
  border: 1px solid rgba(36, 20, 57, 0.14);
  color: var(--sfh-ink);
  font-size: 16.5px;
  line-height: 1.42;
  animation: sfh-rise 300ms ease both;
}

#snilld-frontier .sfh-msg p {
  margin: 0;
  white-space: pre-line;
}

#snilld-frontier .sfh-msg-you {
  align-self: flex-end;
  border-radius: 16px 16px 4px 16px;
  background: var(--sfh-violet);
  border-color: var(--sfh-violet);
  color: #fff;
}

#snilld-frontier .sfh-wait {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  align-self: flex-start;
  min-height: 42px;
}

#snilld-frontier .sfh-wait span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sfh-violet);
  animation: sfh-dot 1.1s ease-in-out infinite;
}

#snilld-frontier .sfh-wait span:nth-child(2) { animation-delay: 0.15s; }
#snilld-frontier .sfh-wait span:nth-child(3) { animation-delay: 0.3s; }

@keyframes sfh-dot {
  0%, 60%, 100% { opacity: 0.25; transform: none; }
  30% { opacity: 1; transform: translateY(-4px); }
}

#snilld-frontier .sfh-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#snilld-frontier .sfh-marks li {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
  padding: 4px 11px 5px;
  border-radius: 999px;
  background: rgba(47, 107, 255, 0.1);
  border: 1px solid rgba(47, 107, 255, 0.45);
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--sfh-inksoft);
  transition: background-color 400ms, border-color 400ms;
}

#snilld-frontier .sfh-marks li b {
  font-family: var(--sfh-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #1f4fd0;
}

#snilld-frontier .sfh-marks li.is-solved {
  background: rgba(15, 157, 118, 0.1);
  border-color: rgba(15, 157, 118, 0.55);
}

#snilld-frontier .sfh-marks li.is-solved b {
  color: #0a7256;
}

#snilld-frontier .sfh-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#snilld-frontier .sfh-chip {
  font-weight: 500;
}

#snilld-frontier .sfh-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 6px 6px 6px 16px;
  background: #fff;
  border: 1px solid rgba(36, 20, 57, 0.35);
  border-radius: 26px;
}

#snilld-frontier .sfh-form textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  max-height: 120px;
  margin: 0;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--sfh-ink);
  font: inherit;
  font-size: 17px;
  line-height: 1.4;
  resize: none;
  box-shadow: none;
}

#snilld-frontier .sfh-form textarea:focus-visible {
  outline: none;
}

#snilld-frontier .sfh-form:focus-within {
  border-color: var(--sfh-violet);
  box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.3);
}

#snilld-frontier .sfh-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #eeedf5;
  color: var(--sfh-inksoft);
  transition: background-color 160ms, color 160ms, transform 160ms;
}

#snilld-frontier .sfh-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#snilld-frontier .sfh-icon:hover {
  background: var(--sfh-inksoft);
  color: #fff;
}

#snilld-frontier .sfh-icon[aria-pressed="true"] {
  background: var(--sfh-signal);
  color: #fff;
}

#snilld-frontier .sfh.is-listening .sfh-mic {
  animation: sfh-pulse 1.2s ease-in-out infinite;
}

@keyframes sfh-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 107, 255, 0.5); }
  50% { box-shadow: 0 0 0 9px rgba(47, 107, 255, 0); }
}

#snilld-frontier .sfh-send {
  background: var(--sfh-violet);
  color: #fff;
}

#snilld-frontier .sfh-send[disabled] {
  opacity: 0.45;
  cursor: default;
}

#snilld-frontier .sfh-status {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--sfh-inksoft);
}

#snilld-frontier .sfh-legal {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(14, 10, 20, 0.66);
}

#snilld-frontier .sfh.is-done .sfh-legal {
  display: none;
}

#snilld-frontier .sfh-pin {
  background: var(--sfh-signal);
  max-width: 180px;
}

#snilld-frontier .sfh-pin.is-solved {
  background: #fff;
  color: #0a7256;
}

/* Forsidens top er mørk: værtens egne tekster står lyst, kortene står hvidt. */
#snilld-frontier .sfh {
  pointer-events: auto;
  color: #fff;
}

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

#snilld-frontier .sfh-head .sf-link,
#snilld-frontier .sfh-pick-title,
#snilld-frontier .sfh-status {
  color: #fff;
}

#snilld-frontier .sfh-head .sf-link:hover {
  color: #cdc2f8;
}

#snilld-frontier .sfh-firm {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(205, 194, 248, 0.35);
}

#snilld-frontier .sfh-legal {
  color: rgba(255, 255, 255, 0.68);
}

#snilld-frontier .sfh-marks li {
  background: rgba(47, 107, 255, 0.22);
  border-color: rgba(120, 160, 255, 0.7);
  color: #fff;
}

#snilld-frontier .sfh-marks li b {
  color: #b9cdff;
}

#snilld-frontier .sfh-marks li.is-solved {
  background: rgba(18, 196, 147, 0.2);
  border-color: rgba(18, 196, 147, 0.75);
}

#snilld-frontier .sfh-marks li.is-solved b {
  color: #7fe8c8;
}

#snilld-frontier .sfh-pick-free {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(205, 194, 248, 0.5);
  color: #fff;
}

#snilld-frontier .sfh-pick-free span {
  color: rgba(255, 255, 255, 0.72);
}

#snilld-frontier .sfh-pick-free:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* ---------- jeres side ---------- */

#snilld-frontier .sfh-take {
  padding: clamp(48px, 7vw, 96px) 0;
  background: var(--sfh-ink);
  color: #fff;
}

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

#snilld-frontier .sfh-take .sf-h2 {
  color: #fff;
  margin-bottom: 28px;
}

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

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

#snilld-frontier .sfh-take-grid {
  display: grid;
  gap: 28px;
}

#snilld-frontier .sfh-advice {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#snilld-frontier .sfh-adv {
  margin: 0;
  min-height: 250px;
}

#snilld-frontier .sfh-adv .sfx-flip {
  min-height: inherit;
  border-radius: 18px;
}

#snilld-frontier .sfh-adv .sfx-face {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
}

#snilld-frontier .sfh-adv .sfx-front {
  background: #fff;
  color: var(--sfh-ink);
}

#snilld-frontier .sfh-adv .sfx-back {
  background: #efeaff;
  color: var(--sfh-ink);
}

#snilld-frontier .sfh-adv-n {
  margin: 0 0 14px;
  font-family: var(--sfh-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sfh-violet);
}

#snilld-frontier .sfh-adv h3 {
  margin: 0;
  font-size: clamp(21px, 2vw, 26px) !important;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--sfh-inksoft);
}

#snilld-frontier .sfh-adv-step {
  margin: auto 0 0;
  padding-top: 18px;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(14, 10, 20, 0.72);
}

#snilld-frontier .sfh-adv-text {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.45;
}

#snilld-frontier .sfh-adv-room {
  margin: auto 0 0;
  padding-top: 14px;
  font-family: var(--sfh-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0a7256;
}

/* avisforsiden: tydeligt mærket som et fremtidsbillede, ikke en nyhed */
#snilld-frontier .sfh-np {
  position: relative;
  padding: 22px 24px 24px;
  background: #f6f1e4;
  color: #1a1410;
  border-radius: 4px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 2px 0 #d9d0bb, 0 4px 0 #cfc5ae;
  transform: perspective(1400px) rotateX(3deg) rotateY(-5deg) rotateZ(0.6deg);
  transform-origin: 30% 50%;
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
}

#snilld-frontier .sfh-np:hover {
  transform: perspective(1400px) rotateX(0) rotateY(0) rotateZ(0);
}

#snilld-frontier .sfh-np-mast {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 3px double #1a1410;
}

#snilld-frontier .sfh-np-mast b {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}

#snilld-frontier .sfh-np-mast span {
  font-family: var(--sfh-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
}

#snilld-frontier .sfh-np-flag {
  display: inline-block;
  margin: 12px 0 0;
  padding: 3px 9px 2px;
  background: #1a1410;
  color: #f6f1e4;
  font-family: var(--sfh-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#snilld-frontier .sfh-np h3 {
  margin: 10px 0 10px;
  font-family: inherit;
  font-size: clamp(30px, 3.6vw, 48px) !important;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: #1a1410;
  text-wrap: balance;
}

#snilld-frontier .sfh-np-lede {
  margin: 0 0 14px;
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.3;
}

#snilld-frontier .sfh-np-cols {
  display: grid;
  gap: 8px 20px;
  padding-top: 12px;
  border-top: 1px solid rgba(26, 20, 16, 0.5);
  font-size: 17px;
  line-height: 1.3;
}

#snilld-frontier .sfh-np-cols p {
  margin: 0;
}

#snilld-frontier .sfh-np-cols p:before {
  content: "Nyt: ";
  font-family: var(--sfh-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0a7256;
}

#snilld-frontier .sfh-books {
  margin-top: 34px;
}

#snilld-frontier .sfh-books h3 {
  margin: 0 0 14px;
  font-size: 20px !important;
  font-weight: 600;
  color: #fff;
}

#snilld-frontier .sfh-books ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#snilld-frontier .sfh-books li {
  margin: 0;
}

#snilld-frontier .sfh-book {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 12px 18px 12px 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(205, 194, 248, 0.35);
  border-radius: 14px;
  color: #fff;
  text-align: left;
  transition: background-color 180ms, transform 180ms, border-color 180ms;
}

#snilld-frontier .sfh-book:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #cdc2f8;
  transform: translateY(-2px);
}

#snilld-frontier .sfh-book img {
  flex: none;
  width: 60px;
  height: 80px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 4px 6px 14px rgba(0, 0, 0, 0.5);
  transform: perspective(300px) rotateY(-14deg);
  transition: transform 300ms;
}

#snilld-frontier .sfh-book:hover img {
  transform: perspective(300px) rotateY(0) translateY(-3px);
}

#snilld-frontier .sfh-book span {
  display: grid;
  gap: 3px;
}

#snilld-frontier .sfh-book b {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}

#snilld-frontier .sfh-book small {
  font-size: 13.5px;
  color: #cdc2f8;
}

#snilld-frontier .sfh-take-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin-top: 34px;
}

#snilld-frontier .sfh-take .sf-link {
  color: #fff;
  text-decoration-color: rgba(205, 194, 248, 0.7);
}

#snilld-frontier .sfh-take .sf-link:hover {
  color: #cdc2f8;
}

#snilld-frontier .sfh-take-note {
  margin: 22px 0 0;
  max-width: 46em;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.74);
}

@media (min-width: 700px) {
  #snilld-frontier .sfh-advice {
    grid-template-columns: repeat(3, 1fr);
  }

  #snilld-frontier .sfh-books ul {
    grid-template-columns: repeat(2, 1fr);
  }

  #snilld-frontier .sfh-np-cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1100px) {
  #snilld-frontier .sfh-take-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    gap: 44px;
  }

  #snilld-frontier .sfh-advice {
    grid-template-columns: 1fr;
  }

  #snilld-frontier .sfh-adv {
    min-height: 190px;
  }
}

@media (max-width: 520px) {
  #snilld-frontier .sfh-entry-row {
    flex-direction: column;
  }

  #snilld-frontier .sfh-entry-row .sf-btn {
    justify-content: center;
  }

  #snilld-frontier .sfh-log {
    max-height: 46vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  #snilld-frontier .sfh,
  #snilld-frontier .sfh-msg {
    animation: none;
  }

  #snilld-frontier .sfh-np {
    transform: none;
    transition: none;
  }
}

/* Udskrift: kun "Jeres side". */
@media print {
  html.sfh-printing body * {
    visibility: hidden !important;
  }

  html.sfh-printing #snilld-frontier .sfh-take,
  html.sfh-printing #snilld-frontier .sfh-take * {
    visibility: visible !important;
  }

  html.sfh-printing #snilld-frontier .sfh-take {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 24px;
    background: #fff !important;
    color: #000 !important;
  }

  html.sfh-printing #snilld-frontier .sfh-take .sf-h2,
  html.sfh-printing #snilld-frontier .sfh-take .sf-h2 span,
  html.sfh-printing #snilld-frontier .sfh-take .sf-kicker,
  html.sfh-printing #snilld-frontier .sfh-take .sfh-take-note,
  html.sfh-printing #snilld-frontier .sfh-books h3,
  html.sfh-printing #snilld-frontier .sfh-book,
  html.sfh-printing #snilld-frontier .sfh-book small {
    color: #000 !important;
  }

  html.sfh-printing #snilld-frontier .sfh-take-cta {
    display: none;
  }

  html.sfh-printing #snilld-frontier .sfx-flip-card {
    transform: none !important;
  }

  html.sfh-printing #snilld-frontier .sfx-face {
    position: static !important;
    transform: none !important;
    backface-visibility: visible !important;
    border: 1px solid #999;
  }

  html.sfh-printing #snilld-frontier .sfh-np {
    transform: none;
    box-shadow: none;
    border: 1px solid #999;
  }
}

/* ---------- interviewet: hvad værten vil vide, før den kommer med et bud ---------- */

#snilld-frontier .sfh-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#snilld-frontier .sfh-progress li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 10px 4px;
  border: 1px solid rgba(205, 194, 248, 0.32);
  border-radius: 999px;
  font-family: var(--sfh-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
  transition: color 400ms, border-color 400ms, background-color 400ms;
}

#snilld-frontier .sfh-progress li:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
}

#snilld-frontier .sfh-progress li.is-done {
  color: #7fe8c8;
  border-color: rgba(18, 196, 147, 0.7);
  background: rgba(18, 196, 147, 0.14);
}

#snilld-frontier .sfh-progress li.is-done:before {
  background: currentColor;
}

/* ---------- jeres side: det, vi har hørt, og det, vi ikke ved ---------- */

#snilld-frontier .sfh-heard {
  display: grid;
  gap: 16px;
  margin: 0 0 30px;
}

#snilld-frontier .sfh-heard > div {
  padding: 20px 22px 22px;
  border: 1px solid rgba(205, 194, 248, 0.3);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
}

#snilld-frontier .sfh-heard > div:last-child {
  border-style: dashed;
  background: none;
}

#snilld-frontier .sfh-heard h3 {
  margin: 0 0 10px;
  font-family: var(--sfh-mono);
  font-size: 12px !important;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cdc2f8;
}

#snilld-frontier .sfh-heard ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#snilld-frontier .sfh-heard li {
  position: relative;
  margin: 0;
  padding-left: 20px;
  font-size: 16.5px;
  line-height: 1.4;
  color: #fff;
}

#snilld-frontier .sfh-heard li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #12c493;
}

#snilld-frontier .sfh-heard > div:last-child li:before {
  background: none;
  border: 1.5px solid #cdc2f8;
}

#snilld-frontier .sfh-heard p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.74);
}

#snilld-frontier .sfh-adv-today {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.42;
  color: rgba(14, 10, 20, 0.82);
}

#snilld-frontier .sfh-adv-label {
  margin: 0 0 4px;
  font-family: var(--sfh-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sfh-violet);
}

#snilld-frontier .sfh-adv-label-need {
  margin-top: 14px;
}

#snilld-frontier .sfh-adv-need {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.42;
}

#snilld-frontier .sfh-adv {
  min-height: 300px;
}

@media (min-width: 800px) {
  #snilld-frontier .sfh-heard {
    grid-template-columns: 1.2fr 1fr;
  }
}

@media (min-width: 1100px) {
  #snilld-frontier .sfh-adv {
    min-height: 270px;
  }
}

/* ---------- indgangen er toppens hovedhandling: lige under overskriften, større, og med det, man får, skrevet ud ---------- */

#snilld-frontier .sf-view-intro .sfh-entry {
  margin: 26px 0 30px;
  padding: 0;
  border-top: 0;
}

#snilld-frontier .sf-view-intro .sfh-entry-title {
  margin-bottom: 14px;
  font-size: clamp(18px, 1.45vw, 21px);
}

#snilld-frontier .sf-view-intro .sfh-entry-row {
  padding: 6px;
  border-color: rgba(205, 194, 248, 0.85);
  background: rgba(255, 255, 255, 0.1);
  animation: sfh-invite 3.4s ease-in-out 1.4s 3;
}

/* feltet ånder tre gange, når siden er kommet på plads, så øjet finder det */
@keyframes sfh-invite {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 82, 214, 0); }
  50% { box-shadow: 0 0 0 7px rgba(124, 82, 214, 0.38); }
}

#snilld-frontier .sf-view-intro .sfh-entry-row input {
  height: 52px;
  font-size: 18px;
}

#snilld-frontier .sf-view-intro .sfh-entry-row .sf-btn {
  min-height: 52px;
  font-size: 17px;
}

#snilld-frontier .sfh-entry-live {
  display: none;
  margin: 10px 2px 0;
  font-family: var(--sfh-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7fe6c8;
}

/* under feltet står én rolig linje om, hvad det kræver, og hvad man får */
#snilld-frontier .sfh-entry-sum {
  margin: 18px 2px 0;
  font-size: 16px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

#snilld-frontier .sf-view-intro .sfh-entry-note {
  margin-top: 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
}

/* på computer står modellen ved siden af feltet: sig, at skiltet skriver med */
@media (min-width: 1000px) {
  #snilld-frontier .sfh-entry.is-live .sfh-entry-live {
    display: block;
  }
}

/* de to knapper i toppen: firma-feltet er hovedvejen, snakken er den stille knap ved siden af */
#snilld-frontier .sf-view-intro.sf-has-host .sf-meetus-cta .sf-btn-primary {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(205, 194, 248, 0.75);
  color: #fff;
}

#snilld-frontier .sf-view-intro.sf-has-host .sf-meetus-cta .sf-btn-primary:hover {
  background: #fff;
  box-shadow: none;
  color: #241439;
}

@media (prefers-reduced-motion: reduce) {
  #snilld-frontier .sf-view-intro .sfh-entry-row {
    animation: none;
  }
}

/* ---------- luft i toppen: feltet til firmanavnet står for sig selv i højre side, oven over modellen ---------- */
/* Venstre spalte bar overskrift, felt, nøgletal, portrætter og knapper på én gang. Nu har den kun overskriften,
   de tre nøgletal og de to mennesker, med rigtig afstand imellem. Feltet hører til modellen og står ved den. */

@media (min-width: 1000px) {
  #snilld-frontier .sf-view-intro .sfh-entry {
    --sfh-ew: min(470px, 36vw);
    position: absolute;
    top: 204px;
    left: calc(min(1240px, 100vw) - 80px - var(--sfh-ew));
    width: var(--sfh-ew);
    max-width: none;
    margin: 0;
  }

  #snilld-frontier .sf-view-intro .sfh-entry-title {
    margin-bottom: 18px;
    font-size: clamp(19px, 1.5vw, 22px);
    line-height: 1.3;
  }
}

/* Mens man skriver, går kameraet tæt på skiltet, og modellen fylder også bag feltet. Så får feltet en mørk flade bag sig,
   og modellens tre mærkater træder tilbage, så teksten altid kan læses. */
@media (min-width: 1000px) {
  #snilld-frontier .sf-view-intro .sfh-entry {
    z-index: 1;
  }

  #snilld-frontier .sf-view-intro .sfh-entry:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -24px -28px -22px;
    border-radius: 26px;
    background: rgba(14, 10, 20, 0.92);
    box-shadow: 0 0 0 1px rgba(205, 194, 248, 0.2), 0 26px 60px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 320ms;
    pointer-events: none;
  }

  #snilld-frontier .sf-view-intro .sfh-entry.is-live:before {
    opacity: 1;
  }

  #snilld-frontier .sf-stage:has(.sfh-entry.is-live) .sf-spot {
    opacity: 0;
    pointer-events: none;
  }
}

/* på en smal computerskærm er feltet smallere: mindre skrift og knap, så hele hjælpeteksten i feltet kan læses */
@media (min-width: 1000px) and (max-width: 1199px) {
  #snilld-frontier .sf-view-intro .sfh-entry {
    --sfh-ew: min(470px, 41vw);
  }

  #snilld-frontier .sf-view-intro .sfh-entry-row input {
    padding-left: 14px;
    font-size: 16px;
  }

  #snilld-frontier .sf-view-intro .sfh-entry-row .sf-btn {
    padding: 10px 16px;
    font-size: 16px;
  }
}

@media (min-width: 1000px) and (min-height: 781px) {
  #snilld-frontier .sf-view-intro.sf-has-host .sf-kicker {
    margin-bottom: 22px;
  }

  #snilld-frontier .sf-view-intro.sf-has-host .sf-question {
    margin-bottom: 22px;
  }

  #snilld-frontier .sf-view-intro.sf-has-host .sf-h1 {
    margin-bottom: 64px;
  }

  #snilld-frontier .sf-view-intro.sf-has-host .sf-facts {
    margin-bottom: 56px;
  }

  #snilld-frontier .sf-view-intro.sf-has-host .sf-meetus {
    margin-bottom: 56px;
  }
}

/* ---------- to knapper i toppen, ikke elleve ---------- */
/* Talt 12. nov. 2026: i det første skærmbillede kunne man trykke på elleve ting. Nu er der to knapper:
   "Vis vores firma" og "Book en gratis snak". Eksempel-forløbet med de tre steder (mærkaterne i modellen og de tre
   valg under portrætterne) er taget ud af toppen, så længe AI-værten er slået til. Slås værten fra, er de der igen. */

#snilld-frontier .sf-view-intro.sf-has-host .sf-try {
  display: none;
}

#snilld-frontier .sf-stage:has(.sf-view-intro.sf-has-host) .sf-spot {
  display: none !important;
}

/* pilene til at dreje modellen: en stille linje i stedet for to runde knapper */
#snilld-frontier .sf-stage:has(.sf-view-intro.sf-has-host) .sf-turn {
  gap: 2px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

#snilld-frontier .sf-stage:has(.sf-view-intro.sf-has-host) .sf-turn button {
  width: 30px;
  height: 30px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 15px;
}

#snilld-frontier .sf-stage:has(.sf-view-intro.sf-has-host) .sf-turn button:hover {
  background: none;
  color: #fff;
}

/* lydknappen: kun ikonet, og mindre. Teksten kan stadig læses af en skærmlæser. */
#snilld-frontier .sfs-toggle {
  justify-content: center;
  gap: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  opacity: 0.72;
}

#snilld-frontier .sfs-toggle:hover,
#snilld-frontier .sfs-toggle:focus-visible,
#snilld-frontier .sfs-toggle[aria-pressed="true"] {
  opacity: 1;
}

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

/* sidens chat-boble (Snilld Chatbot) venter, til man er rullet forbi toppen; host.js sætter klassen på <html> */
.snilldcb-host {
  transition: opacity 300ms, visibility 300ms;
}

html.sfh-top .snilldcb-host {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Udvidelsen B2B Company Insights spørger i en boks nederst til højre: "Hvilket firma arbejder du for?".
   På den nye forside spørger feltet "Skriv jeres firmanavn" om det samme, og svaret går videre til udvidelsen
   (host.js), så boksen vises ikke her. På resten af sitet er den, som den var. */
body.snilld-frontier-home #b2b-company-ask-modal {
  display: none !important;
}