/* ==========================================================================================================
   Design v2 form pages (stage 4b): the layout of pages/_form_page.html (ring_mig_op, gratis_webshop_demo, demo2,
   opgradere_til_pro, the five bestilling_* order pages) and pages/_message_page.html (gratis_demo_pa_vej,
   gratis_demo_check_e_mail_adressen). Kit source design/redesign/kit/css/gp-forms.css -> static/css/gp-forms.css
   (ADDED), linked by pages/_marketing_base.html (kit .../stage4b/) after gp-pages.css; scoped to body.gp-v2.
   The fields themselves: forms.css. Spec §6.9.
   ========================================================================================================== */

/* ---- form page: form card 7/12 + a sticky aside 5/12; phones: the form first ---- */
.gp-v2 .form-page.section { padding-top: 8px; }
.gp-v2 .form-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.gp-v2 .form-layout--single { max-width: 760px; }
@media (min-width: 992px) {
  .gp-v2 .form-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; }
  .gp-v2 .form-layout--single { grid-template-columns: minmax(0, 1fr); }
  .gp-v2 .form-layout__aside { position: sticky; top: calc(var(--header-h) + 24px); }
}
.gp-v2 .form-card { display: block; padding: 24px 20px; border: var(--gp-border); border-radius: var(--gp-radius-card); background: var(--gp-page); box-shadow: none; }
@media (min-width: 768px) { .gp-v2 .form-card { padding: 40px; } }
.gp-v2 .form-card .form-wrap { margin: 0; }
.gp-v2 .form-card__intro { margin-bottom: 24px; color: var(--gp-ink); }
.gp-v2 .form-card__intro > * + * { margin-top: .8em; }
.gp-v2 .form-layout__aside { display: grid; gap: 16px; }

/* the plan summary: an accent-tint card (Moneybird's featured plan in miniature) */
.gp-v2 .summary-card { display: block; padding: 28px; border: 0; border-radius: var(--gp-radius-card); background: var(--gp-accent-tint); }
.gp-v2 .summary-card__label { margin: 0 0 8px; color: var(--gp-accent-text); font-size: 14px; line-height: 20px; font-weight: 600; }
.gp-v2 .summary-card__name { margin: 0; color: var(--gp-heading); font-size: var(--gp-fs-plan-name); line-height: var(--gp-lh-plan-name); letter-spacing: var(--gp-ls-plan-name); font-weight: 600; }
.gp-v2 .summary-card__price { margin: 16px 0 0; color: var(--gp-heading); font-size: var(--gp-fs-plan-price); line-height: var(--gp-lh-plan-price);
  font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.gp-v2 .summary-card__period { margin: 0; color: var(--gp-muted); font-size: 15px; font-weight: 500; letter-spacing: 0; }
.gp-v2 .summary-card__text { margin: 12px 0 0; color: var(--gp-ink); font-size: 15px; line-height: 22px; }
.gp-v2 .summary-card__features { margin-top: 16px; font-size: 15px; line-height: 22px; }
.gp-v2 .summary-card__lead { margin: 16px 0 0; color: var(--gp-heading); font-size: 15px; line-height: 22px; font-weight: 600; }
.gp-v2 .summary-card__lead + .summary-card__features { margin-top: 8px; }
.gp-v2 .summary-card__note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(5, 38, 76, .12); color: var(--gp-accent-text); font-size: 14px; line-height: 20px; }

/* the aside card: accent tint with the image (demo), stone as a note beside the plan (order pages) */
.gp-v2 .form-aside { display: block; padding: 28px; border: 0; border-radius: var(--gp-radius-card); background: var(--gp-accent-tint); }
.gp-v2 .form-aside--note { background: var(--gp-stone); }
.gp-v2 .form-aside__img { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 4 / 3; margin: 0 0 20px; object-fit: cover; border-radius: 16px; }
.gp-v2 .form-aside--image { padding: 12px 12px 24px; }
.gp-v2 .form-aside--image > :not(.form-aside__img) { margin-inline: 12px; }
.gp-v2 .form-aside__title { margin: 0 0 8px; color: var(--gp-heading); font-size: 20px; line-height: 26px; font-weight: 600; }
.gp-v2 .form-aside__text { color: var(--gp-ink); font-size: 15px; line-height: 23px; }
.gp-v2 .form-aside__text > * + * { margin-top: .8em; }
.gp-v2 .form-aside__text a { color: var(--gp-link); }
.gp-v2 .form-aside .check-list { font-size: 15px; line-height: 23px; }
.gp-v2 .form-aside__text + .check-list { margin-top: 16px; }
.gp-v2 .form-aside__features { display: grid; gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; }
.gp-v2 .form-aside__feature { margin: 0; color: var(--gp-heading); font-size: 16px; line-height: 22px; font-weight: 600; }
.gp-v2 .form-aside__feature-text { margin: 2px 0 0; color: var(--gp-muted); font-size: 14px; line-height: 20px; }
.gp-v2 .form-aside__note { margin-top: 16px; color: var(--gp-muted); font-size: 14px; line-height: 20px; }

/* ---- message page (thank-you): a stone tray from y = 0 with an envelope disc, centred ---- */
.gp-v2 .gp-message.hero--plain {
  display: flex; align-items: center; min-height: min(72vh, 680px); margin-inline: 0;
  border-radius: 0 0 var(--gp-radius-tray) var(--gp-radius-tray); background: var(--gp-stone);
}
.gp-v2 .gp-message > .container { width: 100%; }
@media (min-width: 768px) {
  .gp-v2 .gp-message.hero--plain { margin-inline: max(var(--gp-tray-inset), (100% - var(--gp-tray-max)) / 2); }
  .gp-v2 .gp-message > .container { --gutter: var(--gp-tray-pad-x); }
}
.gp-v2 .gp-message .hero__content { max-width: 720px; }
.gp-v2 .gp-message .hero__text { max-width: 620px; }
.gp-v2 .gp-message .hero__text > * + * { margin-top: .8em; }
.gp-v2 .gp-message__icon {
  display: grid; place-items: center; width: 64px; height: 64px; margin: 0 0 24px; border-radius: 50%;
  background: var(--gp-page); box-shadow: 0 0 0 8px rgba(5, 38, 76, .04); --icon-surface: var(--gp-page);
}
.gp-v2 .gp-message__icon .icon { width: 34px; height: 34px; }
@media (min-width: 768px) { .gp-v2 .gp-message__icon { margin-inline: auto; } }
: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"); }