/* wa-lint: skip */
/* ============================================================
   pakker-og-priser.css — Stand: Pakker og priser
   Område: Service. Kombinations-matrix med 4 kort + add-on +
   åben note om pris-research-status. Bd-issue: ugdk-lbp.
   ============================================================ */

.pakker {
  background: var(--bg);
  color: var(--text, rgb(28, 35, 38));
  display: block;
}

/* ---- Intro ---- */
.pakker-intro {
  padding: var(--space-2xl) 0 var(--space-xl);
}
.pakker-intro__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}
.pakker-intro__title {
  /* Kanoniske H1-tokens (FIX R5) */
  font-size: var(--fs-h1);
  font-weight: var(--fw-h1);
  letter-spacing: var(--ls-h1);
  margin: 0 0 var(--space-m);
  color: var(--primary);
}
.pakker-intro__lede {
  font-size: 1.125rem;
  max-width: 60ch;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

/* ---- Matrix ---- */
.pakker-matrix {
  padding: var(--space-l) 0 var(--space-3xl);
}
.pakker-matrix__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}
.pakker-matrix__head {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 var(--space-l);
}

.pakker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-l);
}

@media (max-width: 1100px) {
  .pakker-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pakker-grid { grid-template-columns: 1fr; }
}

/* ---- Card ---- */
.pakker-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pakker-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(49, 79, 89, 0.25);
  border-color: var(--brand-80, rgb(127, 190, 198));
}

.pakker-card--featured {
  border-color: var(--accent);
  box-shadow: 0 12px 32px -18px rgba(184, 90, 58, 0.4);
}
.pakker-card--featured:hover { border-color: var(--accent-hover, rgb(154, 72, 48)); }

.pakker-card__badge {
  position: absolute;
  top: -10px;
  left: var(--space-l);
  background: var(--accent);
  color: rgb(255, 255, 255);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.pakker-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.pakker-card__tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-hover, rgb(66, 139, 152));
}
.pakker-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  color: var(--primary);
  letter-spacing: -0.01em;
}
.pakker-card__sub {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

.pakker-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
}
.pakker-card__features li {
  font-size: 0.92rem;
  line-height: 1.45;
  padding-left: 1.4em;
  position: relative;
  color: var(--text, rgb(28, 35, 38));
}
.pakker-card__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--highlight, rgb(127, 190, 198));
}

.pakker-card__price {
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
}
.pakker-card__price-line {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  flex-wrap: wrap;
}
.pakker-card__price-num {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.01em;
}
.pakker-card__price-unit {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 500;
}
.pakker-card__price-sub {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 4px;
}
.pakker-card__price--tbd .pakker-card__price-num {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0;
}

.pakker-card__cta {
  width: 100%;
  justify-content: center;
}

/* ---- Add-on section ---- */
.pakker-addon {
  padding: var(--space-2xl) 0;
  background: var(--accent-soft, rgb(247, 226, 216));
}
[data-theme="dark"] .pakker-addon { background: var(--accent-soft); }
.pakker-addon__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}
.pakker-addon__head {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 0 0 var(--space-l);
}
.pakker-addon__card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xl);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-xl);
}
@media (max-width: 720px) {
  .pakker-addon__card {
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }
}
.pakker-addon__title {
  font-size: 1.25rem;
  margin: 0 0 var(--space-s);
  color: var(--primary);
}
.pakker-addon__desc {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  max-width: 60ch;
}
.pakker-addon__price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
}
@media (max-width: 720px) {
  .pakker-addon__price { text-align: left; }
}
.pakker-addon__price-num {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
}
.pakker-addon__price-sub {
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---- Note ---- */
.pakker-note {
  padding: var(--space-3xl) 0 var(--space-2xl);
}
.pakker-note__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 28px;
}
.pakker-note__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-xl);
}
.pakker-note__head {
  /* Bruger nu det kanoniske H2-token (FIX R5: tidligere 17.6px gjorde det
     ulige meget mindre end de andre H2'er på siden). */
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  letter-spacing: var(--ls-h2);
  margin: 0 0 var(--space-m);
  color: var(--primary);
}
.pakker-note__card p {
  margin: 0 0 var(--space-m);
  line-height: 1.6;
  color: var(--text, rgb(28, 35, 38));
}
.pakker-note__card p:last-child { margin-bottom: 0; }
.pakker-note__card a {
  color: var(--primary-hover, rgb(66, 139, 152));
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pakker-note__card a:hover { color: var(--accent); }

/* ---- Fit/no-fit sektion ---- */
.pakker-fit {
  padding: var(--space-3xl) 0 var(--space-2xl);
}
.pakker-fit__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 28px;
}
.pakker-fit__head {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin: 0 0 var(--space-s);
  color: var(--primary);
  text-align: center;
}
.pakker-fit__lede {
  max-width: 60ch;
  margin: 0 auto var(--space-2xl);
  text-align: center;
  color: var(--muted);
  line-height: 1.6;
}
.pakker-fit__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 760px) {
  .pakker-fit__grid {
    grid-template-columns: 1fr 1fr;
  }
}
.pakker-fit__col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-xl);
}
.pakker-fit__col--yes {
  border-left: 4px solid var(--accent, rgb(25, 68, 77));
}
.pakker-fit__col--no {
  border-left: 4px solid var(--muted, rgb(136, 136, 136));
}
.pakker-fit__col-head {
  font-size: 1.05rem;
  margin: 0 0 var(--space-m);
  color: var(--primary);
}
.pakker-fit__list {
  margin: 0;
  padding-left: var(--space-l);
  line-height: 1.55;
}
.pakker-fit__list li {
  margin-bottom: var(--space-s);
}
.pakker-fit__list li:last-child {
  margin-bottom: 0;
}
.pakker-fit__honest {
  max-width: 60ch;
  margin: var(--space-2xl) auto 0;
  text-align: center;
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.95rem;
}
.pakker-fit__honest a {
  color: var(--primary-hover, rgb(66, 139, 152));
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- CTA ---- */
.pakker-cta {
  padding: var(--space-3xl) 0 var(--space-4xl);
  text-align: center;
}
.pakker-cta__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 28px;
}
.pakker-cta__inner h2 {
  /* Kanoniske H2-tokens (FIX R5) */
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  letter-spacing: var(--ls-h2);
  margin: 0 0 var(--space-m);
  color: var(--primary);
}
.pakker-cta__inner p {
  font-size: 1.05rem;
  color: var(--muted);
  margin: 0 0 var(--space-l);
  line-height: 1.55;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Sammenligningstabel ----
   Kort feature-matrix der gør det nemmere at sammenligne UG / UG+CMS /
   UG+AI / UG+CMS+AI på 5-6 nøgletræk. Bruger kun eksisterende tokens
   for at undgå nyt design-sprog. */
.pakker-compare {
  padding: var(--space-2xl) 0 var(--space-3xl);
}
.pakker-compare__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 28px;
}
.pakker-compare__head {
  margin-bottom: var(--space-l);
}
.pakker-compare__title {
  /* Konsistens med andre section-headlines på siden — brug --fs-h2 token. */
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  letter-spacing: var(--ls-h2);
  color: var(--primary);
  margin: 0 0 var(--space-s);
}
.pakker-compare__lede {
  font-size: 1.05rem;
  color: var(--muted, var(--text-muted));
  max-width: 60ch;
  margin: 0 0 var(--space-l);
}
.pakker-compare__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border, rgb(226, 232, 240));
  border-radius: var(--radius-lg, 12px);
  background: var(--surface, rgb(255, 255, 255));
  box-shadow: var(--shadow-sm);
}
.package-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md, 0.9rem);
  min-width: 640px;
}
.package-compare thead th {
  text-align: left;
  padding: 14px 16px;
  font-weight: var(--fw-bold, 700);
  font-size: var(--fs-sm, 0.78rem);
  text-transform: uppercase;
  letter-spacing: var(--ls-section, 0.08em);
  color: var(--primary);
  background: var(--bg, rgb(248, 249, 250));
  border-bottom: 1px solid var(--border);
}
.package-compare thead th:first-child {
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}
.package-compare tbody th {
  text-align: left;
  padding: 12px 16px;
  font-weight: var(--fw-semibold, 600);
  color: var(--primary);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.package-compare tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: top;
  line-height: 1.45;
}
.package-compare tbody tr:last-child th,
.package-compare tbody tr:last-child td {
  border-bottom: 0;
}
.package-compare__yes { color: var(--brand-success, rgb(0, 136, 60)); font-weight: var(--fw-bold); }
.package-compare__no  { color: var(--text-muted); }
.package-compare__featured {
  background: rgba(184, 90, 58, 0.06);
}

@media (max-width: 600px) {
  .pakker-compare__inner { padding: 0 16px; }
  .package-compare { font-size: var(--fs-sm); }
  .package-compare thead th,
  .package-compare tbody th,
  .package-compare tbody td { padding: 10px 12px; }
}