/* ==========================================================================================================
   Design v2 pricing (stage 3): plan cards (spec §5.11) and the comparison matrix with a sticky head (§5.10, D10).
   Kit source: design/redesign/kit/css/gp-pricing.css -> static/css/gp-pricing.css, loaded by
   pages/_marketing_base.html after gp-faq.css. Scoped to body.gp-v2; table rules also to the .gp-matrix wrapper
   (pages/_plan_table.html), so they beat the v1 rules in components.css (.table …) and marketing.css (.plan-table …).
   Ported from design/redesign/mockups/css/pricing.css by the prep agent; checked against the mockup in stage 3a
   (priser ≤ 0.5 % per section). Phones: collapsible matrix groups with js/gp-matrix.js (stage 3a). Polish B: the
   opaque sticky head (P2-1) and the "Vis kun forskelle" switch. Finish: funktioner gets the switch and its groups
   collapse on desktop too (QA P3-5).
   ========================================================================================================== */

/* ---- v1 resets (components.css .price-card / .table, marketing.css .plan-table) ---- */
.gp-v2 .price-cards { max-width: none; margin: 0; --cols: 1; grid-template-columns: minmax(0, 1fr); }
.gp-v2 .price-card { box-shadow: none; color: var(--text); }
.gp-v2 .price-card__name, .gp-v2 .price-card__price, .gp-v2 .price-card__period, .gp-v2 .price-card .check-list { margin: 0; }
.gp-v2 .price-card__action { margin-top: 24px; }
.gp-v2 .price-card__action .btn { width: 100%; }
.gp-v2 .gp-matrix .plan-table { min-width: 0; border: 0; border-radius: 0; background: none; border-collapse: separate; border-spacing: 0; }
.gp-v2 .gp-matrix .plan-table th, .gp-v2 .gp-matrix .plan-table td { border: 0; background: none; white-space: normal; vertical-align: middle;
  hyphens: manual; }
.gp-v2 .gp-matrix .plan-table thead th { border-radius: 0; }
/* ---- plan cards: fixed order Basic · PRO · Enterprise; PRO stands 16 px proud with a 4 px green-100 halo ---- */
.gp-v2 .price-cards { list-style: none; padding: 0; display: grid; gap: 16px; }
.gp-v2 .price-card {
  position: relative; display: flex; flex-direction: column;
  padding: var(--gp-card-pad); background: var(--gp-page); border: var(--gp-border); border-radius: var(--gp-radius-plan-card-inner);
}
.gp-v2 .price-card--featured { border-color: var(--gp-accent); box-shadow: 0 0 0 4px var(--gp-accent-tint); }
.gp-v2 .price-card__name { font-size: var(--gp-fs-plan-name); line-height: var(--gp-lh-plan-name); letter-spacing: var(--gp-ls-plan-name);
  font-weight: var(--gp-fw-plan-name); }
.gp-v2 .price-card__desc { margin: 10px 0 0; font-size: var(--gp-fs-small); line-height: var(--gp-lh-small); color: var(--gp-muted); }
.gp-v2 .gp-plan__price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: 24px; min-height: 40px; }
.gp-v2 .price-card__price { color: var(--heading); font-size: var(--gp-fs-plan-price); line-height: var(--gp-lh-plan-price); font-weight: var(--gp-fw-plan-price);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.gp-v2 .gp-plan__price--text { color: var(--heading); font-size: 24px; line-height: 40px; font-weight: 600; letter-spacing: -0.01em; }
.gp-v2 .price-card__period { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--gp-muted); }
.gp-v2 .price-card__action { margin-top: 24px; }
.gp-v2 .price-card .gp-plan__features { margin-top: 28px; padding-top: 24px; border-top: var(--gp-border); font-size: 15px; line-height: 22px; gap: 10px; }
.gp-v2 .gp-plan__features li::before { top: 1px; }
/* PRO "Alt i Basic, plus:" (shared.plans features_lead, QA P2-2): the lead takes the rule, the ticks follow it */
.gp-v2 .price-card .gp-plan__features-lead { margin: 28px 0 0; padding-top: 24px; border-top: var(--gp-border); color: var(--gp-heading);
  font-size: 15px; line-height: 22px; font-weight: 600; }
.gp-v2 .price-card .gp-plan__features-lead + .gp-plan__features { margin-top: 10px; padding-top: 0; border-top: 0; }
.gp-v2 .priser-note { margin-top: 32px; text-align: center; font-size: 15px; line-height: 22px; color: var(--gp-muted); }
@media (min-width: 992px) {
  .gp-v2 .price-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; padding-block: 16px; }
  .gp-v2 .price-card__desc { min-height: 66px; }
  .gp-v2 .price-card--featured { margin-block: -16px; padding-block: calc(var(--gp-card-pad) + 16px); }
}
@media (min-width: 1280px) { .gp-v2 .gp-plans { max-width: 1120px; margin-inline: auto; } }

/* ---- comparison matrix: a real table; phones get label rows (CSS grid on the same markup) ---- */
.gp-v2 .gp-compare .section-head { margin-bottom: 32px; }
.gp-v2 .gp-matrix .plan-table { width: 100%; font-size: 15px; line-height: 22px; }
.gp-v2 .gp-matrix .plan-table colgroup { display: none; }
.gp-v2 .gp-matrix .plan-table, .gp-v2 .gp-matrix .plan-table thead, .gp-v2 .gp-matrix .plan-table tbody, .gp-v2 .gp-matrix .plan-table tfoot { display: block; }
.gp-v2 .gp-matrix .plan-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gp-v2 .gp-matrix .plan-table th, .gp-v2 .gp-matrix .plan-table td { display: block; padding: 0; text-align: center; font-weight: 500; }

/* sticky mini head: plan names + prices */
.gp-v2 .gp-matrix .plan-table thead { position: sticky; top: calc(var(--gp-header-top) + var(--gp-header-h) + 8px); z-index: 2;
  background: var(--gp-page); border-bottom: var(--gp-border); }
.gp-v2 .gp-matrix .plan-table thead th:first-child { display: none; }
.gp-v2 .gp-matrix .plan-table thead th { padding: 10px 4px 12px; }
.gp-v2 .gp-matrix .plan-table__plan-name { display: block; font-size: 16px; line-height: 22px; font-weight: 600; }
.gp-v2 .gp-matrix .plan-table__plan-price { color: var(--heading); display: block; margin-top: 2px; font-size: var(--gp-fs-matrix-head-price); line-height: var(--gp-lh-matrix-head-price);
  font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gp-v2 .gp-matrix .gp-matrix__price--text { font-size: 16px; font-weight: 600; }
.gp-v2 .gp-matrix .gp-matrix__period { font-size: 13px; font-weight: 500; color: var(--gp-muted); }

.gp-v2 .gp-matrix .plan-table__group th { grid-column: 1 / -1; margin-top: 24px; padding: 14px 16px; border-radius: 12px; background: var(--gp-stone);
  text-align: left; font-size: 18px; line-height: 24px; font-weight: 600; }
.gp-v2 .gp-matrix .plan-table tbody tr:not(.plan-table__group) { padding: 14px 0; border-bottom: var(--gp-rule); row-gap: 10px; }
.gp-v2 .gp-matrix .plan-table tbody th[scope="row"] { grid-column: 1 / -1; padding: 0 8px; font-size: 15px; line-height: 22px; font-weight: 500; }
.gp-v2 .gp-matrix .plan-table__desc { display: block; margin-top: 2px; font-size: var(--gp-fs-matrix-desc); line-height: var(--gp-lh-matrix-desc);
  font-weight: 400; color: var(--gp-muted); }
.gp-v2 .gp-matrix .plan-table td { display: flex; justify-content: center; align-items: center; min-height: 28px; }
.gp-v2 .gp-matrix .plan-table__value { font-size: 15px; font-weight: 500; }

/* included: the yes square (yes-bg + yes-fg tick); not included: the no square with a dash; Ubegrænset: the unl square with ∞ + the word */
.gp-v2 .gp-matrix .is-yes, .gp-v2 .gp-matrix .is-no { display: inline-block; width: 28px; height: 28px; border-radius: var(--gp-radius-matrix-square); position: relative; }
.gp-v2 .gp-matrix .is-yes { background: var(--gp-yes-bg); }
.gp-v2 .gp-matrix .is-no { background: var(--gp-no-bg); }
.gp-v2 .gp-matrix .gp-matrix__unl { display: inline-flex; align-items: center; gap: 8px; }
.gp-v2 .gp-matrix .is-unl { display: inline-block; flex: none; width: 28px; height: 28px; border-radius: var(--gp-radius-matrix-square); position: relative;
  background: var(--gp-unl-bg); }
.gp-v2 .gp-matrix .is-unl::after { content: "\221E"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--gp-unl-fg);
  font-size: 18px; line-height: 1; font-weight: 600; }
@media (max-width: 767px) { .gp-v2 .gp-matrix .gp-matrix__unl { flex-direction: column; gap: 4px; font-size: 13px; } }
.gp-v2 .gp-matrix .is-yes::after, .gp-v2 .gp-matrix .is-no::after { content: ""; position: absolute; inset: 0; margin: auto; }
.gp-v2 .gp-matrix .is-yes::after { width: 16px; height: 16px; background: var(--gp-yes-fg);
  -webkit-mask: var(--gp-tick) center / contain no-repeat; mask: var(--gp-tick) center / contain no-repeat; }
.gp-v2 .gp-matrix .is-no::after { width: 10px; height: 2px; border-radius: 1px; background: var(--gp-no-fg); }

.gp-v2 .gp-matrix .plan-table tfoot tr { padding-top: 20px; gap: 8px; }
.gp-v2 .gp-matrix .plan-table tfoot td:first-child { grid-column: 1 / -1; order: 2; padding-top: 8px; }
.gp-v2 .gp-matrix .plan-table tfoot .btn { width: 100%; padding-inline: 8px; }

/* the sticky head is opaque up to the viewport top while it is stuck (QA P2-1): a page-white band above each head cell
   covers the bar's gap and the rows behind the frosted bar. The wrapper clips it, so the band only shows once the table
   has scrolled under the bar (before that it would sit over the section head). The head keeps its 2 px hairline. */
.gp-v2 .gp-matrix { overflow: clip; }
.gp-v2 .gp-matrix .plan-table thead::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: calc(var(--gp-header-top) + var(--gp-header-h) + 8px); background: var(--gp-page); pointer-events: none; }

/* "Vis kun forskelle" (priser + funktioner; compare.diff_toggle, js/gp-matrix.js): a switch above the matrix. Without JS the
   switch stays hidden and every row shows. On: rows that are the same in every plan and groups without a difference
   are hidden (class is-diff-only on the table, is-same on rows and groups set by the script). */
.gp-v2 .gp-matrix__tools { display: flex; justify-content: flex-end; margin: 0 0 16px; }
.gp-v2 .gp-matrix__tools[hidden] { display: none; }
.gp-v2 .gp-switch { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; padding: 0 4px;
  border: 0; border-radius: var(--gp-radius-button); background: none; color: var(--gp-heading); font: inherit;
  font-size: 15px; line-height: 22px; font-weight: 600; cursor: pointer; }
.gp-v2 .gp-switch__track { position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px;
  background: var(--gp-line-strong); transition: background-color var(--gp-dur-colour) var(--gp-ease); }
.gp-v2 .gp-switch__track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--gp-page); box-shadow: 0 1px 2px rgba(5, 38, 76, .25); transition: transform var(--gp-dur-colour) var(--gp-ease); }
.gp-v2 .gp-switch[aria-pressed="true"] .gp-switch__track { background: var(--gp-action); }
.gp-v2 .gp-switch[aria-pressed="true"] .gp-switch__track::after { transform: translateX(18px); }
.gp-v2 .gp-switch:hover .gp-switch__track { box-shadow: 0 0 0 4px var(--gp-accent-tint); }
.gp-v2 .gp-switch:focus-visible { outline: 2px solid var(--gp-focus); outline-offset: 2px; }
.gp-v2 .gp-matrix .plan-table.is-diff-only tr.is-same, .gp-v2 .gp-matrix .plan-table.is-diff-only tbody.is-same { display: none; }
@media (prefers-reduced-motion: reduce) { .gp-v2 .gp-switch__track, .gp-v2 .gp-switch__track::after { transition: none; } }

/* phones: collapsible groups (stage 3a); funktioner at every width too (finish, QA P3-5: data-matrix-collapse="all").
   js/gp-matrix.js wraps each group heading in a button (aria-expanded) and hides the group's rows; the first group
   starts open, a jump to #gruppe-<n> opens that one. Without JS every row shows. */
.gp-v2 .gp-matrix .plan-table tr[hidden] { display: none; }
.gp-v2 .gp-matrix .plan-table__group th { scroll-margin-top: 68px; }   /* + html scroll-padding (the bar): lands under the sticky head */
.gp-v2 .gp-matrix .is-collapsible .plan-table__group th { padding: 0; }
.gp-v2 .gp-matrix tbody.is-collapsed + tbody .plan-table__group th { margin-top: 8px; }
.gp-v2 .gp-matrix__toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 52px;
  margin: 0; padding: 14px 16px; border: 0; border-radius: 12px; background: none; color: var(--gp-heading); font: inherit; text-align: left;
  cursor: pointer; }
.gp-v2 .gp-matrix__icon { position: relative; flex: none; width: 20px; height: 20px; color: var(--gp-heading); }
.gp-v2 .gp-matrix__icon::before, .gp-v2 .gp-matrix__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px;
  margin: -1px 0 0 -8px; border-radius: 1px; background: currentColor; transition: transform var(--gp-dur-colour) var(--gp-ease); }
.gp-v2 .gp-matrix__icon::after { transform: rotate(90deg); }
.gp-v2 .gp-matrix__toggle[aria-expanded="true"] .gp-matrix__icon { color: var(--gp-accent); }
.gp-v2 .gp-matrix__toggle[aria-expanded="true"] .gp-matrix__icon::after { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) { .gp-v2 .gp-matrix__icon::before, .gp-v2 .gp-matrix__icon::after { transition: none; } }

@media (min-width: 768px) {
  /* a real table again; the head sticks under the floating bar (the table is in no overflow box) */
  .gp-v2 .gp-matrix .plan-table { display: table; table-layout: fixed; }
  .gp-v2 .gp-matrix .plan-table colgroup { display: table-column-group; }
  .gp-v2 .gp-matrix .plan-table thead { display: table-header-group; position: static; border: 0; background: none; }
  .gp-v2 .gp-matrix .plan-table tbody { display: table-row-group; }
  .gp-v2 .gp-matrix .plan-table tfoot { display: table-footer-group; }
  .gp-v2 .gp-matrix .plan-table tr, .gp-v2 .gp-matrix .plan-table tbody tr:not(.plan-table__group), .gp-v2 .gp-matrix .plan-table tfoot tr { display: table-row; padding: 0; border: 0; }
  .gp-v2 .gp-matrix .plan-table th, .gp-v2 .gp-matrix .plan-table td, .gp-v2 .gp-matrix .plan-table tbody th[scope="row"] { display: table-cell; vertical-align: middle; }
  .gp-v2 .gp-matrix .plan-table__feature { width: 40%; }
  .gp-v2 .gp-matrix .plan-table__plan { width: 20%; }
  .gp-v2 .gp-matrix .plan-table thead th { position: sticky; top: calc(var(--gp-header-top) + var(--gp-header-h) + 8px); z-index: 2;
    padding: 20px 12px 18px; background: var(--gp-page); border-bottom: var(--gp-border); }
  .gp-v2 .gp-matrix .plan-table thead th:first-child { display: table-cell; }
  .gp-v2 .gp-matrix .plan-table thead::before { content: none; }
  .gp-v2 .gp-matrix .plan-table thead th::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
    height: calc(var(--gp-header-top) + var(--gp-header-h) + 8px); background: var(--gp-page); pointer-events: none; }
  .gp-v2 .gp-matrix .plan-table__plan-name { font-size: 20px; line-height: 26px; }
  .gp-v2 .gp-matrix .gp-matrix__period { font-size: 14px; }
  .gp-v2 .gp-matrix .gp-matrix__price--text { font-size: 20px; }
  .gp-v2 .gp-matrix .plan-table__group th { scroll-margin-top: 100px; }
  .gp-v2 .gp-matrix .plan-table__group th { padding: 16px 20px; height: 56px; font-size: 20px; line-height: 26px; border-radius: 0; }
  /* groups collapsed at every width (funktioner, data-matrix-collapse="all", finish QA P3-5): the button fills the bar */
  .gp-v2 .gp-matrix__toggle { min-height: 56px; padding: 15px 20px; border-radius: 0; }
  .gp-v2 .gp-matrix .plan-table__group:not(:first-child) th { margin: 0; }
  .gp-v2 .gp-matrix .plan-table tbody:first-of-type .plan-table__group th { border-top: 0; }
  .gp-v2 .gp-matrix .plan-table tbody tr:not(.plan-table__group) > * { padding: 14px 12px; border-top: var(--gp-rule); min-height: 56px; }
  .gp-v2 .gp-matrix .plan-table tbody th[scope="row"] { padding: 14px 20px; text-align: left; }
  .gp-v2 .gp-matrix .plan-table tbody tr:not(.plan-table__group) > td { text-align: center; }
  .gp-v2 .gp-matrix .plan-table td > * { vertical-align: middle; }
  .gp-v2 .gp-matrix .plan-table tfoot td { padding: 24px 12px 4px; text-align: center; border-top: var(--gp-border); }
  .gp-v2 .gp-matrix .plan-table tfoot td:first-child { padding-left: 20px; text-align: left; }
  .gp-v2 .gp-matrix .plan-table tfoot .btn { width: auto; padding-inline: var(--gp-btn-px-sm); }
}