/**
 * PM Engine page foundation styles.
 * 
 * Shared tokens, layout, and visual primitives for all PM Engine pages
 * (landing page and feature pages).
 *
 * @format
 */

/* ── Tokens ───────────────────────────────────────────────────────── */

/*
 * PM Engine page-family breakpoint contract:
 * Bootstrap 4-aligned through xl, plus a local xxl extension at 1400px:
 * sm: 576px
 * md: 768px
 * lg: 992px
 * xl: 1200px
 * xxl: 1400px
 *
 * Use Bootstrap-aligned names and literal values in media queries:
 * below md:  max-width: 767.98px
 * below lg:  max-width: 991.98px
 * below xl:  max-width: 1199.98px
 * below xxl: max-width: 1399.98px
 * xxl+:      min-width: 1400px
 */

.pme-page {
  /* PM Engine colors and spacing */
  --pme-page-accent-dark: var(--pme-color-brand-dark);
  --pme-page-accent: var(--pme-color-brand);
  --pme-page-border-blue: #cfe8f7;
  --pme-page-border-light: var(--pme-color-border-light);
  --pme-page-border-strong: #d4e0e6;
  --pme-page-border: var(--pme-color-border);
  --pme-page-btn-label-size: var(--pme-page-text-base);
  --pme-page-card-shadow: var(--pme-shadow-card);
  --pme-page-cta-shadow: var(--pme-shadow-cta);
  --pme-page-heading-1: var(--pme-font-size-heading-1);
  --pme-page-heading-2: var(--pme-font-size-heading-2);
  --pme-page-heading-color: var(--pme-color-heading);
  --pme-page-key-border-strong: #c7d1d8;
  --pme-page-key-border: #d9e1e5;
  --pme-page-label-tracking: 0.16em;
  --pme-page-label-weight: 700;
  --pme-page-muted: var(--pme-color-muted);
  --pme-page-muted-2: var(--pme-color-muted-2);
  --pme-page-pill-border: #cfe8f7;
  --pme-page-shadow: var(--pme-shadow-page);
  --pme-page-soft-blue: var(--pme-color-soft-blue);
  --pme-page-soft: var(--pme-color-grey-light);
  --pme-page-space-1: var(--pme-space-1);
  --pme-page-space-2: var(--pme-space-2);
  --pme-page-space-3: var(--pme-space-3);
  --pme-page-space-4: var(--pme-space-4);
  --pme-page-space-5: var(--pme-space-5);
  --pme-page-space-6: var(--pme-space-6);
  --pme-page-space-7: var(--pme-space-7);
  --pme-page-space-8: var(--pme-space-8);
  --pme-page-surface-blue: var(--pme-color-surface-blue);
  --pme-page-surface-gradient-start: #fbfdff;
  --pme-page-surface: var(--pme-color-surface);

  --pme-page-text-base: var(--pme-font-size-base);
  --pme-page-text-color: var(--pme-color-text);
  --pme-page-text-lg: var(--pme-font-size-lg);
  --pme-page-text-md: var(--pme-font-size-md);
  --pme-page-text-sm: var(--pme-font-size-sm);
  --pme-page-text-xl: var(--pme-font-size-xl);
  --pme-page-text-xs: var(--pme-font-size-xs);

  /* Transaction blocks: final download and pricing order rows */
  --pme-page-transaction-bg: var(--pme-page-surface);
  --pme-page-transaction-bg-tinted: var(--pme-page-surface-blue);
  --pme-page-transaction-border: var(--pme-page-border);
  --pme-page-transaction-border-tinted: var(--pme-page-border-blue);
  --pme-page-transaction-copy-color: var(--pme-page-muted);
  --pme-page-transaction-copy-line-height: 1.55;
  --pme-page-transaction-copy-size: var(--pme-page-text-sm);
  --pme-page-transaction-gap: var(--pme-page-space-7);
  --pme-page-transaction-min-height: 118px;
  --pme-page-transaction-min-height-tinted: 132px;
  --pme-page-transaction-padding-x: var(--pme-page-space-6);
  --pme-page-transaction-padding-y: var(--pme-page-space-5);
  --pme-page-transaction-radius: var(--pme-radius-lg);
  --pme-page-transaction-shadow: var(--pme-page-card-shadow);
  --pme-page-transaction-title-color: var(--pme-page-heading-color);
  --pme-page-transaction-title-line-height: 1.2;
  --pme-page-transaction-title-size: var(--pme-page-text-base);
  --pme-page-transaction-title-weight: 700;
  --pme-page-transaction-button-width: 220px;
  --pme-page-transaction-button-width-tinted: 254px;
  --pme-page-transaction-button-min-height: 46px;
  --pme-page-transaction-button-min-height-tinted: 56px;

  /* Backward compatibility alias. Prefer --pme-page-text-base for new consumers. */
  --pme-page-feature-copy-size: var(--pme-page-text-base);
  --pme-page-feature-copy-line-height: 1.6;
  --pme-feature-elevation-shadow: var(--pme-shadow-page);

  /* Hero defaults */
  --pme-page-hero-padding-top: 104px;
  --pme-page-hero-padding-bottom: 64px;
  --pme-page-hero-cta-gap: var(--pme-page-space-2);

  /* Container */
  --pme-page-gutter: 28px;
  --pme-page-max-width: 1180px;
}

.pme-page {
  color: var(--pme-page-text-color);
  display: flow-root;
  font-family: var(--pme-font-family-body);
  font-size: var(--pme-font-size-body);
  line-height: 1.6;
}

/* ── Container ────────────────────────────────────────────────────── */

.pme-page__container {
  width: 100%;
  max-width: var(--pme-page-max-width);
  margin-inline: auto;
  margin-bottom: var(--pme-page-space-7);
  padding-inline: var(--pme-page-gutter);
}

.pme-page__content-width {
  width: 100%;
  max-width: var(--pme-page-content-max-width, 780px);
  margin-inline: auto;
}

.pme-page__content-width--sm {
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
}

.pme-page__content-width--md {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
}

.pme-page__content-width--lg {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
}

/* Preserve max-width for embedded partials that still use Bootstrap .container */
.pme-page .container {
  max-width: var(--pme-page-max-width);
  margin: var(--pme-page-space-7) auto;
}

/* ── Hero ─────────────────────────────────────────────────────────── */

.pme-page__hero {
  position: relative;
  overflow: hidden;
  padding: var(--pme-page-hero-padding-top) 0
    var(--pme-page-hero-padding-bottom);
  text-align: center;
  border-bottom: 1px solid var(--pme-page-border-light);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 142, 229, 0.08), transparent 50%),
    linear-gradient(
      180deg,
      rgba(0, 142, 229, 0.05) 0%,
      var(--pme-page-surface) 100%
    );
}

.pme-page__hero .pme-page__container {
  position: relative;
  z-index: 1;
}

.pme-page__hero h1 {
  margin-bottom: var(--pme-page-space-4);
  font-family: var(--pme-font-family-heading);
  font-size: var(--pme-page-heading-1);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--pme-page-heading-color);
}

.pme-page__hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--pme-page-hero-cta-gap);
}

.pme-page__hero-illustration {
  margin: 2.5em auto 0;
  max-width: 1000px;
}

.pme-page__hero-illustration img {
  display: block;
  width: 100%;
  height: auto;
}

.pme-page__hero-note {
  color: var(--pme-page-muted);
  font-size: var(--pme-page-text-sm);
  text-wrap: balance;
}

/* ── PM Engine button ────────────────────────────────────────────── */

.pme-btn,
.pme-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pme-page-space-1);
  margin: 0;
  padding: 13px var(--pme-page-space-5);
  border: 1px solid transparent;
  border-radius: var(--pme-radius-md);
  color: var(--pme-page-heading-color);
  background: transparent;
  font-family: var(--pme-font-family-body);
  font-size: var(--pme-page-btn-label-size);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  text-shadow: none;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.pme-btn .bi {
  margin-right: 0;
  font-size: var(--pme-page-btn-label-size);
  line-height: 1;
}

.pme-btn:hover,
.pme-btn:focus {
  box-shadow: var(--pme-page-cta-shadow);
  text-decoration: none;
  transform: translateY(-1px);
}

.pme-btn--primary,
.pme-btn--primary:visited {
  border-color: var(--pme-page-accent);
  background: var(--pme-page-accent);
  color: #fff;
}

.pme-btn--primary:hover,
.pme-btn--primary:focus {
  border-color: var(--pme-color-button-hover);
  background: var(--pme-color-button-hover);
  color: #fff;
}

.pme-btn--outline,
.pme-btn--outline:visited {
  border-color: var(--pme-page-border);
  background: #fff;
  color: #36424a;
}

.pme-btn--outline:hover,
.pme-btn--outline:focus {
  border-color: var(--pme-color-button-hover);
  background: var(--pme-page-soft);
  color: var(--pme-color-button-hover);
}

/* ── Label (pill badge) ───────────────────────────────────────────── */

.pme-page__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pme-page-space-1);
  padding: var(--pme-page-space-1) var(--pme-page-space-3);
  margin-bottom: var(--pme-page-space-3);
  border: 1px solid var(--pme-page-pill-border);
  border-radius: var(--pme-radius-sm);
  background: var(--pme-page-soft-blue);
  color: var(--pme-page-accent);
  font-family: var(--pme-font-family-mono);
  font-size: var(--pme-page-text-xs);
  font-weight: var(--pme-page-label-weight);
  letter-spacing: var(--pme-page-label-tracking);
  text-transform: uppercase;
  line-height: 1;
}

.pme-page__label--inverse {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* ── Typography ───────────────────────────────────────────────────── */

:where(.pme-page) p {
  color: var(--pme-page-muted);
  font-size: var(--pme-page-text-base);
  line-height: 1.6;
}

.pme-page h2 {
  margin-bottom: var(--pme-page-space-4);
  color: var(--pme-page-heading-color);
  font-family: var(--pme-font-family-heading);
  font-size: var(--pme-page-heading-2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}

/* ── CTA section ──────────────────────────────────────────────────── */

.pme-page__cta {
  text-align: center;
  padding: 3em 0 4em;
  border-top: 1px solid var(--pme-page-border);
}

.pme-page__cta p {
  margin-bottom: var(--pme-page-space-5);
  color: var(--pme-page-muted);
}

/* ── Responsive ───────────────────────────────────────────────────── */

/* below lg */
@media (max-width: 991.98px) {
  .pme-page {
    --pme-page-heading-1: 48px;
    --pme-page-heading-2: 34px;
  }
}

/* below md */
@media (max-width: 767.98px) {
  .pme-page {
    --pme-page-hero-padding-top: 64px;
    --pme-page-hero-padding-bottom: 48px;
    --pme-page-gutter: 20px;
    --pme-page-heading-1: 38px;
    --pme-page-heading-2: 30px;
    --pme-page-text-lg: 17px;
    --pme-page-text-md: 15px;
    --pme-page-text-xl: 20px;
  }
}