@charset "UTF-8";

/*
 * Shared visual system for every public page except Home.
 * It mirrors the dx-Company OS landing page: crisp typography, warm neutrals,
 * navy surfaces, orange accents, generous radii and a compact section rhythm.
 */
:root {
  --dx-ink: #000000;
  --dx-ink-soft: #555555;
  --dx-navy: #2c3e50;
  --dx-navy-2: #37474f;
  --dx-orange: #f29203;
  --dx-orange-dark: #d68203;
  --dx-paper: #ffffff;
  --dx-mist: #f8f9fa;
  --dx-warm: #f8f0e5;
  --dx-line: #e3e6e8;
  --dx-line-soft: #eceeef;
  --dx-green: #12b76a;
  --dx-radius-sm: 16px;
  --dx-radius-md: 24px;
  --dx-radius-lg: 32px;
  --dx-shadow-sm: 0 10px 30px rgba(27, 42, 53, 0.07);
  --dx-shadow: 0 24px 70px rgba(27, 42, 53, 0.11);
  --dx-heading-display: clamp(2.8rem, 5vw, 4.8rem);
  --dx-heading-section: clamp(2rem, 3.6vw, 3.3rem);
  --dx-heading-card: clamp(1.25rem, 1.8vw, 1.6rem);
  --dx-text-body: clamp(1rem, 0.975rem + 0.12vw, 1.075rem);
  --dx-text-lead: clamp(1.075rem, 1.025rem + 0.25vw, 1.2rem);
  --dx-text-card: 1rem;
  --dx-text-meta: 0.9rem;
  --dx-leading-body: 1.7;
  --dx-leading-card: 1.62;
  --dx-reading-width: 68ch;
}

html {
  background: var(--dx-paper);
}

body {
  color: var(--dx-ink);
  background: var(--dx-paper);
  font-family: Inter, "Ubuntu Sans Downloaded", ui-sans-serif, system-ui,
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body *,
body *::before,
body *::after {
  font-family: inherit;
}

body img {
  display: block;
  max-width: 100%;
}

body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible {
  outline: 3px solid var(--dx-orange);
  outline-offset: 4px;
}

/* Header — the same clear, lightly floating navigation language as Home. */
header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
}

header nav {
  height: 86px;
  border-bottom: 1px solid rgba(20, 34, 44, 0.08);
  background: rgba(255, 255, 255, 0.96);
  padding: 0 clamp(20px, 3vw, 48px);
  box-shadow: 0 1px 0 rgba(20, 34, 44, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

header nav .logo img {
  width: 174px;
  height: auto;
}

header nav ul {
  gap: clamp(18px, 2vw, 30px);
}

header nav .header-element > a {
  position: relative;
  color: var(--dx-ink);
  font-size: 0.92rem;
  font-weight: 650;
}

header nav .header-element > a::after {
  position: absolute;
  right: 0;
  bottom: -10px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--dx-orange);
  content: "";
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

header nav .header-element:hover > a::after {
  opacity: 1;
  transform: scaleX(1);
}

header .menu .dropdown-content {
  top: calc(100% - 4px);
  overflow: hidden;
  border: 1px solid var(--dx-line-soft);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  padding: 8px;
  box-shadow: var(--dx-shadow-sm);
}

header .menu .dropdown-content a {
  border-radius: 11px;
  padding: 11px 14px;
  font-size: 0.9rem;
  font-weight: 600;
}

header .menu .dropdown-content a:hover {
  background: #fff7eb;
  color: var(--dx-orange-dark);
}

header .contact-button {
  border-color: var(--dx-orange);
  border-radius: 14px;
  background: var(--dx-orange);
  color: white;
  box-shadow: 0 10px 26px rgba(242, 146, 3, 0.18);
  transition: transform 0.2s ease, background 0.2s ease,
    box-shadow 0.2s ease;
}

header .contact-button:hover {
  border-color: var(--dx-orange-dark);
  background: var(--dx-orange-dark);
  color: white;
  box-shadow: 0 14px 30px rgba(242, 146, 3, 0.25);
  transform: translateY(-2px);
}

header nav button#menuButton {
  width: 44px;
  height: 44px;
  border: 1px solid var(--dx-line);
  border-radius: 50%;
  background: white;
  color: var(--dx-navy);
  padding: 0;
}

header .overlay-nav {
  background:
    radial-gradient(circle at 88% 10%, rgba(242, 146, 3, 0.13), transparent 30%),
    rgba(255, 255, 255, 0.98);
}

header .overlay-nav a {
  color: var(--dx-navy);
  font-weight: 650;
}

.site-language-switch {
  border-color: var(--dx-line);
  background: var(--dx-mist);
}

.site-language-switch .language-button.is-active {
  background: var(--dx-navy);
}

/* Compact editorial rhythm. */
.site-contents {
  overflow: hidden;
  padding-top: 86px;
  background:
    linear-gradient(180deg, #ffffff 0, #ffffff 14rem, var(--dx-mist) 38rem,
      #ffffff 62rem);
}

.site-contents :where(p, ul, ol) {
  color: var(--dx-ink-soft);
  font-size: 1rem;
  line-height: 1.7;
}

.site-contents :where(h1, h2, h3, h4, h5, h6) {
  color: var(--dx-ink);
  letter-spacing: -0.025em;
  text-align: center;
}

.site-contents h1 {
  font-size: var(--dx-heading-display);
  font-weight: 780;
  line-height: 1.02;
}

.site-contents h2 {
  font-size: var(--dx-heading-section);
  font-weight: 760;
  line-height: 1.12;
}

.site-contents h3 {
  font-size: var(--dx-heading-card);
  font-weight: 720;
  line-height: 1.25;
}

.site-contents h4 {
  font-size: 1.15rem;
  line-height: 1.35;
}

.site-contents h5 {
  font-size: 1rem;
}

.site-contents h6,
.site-contents .hero-subtitle,
.site-contents .pricing-hero-subtitle,
.site-contents .demo-hero-badge {
  color: var(--dx-orange-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.45;
  text-transform: uppercase;
}

.site-contents > section {
  width: min(calc(100% - 40px), 1200px);
  max-width: 1200px;
  margin: 20px auto;
  border: 1px solid var(--dx-line-soft);
  border-radius: var(--dx-radius-lg);
  background: rgba(255, 255, 255, 0.96);
  padding: clamp(44px, 5vw, 68px) clamp(24px, 4vw, 48px);
  box-shadow: 0 16px 50px rgba(27, 42, 53, 0.045);
  text-align: center;
}

.site-contents > section > p,
.site-contents > section > div > p,
.site-contents :where(.overview-description, .pricing-section-description) {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.site-contents > section:nth-of-type(3n + 2) {
  background: linear-gradient(145deg, #ffffff 0%, #fff9f1 100%);
}

.site-contents .hero,
.products-overview-hero,
.pricing-hero,
.demo-hero {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 86% 18%, rgba(242, 146, 3, 0.16), transparent 27%),
    linear-gradient(155deg, #ffffff 0%, #fffaf3 58%, var(--dx-mist) 100%);
  padding: clamp(68px, 8vw, 104px) max(24px, calc((100vw - 1200px) / 2));
  box-shadow: none;
  text-align: left;
}

.site-contents .hero::after,
.products-overview-hero::after,
.pricing-hero::after,
.demo-hero::after {
  position: absolute;
  right: -120px;
  bottom: -210px;
  width: 440px;
  height: 440px;
  border: 76px solid rgba(242, 146, 3, 0.075);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.site-contents .hero .hero-content,
.products-overview-hero .container,
.pricing-hero-container,
.demo-hero-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.site-contents .hero .left {
  width: min(100%, 840px);
  align-items: center;
  margin: 0 auto;
  text-align: center;
}

.site-contents .hero h1 {
  max-width: 960px;
  margin: 12px 0 24px;
}

.site-contents .hero h1 span {
  color: var(--dx-orange);
}

.site-contents .hero p,
.overview-description,
.pricing-hero-description,
.demo-hero-subtitle {
  max-width: 780px;
  color: var(--dx-ink-soft);
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  line-height: 1.7;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.products-overview-hero h1,
.pricing-hero-title,
.demo-hero-title {
  margin: 0 0 18px;
  color: var(--dx-ink);
  font-size: var(--dx-heading-display);
  font-weight: 750;
  letter-spacing: -0.05em;
  line-height: 1.02;
}

/* Buttons and inputs. */
.button-standard,
.button-link,
.product-cta-button,
.products-cta-button,
.pricing-cta-button,
.pricing-cta-primary,
.demo-nav-btn,
.demo-choice-btn {
  min-height: 48px;
  border: 1px solid var(--dx-orange);
  border-radius: 14px;
  background: var(--dx-orange);
  color: white;
  padding: 12px 22px;
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(242, 146, 3, 0.18);
  transition: transform 0.2s ease, background 0.2s ease,
    box-shadow 0.2s ease;
}

.button-standard:hover,
.button-link:hover,
.product-cta-button:hover,
.products-cta-button:hover,
.pricing-cta-button:hover,
.pricing-cta-primary:hover,
.demo-nav-btn:hover,
.demo-choice-btn:hover {
  border-color: var(--dx-orange-dark);
  background: var(--dx-orange-dark);
  color: white;
  box-shadow: 0 14px 30px rgba(242, 146, 3, 0.26);
  transform: translateY(-2px);
}

.site-contents :where(input, select, textarea) {
  min-height: 48px;
  border: 1px solid var(--dx-line);
  border-radius: 14px;
  background: white;
  color: var(--dx-ink);
  padding: 12px 14px;
  font-size: 1rem;
  box-shadow: inset 0 1px 2px rgba(27, 42, 53, 0.025);
}

.site-contents :where(input, select, textarea):focus {
  border-color: var(--dx-orange);
  box-shadow: 0 0 0 4px rgba(242, 146, 3, 0.1);
  outline: 0;
}

/* Image-led service pages. */
.banner-section {
  overflow: hidden;
  padding: 0 !important;
}

.banner-section img {
  width: 100%;
  min-height: 280px;
  max-height: 480px;
  object-fit: cover;
}

.attributes .attribute-items,
.training-types .attribute-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}

.attributes .attribute-items .item,
.training-types .item-t-typ,
.die-vielfalt .item,
.training-types .item {
  width: 100%;
  border: 1px solid var(--dx-line-soft);
  border-radius: var(--dx-radius-md);
  background: white;
  padding: 26px;
  box-shadow: var(--dx-shadow-sm);
  transition: border-color 0.2s ease, transform 0.2s ease,
    box-shadow 0.2s ease;
  text-align: center;
}

.attributes .attribute-items .item .headline,
.training-types .item-t-typ .headline,
.die-vielfalt .item .headline,
.training-types .item .headline {
  justify-content: center;
}

.attributes .attribute-items .item:hover,
.training-types .item-t-typ:hover,
.die-vielfalt .item:hover,
.training-types .item:hover {
  border-color: var(--dx-orange);
  box-shadow: 0 20px 45px rgba(27, 42, 53, 0.11);
  transform: translateY(-4px);
}

.attributes .attribute-items .item .headline i,
.training-types .item-t-typ .headline i,
.die-vielfalt .item .headline i {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  background: rgba(242, 146, 3, 0.12);
  color: var(--dx-orange);
  font-size: 1.7rem;
}

.attributes .attribute-items .item p,
.training-types .item-t-typ p,
.die-vielfalt .item p {
  margin-top: 14px;
}

.details {
  padding-bottom: clamp(44px, 5vw, 68px);
}

.details h1,
.details h2,
.details p {
  margin-bottom: 24px;
}

.details .episode {
  grid-template-columns: 100px 1fr;
  gap: 26px;
  padding: 20px 0;
}

.details .episode__number {
  position: static;
  height: auto;
  color: var(--dx-orange);
  font-size: clamp(2.8rem, 5vw, 4.4rem);
  font-weight: 750;
  line-height: 1;
  text-align: center;
}

.details .episode__content {
  border-top: 1px solid var(--dx-line);
  padding: 18px 0 4px;
  text-align: center;
}

.details .episode__content .story,
.details .episode__content .story p,
.rework .card ul,
.rework .card li {
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  overflow-wrap: break-word;
}

.details .episode__content .story p {
  margin-bottom: 0;
}

.rework {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: 18px;
}

.rework .card,
.time-cost {
  border: 1px solid var(--dx-line-soft);
  border-radius: var(--dx-radius-md);
  background: white;
  padding: 26px;
  box-shadow: var(--dx-shadow-sm);
  text-align: center;
}

.citation {
  min-height: 460px;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--dx-navy), #182b3a) !important;
  color: white;
  text-align: center;
}

.site-contents .citation :where(h1, h2, h3, h4, h5, h6, p, li, span),
.site-contents .pricing-cta-section :where(h1, h2, h3, h4, h5, h6, p, li, span) {
  color: white;
}

.citation .left h1 {
  color: var(--dx-orange);
}

.citation .right {
  width: 72%;
  height: auto;
  min-height: 340px;
  border-radius: var(--dx-radius-md);
  background: rgba(255, 255, 255, 0.08);
  padding: 44px;
  align-items: center;
}

.citation .right .textblock {
  width: 58%;
  gap: 16px;
  align-items: center;
  text-align: center;
}

.citation .right img {
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
}

/* Services overview. */
.products-overview-section {
  background: white;
  padding: clamp(48px, 6vw, 76px) 0;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.product-card {
  width: 100%;
  max-width: none;
  overflow: hidden;
  border: 1px solid var(--dx-line-soft);
  border-radius: var(--dx-radius-md);
  background: white;
  box-shadow: var(--dx-shadow-sm);
}

.product-card:hover {
  border-color: var(--dx-orange);
  box-shadow: var(--dx-shadow);
  transform: translateY(-5px);
}

.product-image {
  height: 240px;
}

.product-content {
  padding: 28px;
  align-items: center;
  text-align: center;
}

.product-feature {
  justify-content: center;
  text-align: center;
}

.product-title {
  color: var(--dx-ink);
}

.product-description,
.product-feature {
  color: var(--dx-ink-soft);
}

/* About and company pages. */
.unserTeam .headline {
  position: relative;
  height: auto;
  min-height: 280px;
  overflow: hidden;
  margin-bottom: 34px;
  border-radius: var(--dx-radius-md);
}

.unserTeam .headline .image-credit {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  margin: 0;
  border-radius: 999px;
  background: rgba(20, 34, 44, 0.82);
  color: white;
  padding: 7px 12px;
  font-size: 0.72rem;
  line-height: 1.25;
  backdrop-filter: blur(8px);
}

.unserTeam .headline .image-credit a {
  color: white;
}

.unserTeam .text-with-image {
  gap: 42px;
}

.unserTeam .text-with-image .team-block {
  gap: 22px;
  align-items: center;
  text-align: center;
}

.unserTeam .text-with-image .team-block p {
  text-align: center;
  text-wrap: pretty;
}

.unserTeam .h2-mobile,
.unserTeam .h2-desktop {
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}

.site-contents .hero .about-copy {
  text-wrap: pretty;
}

.about-copy-break {
  display: block;
  content: "";
  margin-top: 0.35em;
}

.unserTeam .text-with-image img {
  overflow: hidden;
  margin: 20px 0;
  border-radius: var(--dx-radius-md);
  box-shadow: var(--dx-shadow-sm);
}

.partnersContent .partners h2,
.partnersContent .partners p {
  padding-bottom: 20px;
}

.partnersContent .partners .cards-container {
  gap: 18px;
}

.partnersContent .partners .cards-container .card,
.firmen-daten-item,
.kunden-zitat {
  border: 1px solid var(--dx-line-soft);
  border-radius: var(--dx-radius-md);
  background: white;
  box-shadow: var(--dx-shadow-sm);
  text-align: center;
}

.kunden-zitat {
  gap: 34px;
  margin-top: 20px;
  padding: 28px;
}

.unsereKunden .kunden-banner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 22px 28px;
  margin: 38px auto 44px;
}

.unsereKunden .kunden-banner a {
  display: flex;
  width: 100%;
  min-height: 112px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dx-line-soft);
  border-radius: 18px;
  background: white;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(27, 42, 53, 0.05);
}

.unsereKunden .kunden-banner a img {
  width: auto;
  max-width: 180px;
  height: auto;
  max-height: 82px;
  object-fit: contain;
}

@media (max-width: 900px) {
  .unsereKunden .kunden-banner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .unsereKunden .kunden-banner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .unsereKunden .kunden-banner a {
    min-height: 96px;
    padding: 12px;
  }

  .unsereKunden .kunden-banner a img {
    max-width: 140px;
    max-height: 66px;
  }
}

.kunden-zitat .zitat-block h2 {
  color: var(--dx-orange);
  font-size: 6rem;
}

.kunden-zitat .zitat-block h3 {
  margin-bottom: 28px;
  font-size: 1.25rem;
  line-height: 1.55;
}

/* Training overview and detail pages. */
.die-vielfalt {
  text-align: center;
}

.die-vielfalt .item-container {
  display: grid;
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
}

.die-vielfalt .item {
  align-items: center;
}

.die-vielfalt .item p {
  max-width: 62ch;
  margin-inline: auto;
}

.die-vielfalt .item .mehr-erfahren {
  align-self: center;
}

.events-dashboard .events-container .event-cards {
  gap: 22px;
}

.events-dashboard .events-container .event-cards .event-card {
  overflow: hidden;
  margin-top: 0;
  border: 1px solid var(--dx-line-soft);
  border-radius: var(--dx-radius-md);
  background: white;
  box-shadow: var(--dx-shadow-sm);
}

.events-dashboard .events-container .event-cards .event-card:hover {
  border-color: var(--dx-orange);
  box-shadow: var(--dx-shadow);
  transform: translateY(-4px);
}

.events-dashboard .events-container .event-cards .event-card .image-container {
  height: 220px;
  border-radius: 0;
}

.events-dashboard .events-container .event-cards .event-card .event-details {
  margin: 0;
  padding: 22px;
  text-align: center;
}

.next-event .box {
  border: 1px solid var(--dx-line-soft);
  border-radius: var(--dx-radius-md);
  padding: 28px;
  box-shadow: var(--dx-shadow-sm);
}

.unsere-referenten .referenten-container {
  margin-top: 24px;
}

.unsere-referenten .referenten-container .referent img {
  width: 180px;
  height: 180px;
  border: 5px solid white;
  box-shadow: 0 0 0 2px var(--dx-orange), var(--dx-shadow-sm);
}

.training-page {
  width: min(calc(100% - 40px), 1200px);
  margin: 20px auto 48px;
}

.training-hero .hero-content {
  margin: 0;
}

.training-page .training-section {
  margin-top: 20px;
}

.training-page .box-shadowing,
.training-page .description,
.training-page .registration {
  border: 1px solid var(--dx-line-soft);
  border-radius: var(--dx-radius-md);
  background: white;
  padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--dx-shadow-sm);
  text-align: center;
}

.training-page .training-section > p,
.training-page .referent-details p {
  text-align: center;
}

.training-page .training-image {
  width: 100%;
  margin: 20px auto;
}

.training-page .training-image img {
  max-height: 520px;
  border-radius: var(--dx-radius-lg);
  object-fit: cover;
  box-shadow: var(--dx-shadow);
}

.training-page .gains-and-details,
.training-page .content-and-referents {
  gap: 20px;
  margin-top: 20px;
}

.training-page .gains-and-details .seminar-details,
.training-page .content-and-referents .content {
  background: linear-gradient(145deg, #fffaf3, var(--dx-warm));
}

.training-page .content-and-referents .referent .referent-image img {
  width: 220px;
  height: 220px;
  border: 5px solid white;
  box-shadow: 0 0 0 2px var(--dx-orange), var(--dx-shadow-sm);
}

/* Pricing page — retain its information architecture while matching Home. */
.pricing-page,
.pricing-main-content {
  background: transparent;
}

.pricing-hero {
  text-align: center;
}

.pricing-hero-description {
  margin: 0 auto;
}

.pricing-main-content {
  padding: 64px 0;
}

.pricing-platform-section,
.pricing-buddies-section,
.pricing-page .pricing-additional-section,
.pricing-page .pricing-benefits-section {
  margin-bottom: 72px;
}

.pricing-section-description {
  margin-bottom: 38px;
}

.pricing-tiers-grid,
.pricing-additional-grid,
.pricing-benefits-grid {
  gap: 22px;
}

.pricing-tier-card,
.pricing-additional-item,
.pricing-benefit-item,
.pricing-buddy-detailed-card,
.pricing-custom-buddies {
  border-color: var(--dx-line-soft);
  border-radius: var(--dx-radius-md);
  box-shadow: var(--dx-shadow-sm);
}

.pricing-tier-card:hover,
.pricing-additional-item:hover,
.pricing-benefit-item:hover,
.pricing-buddy-detailed-card:hover {
  border-color: var(--dx-orange);
  box-shadow: var(--dx-shadow);
  transform: translateY(-4px);
}

.pricing-tier-popular {
  border-color: var(--dx-orange);
  background: linear-gradient(145deg, #ffffff, #fff8ed);
  transform: none;
}

.pricing-tier-popular:hover {
  transform: translateY(-4px);
}

.pricing-page .pricing-cta-section {
  margin-top: 48px;
  background: linear-gradient(135deg, var(--dx-navy), #182b3a);
  padding: 68px 0 !important;
}

.pricing-page .pricing-cta-section .pricing-cta-title,
.pricing-page .pricing-cta-section .pricing-cta-description {
  color: white;
}

/* Contact/demo flow. */
.demo-hero {
  text-align: center;
}

.demo-hero-subtitle {
  margin-right: auto;
  margin-left: auto;
}

.demo-benefits,
.demo-choice-section,
.demo-form,
.demo-contact-info {
  width: min(calc(100% - 40px), 1200px);
  max-width: 1200px;
  margin: 20px auto;
  border: 1px solid var(--dx-line-soft);
  border-radius: var(--dx-radius-lg);
  background: white;
  padding: clamp(44px, 5vw, 68px) clamp(24px, 4vw, 48px);
  box-shadow: 0 16px 50px rgba(27, 42, 53, 0.045);
}

.demo-benefit-card,
.demo-choice-card,
.demo-form-card,
.demo-contact-card {
  border: 1px solid var(--dx-line-soft);
  border-radius: var(--dx-radius-md);
  background: white;
  box-shadow: var(--dx-shadow-sm);
  text-align: center;
}

.demo-benefit-card:hover,
.demo-choice-card:hover {
  border-color: var(--dx-orange);
  box-shadow: var(--dx-shadow);
  transform: translateY(-4px);
}

.demo-choice-card.highlight {
  border-color: var(--dx-orange);
  background: linear-gradient(145deg, #ffffff, #fff8ed);
}

.demo-form-progress,
.demo-summary {
  border-radius: var(--dx-radius-sm);
  background: var(--dx-mist);
}

/* Consulting approach, policy and jobs. */
.drei-schritte .drei-schritte-items .item,
.drei-leitfragen .drei-leitfragen-items .items-container .item,
.kreislauf .kreislauf-items .item {
  border: 1px solid var(--dx-line-soft);
  border-radius: var(--dx-radius-md);
  background: white;
  box-shadow: var(--dx-shadow-sm);
}

.framework img,
.kreislauf > img {
  overflow: hidden;
  border-radius: var(--dx-radius-md);
}

.container-policy-and-impress {
  width: min(100%, 980px);
  margin: 0 auto;
  border: 1px solid var(--dx-line-soft);
  border-radius: var(--dx-radius-lg);
  background: white;
  padding: clamp(26px, 5vw, 56px);
  box-shadow: var(--dx-shadow-sm);
}

.container-policy-and-impress h1,
.container-policy-and-impress h2,
.container-policy-and-impress h3 {
  margin: 1.2em 0 0.5em;
}

.language-legal-note {
  border: 0;
  border-left: 4px solid var(--dx-orange);
  border-radius: 0 14px 14px 0;
  background: #fff7eb;
}

.job {
  width: min(calc(100% - 40px), 1200px);
  min-height: 70vh;
  margin: 20px auto 48px;
  overflow: hidden;
  border: 1px solid var(--dx-line-soft);
  border-radius: var(--dx-radius-lg);
  background: white;
  box-shadow: var(--dx-shadow-sm);
}

.job iframe {
  display: block;
  width: 100%;
  min-height: 900px;
  border: 0;
}

/* Footer — warm and compact like Home. */
footer {
  margin-top: 0;
  background: var(--dx-warm);
  padding: 48px clamp(20px, 3vw, 42px) 20px;
}

footer .footer-contents {
  max-width: 1200px;
  gap: 22px;
}

footer .footer-contents .logo-spruch-container img {
  width: 170px;
}

footer .footer-contents :where(p, a, li) {
  color: var(--dx-ink-soft);
  font-size: 0.9rem !important;
  line-height: 1.55;
}

footer .footer-contents h4 {
  color: var(--dx-ink);
  font-size: 1rem !important;
}

footer .footer-contents .footer-infos .services-footer,
footer .footer-contents .footer-infos .quicklinks-footer,
footer .footer-contents .footer-infos .address-media {
  margin-top: 0;
}

footer .footer-contents .footer-links .footer-links-socials .icons .social-media a,
footer .footer-contents .footer-links .footer-links-socials .icons .association a,
footer .footer-contents .footer-links .footer-links-associations .icons .social-media a,
footer .footer-contents .footer-links .footer-links-associations .icons .association a {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(44, 62, 80, 0.07);
  box-shadow: 0 8px 20px rgba(27, 42, 53, 0.06);
}

/* Responsive refinement. */
@media (max-width: 1059px) {
  header nav {
    height: 74px;
  }

  header nav .logo img {
    width: 150px;
  }

  .site-contents {
    padding-top: 74px;
  }

  .site-contents .hero,
  .products-overview-hero,
  .pricing-hero,
  .demo-hero {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}

@media (max-width: 820px) {
  .about-copy-break {
    display: none;
  }

  .site-contents > section,
  .demo-benefits,
  .demo-choice-section,
  .demo-form,
  .demo-contact-info {
    width: min(calc(100% - 24px), 1200px);
    margin: 12px auto;
    border-radius: 22px;
    padding: 40px 22px;
  }

  .site-contents .hero,
  .products-overview-hero,
  .pricing-hero,
  .demo-hero {
    width: 100%;
    margin: 0;
    border-radius: 0;
    padding: 62px 22px;
  }

  .site-contents h1,
  .products-overview-hero h1,
  .pricing-hero-title,
  .demo-hero-title {
    font-size: clamp(2.35rem, 11vw, 3.6rem);
  }

  .attributes .attribute-items,
  .training-types .attribute-items,
  .products-grid,
  .die-vielfalt .item-container,
  .rework {
    grid-template-columns: 1fr;
  }

  .details .episode {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .details .episode__content .story,
  .details .episode__content .story p,
  .rework .card ul,
  .rework .card li {
    line-height: 1.65;
  }

  .citation {
    min-height: 0;
    gap: 24px;
  }

  .citation .right {
    width: 100%;
    min-height: 0;
    padding: 28px;
  }

  .citation .right .textblock {
    width: 100%;
  }

  .citation .right img {
    position: static;
    width: 100%;
    margin-top: 22px;
  }

  .training-page,
  .job {
    width: min(calc(100% - 24px), 1200px);
    margin: 12px auto 32px;
  }

  .pricing-main-content {
    padding: 48px 0;
  }

  .pricing-platform-section,
  .pricing-buddies-section,
  .pricing-page .pricing-additional-section,
  .pricing-page .pricing-benefits-section {
    margin-bottom: 52px;
  }
}

@media (max-width: 520px) {
  header nav {
    padding: 0 16px;
  }

  header nav .logo img {
    width: 138px;
  }

  .site-contents :where(p, ul, ol) {
    font-size: 0.98rem;
  }

  .product-content,
  .attributes .attribute-items .item,
  .training-types .item-t-typ,
  .die-vielfalt .item,
  .training-types .item {
    padding: 22px;
  }

  .product-image,
  .events-dashboard .events-container .event-cards .event-card .image-container {
    height: 200px;
  }

  footer .footer-contents .footer-links {
    align-items: flex-start;
    gap: 28px;
  }

  footer .footer-contents .footer-links .footer-links-socials,
  footer .footer-contents .footer-links .footer-links-associations {
    width: 100%;
    align-items: flex-start;
  }

  footer .footer-contents .footer-links .footer-links-socials .icons .social-media,
  footer .footer-contents .footer-links .footer-links-associations .icons .association {
    flex-direction: row;
  }
}

/* Compact contact portraits on the service pages. */
.service-contact .right {
  width: min(72%, 760px);
  height: auto;
  min-height: 280px;
  padding: 36px 40px;
}

.service-contact .citation-container {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: center;
  gap: 32px;
}

.service-contact .right .textblock {
  width: 100%;
}

.service-contact .right img {
  position: static;
  width: 180px;
  height: 180px;
  max-width: 100%;
  margin: 0;
  justify-self: end;
  border-radius: 20px;
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 992px) {
  .service-contact .right {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .service-contact .right {
    padding: 28px 22px;
  }

  .service-contact .citation-container {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 24px;
  }

  .service-contact .right img {
    width: 150px;
    height: 150px;
    justify-self: center;
  }
}

/*
 * Consistent reading scale for all subpages.
 * Three deliberate levels replace the old mix of very small and oversized
 * copy: lead text, regular body copy and compact copy inside cards.
 */
.site-contents p {
  color: var(--dx-ink-soft);
  font-size: var(--dx-text-body) !important;
  line-height: var(--dx-leading-body) !important;
  text-wrap: pretty;
}

.site-contents li {
  font-size: var(--dx-text-body) !important;
  line-height: var(--dx-leading-body) !important;
}

.site-contents :is(
    .hero p,
    .about-copy,
    .overview-description,
    .pricing-hero-description,
    .demo-hero-subtitle,
    .pricing-section-description,
    .product-details-description,
    .additional-costs-description,
    .dx-buddies-description,
    .dx-buddies-overview-description,
    .dx-buddies-pricing-description
  ) {
  max-width: var(--dx-reading-width);
  margin-inline: auto;
  font-size: var(--dx-text-lead) !important;
  line-height: 1.72 !important;
}

.site-contents :is(
    .product-card,
    .attribute-items .item,
    .training-types .item,
    .training-types .item-t-typ,
    .die-vielfalt .item,
    .rework .card,
    .event-card,
    .pricing-tier-card,
    .pricing-buddy-detailed-card,
    .pricing-custom-buddies,
    .pricing-additional-item,
    .pricing-benefit-item,
    .demo-benefit-card,
    .demo-choice-card,
    .demo-contact-card,
    .partnersContent .card
  ) :is(p, li, [class*="description"], [class$="-feature"]) {
  font-size: var(--dx-text-card) !important;
  line-height: var(--dx-leading-card) !important;
}

.site-contents :is(
    .product-description,
    .product-feature,
    .feature-description,
    .pricing-tier-description,
    .pricing-feature-text,
    .pricing-buddies-feature,
    .pricing-custom-description,
    .pricing-custom-feature,
    .pricing-additional-description,
    .pricing-additional-pricing,
    .pricing-benefit-description,
    .demo-choice-feature,
    .faq-answer,
    .partnersContent .description
  ) {
  font-size: var(--dx-text-card) !important;
  line-height: var(--dx-leading-card) !important;
}

.site-contents :is(
    .pricing-tier-note,
    .pricing-example-note,
    .pricing-additional-note,
    .demo-progress-text,
    .demo-consent-text
  ) {
  font-size: var(--dx-text-meta) !important;
  line-height: 1.55 !important;
}

.site-contents :is(
    .details .story,
    .container-policy-and-impress,
    .training-page .description,
    .unserTeam .team-block
  ) {
  max-width: var(--dx-reading-width);
  margin-inline: auto;
}

@media (max-width: 520px) {
  .site-contents p,
  .site-contents li {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  .site-contents :is(
      .hero p,
      .about-copy,
      .overview-description,
      .pricing-hero-description,
      .demo-hero-subtitle,
      .pricing-section-description
    ) {
    font-size: 1.0625rem !important;
    line-height: 1.68 !important;
  }

  .site-contents :is(
      .pricing-tier-note,
      .pricing-example-note,
      .pricing-additional-note,
      .demo-progress-text,
      .demo-consent-text
    ) {
    font-size: 0.875rem !important;
  }
}

/* Pricing V2 — aligned with the Home landing page and Sales Pitch V5. */
.pricing-v2 {
  --pricing-navy: #2f4355;
  --pricing-navy-deep: #213444;
  --pricing-orange: #f39200;
  --pricing-cream: #fff7eb;
  background: #f5f6f6;
}

.pricing-v2-wrap {
  width: min(calc(100% - 40px), 1120px);
  margin-inline: auto;
}

.pricing-v2-hero {
  position: relative;
  overflow: hidden;
  width: min(calc(100% - 32px), 1040px);
  max-width: 1040px;
  margin: 18px auto 0;
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 18%, rgba(243, 146, 0, 0.18), transparent 26%),
    linear-gradient(145deg, #ffffff 0%, #fffaf3 58%, #f0f3f4 100%);
  padding: clamp(52px, 6vw, 76px) 0 112px;
  text-align: center;
}

.pricing-v2-hero::after {
  position: absolute;
  right: -105px;
  bottom: -205px;
  width: 420px;
  height: 420px;
  border: 70px solid rgba(243, 146, 0, 0.07);
  border-radius: 50%;
  content: "";
}

.pricing-v2-hero .pricing-v2-wrap {
  position: relative;
  z-index: 1;
}

.pricing-v2-eyebrow {
  margin: 0 0 16px;
  color: var(--pricing-orange) !important;
  font-size: 0.78rem !important;
  font-weight: 850;
  letter-spacing: 0.14em;
  line-height: 1.4 !important;
  text-transform: uppercase;
}

.pricing-v2-hero h1 {
  max-width: 980px;
  margin: 0 auto 22px;
  color: #111418;
  font-size: var(--dx-heading-display);
  font-weight: 780;
  letter-spacing: -0.055em;
  line-height: 1.02;
  text-align: center;
  text-wrap: balance;
}

.pricing-v2-lead {
  max-width: 720px;
  margin: 0 auto;
  color: #59636d !important;
  font-size: clamp(1.05rem, 1.6vw, 1.18rem) !important;
  line-height: 1.72 !important;
  text-align: center;
}

.pricing-v2-plans {
  position: relative;
  z-index: 2;
  max-width: none;
  margin-top: -64px;
  padding: 0 0 clamp(52px, 6vw, 72px);
}

.pricing-v2-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 24px;
}

.pricing-v2-plan-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: visible;
  border: 1px solid #dfe3e6;
  border-top: 7px solid var(--pricing-orange);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  padding: 34px 30px 30px;
  box-shadow: 0 22px 65px rgba(33, 52, 68, 0.11);
}

.pricing-v2-plan-card--featured {
  border-color: var(--pricing-navy);
  border-top-color: var(--pricing-orange);
  background: linear-gradient(145deg, var(--pricing-navy), var(--pricing-navy-deep));
  box-shadow: 0 28px 80px rgba(33, 52, 68, 0.24);
  transform: translateY(-14px);
}

.pricing-v2-recommended {
  position: absolute;
  top: -29px;
  left: 50%;
  min-width: 220px;
  border-radius: 12px 12px 0 0;
  background: var(--pricing-orange);
  color: #111418;
  padding: 8px 18px;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-align: center;
  transform: translateX(-50%);
}

.pricing-v2-plan-number {
  position: absolute;
  top: 20px;
  right: 24px;
  color: #e8ebed;
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
}

.pricing-v2-plan-card--featured .pricing-v2-plan-number {
  color: rgba(255, 255, 255, 0.12);
}

.pricing-v2-plan-label {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0 auto 14px;
  color: var(--pricing-orange) !important;
  font-size: 0.8rem !important;
  font-weight: 850;
  letter-spacing: 0.045em;
  line-height: 1.35 !important;
  text-align: center;
  text-transform: uppercase;
}

.pricing-v2-plan-card h2 {
  width: 100%;
  max-width: none;
  margin: 0 auto 12px;
  color: #283b4c;
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  font-weight: 760;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-align: center;
  text-wrap: balance;
}

.pricing-v2-plan-card--featured h2,
.pricing-v2-plan-card--featured h3,
.pricing-v2-plan-card--featured .pricing-v2-price,
.pricing-v2-plan-card--featured .pricing-v2-highlight-list,
.pricing-v2-plan-card--featured .pricing-v2-plan-copy {
  color: white !important;
}

.pricing-v2-price {
  display: flex;
  min-height: 58px;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
  color: #111418;
}

.pricing-v2-price strong {
  color: inherit;
  font-size: clamp(2.5rem, 4vw, 3.45rem);
  font-weight: 820;
  letter-spacing: -0.055em;
  line-height: 1;
}

.pricing-v2-plan-card--featured .pricing-v2-price strong {
  color: var(--pricing-orange);
}

.pricing-v2-price span {
  font-size: 0.96rem;
  font-weight: 720;
}

.pricing-v2-price--individual strong {
  font-size: clamp(2.1rem, 3.4vw, 2.85rem);
}

.pricing-v2-plan-copy {
  min-height: 92px;
  margin: 0;
  color: #606b76 !important;
  font-size: 0.98rem !important;
  line-height: 1.55 !important;
}

.pricing-v2-plan-benefit {
  display: block;
  margin-bottom: 5px;
  color: #283b4c;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.3;
}

.pricing-v2-plan-card--featured .pricing-v2-plan-benefit {
  color: var(--pricing-orange);
}

.pricing-v2-divider {
  height: 1px;
  margin: 22px 0 18px;
  background: #dfe3e6;
}

.pricing-v2-plan-card--featured .pricing-v2-divider {
  background: rgba(255, 255, 255, 0.26);
}

.pricing-v2-plan-card h3 {
  margin: 0 0 9px;
  color: #d77f00;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.035em;
  line-height: 1.35;
  text-align: left;
  text-transform: uppercase;
}

.pricing-v2-plan-card h3:not(:first-of-type) {
  margin-top: 18px;
}

.pricing-v2-highlight-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  color: #34495a;
  list-style: none;
}

.pricing-v2-highlight-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  font-size: 0.93rem !important;
  line-height: 1.45 !important;
}

.pricing-v2-highlight-list i {
  margin-top: 2px;
  color: var(--pricing-orange);
  font-size: 1.05rem;
}

.pricing-v2-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 28px;
  border: 1px solid var(--pricing-orange);
  border-radius: 13px;
  background: var(--pricing-orange);
  color: #111418;
  padding: 12px 20px;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(243, 146, 0, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.pricing-v2-plan-card .pricing-v2-button {
  width: 100%;
  margin-top: auto;
  transform: translateY(18px);
}

.pricing-v2-button:hover {
  background: #ffa514;
  color: #111418;
  box-shadow: 0 16px 34px rgba(243, 146, 0, 0.3);
  transform: translateY(-2px);
}

.pricing-v2-plan-card .pricing-v2-button:hover {
  transform: translateY(16px);
}

.pricing-v2-button--secondary {
  border-color: #243848;
  background: #243848;
  color: white;
  box-shadow: 0 12px 28px rgba(36, 56, 72, 0.18);
}

.pricing-v2-button--secondary:hover {
  border-color: var(--pricing-orange);
  background: var(--pricing-orange);
  color: #111418;
}

.pricing-v2-principle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 42px;
  border-radius: 16px;
  background: var(--pricing-orange);
  color: #111418;
  padding: 17px 24px;
}

.pricing-v2-principle strong {
  font-size: 1rem;
  line-height: 1.45;
}

.pricing-v2-principle a {
  flex: none;
  color: #111418;
  font-size: 0.92rem;
  font-weight: 800;
}

.pricing-v2-footnote {
  margin: 13px 0 0;
  color: #707981 !important;
  font-size: 0.78rem !important;
  line-height: 1.55 !important;
  text-align: center;
}

.pricing-v2-comparison {
  border-top: 1px solid #e2e5e7;
  background: white;
  padding: clamp(56px, 6vw, 76px) 0;
}

.pricing-v2-section-intro {
  max-width: 780px;
  margin: 0 auto 22px;
  text-align: center;
}

.pricing-v2-section-intro h2 {
  margin: 0 0 16px;
  color: #111418;
  font-size: var(--dx-heading-section);
  font-weight: 770;
  letter-spacing: -0.045em;
  line-height: 1.08;
  text-align: center;
  text-wrap: balance;
}

.pricing-v2-section-intro > p:last-child {
  max-width: 680px;
  margin: 0 auto;
  color: #626c75 !important;
  font-size: 1.03rem !important;
  line-height: 1.68 !important;
}

.pricing-v2-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
}

.pricing-v2-status {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.2;
  white-space: nowrap;
}

.pricing-v2-status--included {
  background: #eaf8f0;
  color: #147a46;
}

.pricing-v2-status--addon {
  background: #fff2de;
  color: #a65f00;
}

.pricing-v2-status--unavailable {
  background: #f0f2f3;
  color: #78828a;
}

.pricing-v2-comparison-groups {
  display: grid;
  gap: 14px;
}

.pricing-v2-group {
  overflow: hidden;
  border: 1px solid #e1e5e8;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(33, 52, 68, 0.055);
}

.pricing-v2-group[open] {
  border-color: rgba(243, 146, 0, 0.42);
  box-shadow: 0 18px 42px rgba(33, 52, 68, 0.08);
}

.pricing-v2-group summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  padding: 20px 24px;
  list-style: none;
}

.pricing-v2-group summary::-webkit-details-marker {
  display: none;
}

.pricing-v2-group summary:focus-visible {
  outline: 3px solid var(--pricing-orange);
  outline-offset: -3px;
}

.pricing-v2-group-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  background: var(--pricing-cream);
  color: var(--pricing-orange);
  font-size: 1.45rem;
}

.pricing-v2-group summary strong {
  display: block;
  color: #203545;
  font-size: 1.08rem;
  line-height: 1.3;
}

.pricing-v2-group summary small {
  display: block;
  margin-top: 3px;
  color: #727c84;
  font-size: 0.85rem;
  line-height: 1.4;
}

.pricing-v2-chevron {
  color: #53606a;
  font-size: 1.7rem;
  transition: transform 0.2s ease;
}

.pricing-v2-group[open] .pricing-v2-chevron {
  transform: rotate(180deg);
}

.pricing-v2-feature-list {
  border-top: 1px solid #e6e9eb;
  background: #fbfbfa;
  padding: 12px;
}

.pricing-v2-feature-head,
.pricing-v2-feature-row {
  display: grid;
  grid-template-columns: minmax(240px, 1.55fr) repeat(3, minmax(140px, 1fr));
  align-items: center;
  gap: 10px;
}

.pricing-v2-feature-head {
  padding: 8px 14px 10px;
  color: #7a838a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pricing-v2-feature-head span:not(:first-child) {
  text-align: center;
}

.pricing-v2-feature-row {
  min-height: 62px;
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 10px 14px;
}

.pricing-v2-feature-row:nth-child(even) {
  background: white;
  border-color: #eceeef;
}

.pricing-v2-feature-row > div:not(:first-child) {
  color: #263b4b;
  font-size: 0.88rem;
  line-height: 1.35;
  text-align: center;
}

.pricing-v2-feature-name {
  color: #344957;
  font-size: 0.92rem;
  font-weight: 680;
  line-height: 1.4;
}

.pricing-v2-cta {
  background:
    radial-gradient(circle at 86% 18%, rgba(243, 146, 0, 0.18), transparent 30%),
    linear-gradient(135deg, var(--pricing-navy), #172b3a);
  padding: clamp(52px, 6vw, 72px) 0;
}

.pricing-v2-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding-inline-end: clamp(24px, 4vw, 48px);
}

.pricing-v2-cta h2 {
  max-width: 720px;
  margin: 0 0 14px;
  color: white;
  font-size: var(--dx-heading-section);
  font-weight: 760;
  letter-spacing: -0.045em;
  line-height: 1.08;
  text-align: left;
  text-wrap: balance;
}

.pricing-v2-cta p:last-child {
  max-width: 670px;
  margin: 0;
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: 1.02rem !important;
  line-height: 1.65 !important;
}

.pricing-v2-cta .pricing-v2-button {
  flex: none;
  align-self: center;
  margin-top: 0;
}

@media (max-width: 980px) {
  .pricing-v2-hero {
    padding-bottom: 98px;
  }

  .pricing-v2-plans {
    margin-top: -48px;
  }

  .pricing-v2-plan-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .pricing-v2-plan-card {
    width: min(100%, 720px);
    margin-inline: auto;
  }

  .pricing-v2-plan-card--featured {
    transform: none;
  }

  .pricing-v2-plan-card .pricing-v2-button {
    transform: translateY(18px);
  }

  .pricing-v2-feature-head,
  .pricing-v2-feature-row {
    grid-template-columns: minmax(210px, 1.35fr) repeat(3, minmax(115px, 1fr));
  }
}

@media (max-width: 760px) {
  .pricing-v2-wrap {
    width: min(calc(100% - 24px), 1200px);
  }

  .pricing-v2-hero {
    width: min(calc(100% - 16px), 1040px);
    margin-top: 8px;
    border-radius: 18px;
    padding: 48px 0 88px;
  }

  .pricing-v2-hero h1 {
    font-size: clamp(2.45rem, 12vw, 3.7rem);
  }

  .pricing-v2-plan-card {
    padding: 30px 22px 26px;
  }

  .pricing-v2-plan-copy {
    min-height: 0;
  }

  .pricing-v2-principle {
    flex-direction: column;
    align-items: flex-start;
  }

  .pricing-v2-feature-head {
    display: none;
  }

  .pricing-v2-feature-row {
    display: block;
    margin-bottom: 10px;
    border-color: #e7eaec;
    background: white;
    padding: 14px;
  }

  .pricing-v2-feature-row:last-child {
    margin-bottom: 0;
  }

  .pricing-v2-feature-name {
    margin-bottom: 10px;
    color: #203545;
    font-size: 0.98rem;
  }

  .pricing-v2-feature-row > div[data-plan] {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border-top: 1px solid #eef0f1;
    padding: 9px 0;
    text-align: left;
  }

  .pricing-v2-feature-row > div[data-plan]::before {
    color: #7a838a;
    content: attr(data-plan);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .pricing-v2-feature-row > div[data-plan] .pricing-v2-status {
    justify-self: start;
  }

  .pricing-v2-group summary {
    grid-template-columns: 42px minmax(0, 1fr) 28px;
    gap: 12px;
    padding: 17px;
  }

  .pricing-v2-group-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .pricing-v2-cta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding-inline-end: 0;
  }

  .pricing-v2-cta h2 {
    text-align: left;
  }
}

@media (max-width: 420px) {
  .pricing-v2-plan-number {
    font-size: 2.8rem;
  }

  .pricing-v2-plan-label {
    max-width: 68%;
  }

  .pricing-v2-recommended {
    min-width: 190px;
  }

  .pricing-v2-group summary small {
    display: none;
  }

  .pricing-v2-legend {
    align-items: flex-start;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}