/* ==========================================================================================================
   Design v2 page parts shared by the templates of stages 3 (remainder) to 5. Kit source: design/redesign/kit/css/
   gp-pages.css -> static/css/gp-pages.css (ADDED in stage 3m), linked by pages/_marketing_base.html (kit
   .../stage3-more/pages/_marketing_base.html and later) after gp-pricing.css. Scoped to body.gp-v2 like gp-sections:
   unconverted pages keep their v1 look. Palette v1-mb roles only; mobile first (768 / 992 / 1200).
   Contents: 1 lead + v2 prose (marketing and legal text: 17/28, h2 26 with a 2 px line, navy step discs, framed
   images, code chips) · 2 steps (partials/steps.html) · 3 callout · 4 video facade + the looping video tile ·
   5 framed iframe (gp-frame) · 6 link list (gp-linklist) · 7 the 5/7 split · 8 text layout (prose 720 + a sticky
   aside card: the legal pages) · 9 the plain hero's left variant extras.
   ========================================================================================================== */

/* ---- 1. lead, prose ------------------------------------------------------------------------------------- */
.gp-v2 .gp-lead { max-width: var(--gp-prose); margin-inline: auto; color: var(--gp-ink); font-size: var(--gp-fs-lead); line-height: var(--gp-lh-lead); }
.gp-v2 .gp-lead > * + * { margin-top: 1em; }

.gp-v2 .prose { max-width: var(--gp-prose); color: var(--gp-ink); font-size: var(--gp-fs-prose-article); line-height: var(--gp-lh-prose-article);
  overflow-wrap: break-word; }
.gp-v2 .prose > * + * { margin-top: 1.1em; }
.gp-v2 .prose :is(p, ul, ol) { margin-bottom: 0; }
.gp-v2 .prose h2 { margin: 2em 0 0; padding-top: 1em; border-top: 2px solid var(--gp-hairline); color: var(--gp-heading);
  font-size: var(--gp-fs-prose-h2); line-height: var(--gp-lh-prose-h2); font-weight: 600; letter-spacing: -.015em; }
.gp-v2 .prose h3 { margin: 1.8em 0 0; color: var(--gp-heading); font-size: var(--gp-fs-prose-h3); line-height: var(--gp-lh-prose-h3); font-weight: 600; }
.gp-v2 .prose h4 { margin: 1.6em 0 0; color: var(--gp-heading); font-size: 17px; line-height: 24px; font-weight: 600; }
.gp-v2 .prose :is(h2, h3, h4) + * { margin-top: .7em; }
.gp-v2 .prose > :is(h2, h3):first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.gp-v2 .prose a { color: var(--gp-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.gp-v2 .prose a:hover { color: var(--gp-link-hover); text-decoration-thickness: 2px; }
.gp-v2 .prose strong { color: var(--gp-heading); font-weight: 600; }
.gp-v2 .prose ul { padding-left: 1.3em; }
.gp-v2 .prose ul > li::marker { color: var(--gp-action); }
.gp-v2 .prose li + li { margin-top: .45em; }
.gp-v2 .prose li > :is(p, ul, ol) + * { margin-top: .7em; }
/* ordered lists: navy discs (white 15.13) with the number, the <ol> stays semantic */
.gp-v2 .prose > ol { list-style: none; padding-left: 0; counter-reset: gp-step; }
.gp-v2 .prose > ol > li { position: relative; counter-increment: gp-step; min-height: 32px; padding-left: 48px; }
.gp-v2 .prose > ol > li + li { margin-top: 18px; }
.gp-v2 .prose > ol > li::before {
  content: counter(gp-step); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--gp-heading); color: var(--gp-on-dark); font: 600 14px/32px var(--gp-font-sans); text-align: center; font-variant-numeric: tabular-nums;
}
.gp-v2 .prose img { max-width: 100%; height: auto; margin: 12px 0 0; border: 1px solid var(--gp-hairline); border-radius: var(--gp-radius-tile-inner-screenshot);
  box-shadow: var(--gp-shadow-screenshot); background: var(--gp-page); }
.gp-v2 .prose p > img:only-child { margin-top: 4px; }
.gp-v2 .prose code { padding: .1em .42em; border: 1px solid var(--gp-hairline); border-radius: 6px; background: var(--gp-stone);
  color: var(--gp-heading); font-family: var(--gp-font-mono); font-size: .86em; }
.gp-v2 .prose pre { padding: 18px 20px; border: 2px solid var(--gp-hairline); border-radius: 16px; background: var(--gp-wash);
  color: var(--gp-ink); font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.gp-v2 .prose pre code { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; }
.gp-v2 .prose blockquote { margin: 1.4em 0 0; padding: 16px 20px; border: 0; border-radius: 16px; background: var(--gp-stone); color: var(--gp-ink); }
.gp-v2 .prose .table-wrap { margin-top: 1.4em; overflow-x: auto; border: 2px solid var(--gp-hairline); border-radius: 16px; }
.gp-v2 .prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.gp-v2 .prose :is(th, td) { padding: 10px 14px; border-bottom: 1px solid var(--gp-hairline); text-align: left; vertical-align: top; }
.gp-v2 .prose th { background: var(--gp-stone); color: var(--gp-heading); font-weight: 600; }
.gp-v2 .prose tr:last-child > td { border-bottom: 0; }
.gp-v2 .prose hr { margin: 2em 0; border: 0; border-top: 2px solid var(--gp-hairline); }
.gp-v2 .prose--legal { max-width: var(--gp-prose); }
.gp-v2 .prose--legal h2 { font-size: var(--gp-fs-prose-h2); }

/* ---- 2. steps (partials/steps.html): navy discs joined by a 2 px line --------------------------------------- */
.gp-v2 .steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.gp-v2 .steps > li { position: relative; min-height: 40px; padding: 0 0 22px 56px; counter-increment: step; }
.gp-v2 .steps > li:last-child { padding-bottom: 0; }
.gp-v2 .steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  background: var(--gp-heading); color: var(--gp-on-dark); font: 600 15px/36px var(--gp-font-sans); text-align: center; font-variant-numeric: tabular-nums;
}
.gp-v2 .steps > li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 42px; bottom: 6px; width: 2px; border-radius: 1px; background: var(--gp-hairline); }
.gp-v2 .steps__title { display: block; margin: 6px 0 0; color: var(--gp-heading); font-size: 17px; line-height: 24px; font-weight: 600; }
.gp-v2 .steps__text { margin-top: 4px; color: var(--gp-ink); font-size: 15px; line-height: 22px; }

/* ---- 3. callout (standalone; the Markdown callouts of articles are in pages/support.css) ------------------- */
.gp-v2 .callout { padding: 16px 20px; border: 0; border-radius: 16px; background: var(--gp-accent-tint); color: var(--gp-ink); font-size: 15px; line-height: 23px; }
.gp-v2 .callout > * + * { margin-top: .5em; }
.gp-v2 .callout a { color: var(--gp-accent-text); font-weight: 600; }

/* ---- 4. video facade (web/videos.py) and the looping video tile (partials/video_tile.html) ----------------- */
.gp-v2 .video { margin: 0; }
.gp-v2 .video__link, .gp-v2 .video__frame { border-radius: var(--gp-radius-tile); box-shadow: none; background: var(--gp-heading); }
/* the play disc sits lower left beside the title, 56 px (QA P3-6): it no longer covers a poster's own title */
.gp-v2 .video__play { left: 16px; top: auto; bottom: 16px; width: 56px; height: 56px; margin: 0; z-index: 1; background: var(--gp-action);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 6px 18px rgba(5, 38, 76, .35); }
.gp-v2 .video__play::after { left: 22px; top: 17px; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent var(--gp-on-dark); }
.gp-v2 .video__link:hover .video__play, .gp-v2 .video__link:focus-visible .video__play { background: var(--gp-action-hover); transform: scale(1.05); }
.gp-v2 .video__link:focus-visible { outline: 2px solid var(--gp-focus); outline-offset: 3px; }
.gp-v2 .video__meta { min-height: 120px; align-items: center; padding: 48px 20px 16px 88px; background: linear-gradient(rgba(5, 38, 76, 0), rgba(5, 38, 76, .8) 44px, rgba(5, 38, 76, .9)); color: var(--gp-on-dark); }  /* QA P1-1: dense from the text line (white ≥ 4.5 on any thumbnail) */
.gp-v2 .video__duration { border-radius: 6px; background: rgba(5, 38, 76, .8); }
.gp-v2 .video__caption { margin-top: 10px; color: var(--gp-muted); font-size: 14px; line-height: 20px; }
.gp-v2 .video-tile { border-radius: var(--gp-radius-tile); box-shadow: none; background-color: var(--gp-stone); }
/* the pause button sits lower LEFT like the facade's play disc (2026-10-28): the lower-right corner of the viewport is the
   chat button's (gp-chat.css), and on phones a tile's right edge scrolls past it */
.gp-v2 .video-tile__toggle { left: 12px; right: auto; bottom: 12px; width: 40px; height: 40px; background: rgba(5, 38, 76, .78); color: var(--gp-on-dark); }
.gp-v2 .video-tile__toggle:hover { background: var(--gp-heading); }
.gp-v2 .video-tile__toggle:focus-visible { outline: 2px solid var(--gp-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .gp-v2 .video__link:hover .video__play { transform: none; } }

/* ---- 5. a third-party frame in a white card (domain search) ----------------------------------------------- */
.gp-v2 .gp-frame { overflow: clip; border: var(--gp-border); border-radius: var(--gp-radius-card); background: var(--gp-page); box-shadow: none; }
.gp-v2 .gp-frame iframe { display: block; width: 100%; border: 0; }

/* ---- 6. link list (a block's "more" links: two columns of rows with arrows) ---------------------------------- */
.gp-v2 .gp-linklist { margin-top: 48px; }
.gp-v2 .gp-linklist__title { margin: 0 0 12px; color: var(--gp-heading); font-size: 20px; line-height: 26px; font-weight: 600; }
.gp-v2 .gp-linklist__list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; margin: 0; padding: 0; list-style: none;
  border-top: 2px solid var(--gp-hairline); }
.gp-v2 .gp-linklist__list > li { border-bottom: 2px solid var(--gp-hairline); }
.gp-v2 .gp-linklist__link { position: relative; display: block; padding: 14px 32px 14px 0; color: var(--gp-heading); font-weight: 500; text-decoration: none; }
.gp-v2 .gp-linklist__link::after { content: "\2192"; position: absolute; right: 4px; top: 14px; color: var(--gp-action); transition: right var(--gp-dur-arrow) var(--gp-ease); }
.gp-v2 .gp-linklist__link:hover { color: var(--gp-link); text-decoration: underline; text-decoration-thickness: 1px; }
.gp-v2 .gp-linklist__link:hover::after { right: 0; }
@media (min-width: 768px) {
  .gp-v2 .gp-linklist__list { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; }
  .gp-v2 .gp-linklist__list > li:nth-child(-n + 2) { border-top: 2px solid var(--gp-hairline); }
}
@media (prefers-reduced-motion: reduce) { .gp-v2 .gp-linklist__link::after { transition: none; } }

/* ---- 7. split 5/7 (text 5, media 7) ------------------------------------------------------------------------ */
@media (min-width: 992px) {
  .gp-v2 .gp-split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gp-block-gap); }
  .gp-v2 .gp-split--5-7 > .split__media { order: 0; }
}

/* ---- 8. text layout: prose 720 + an aside card (sticky from 992) -------------------------------------------- */
.gp-v2 .text-page-section.section { padding-top: 48px; }
.gp-v2 .text-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
.gp-v2 .text-layout--single { grid-template-columns: minmax(0, 1fr); }
.gp-v2 .text-layout__aside .card { padding: 24px; border: 0; border-radius: var(--gp-radius-card); background: var(--gp-accent-tint); }
.gp-v2 .text-layout__aside .gp-aside__title { margin: 0 0 8px; color: var(--gp-heading); font-size: 18px; line-height: 24px; font-weight: 600; }
.gp-v2 .text-layout__aside .gp-aside__text { color: var(--gp-ink); font-size: 15px; line-height: 23px; }
/* the legal pages' titles carry long Danish compounds ("persondataforordning" overflowed 360 by 10 px, stage 5):
   hyphenate (lang="da"), and break inside the word where the browser has no dictionary */
.gp-v2:is(.page-betingelser, .page-persondatapolitik, .page-gdpr) .hero__title { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.gp-v2 .text-layout__aside .gp-aside__text a { color: var(--gp-accent-text); }
.gp-v2 .text-layout__aside .gp-actions { margin-top: 16px; }
@media (min-width: 992px) {
  .gp-v2 .text-layout { grid-template-columns: minmax(0, var(--gp-prose)) minmax(0, 340px); justify-content: space-between; gap: 64px; }
  .gp-v2 .text-layout--single { grid-template-columns: minmax(0, var(--gp-prose)); justify-content: start; }
  .gp-v2 .text-layout__aside { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* ---- 9. plain hero, left: the text column a little narrower than the centred one ------------------------- */
.gp-v2 .hero--plain.hero--left .hero__text { max-width: 720px; }
.gp-v2 .hero--plain .hero__text > * + * { margin-top: .8em; }