/* ============================================================
   Digital Experts - paid ads landing pages (2026.10.14).
   First page: /education-demo (noindex, out of the sitemap, not
   linked from the site). Scoped to main.dx-lp. One job: book a demo.
   - The nav keeps only the logo and the Book a demo button, which
     de-lp.js points at the form on the page (#book).
   - Every section ends on the same call to action.
   ============================================================ */

/* Nav on landing pages: logo and the demo button only */
html body:has(main.dx-lp) .de-header .de-nav > *:not(.de-cta) { display: none !important; }
html body:has(main.dx-lp) .de-header .de-nav-toggle { display: none !important; }
@media (max-width: 900px) {
  html body:has(main.dx-lp) .de-header .de-nav {
    display: flex !important;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;
    width: auto !important;
    box-shadow: none !important;
  }
  html body:has(main.dx-lp) .de-header .de-nav a.de-cta { padding: 10px 16px !important; font-size: 11px !important; }
}

.dx-lp { scroll-behavior: smooth; }
.dx-lp [id] { scroll-margin-top: 96px; }

/* Shared */
.dx-lp .dx-lp-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: var(--dx-gap-m); }
.dx-lp .dx-lp-ctas .dx-btn { padding: 18px 30px; font-size: 15px; }
.dx-lp .dx-btn-dark { background: var(--dx-burgundy); color: var(--dx-cream); }
.dx-lp .dx-btn-dark:hover { background: var(--dx-wine); }
.dx-lp .dx-lp-note {
  margin: 14px 0 0;
  font-family: var(--dx-sans);
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.75;
}
.dx-lp .dx-lp-note span::before { content: "\2022"; margin: 0 8px; opacity: 0.6; }
.dx-lp .dx-lp-note span:first-child::before { content: none; }

/* 1. Hero */
.dx-lp .dx-lp-hero { min-height: min(92svh, 880px); }
.dx-lp .dx-lp-hero .dx-hero-title { font-size: clamp(42px, 6vw, 92px); }
.dx-lp .dx-lp-hero .dx-hero-title .dx-hero-reply {
  display: block;
  margin-top: 0.16em;
  font-family: var(--dx-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-variation-settings: normal;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1;
  font-size: 0.56em;
  color: var(--dx-mustard);
}
.dx-lp .dx-lp-hero .dx-hero-foot { align-items: end; }
.dx-lp .dx-lp-hero .dx-hero-foot > .dx-body { grid-column: 1 / span 6; max-width: 44ch; }
.dx-lp .dx-lp-hero .dx-hero-foot > .dx-lp-hero-act { grid-column: 8 / -1; justify-self: end; text-align: right; }
.dx-lp .dx-lp-hero .dx-lp-ctas { margin-top: 0; justify-content: flex-end; }
.dx-lp .dx-lp-hero .dx-lp-ctas .dx-link { color: var(--dx-cream); }

/* 2. Watch */
.dx-lp .dx-lp-watch .dx-head .dx-label { color: var(--dx-green); }
.dx-lp .dx-lp-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0d0a08 center / cover no-repeat;
  color: var(--dx-cream);
}
.dx-lp .dx-lp-video::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 10, 8, 0.25), rgba(14, 10, 8, 0.7));
}
.dx-lp .dx-lp-video iframe, .dx-lp .dx-lp-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
.dx-lp .dx-lp-video-soon {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 24px;
}
.dx-lp .dx-lp-play {
  width: clamp(68px, 7vw, 96px);
  height: clamp(68px, 7vw, 96px);
  border-radius: 50%;
  background: var(--dx-cream);
  color: var(--dx-burgundy);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.dx-lp .dx-lp-play svg { width: 34%; height: 34%; margin-left: 6%; }
.dx-lp .dx-lp-video-soon .dx-reply { color: var(--dx-cream); }
.dx-lp .dx-lp-watch-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 32px; margin-top: var(--dx-gap-m); }
.dx-lp .dx-lp-watch-foot .dx-body { font-size: var(--dx-t-body); color: var(--dx-ink-78); max-width: 52ch; }

/* 3. Problem: the questions */
.dx-lp .dx-lp-problem .dx-head .dx-label { color: var(--dx-mustard); }
.dx-lp .dx-lp-problem .dx-head .dx-statement .dx-reply { display: block; font-size: 1.05em; color: var(--dx-mustard); margin-top: 0.12em; }
.dx-lp .dx-lp-qs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.dx-lp .dx-lp-qs li {
  margin: 0;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid var(--dx-cream-line);
  font-family: var(--dx-sans);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.3;
  color: var(--dx-cream);
  background: rgba(237, 228, 211, 0.06);
}
.dx-lp .dx-lp-qs li:nth-child(even) { background: var(--dx-cream); color: var(--dx-burgundy); border-color: var(--dx-cream); }
.dx-lp .dx-lp-loss {
  margin: var(--dx-gap-l) 0 0;
  padding-top: var(--dx-gap-m);
  border-top: 1px solid var(--dx-cream-line);
  font-family: var(--dx-sans);
  font-weight: 500;
  font-size: var(--dx-t-statement);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 26ch;
  text-wrap: balance;
}
.dx-lp .dx-lp-loss em { font-family: var(--dx-serif); font-weight: 400; color: var(--dx-mustard); }

/* 4. Cost of a late answer (table) and 6. actions (table) */
.dx-lp .dx-lp-cost .dx-head .dx-label,
.dx-lp .dx-lp-actions .dx-head .dx-label { color: var(--dx-orange); }
.dx-lp .dx-lp-cost .dx-head .dx-statement .dx-reply,
.dx-lp .dx-lp-actions .dx-head .dx-statement .dx-reply { display: block; color: var(--dx-orange); margin-top: 0.12em; }
.dx-lp .dx-lp-table { width: 100%; border-collapse: collapse; font-family: var(--dx-sans); }
.dx-lp .dx-lp-table th {
  text-align: left;
  padding: 0 16px 14px 0;
  font-size: var(--dx-t-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dx-green);
  border-bottom: 1px solid var(--dx-burgundy);
}
.dx-lp .dx-lp-table td {
  padding: 20px 16px 20px 0;
  vertical-align: top;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dx-ink-78);
  border-bottom: 1px solid var(--dx-ink-line);
}
.dx-lp .dx-lp-table td:first-child { color: var(--dx-burgundy); font-weight: 600; width: 24%; }
.dx-lp .dx-lp-table td:last-child { color: var(--dx-burgundy); }
.dx-lp .dx-lp-table td q { font-family: var(--dx-serif); font-style: italic; font-size: 20px; quotes: "\201C" "\201D"; }
.dx-lp .dx-lp-table .dx-lp-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(44, 106, 69, 0.12);
  color: var(--dx-green);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.dx-lp .dx-lp-after { margin-top: var(--dx-gap-m); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 32px; }
.dx-lp .dx-lp-after .dx-body { font-size: var(--dx-t-body); color: var(--dx-ink-78); max-width: 56ch; }

/* 5. How it works: Know, Deploy, Answer, Learn */
.dx-lp .dx-lp-how .dx-head .dx-label { color: var(--dx-mustard); }
.dx-lp .dx-lp-how .dx-head .dx-statement .dx-reply { display: block; color: var(--dx-lavender); font-size: 1.05em; margin-top: 0.12em; }
.dx-lp .dx-lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; border-top: 1px solid var(--dx-cream-line); }
.dx-lp .dx-lp-steps li { margin: 0; padding: 28px 0 0; }
.dx-lp .dx-lp-steps .dx-num { display: block; font-family: var(--dx-sans); font-weight: 600; font-size: var(--dx-t-label); letter-spacing: 0.16em; color: var(--dx-mustard); margin-bottom: 14px; }
.dx-lp .dx-lp-steps h3 { margin: 0 0 12px; font-family: var(--dx-wide); font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 700; font-size: clamp(22px, 2vw, 30px); text-transform: uppercase; line-height: 1; color: var(--dx-cream); }
.dx-lp .dx-lp-steps p { margin: 0; font-family: var(--dx-sans); font-size: 16px; line-height: 1.55; color: var(--dx-cream-70); max-width: 30ch; }

/* 7. Insight */
.dx-lp .dx-lp-learn .dx-head .dx-label { color: var(--dx-mustard); }
.dx-lp .dx-lp-learn .dx-head .dx-statement .dx-reply { display: block; color: var(--dx-mustard); font-size: 1.05em; margin-top: 0.12em; }
.dx-lp .dx-lp-learn-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: var(--dx-gap-m); align-items: start; }
.dx-lp .dx-lp-feats { grid-column: 1 / span 7; list-style: none; margin: 0; padding: 0; }
.dx-lp .dx-lp-feats li { margin: 0; padding: 18px 0; border-bottom: 1px solid var(--dx-cream-line); font-family: var(--dx-sans); font-size: 17px; line-height: 1.5; color: var(--dx-cream-70); }
.dx-lp .dx-lp-feats li:first-child { border-top: 1px solid var(--dx-cream-line); }
.dx-lp .dx-lp-feats strong { color: var(--dx-cream); font-weight: 600; }

/* Built not to guess: big and simple, like "Never stands still." */
.dx-lp .dx-lp-promise { grid-column: 9 / -1; color: var(--dx-cream); }
.dx-lp .dx-lp-promise-title {
  margin: 0 0 24px;
  font-family: var(--dx-wide);
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  font-weight: 800;
  font-size: clamp(40px, 4.2vw, 64px);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--dx-cream);
}
.dx-lp .dx-lp-promise-title span { color: var(--dx-mustard); }
.dx-lp .dx-lp-promise-body { margin: 0; max-width: 30ch; font-family: var(--dx-sans); font-size: 17px; line-height: 1.5; color: var(--dx-cream-70); }

/* 8. Book */
.dx-lp .dx-lp-book { background: #F4EFE6; color: var(--dx-burgundy); }
.dx-lp .dx-lp-book .dx-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: var(--dx-gap-m); align-items: start; }
.dx-lp .dx-lp-book-copy { grid-column: 1 / span 5; position: sticky; top: 112px; }
.dx-lp .dx-lp-book-copy .dx-label { color: var(--dx-orange); margin-bottom: var(--dx-gap-s); }
.dx-lp .dx-lp-book-copy .dx-statement .dx-reply { display: block; color: var(--dx-green); font-size: 1.05em; margin-top: 0.12em; }
.dx-lp .dx-lp-next { list-style: none; margin: var(--dx-gap-m) 0 0; padding: 0; counter-reset: lpn; }
.dx-lp .dx-lp-next li { counter-increment: lpn; position: relative; margin: 0; padding: 16px 0 16px 48px; border-top: 1px solid var(--dx-ink-line); font-family: var(--dx-sans); font-size: 16px; line-height: 1.5; color: var(--dx-ink-78); }
.dx-lp .dx-lp-next li::before { content: "0" counter(lpn); position: absolute; left: 0; top: 17px; font-weight: 600; font-size: 12px; letter-spacing: 0.14em; color: var(--dx-orange); }
.dx-lp .dx-lp-next strong { display: block; color: var(--dx-burgundy); font-weight: 600; }
.dx-lp .dx-lp-book .dx-demo-notes { margin-top: 24px; }
.dx-lp .dx-lp-form { grid-column: 7 / -1; background: #FFFFFF; padding: clamp(8px, 1.5vw, 20px); box-shadow: 0 24px 60px rgba(62, 11, 25, 0.12); }
.dx-lp .dx-lp-form [data-fillout-id] { min-height: 640px; }
.dx-lp .dx-lp-form iframe { display: block; width: 100%; border: 0; }

/* 9. Close */
.dx-lp .dx-lp-close .dx-display { max-width: 18ch; }

/* Responsive */
@media (max-width: 900px) {
  .dx-lp .dx-lp-hero .dx-hero-foot > .dx-body,
  .dx-lp .dx-lp-hero .dx-hero-foot > .dx-lp-hero-act { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .dx-lp .dx-lp-hero .dx-lp-ctas { justify-content: flex-start; }
  .dx-lp .dx-lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
  .dx-lp .dx-lp-feats, .dx-lp .dx-lp-promise, .dx-lp .dx-lp-book-copy, .dx-lp .dx-lp-form { grid-column: 1 / -1; }
  .dx-lp .dx-lp-book-copy { position: static; }
}
@media (max-width: 640px) {
  .dx-lp .dx-lp-steps { grid-template-columns: 1fr; }
  .dx-lp .dx-lp-table thead { display: none; }
  .dx-lp .dx-lp-table, .dx-lp .dx-lp-table tbody, .dx-lp .dx-lp-table tr, .dx-lp .dx-lp-table td { display: block; width: 100%; }
  .dx-lp .dx-lp-table tr { padding: 16px 0; border-bottom: 1px solid var(--dx-ink-line); }
  .dx-lp .dx-lp-table td { padding: 2px 0; border: 0; width: auto !important; }
  .dx-lp .dx-lp-qs li { font-size: 15px; padding: 12px 18px; }
  .dx-lp .dx-lp-ctas .dx-btn { width: 100%; justify-content: center; }
}