/**
 * Yournotify visual system layer.
 *
 * This file is deliberately loaded after the legacy design stylesheet. It
 * standardises native Total/WPBakery components by page family while leaving
 * the approved homepage and About page untouched.
 */

:root {
  --yn-system-container: 1280px;
  --yn-system-gutter: clamp(22px, 4vw, 48px);
  --yn-system-section-y: clamp(72px, 8vw, 112px);
  --yn-system-grid-gap: clamp(20px, 2.2vw, 30px);
  --yn-system-card-pad: clamp(26px, 3vw, 38px);
  --yn-system-radius: 8px;
  --yn-system-border: rgba(71, 55, 0, .12);
  --yn-system-ink: #473700;
  --yn-system-muted: #766a43;
  --yn-system-yellow: #ffc600;
  --yn-system-purple: #7024ff;
  --yn-system-surface: #f6f5f7;
  --yn-system-white: #fff;
}

body.yn-wpbakery-site:not(.yn-design-reference) main .container {
  width: min(100% - (2 * var(--yn-system-gutter)), var(--yn-system-container));
  max-width: var(--yn-system-container);
  margin-inline: auto;
  padding-inline: 0;
}

body.yn-wpbakery-site:not(.yn-design-reference) main .yn-section-full-width {
  padding-block: var(--yn-system-section-y);
}

body.yn-wpbakery-site:not(.yn-design-reference) main .yn-section-title {
  max-width: 820px;
  margin-top: 0;
  color: var(--yn-system-ink);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.025em;
}

body.yn-wpbakery-site:not(.yn-design-reference) main .yn-section-lead,
body.yn-wpbakery-site:not(.yn-design-reference) main .lead {
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.65;
}

body.yn-wpbakery-site:not(.yn-design-reference) main :is(
  .yn-product-hero,
  .yn-company-hero,
  .yn-detail-hero,
  .yn-comparison-hero,
  .yn-integration-detail-hero
) {
  min-height: 540px;
  padding-block: clamp(78px, 9vw, 124px) !important;
}

body.yn-wpbakery-site:not(.yn-design-reference) main :is(
  .yn-product-hero,
  .yn-company-hero,
  .yn-detail-hero,
  .yn-comparison-hero,
  .yn-integration-detail-hero
) h1 {
  max-width: 800px;
  margin-top: 0;
  color: var(--yn-system-white) !important;
  font-size: clamp(48px, 6vw, 82px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.035em;
}

body.yn-wpbakery-site:not(.yn-design-reference) main :is(
  .yn-company-hero-panel,
  .yn-integration-hero-panel
) {
  padding: clamp(30px, 3.5vw, 44px) !important;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--yn-system-radius);
}

body.yn-wpbakery-site:not(.yn-design-reference) main :is(
  .yn-comparison-card-grid,
  .yn-integration-library-grid,
  .yn-solution-page-related-grid
) {
  gap: var(--yn-system-grid-gap) !important;
  align-items: stretch;
}

body.yn-wpbakery-site:not(.yn-design-reference) main :is(
  .yn-comparison-card,
  .yn-integration-card,
  .yn-pillar-card
) > .vc_column-inner {
  height: 100%;
  padding: var(--yn-system-card-pad) !important;
  border: 1px solid var(--yn-system-border);
  border-radius: var(--yn-system-radius);
  background: var(--yn-system-white);
}

body.yn-wpbakery-site:not(.yn-design-reference) main .yn-final-cta {
  min-height: 380px;
  padding-block: clamp(74px, 8vw, 104px) !important;
  text-align: center;
}

body.yn-wpbakery-site:not(.yn-design-reference) main .yn-final-cta .yn-section-title {
  margin-inline: auto;
}

@media (max-width: 991.98px) {
  body.yn-wpbakery-site:not(.yn-design-reference) main :is(
    .yn-product-hero,
    .yn-company-hero,
    .yn-detail-hero,
    .yn-comparison-hero,
    .yn-integration-detail-hero
  ) {
    min-height: 0;
  }

  body.yn-wpbakery-site:not(.yn-design-reference) main :is(
    .yn-comparison-card-grid,
    .yn-integration-library-grid,
    .yn-solution-page-related-grid
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  body.yn-wpbakery-site:not(.yn-design-reference) main :is(
    .yn-product-hero,
    .yn-company-hero,
    .yn-detail-hero,
    .yn-comparison-hero,
    .yn-integration-detail-hero
  ) {
    padding-block: 58px !important;
  }

  body.yn-wpbakery-site:not(.yn-design-reference) main :is(
    .yn-product-hero,
    .yn-company-hero,
    .yn-detail-hero,
    .yn-comparison-hero,
    .yn-integration-detail-hero
  ) h1 {
    max-width: 100%;
    font-size: clamp(36px, 11vw, 48px);
    overflow-wrap: anywhere;
  }

  body.yn-wpbakery-site:not(.yn-design-reference) main :is(
    .yn-comparison-card-grid,
    .yn-integration-library-grid,
    .yn-solution-page-related-grid
  ) {
    grid-template-columns: 1fr;
  }
}