/* ==========================================================================================================
   Design v2 page sections (stage 2 "home" onwards). Kit source: design/redesign/kit/css/gp-sections.css, installed
   as static/css/gp-sections.css, loaded by templates/pages/_marketing_base.html AFTER pages/marketing.css.
   Every rule is scoped to body.gp-v2 (a converted page template adds the class in {% block body_class %}), so the
   pages still in their v1 templates keep their v1 layout until their stage. The scope also lifts these rules over
   the v1 rules for the same kept class names (components.css, marketing.css); where v1 sets a property the v2 design
   does not want, it is reset here explicitly.
   Contents: element margins, rhythm, section intro, check list, heroes (photo / medium / plain), breadcrumbs, the
   chip band, the value row (benefits), the banner, feature blocks (split) and screenshot tiles, tabs, integrations.
   Spec §5.3, §5.8, §5.9, §6.1, §6.3, §6.4; mockup design/redesign/mockups/css/sections.css + base.css.
   ========================================================================================================== */
:root { --gp-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 10.5l4 4 9-9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ---- element margins: v2 components set their own spacing (prose keeps its own: .prose p is more specific) ---- */
.gp-v2 :where(main) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol) { margin: 0; }
.gp-v2 :where(main) :where(p + p) { margin-top: 1em; }
.gp-v2 :where(main) :where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
.gp-v2 h1, .gp-v2 h2, .gp-v2 h3, .gp-v2 h4 { text-wrap: balance; }
/* text-wrap: pretty only on short texts (leads, card and list lines: no orphan word, no visible cost); long body
   copy keeps the normal wrap, where pretty left the last 3-4 lines visibly short and ragged (QA P3-1) */
.gp-v2 :where(main) :where(.hero__text, .section-head__text, .card__text, .gp-values__text, .price-card__desc,
  .plan-table__desc, .check-list li, .cta-band__text, .gp-aside__text, .design-card__text, .topic-card__text,
  .login-card__text, .gs-card__text, .video__caption, .summary-card__text, .gp-mega__promo-text) { text-wrap: pretty; }

/* ---- rhythm: two white bands in a row sit one band-padding apart, not two ---- */
.gp-v2 .section.tone-white:not(.gp-tray) + .section.tone-white:not(.gp-tray) { padding-top: 0; }

/* ---- section intro (partials/section_head.html) ---- */
.gp-v2 .section-head { max-width: 820px; margin: 0 0 32px; text-align: left; }
.gp-v2 .section-head__title {
  margin: 0; font-size: var(--gp-fs-section-h2); line-height: var(--gp-lh-section-h2);
  letter-spacing: var(--gp-ls-section-h2); font-weight: var(--gp-fw-section-h2);
}
.gp-v2 .section-head__text { margin-top: 16px; max-width: 720px; color: var(--text); font-size: var(--gp-fs-lead);
  line-height: var(--gp-lh-lead); }
.gp-v2 .section-head .eyebrow { margin: 0 0 12px; font-size: var(--gp-fs-eyebrow); line-height: var(--gp-lh-eyebrow);
  font-weight: var(--gp-fw-eyebrow); }
@media (min-width: 768px) {
  .gp-v2 .section-head { margin: 0 auto var(--gp-intro-gap); text-align: center; }
  .gp-v2 .section-head__text { margin-inline: auto; }
}

/* ---- check list: 20 px accent tick (CSS mask), 16/26, gap 12 ---- */
.gp-v2 .check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gp-list-gap); font-size: 16px; line-height: 26px; }
.gp-v2 .check-list li { position: relative; padding-left: 32px; color: var(--text); font-size: inherit; }
.gp-v2 .check-list:not(.check-list--arrow) li:not(.is-arrow)::before, .gp-v2 .gp-values__item::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 0; background: var(--accent-large);
  -webkit-mask: var(--gp-tick) center / contain no-repeat; mask: var(--gp-tick) center / contain no-repeat;
}

/* ---- links and buttons inside sections ---- */
.gp-v2 .btn-row { flex-direction: row; align-items: center; }
.gp-v2 .btn-row .btn { width: auto; }
.gp-v2 .gp-actions { margin-top: 24px; }

/* ---- hero: shared ---- */
.gp-v2 .hero { position: relative; padding-block: 0; overflow: visible; }
.gp-v2 .hero::before { content: none; }
.gp-v2 .hero__inner { position: static; display: flex; flex-direction: column; max-width: none; margin: 0; text-align: left; }
.gp-v2 .hero__title {
  margin: 0; font-size: var(--gp-fs-hero-h1); line-height: var(--gp-lh-hero-h1);
  letter-spacing: var(--gp-ls-hero-h1); font-weight: var(--gp-fw-hero-h1);
}
.gp-v2 .hero__text { margin: 20px 0 0; max-width: none; color: var(--text); font-size: var(--gp-fs-lead); line-height: var(--gp-lh-lead); }
.gp-v2 .hero__actions { display: flex; flex-direction: column; justify-content: flex-start; gap: 12px; margin-top: 32px; }
.gp-v2 .hero__actions .btn { width: 100%; }
.gp-v2 .hero .eyebrow { margin: 0 0 12px; }
@media (min-width: 480px) {
  .gp-v2 .hero__actions { flex-direction: row; flex-wrap: wrap; }
  .gp-v2 .hero__actions .btn { width: auto; }
}

/* ---- photo heroes (home, medium): phones = photo band on top (under the floating bar), text below on white ---- */
.gp-v2 .hero--photo { padding: 0 0 8px; }
.gp-v2 .hero--photo .hero__media {
  order: -1; position: relative; overflow: hidden;
  margin-inline: calc(-1 * var(--gutter)); margin-bottom: 28px;
  aspect-ratio: 3 / 2; border-radius: 0 0 var(--gp-radius-tray) var(--gp-radius-tray);
  background: var(--gp-stone);
}
.gp-v2 .gp-hero--medium .hero__media { aspect-ratio: 390 / 240; }
.gp-v2 .hero--photo .hero__media img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 72% 50%;
  border-radius: 0; box-shadow: none; }
.gp-v2 .hero--photo .breadcrumbs { margin-bottom: 12px; }

@media (min-width: 768px) {
  /* the hero is a tray from y = 0 under the floating bar, radius 0 0 40 40; the text sits on a white scrim (P3) */
  .gp-v2 .hero--photo {
    display: flex; align-items: center; padding: var(--gp-header-reserve) 0 calc(56px + var(--gp-tray-y) / 2);
    margin-inline: max(var(--gp-tray-inset), (100% - var(--gp-tray-max)) / 2);
    min-height: var(--gp-hero-home-h); border-radius: 0 0 var(--gp-radius-tray) var(--gp-radius-tray);
    overflow: clip; isolation: isolate;
  }
  .gp-v2 .hero--photo > .container { --gutter: var(--gp-tray-pad-x); }
  .gp-v2 .gp-hero--medium { min-height: var(--gp-hero-medium-h); padding-bottom: 64px; }
  .gp-v2 .hero--photo + .gp-tray { margin-top: var(--gp-tray-gap); }   /* the photo hero is a tray too (funktioner: hero + areas tray) */
  .gp-v2 .hero--photo .hero__media { position: absolute; inset: 0; z-index: -1; margin: 0; aspect-ratio: auto; border-radius: 0; }
  .gp-v2 .hero--photo .hero__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .9) var(--gp-scrim-hold, 48%),
      rgba(255, 255, 255, 0) var(--gp-scrim-end, 64%));
  }
  .gp-v2 .hero--photo .hero__content { max-width: 560px; }
  .gp-v2 .gp-hero--home .hero__content { padding-bottom: 8px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .gp-v2 .hero--photo { --gp-scrim-hold: 62%; --gp-scrim-end: 82%; }
}
/* home from 1200: a 688 px text column, so the h1 sets in two lines with the pill on line 1 ("Få en flot webshop
   med / mange muligheder.": "med mange muligheder." is 676 px at 60 px; no lone "Få en"; finish, QA P3-1); the lead
   stays 560 wide; the scrim holds further so the longer first line stays on white */
@media (min-width: 1200px) {
  /* feature heroes: 608 px, so "B2B – virksomheder" (590 px at 60 px, joined by no-break spaces) fits one line */
  .gp-v2 .hero--photo { --gp-scrim-hold: 52%; --gp-scrim-end: 68%; }
  .gp-v2 .hero--photo .hero__content { max-width: 608px; }
  .gp-v2 .hero--photo .hero__text { max-width: 560px; }
  .gp-v2 .gp-hero--home { --gp-scrim-hold: 56%; --gp-scrim-end: 65%; }
  .gp-v2 .gp-hero--home .hero__content { max-width: 688px; }
  .gp-v2 .gp-hero--home .hero__text { max-width: 560px; }
}
/* home photo = a person (H1; since 2026-10-27 the owner's photo hero-home-new, 2048 x 878 = 2.33:1: head at x 69-79 %,
   y 21-42 %, parcel at x 63-79 %, y 68-90 % of the image). Below 992 the photo is a rounded 3:2 card BELOW the floating
   bar (under the bar the head would be hidden), text on white under it, the crop pulled right (85 %) so her head and
   the parcel fill the card; from 992 the overlay, the photo height-fitted up to 2.33:1, so only the sides are cropped
   (55 % keeps her right of the text column), with the scrim ending before her head (no white wash on the face).
   Checked at 360-1920 (notes/2026-10-27-hero-compare.md, method: notes/2026-10-26-hero-person.md). */
@media (max-width: 991px) {
  .gp-v2 .gp-hero--home { display: block; min-height: 0; padding: calc(var(--gp-header-top) + var(--gp-header-h) + 12px) 0 8px; }
  .gp-v2 .gp-hero--home .hero__media {
    position: relative; inset: auto; z-index: auto; aspect-ratio: 3 / 2;
    margin: 0 calc(var(--gp-tray-inset) - var(--gutter)) 28px; border-radius: var(--gp-radius-tray);
  }
  .gp-v2 .gp-hero--home .hero__media::after { content: none; }
  .gp-v2 .gp-hero--home .hero__media img { object-position: 85% 50%; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .gp-v2 .gp-hero--home { padding-bottom: 68px; }   /* the chip band overlaps the hero's bottom by 48 */
  .gp-v2 .gp-hero--home .hero__media { margin-inline: calc(-1 * var(--gutter)); }
}
@media (min-width: 992px) {
  .gp-v2 .gp-hero--home .hero__media img { object-position: 55% 50%; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .gp-v2 .gp-hero--home { --gp-scrim-hold: 59%; --gp-scrim-end: 65%; }
}

/* ---- plain hero (priser, design, forms …): stone -> white, centred from 768 ---- */
.gp-v2 .hero--plain {
  padding: var(--gp-hero-plain-top) 0 var(--gp-hero-plain-bottom);
  background: linear-gradient(180deg, var(--gp-stone) 0%, var(--gp-page) 100%);
}
.gp-v2 .hero--plain .hero__title { font-size: var(--gp-fs-page-h1); line-height: var(--gp-lh-page-h1); letter-spacing: var(--gp-ls-page-h1); }
.gp-v2 .hero--plain .hero__content { max-width: 820px; }
@media (min-width: 768px) {
  .gp-v2 .hero--plain:not(.hero--left) .hero__content { margin-inline: auto; text-align: center; }
  .gp-v2 .hero--plain:not(.hero--left) .hero__text { max-width: 680px; margin-inline: auto; }
  .gp-v2 .hero--plain:not(.hero--left) .hero__actions { justify-content: center; }
}

/* ---- breadcrumbs in heroes ("Funktioner / Designværktøjer") ---- */
.gp-v2 .hero .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0;
  font-size: 15px; line-height: 20px; font-weight: 500; }
.gp-v2 .hero .breadcrumbs li:not(:last-child)::after { content: none; }
.gp-v2 .hero .breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--muted); }
.gp-v2 .hero .breadcrumbs a { color: var(--link); text-decoration: none; }
.gp-v2 .hero .breadcrumbs a:hover { text-decoration: underline; }
.gp-v2 .hero .breadcrumbs [aria-current] { color: var(--text); }

/* ---- the chip band (home): a white band over the hero's bottom (radius 40 40 0 0); one swipe row on phones ---- */
.gp-v2 .gp-chips-band { position: relative; z-index: 1; padding-top: 8px; }
.gp-v2 .gp-chips--areas {
  flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
  margin: 32px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter) 8px;
}
.gp-v2 .gp-chips--areas .gp-chip { scroll-snap-align: start; }
@media (min-width: 768px) {
  .gp-v2 .gp-chips-band {
    margin: -48px max(var(--gp-tray-inset), (100% - var(--gp-tray-max)) / 2) 0;
    padding-top: 28px; border-radius: var(--gp-radius-tray) var(--gp-radius-tray) 0 0;
  }
  .gp-v2 .gp-chips-band > .container { --gutter: var(--gp-tray-pad-x); }
  .gp-v2 .gp-chips--areas { flex-wrap: wrap; justify-content: center; overflow: visible; margin: 0; padding: 0; }
}

/* ---- value row (Y1 benefits) ---- */
.gp-v2 .gp-values__list { display: grid; gap: 28px; list-style: none; margin: 0; padding: 0; }
.gp-v2 .gp-values__item { position: relative; padding-left: 40px; }
.gp-v2 .gp-values__item::before { width: 24px; height: 24px; top: 2px; }
.gp-v2 .gp-values__title { margin: 0; font-size: var(--gp-fs-card-h3); line-height: var(--gp-lh-card-h3); letter-spacing: var(--gp-ls-card-h3); }
.gp-v2 .gp-values__text { margin-top: 8px; font-size: 16px; line-height: 26px; color: var(--muted); }
@media (min-width: 992px) {
  .gp-v2 .gp-values__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
}

/* ---- banner (a breather: one per page, decorative) ---- */
.gp-v2 .gp-banner { overflow: hidden; border-radius: var(--gp-radius-card); aspect-ratio: 342 / 160; background: var(--gp-stone); }
.gp-v2 .gp-banner img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
@media (min-width: 768px) { .gp-v2 .gp-banner { aspect-ratio: 1240 / 320; } }

/* ---- feature blocks (split): text column 520 + tile 560, gap 64, alternating; phones: text, then the tile ---- */
.gp-v2 .split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.gp-v2 .split > .split__media, .gp-v2 .split--reverse > .split__media { order: 0; }
.gp-v2 .split__content { max-width: none; }
.gp-v2 .split__title {
  margin: 0; font-size: var(--gp-fs-block-h2); line-height: var(--gp-lh-block-h2); letter-spacing: var(--gp-ls-block-h2);
  font-weight: var(--gp-fw-block-h2);
}
.gp-v2 .split__text { margin: 16px 0 0; color: var(--text); }
.gp-v2 .feature-row__text p + p { margin-top: 1em; }   /* v1 marketing.css says 12px */
.gp-v2 .split__text + .check-list, .gp-v2 .check-list + .split__text { margin-top: 20px; }
.gp-v2 .split__content > .link-arrow { display: block; width: fit-content; margin-top: 24px; text-wrap: pretty; }
.gp-v2 .split__media { min-width: 0; }
.gp-v2 .split__media--plain img { border-radius: 0; }
@media (min-width: 768px) {
  .gp-v2 .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .gp-v2 .split--5-7 { grid-template-columns: 5fr 7fr; }
  .gp-v2 .split--reverse > .split__media { order: -1; }
}
@media (min-width: 992px) {
  .gp-v2 .split { gap: var(--gp-block-gap); }
  .gp-v2 .gp-block .split__content { max-width: var(--gp-block-text); }
  .gp-v2 .gp-block .split:not(.split--reverse) .split__content { justify-self: start; }
  .gp-v2 .gp-block .split--reverse .split__content { justify-self: end; width: 100%; }
}

/* ---- screenshot tiles (spec §5.8, D13): tilt only for sources >= 1450 px, inner scale <= 130 % (square well);
   flat / blend / shot: the well is sized to the image (QA P2-5): the image at most at its natural (1×) width, never
   upscaled, 20/32 px of well around it, up to the 560 column. A demo-shop shot >= 1120 px fills the column again. ---- */
.gp-v2 .gp-tile {
  position: relative; overflow: hidden; width: 100%; max-width: var(--gp-tile-max); margin: 0;
  aspect-ratio: 4 / 3; border-radius: var(--gp-radius-tile); background: var(--well);
}
@media (min-width: 768px) { .gp-v2 .gp-tile { aspect-ratio: 1; } }
.gp-v2 .gp-block .split:not(.split--reverse) .gp-tile, .gp-v2 .tabs .gp-tile { margin-inline: auto 0; }
.gp-v2 .gp-block .split--reverse .gp-tile { margin-inline: 0 auto; }
.gp-v2 .gp-tile .gp-tile__img { border-radius: 0; box-shadow: none; }
.gp-v2 .gp-tile .gp-shot { border-radius: var(--gp-radius-tile-inner-screenshot); border: var(--gp-rule);
  box-shadow: var(--gp-shadow-screenshot); background: var(--gp-page); }
.gp-v2 .gp-tile--tilt .gp-tile__img {
  position: absolute; left: var(--gp-tile-x); top: var(--gp-tile-y);
  width: var(--gp-tile-scale); max-width: none; height: auto;
  transform: rotate(var(--gp-tile-rotate)); transform-origin: 0 0;
}
.gp-v2 .gp-tile--flat { display: grid; place-items: center; width: fit-content; padding: 20px; aspect-ratio: auto; }
.gp-v2 .gp-tile--flat .gp-tile__img { width: auto; max-width: 100%; height: auto; }
.gp-v2 .gp-tile .gp-tile__img--blend { mix-blend-mode: multiply; }  /* stand-in illustrations on white */
@media (min-width: 768px) { .gp-v2 .gp-tile--flat { padding: var(--gp-tile-flat-pad); } }
.gp-v2 .gp-tile--photo .gp-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* icon tile (YAML `icon` on a row, polish B, QA P2-4): a spot-96 drawing in navy lines + cobalt accents on the accent
   tint, a compact square well (no clip-art, no green); decorative */
.gp-v2 .gp-tile--icon { display: grid; place-items: center; width: min(100%, 400px); aspect-ratio: 1; padding: 40px;
  background: var(--gp-accent-tint); color: var(--gp-heading); --icon-line: var(--gp-heading);
  --icon-accent: var(--gp-icon-stroke); --icon-accent-fill: var(--gp-icon-fill); --icon-surface: var(--gp-accent-tint); }
.gp-v2 .gp-tile--icon .gp-tile__icon { width: 100%; height: auto; max-width: 240px; aspect-ratio: 1; }
.gp-v2 .gp-block .split .gp-tile.gp-tile--icon { margin-inline: auto; }   /* centred in its column (beats the 0,5,0 edge alignment) */
/* video tile (YAML `video` on a row, 2026-10-27): the clip fills the tile at its own aspect, up to the 560 column, with
   the tile radius. The lazy poster <img> is in flow (its width/height = the size before anything loads), the <video>
   (and, without JS, the <noscript> one with the native controls) lies over it; the pause/play button is the looping
   tile's (.video-tile__toggle, gp-pages.css). clip, never hidden */
.gp-v2 .gp-tile--video { aspect-ratio: auto; overflow: clip; background: var(--gp-stone); }
.gp-v2 .gp-tile--video .gp-tile__poster { display: block; width: 100%; height: auto; border-radius: inherit; }
.gp-v2 .gp-tile--video .gp-tile__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
html:not(.js) .gp-v2 .gp-tile--video .gp-tile__video[data-autoplay] { display: none; }   /* no JS: the <noscript> video plays */
@media (max-width: 767px) {   /* phones: the fitted wells sit centred under the text */
  .gp-v2 .gp-tile--icon { width: min(100%, 240px); }
  .gp-v2 .gp-tile.gp-tile--flat, .gp-v2 .tabs .gp-tile.gp-tile--flat, .gp-v2 .gp-block .split .gp-tile.gp-tile--flat { margin-inline: auto; }
}

/* ---- tabs (home "Hjælp til at vinde kampen"): chips + a split panel with a flat tile ---- */
.gp-v2 .tabs .tabs__list { gap: var(--gp-chip-gap); border: 0; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto;
  margin: 0 calc(-1 * var(--gutter)) 32px; padding: 4px var(--gutter) 8px; }
.gp-v2 .tabs .tabs__tab.gp-chip {
  margin: 0; padding: 0 var(--gp-chip-px); min-height: var(--gp-chip-h);
  background: var(--well); border: var(--gp-border); border-radius: var(--gp-radius-chip);
  color: var(--gp-heading); font-size: var(--gp-fs-chip); line-height: var(--gp-lh-chip); font-weight: var(--gp-fw-chip);
  font-family: inherit; cursor: pointer;
}
.gp-v2 .tabs .tabs__tab.gp-chip:hover { border-color: var(--gp-action); background: var(--well); color: var(--gp-heading); }
.gp-v2 .tabs .tabs__tab.gp-chip[aria-selected="true"] { background: var(--gp-accent-tint); border-color: var(--gp-action);
  color: var(--gp-accent-text); }
.gp-v2 .tabs__panel[hidden] { display: none; }
.gp-v2 .gp-tabs__title { margin: 0; font-size: 26px; line-height: 32px; letter-spacing: -.015em; }
@media (min-width: 768px) {
  .gp-v2 .tabs .tabs__list { flex-wrap: wrap; justify-content: center; overflow: visible; margin: 0 0 var(--gp-intro-gap); padding: 0; }
  .gp-v2 .tabs .split { gap: 48px; }
}
@media (min-width: 992px) { .gp-v2 .tabs .split__content { max-width: var(--gp-block-text); justify-self: end; } }

/* ---- integrations (outline tray, text 5 / image 7) ---- */
.gp-v2 .home-integrations .split__media--plain img { width: 100%; max-width: 640px; height: auto; margin-inline: auto; }
@media (min-width: 992px) {
  .gp-v2 .home-integrations .split--5-7 { grid-template-columns: 5fr 7fr; }
  .gp-v2 .home-integrations .split__content { padding-left: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .gp-v2 .gp-tile--tilt .gp-tile__img { transition: none; }
}

/* ---- video facade inside a feature block (stage 3), the funktioner jump chips ---- */
.gp-v2 .gp-video { width: 100%; max-width: var(--gp-tile-max); }   /* the facade has no intrinsic width (v1 media column is a centring grid) */
.gp-v2 .gp-block .split:not(.split--reverse) .gp-video { margin-inline: auto 0; }
.gp-v2 .gp-block .split--reverse .gp-video { margin-inline: 0 auto; }
.gp-v2 .gp-video .video { width: 100%; margin: 0; overflow: hidden; border-radius: var(--gp-radius-tile); }
.gp-v2 .gp-video .video__link, .gp-v2 .gp-video .video__frame { border-radius: var(--gp-radius-tile); box-shadow: none; }
.gp-v2 .video__play { background: var(--gp-action); box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 8px 24px rgba(5, 38, 76, .3); }
.gp-v2 .video__play::after { border-color: transparent transparent transparent var(--gp-action-text); }
.gp-v2 .video__link:hover .video__play, .gp-v2 .video__link:focus-visible .video__play { background: var(--gp-action-hover); }
.gp-v2 .gp-compare__jump { margin-bottom: 32px; }
@media (max-width: 767px) {
  .gp-v2 .gp-compare__jump { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; }
}