/* Roligere udtryk for de offentlige sider. Indlæses efter style.css. */
:root {
  --color-bg-soft: #f5f6f8;
  --color-gray: #536078;
  --color-border: rgba(27, 43, 70, 0.1);
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
  letter-spacing: -0.025em;
}

.btn-primary {
  background: #172748;
}

.btn-primary:hover {
  background: #223657;
  box-shadow: 0 5px 15px rgba(23, 39, 72, 0.15);
}

.btn-primary::before,
.btn-white::before,
.btn-login::after {
  display: none;
}

.btn-secondary {
  border: 1px solid #cbd2dd;
  background: rgba(255, 255, 255, 0.5);
}

/* Navigation med plads til både logo, login og demo. */
.nav {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(27, 43, 70, 0.06);
}

.nav-inner {
  gap: 20px;
}

.nav-logo {
  flex-shrink: 0;
}

.nav-logo-img {
  width: 144px;
  height: auto;
  min-width: 110px;
}

.nav-links {
  gap: 0;
}

.nav-links a {
  padding-inline: 9px;
}

.nav-actions {
  flex-shrink: 0;
}

/* Rolig sektionsflade; logoernes oprindelige rul defineres i style.css. */
.social-proof {
  width: 100%;
  margin-left: 0;
  padding: 32px 0 52px;
  background: #f8f9fb;
}

.social-proof::before,
.social-proof::after {
  display: none;
}

.stats-highlight-grid {
  padding-top: 16px;
  padding-bottom: 32px;
}

.stats-highlight-number {
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 600;
}

.social-proof-divider span {
  color: #596780;
  font-weight: 500;
  letter-spacing: 0.045em;
}

/* Vent fra første tegning; script.js starter det oprindelige rul ved synlighed. */
.tb-marquee-track { animation-play-state: paused; }

/* Farvecirklerne bærer fortsat bevægelsen og identiteten. */
.section-header {
  margin-bottom: 44px;
}

.section-header h2,
.benefits-header h2,
.testimonials .section-header h2 {
  font-weight: 600;
  line-height: 1.2;
}

.section-header p {
  max-width: 640px;
}

.section-tag,
.benefits-eyebrow {
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  color: #536781;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  backdrop-filter: none;
}

.circle-name {
  font-weight: 600;
}

.circle-description {
  display: block;
  max-width: 300px;
  min-height: 3.3em;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-gray);
  text-align: center;
}

.product-circle-item .circle-cta {
  margin-top: auto;
}

.hr-ring,
.hr-elem,
.mus-bubble-l,
.mus-bubble-r,
.mus-bar,
.mus-person-l,
.mus-person-r,
.team-huddle,
.team-head.team-fig-1,
.team-head.team-fig-2,
.team-head.team-fig-3,
.team-head.team-fig-4,
.team-body.team-fig-1,
.team-body.team-fig-2,
.team-body.team-fig-3,
.team-body.team-fig-4,
.apv-quad,
.apv-check,
.step-number-circle {
  animation: none;
}

.apv-check {
  stroke-dashoffset: 0;
  opacity: 1;
}

.step-card.step-waiting,
.step-card.step-spotlight,
.step-card.step-done,
.step-card.step-done:hover,
.step-card.step-spotlight:hover {
  opacity: 1;
  transform: none;
  filter: none;
  box-shadow: none;
  border-color: var(--color-border);
}

.step-number-circle {
  background: #e9edf3;
  color: #233b60;
  box-shadow: none;
}

/* Lyse og stabile fordelskort uden zoom eller sløring af nabokort. */
.benefits-section {
  padding: 88px 0;
  background: #f3f5f8;
}

.benefits-section::before,
.benefits-section::after,
.benefit-card::before {
  display: none;
}

.benefits-header {
  margin-bottom: 44px;
}

.benefits-header h2 {
  color: var(--color-dark);
}

.benefits-lead {
  color: var(--color-gray);
  max-width: 620px;
}

.benefits-grid {
  gap: 20px;
}

.benefits-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.section-link {
  margin: 32px auto 0;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: #294767;
}

.section-link a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: underline;
  text-decoration-color: #bdc9d5;
  text-underline-offset: 5px;
}

.section-link a:hover {
  color: var(--color-dark);
  text-decoration-color: currentColor;
}

.benefit-card,
.benefit-card:hover {
  background: rgba(255, 255, 255, 0.78);
  border-color: #e1e6ee;
  border-radius: 14px;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}

.benefits-grid:hover .benefit-card:not(:hover) {
  opacity: 1;
  filter: none;
  transform: none;
}

.benefit-icon,
.benefit-card:hover .benefit-icon {
  width: 44px;
  height: 44px;
  background: #edf1f6;
  border: none;
  border-radius: 10px;
  box-shadow: none;
  transform: none;
}

.benefit-icon svg,
.benefit-card:hover .benefit-icon svg {
  color: #3a5477;
}

.benefit-content h3,
.benefit-card:hover .benefit-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-dark);
  letter-spacing: -0.015em;
}

.benefit-content p,
.benefit-card:hover .benefit-content p {
  font-size: 15px;
  color: var(--color-gray);
  line-height: 1.7;
}

/* Kundeudsagn skal først og fremmest være behagelige at læse. */
.testimonials {
  background: #fff;
}

.testimonials::before,
.testimonials .section-header h2::after {
  display: none;
}

.testimonials-slider {
  background: #f6f7f9;
  border: 1px solid #e5e8ee;
  box-shadow: none;
}

.ts-tabs {
  background: #edf0f4;
  border: none;
}

.ts-tab-label {
  color: #52627a;
}

.ts-tab.active {
  background: #fff;
  box-shadow: 0 1px 4px rgba(27, 43, 70, 0.08);
}

.ts-tab.active .ts-tab-label {
  color: #223858;
}

.ts-tab.active .ts-progress-track {
  background: #e0e6ee;
}

.ts-progress-fill {
  background: #627d9a;
}

.ts-progress-track {
  display: none;
}

.ts-quote {
  font-style: normal;
  font-weight: 400;
  color: #354660;
}

.ts-logo-placeholder img {
  opacity: 1;
}

.lp-feature-card {
  box-shadow: none;
}

.lp-feature-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}



@media (max-width: 1099px) {
  .nav-links {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }
}



@media (max-width: 767px) {
  .benefits-grid--three {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 699px) {

  .stats-highlight-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding: 8px 0 30px;
  }

  .stats-highlight-divider {
    display: none;
  }

  .stats-highlight-number {
    font-size: clamp(27px, 6vw, 36px);
  }

  .stats-highlight-label {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
  }

  .social-proof-divider {
    padding-inline: 20px;
    gap: 12px;
  }

  .social-proof-divider span {
    font-size: 10px;
    white-space: normal;
    text-align: center;
  }

  .benefits-section {
    padding: 64px 0;
  }

  .benefit-card {
    padding: 24px 20px;
  }

  .testimonials-slider {
    padding: 24px 18px 32px;
  }

  .ts-tabs {
    margin-bottom: 30px;
    gap: 2px;
  }

  .ts-tab {
    padding: 12px 6px;
  }

  .ts-tab-label {
    font-size: 12px;
  }
}

@media (max-width: 479px) {
  .nav,
  .nav.scrolled {
    padding: 13px 0;
  }

  .nav > .container {
    padding-inline: 14px;
  }

  .nav-inner {
    gap: 8px;
  }

  .nav-logo-img {
    width: clamp(110px, 31vw, 130px);
  }

  .nav-actions {
    gap: 5px;
  }

  .nav-actions .btn {
    padding: 10px;
    border-radius: 8px;
    font-size: 12px;
  }

  .nav-actions .btn-login {
    padding: 10px;
    font-size: 12px;
    border-radius: 8px;
  }

  .nav-actions .btn-login svg { display: none; }

  .nav-hamburger {
    padding: 7px 4px;
  }
}

/* Forsidens oprindelige udtryk med en tydelig adgang for eksisterende kunder. */
.hero-title { font-weight: 900; letter-spacing: -.02em; }
.hero-login { margin: 22px 0 0; color: #5b657b; font-size: 14px; }
.hero-login a { color: #14264b; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; margin-left: 5px; }
.hero-login a:hover { color: #304e7a; }
.nav-actions .btn-login {
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #172748;
  border-color: #172748;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(23, 39, 72, .12);
}
.nav-actions .btn-login:hover { background: #253d63; border-color: #253d63; color: #fff; }
.nav-actions .btn-login svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-actions .btn-primary { border: 1px solid #bdc7d7; background: #fff; color: #172748; box-shadow: none; }
.nav-actions .btn-primary:hover { background: #f0f3f7; border-color: #8c9bb3; }
@media (max-width: 699px) {
  .hero-inner { flex-direction: column; }
  .hero-login { font-size: 13px; }
}
@media (max-width: 379px) {
  .nav-demo-long { display: none; }
  .nav-actions .btn-primary { text-transform: capitalize; }
}

/* Kort demoforespørgsel med plads til valgfrie oplysninger. */
#demoModal { background: rgba(17, 27, 46, .46); }
#demoModal .modal {
  max-width: 520px;
  padding: 32px;
  background: #fafbfc;
  border-color: #d8dfe7;
  max-height: calc(100dvh - 40px);
  overscroll-behavior: contain;
}
#demoModal .modal-close { color: #536078; }
#demoModal .demo-kicker { padding-right: 22px; margin: 0 0 9px; color: #536078; font-size: 12px; font-weight: 500; }
#demoModal h2 { font-size: 26px; font-weight: 600; letter-spacing: -.025em; }
#demoModal .modal-subtitle { margin-bottom: 22px; color: #536078; line-height: 1.55; }
#demoModal .form-group { margin-bottom: 14px; }
.demo-required-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
#demoModal .form-group input,
#demoModal .form-group select { background-color: #fff; border-color: #cbd3df; font-size: 16px; }
#demoModal .form-group input::placeholder { color: #737e90; }
#demoModal .form-group input:focus,
#demoModal .form-group select:focus { border-color: #49668f; box-shadow: 0 0 0 3px rgba(73, 102, 143, .13); }
#demoModal .form-group input.invalid { border-color: #b43d3d; box-shadow: 0 0 0 2px rgba(180, 61, 61, .1); }
.demo-optional { margin: 4px 0 10px; border-top: 1px solid #e0e5ec; border-bottom: 1px solid #e0e5ec; }
.demo-optional summary { padding: 13px 0; color: #263b5b; font-size: 14px; font-weight: 500; cursor: pointer; }
.demo-optional summary span,
.demo-optional label span { color: #66748a; font-weight: 400; }
.demo-optional-fields { padding-top: 4px; }
.demo-form-error { margin: 12px 0 4px; color: #9c3030; font-size: 14px; line-height: 1.5; }
#demoModal .modal-submit { margin-top: 8px; }
#demoModal .modal-submit:disabled { opacity: .65; cursor: wait; transform: none; }
.demo-price-note { margin: 14px 0 0; color: #66748a; font-size: 12px; line-height: 1.6; text-align: center; }
#demoModal .modal-success svg { color: #49668f; }
#demoModal .modal-success:focus { outline: none; }
#demoModal .modal-close:focus-visible,
.demo-optional summary:focus-visible { outline: 2px solid #49668f; outline-offset: 3px; }
.onboarding-price-note { margin: 24px auto 0; max-width: 620px; color: #536078; font-size: 14px; line-height: 1.8; }
.onboarding-price-note strong { display: block; color: #263b5b; font-weight: 600; }
.site-footer--compact { padding-top: 48px; }
@media (max-width: 479px) {
  #demoModal { padding: 12px; }
  #demoModal .modal { padding: 28px 22px 24px; max-height: calc(100dvh - 24px); }
  #demoModal h2 { font-size: 23px; }
  .demo-required-fields { grid-template-columns: 1fr; }
  #demoModal .demo-kicker { font-size: 11px; }
  .site-footer--compact { padding-top: 36px; }
}