/* ============================================================
   Digital Experts - home redesign, v4 additions
   2026.10.05. Scoped to main.dx. Loaded after de-home-jye.css.

   1. StoryBrand pass: problem sub-line, stakes line, guide head,
      the three-step plan, the success line, a dark button.
   2. Product screens, rebuilt in HTML from the app designs:
      Knowledge Base (desktop), the public chat (two phones) and
      Insights (desktop). Every size inside a screen is in design
      pixels, u(n), so a screen scales as one picture with its
      container. Desktop screens are drawn at 1100 wide, phones at
      390 wide.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@400;500&display=swap");

/* Archivo at normal width for the phone UI. The site only loads Archivo
   at width 125 (the headline face), so this regular-width cut gets its
   own family name and cannot change any other Archivo on the site. */
@font-face {
  font-family: "DX Archivo Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxKsv4Rn.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- 1. StoryBrand pass ---------------------------------------- */

.dx .dx-btn-dark { background: var(--dx-burgundy); color: var(--dx-cream); }
.dx .dx-btn-dark:hover { background: var(--dx-wine); }

.dx .dx-hero-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  font-family: var(--dx-sans);
  font-size: 13px;
  color: var(--dx-cream-70);
}

.dx .dx-exist-sub {
  margin: var(--dx-gap-m) auto 0;
  max-width: 40ch;
  color: var(--dx-cream-70);
}

.dx .dx-hook .dx-body { grid-column: 1 / span 6; color: var(--dx-cream-70); }

.dx .dx-voice .dx-head { grid-column: 1 / -1; }
.dx .dx-voice .dx-head .dx-label { color: var(--dx-green); }
.dx .dx-voice .dx-head .dx-statement { color: var(--dx-burgundy); }
.dx .dx-voice .dx-head .dx-statement .dx-reply { display: block; font-size: 1.05em; color: var(--dx-green); margin-top: 0.12em; }

.dx .dx-plan .dx-head .dx-label { color: var(--dx-orange); }
.dx .dx-plan .dx-head .dx-statement { color: var(--dx-burgundy); }
.dx .dx-plan .dx-head .dx-statement .dx-reply { display: block; font-size: 1.05em; color: var(--dx-orange); margin-top: 0.12em; }

.dx .dx-plan-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  border-top: 1px solid var(--dx-burgundy);
}

.dx .dx-plan-list li { padding: 28px 24px 8px 0; display: flex; flex-direction: column; gap: 10px; }
.dx .dx-plan-list .dx-num { font-family: var(--dx-sans); font-weight: 500; font-size: var(--dx-t-label); letter-spacing: 0.16em; color: var(--dx-orange); }
.dx .dx-plan-list .dx-reply { color: var(--dx-burgundy); font-size: clamp(24px, 2.2vw, 32px); }
.dx .dx-plan-list .dx-body { font-size: var(--dx-t-body); color: var(--dx-ink-78); max-width: 30ch; }

.dx .dx-plan-foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: var(--dx-gap-l); }
.dx .dx-plan-foot .dx-link { color: var(--dx-burgundy); }

.dx .dx-close-success { color: var(--dx-cream-70); margin-top: var(--dx-gap-s); }

/* --- 2. How it works: step rows -------------------------------- */

.dx .dx-meet .dx-head .dx-label { color: var(--dx-green); }

.dx .dx-step {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: center;
  padding: var(--dx-gap-l) 0;
  border-top: 1px solid var(--dx-burgundy);
}

.dx .dx-step + .dx-step { border-top-color: var(--dx-ink-line); }

.dx .dx-step-copy { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 14px; }
.dx .dx-step-stage { grid-column: 5 / -1; }
.dx .dx-step-flip .dx-step-copy { grid-column: 9 / -1; grid-row: 1; }
.dx .dx-step-flip .dx-step-stage { grid-column: 1 / span 8; grid-row: 1; }

.dx .dx-num {
  display: block;
  font-family: var(--dx-sans);
  font-weight: 500;
  font-size: var(--dx-t-label);
  letter-spacing: 0.16em;
  color: var(--dx-orange);
}

.dx .dx-step .dx-display { color: var(--dx-burgundy); }
.dx .dx-step .dx-reply { color: var(--dx-burgundy); font-size: clamp(24px, 2.2vw, 32px); }
.dx .dx-step .dx-body { font-size: var(--dx-t-body); color: var(--dx-ink-78); max-width: 34ch; }

.dx .dx-stage { position: relative; }

.dx .dx-stage-note {
  margin: 16px 0 0;
  text-align: right;
  font-family: var(--dx-sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(62, 11, 25, 0.5);
}

/* --- 3. Learn (forest) ------------------------------------------ */

.dx .dx-learn { padding-bottom: var(--dx-sec-y); }
.dx .dx-learn .dx-inner { display: block; }
.dx .dx-learn .dx-head { align-items: end; }
.dx .dx-learn .dx-head .dx-num { color: var(--dx-mustard); margin-bottom: 10px; }
.dx .dx-learn .dx-head .dx-body { color: var(--dx-cream-70); margin-top: var(--dx-gap-s); }
.dx .dx-learn-note { margin: 14px 0 0; font-family: var(--dx-sans); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(237, 228, 211, 0.45); text-align: right; }

/* --- 4. Desktop app screen -------------------------------------- */

.dx .dx-app {
  container-type: inline-size;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #F7F7F6;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 30px 70px rgba(23, 24, 26, 0.22);
}

.dx .dx-app-in {
  --u: calc(100cqw / 1100);
  display: grid;
  grid-template-columns: calc(232 * var(--u)) minmax(0, 1fr);
  height: calc(680 * var(--u));
  font-family: "Inter", system-ui, sans-serif;
  font-size: calc(14 * var(--u));
  color: #1C1B19;
  text-align: left;
  line-height: 1.4;
}

.dx .dx-app-in p, .dx .dx-app-in li { color: inherit; }

.dx .dx-app-side {
  display: flex;
  flex-direction: column;
  padding: calc(26 * var(--u)) calc(16 * var(--u)) calc(20 * var(--u));
  background: #FBFBFA;
  border-right: calc(1 * var(--u)) solid #EBEAE6;
}

.dx .dx-app-back { font-size: calc(10 * var(--u)); letter-spacing: 0.16em; color: #8B8A86; padding: 0 calc(10 * var(--u)); }

.dx .dx-app-org { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(22 * var(--u)) calc(10 * var(--u)) calc(22 * var(--u)); }
.dx .dx-app-org img { width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(9 * var(--u)); object-fit: cover; display: block; }
.dx .dx-app-org b { display: block; font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: calc(15 * var(--u)); line-height: 1.2; }
.dx .dx-app-org small { display: block; font-size: calc(9 * var(--u)); letter-spacing: 0.18em; color: #8B8A86; margin-top: calc(2 * var(--u)); }

.dx .dx-app-nav { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }

.dx .dx-app-nav span {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  height: calc(40 * var(--u));
  padding: 0 calc(14 * var(--u));
  border-radius: calc(10 * var(--u));
  font-size: calc(14 * var(--u));
  color: #3D3C38;
}

.dx .dx-app-nav span.on { background: #1C1B19; color: #FFFFFF; box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.12); }
.dx .dx-app-nav svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.dx .dx-app-rule { height: calc(1 * var(--u)); background: #EBEAE6; margin: calc(16 * var(--u)) calc(10 * var(--u)); }
.dx .dx-app-cap { font-size: calc(9 * var(--u)); letter-spacing: 0.18em; color: #9A9994; padding: 0 calc(14 * var(--u)) calc(8 * var(--u)); }

.dx .dx-app-sim {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(42 * var(--u));
  padding: 0 calc(16 * var(--u));
  border: calc(1 * var(--u)) solid #E6E5E1;
  border-radius: calc(10 * var(--u));
  background: #FFFFFF;
  font-size: calc(13 * var(--u));
  font-weight: 500;
}

.dx .dx-app-sim svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }

.dx .dx-app-main { padding: calc(40 * var(--u)) calc(44 * var(--u)); overflow: hidden; position: relative; }

.dx .dx-app-h1 { font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: calc(40 * var(--u)); line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
.dx .dx-app-sub { font-size: calc(15 * var(--u)); color: #6F6E6A; margin: calc(10 * var(--u)) 0 0; }

.dx .dx-app-tabs { display: flex; gap: calc(26 * var(--u)); margin-top: calc(28 * var(--u)); border-bottom: calc(1 * var(--u)) solid #E6E5E1; }
.dx .dx-app-tabs span { font-size: calc(11 * var(--u)); font-weight: 600; letter-spacing: 0.14em; color: #9A9994; padding-bottom: calc(12 * var(--u)); }
.dx .dx-app-tabs span.on { color: #1C1B19; box-shadow: inset 0 calc(-2 * var(--u)) 0 #1C1B19; }

.dx .dx-app-card {
  margin-top: calc(26 * var(--u));
  background: #FFFFFF;
  border: calc(1 * var(--u)) solid #EBEAE6;
  border-radius: calc(18 * var(--u));
  padding: calc(26 * var(--u)) calc(28 * var(--u));
}

.dx .dx-app-card-h { display: flex; gap: calc(14 * var(--u)); align-items: flex-start; }
.dx .dx-app-ico { flex: none; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; border: calc(1 * var(--u)) solid #E6E5E1; display: flex; align-items: center; justify-content: center; }
.dx .dx-app-ico svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: none; stroke: #1C1B19; stroke-width: 1.6; stroke-linecap: round; }
.dx .dx-app-h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: calc(24 * var(--u)); line-height: 1.2; margin: 0; }
.dx .dx-app-p { font-size: calc(13 * var(--u)); color: #55544F; margin: calc(6 * var(--u)) 0 0; max-width: calc(560 * var(--u)); }

.dx .dx-app-add { display: flex; gap: calc(12 * var(--u)); margin-top: calc(22 * var(--u)); }
.dx .dx-app-input { flex: 1; height: calc(48 * var(--u)); border-radius: calc(12 * var(--u)); background: #F3F3F1; border: calc(1 * var(--u)) solid #EBEAE6; display: flex; align-items: center; padding: 0 calc(18 * var(--u)); font-size: calc(14 * var(--u)); color: #6F6E6A; }
.dx .dx-app-btn { height: calc(48 * var(--u)); padding: 0 calc(22 * var(--u)); border-radius: calc(12 * var(--u)); background: #1C1B19; color: #FFFFFF; display: flex; align-items: center; font-size: calc(14 * var(--u)); font-weight: 600; white-space: nowrap; }

.dx .dx-app-table { margin-top: calc(20 * var(--u)); border: calc(1 * var(--u)) solid #EBEAE6; border-radius: calc(14 * var(--u)); overflow: hidden; }
.dx .dx-app-tr { display: grid; grid-template-columns: 1.6fr 1fr 0.8fr; align-items: center; padding: calc(14 * var(--u)) calc(18 * var(--u)); border-top: calc(1 * var(--u)) solid #EBEAE6; }
.dx .dx-app-tr:first-child { border-top: 0; background: #F7F7F6; padding: calc(12 * var(--u)) calc(18 * var(--u)); font-size: calc(10 * var(--u)); font-weight: 600; letter-spacing: 0.14em; color: #8B8A86; }
.dx .dx-app-site { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.dx .dx-app-site i { font-style: normal; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(9 * var(--u)); background: #F0EFEC; display: flex; align-items: center; justify-content: center; font-size: calc(13 * var(--u)); font-weight: 600; color: #55544F; }
.dx .dx-app-site b { display: block; font-weight: 500; font-size: calc(14 * var(--u)); }
.dx .dx-app-site small, .dx .dx-app-tr small { display: block; font-size: calc(12 * var(--u)); color: #8B8A86; }
.dx .dx-app-ok { justify-self: start; font-size: calc(9 * var(--u)); font-weight: 600; letter-spacing: 0.12em; color: #1F9A6C; background: #EAF6F0; border: calc(1 * var(--u)) solid #BFE5D3; border-radius: calc(5 * var(--u)); padding: calc(4 * var(--u)) calc(8 * var(--u)); }

/* A file being added: the knowledge going in. */
.dx .dx-app-toast {
  position: absolute;
  right: calc(36 * var(--u));
  bottom: calc(32 * var(--u));
  width: calc(330 * var(--u));
  background: #FFFFFF;
  border: calc(1 * var(--u)) solid #EBEAE6;
  border-radius: calc(14 * var(--u));
  box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(23, 24, 26, 0.16);
  padding: calc(16 * var(--u)) calc(18 * var(--u));
  display: flex;
  gap: calc(12 * var(--u));
  align-items: center;
}

.dx .dx-app-toast i { flex: none; font-style: normal; width: calc(38 * var(--u)); height: calc(46 * var(--u)); border-radius: calc(6 * var(--u)); background: #F3EDE4; border: calc(1 * var(--u)) solid #E6DCCB; display: flex; align-items: flex-end; justify-content: center; padding-bottom: calc(6 * var(--u)); font-size: calc(8 * var(--u)); font-weight: 600; letter-spacing: 0.1em; color: #A0521C; box-sizing: border-box; }
.dx .dx-app-toast b { display: block; font-weight: 500; font-size: calc(13 * var(--u)); }
.dx .dx-app-toast small { display: block; font-size: calc(12 * var(--u)); color: #8B8A86; margin-top: calc(2 * var(--u)); }
.dx .dx-app-bar { height: calc(4 * var(--u)); border-radius: calc(4 * var(--u)); background: #EBEAE6; margin-top: calc(8 * var(--u)); overflow: hidden; }
.dx .dx-app-bar span { display: block; height: 100%; width: 72%; background: #1F9A6C; border-radius: inherit; animation: dx-fill 3.6s ease-in-out infinite; }

@keyframes dx-fill { 0% { width: 8%; } 70% { width: 100%; } 100% { width: 100%; } }

/* Insights */
.dx .dx-app-ins .dx-app-in { height: calc(610 * var(--u)); }
.dx .dx-ins-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: calc(18 * var(--u)); margin-top: calc(24 * var(--u)); }
.dx .dx-ins-grid .dx-app-card { margin-top: 0; padding: calc(22 * var(--u)) calc(24 * var(--u)); }
.dx .dx-ins-cap { font-size: calc(10 * var(--u)); font-weight: 600; letter-spacing: 0.14em; color: #8B8A86; margin: 0 0 calc(14 * var(--u)); }

.dx .dx-ins-row { display: grid; grid-template-columns: calc(150 * var(--u)) minmax(0, 1fr); align-items: center; gap: calc(14 * var(--u)); padding: calc(7 * var(--u)) 0; font-size: calc(13 * var(--u)); }
.dx .dx-ins-row i { display: block; height: calc(8 * var(--u)); border-radius: calc(8 * var(--u)); background: #1C1B19; }

.dx .dx-ins-gap { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.dx .dx-ins-gap .dx-app-h2 { font-size: calc(22 * var(--u)); margin-top: calc(2 * var(--u)); }
.dx .dx-ins-dot { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(10 * var(--u)); font-weight: 600; letter-spacing: 0.14em; color: #A0521C; }
.dx .dx-ins-dot::before { content: ""; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #E08A3C; }
.dx .dx-ins-gap .dx-app-btn { margin-top: auto; align-self: flex-start; height: calc(40 * var(--u)); font-size: calc(13 * var(--u)); }

.dx .dx-ins-work { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(14 * var(--u)); }
.dx .dx-ins-work-cap { margin: calc(26 * var(--u)) 0 calc(12 * var(--u)); }
.dx .dx-ins-work div { background: #FFFFFF; border: calc(1 * var(--u)) solid #EBEAE6; border-radius: calc(14 * var(--u)); padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(20 * var(--u)); }
.dx .dx-ins-work b { display: block; font-size: calc(10 * var(--u)); font-weight: 600; letter-spacing: 0.14em; color: #1F9A6C; margin-bottom: calc(8 * var(--u)); }
.dx .dx-ins-work p { margin: 0; font-size: calc(14 * var(--u)); line-height: 1.45; color: #3D3C38; }

/* --- 5. Phone screens ------------------------------------------- */

.dx .dx-phones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 40px);
  max-width: 640px;
  margin: 0 auto;
  align-items: start;
}

.dx .dx-phones > :nth-child(2) { margin-top: 12%; }

.dx .dx-phone2 {
  container-type: inline-size;
  border-radius: 13% / 6%;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(23, 24, 26, 0.24);
  background: #111111;
}

.dx .dx-ph {
  --u: calc(100cqw / 390);
  position: relative;
  height: calc(844 * var(--u));
  display: flex;
  flex-direction: column;
  font-family: "DX Archivo Text", "Epilogue", system-ui, sans-serif;
  font-stretch: 100%;
  font-variation-settings: normal;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-align: left;
  color: #FFFFFF;
}

.dx .dx-ph p { color: inherit; margin: 0; }
.dx .dx-ph .dx-ph-me { color: #FFFFFF; }

.dx .dx-ph-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* Moving background: a 16:9 video scaled to cover the 390 x 844 screen. */
.dx .dx-ph-video { position: absolute; top: 50%; left: 50%; width: calc(1500 * var(--u)); height: calc(844 * var(--u)); transform: translate(-50%, -50%); border: 0; pointer-events: none; }
.dx .dx-ph-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.45) 40%, rgba(0,0,0,0.88)); }

.dx .dx-ph-top { position: relative; padding: calc(28 * var(--u)) calc(24 * var(--u)) 0 calc(28 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 600; letter-spacing: 0.12em; }

.dx .dx-ph-side { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: calc(16 * var(--u)); padding: calc(64 * var(--u)) calc(18 * var(--u)) 0 0; }
.dx .dx-ph-side span { display: flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(10 * var(--u)); font-weight: 600; letter-spacing: 0.14em; }
.dx .dx-ph-side i { width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; border: calc(1 * var(--u)) solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; }
.dx .dx-ph-side svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.dx .dx-ph-foot { position: relative; margin-top: auto; padding: 0 calc(28 * var(--u)) calc(30 * var(--u)); display: flex; flex-direction: column; gap: calc(26 * var(--u)); }
.dx .dx-ph-h { font-weight: 700; font-size: calc(38 * var(--u)); line-height: 1.05; letter-spacing: -0.025em; }
.dx .dx-ph-qs span { display: flex; justify-content: space-between; align-items: center; min-height: calc(50 * var(--u)); gap: calc(12 * var(--u)); border-top: calc(1 * var(--u)) solid rgba(255,255,255,0.28); font-size: calc(15 * var(--u)); font-weight: 400; }

.dx .dx-ph-ask {
  display: flex;
  align-items: center;
  height: calc(58 * var(--u));
  border-radius: 999px;
  background: #FFFFFF;
  color: #6A6A66;
  padding: 0 calc(6 * var(--u)) 0 calc(22 * var(--u));
  font-size: calc(15 * var(--u));
  box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,0.25);
}

.dx .dx-ph-ask b, .dx .dx-ph-send { margin-left: auto; width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; background: #143D22; color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex: none; }
.dx .dx-ph-ask svg, .dx .dx-ph-send svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* chat */
.dx .dx-ph-chat { background: #F4F2EE; color: #17181A; }
.dx .dx-ph-bar { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(26 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u)) calc(22 * var(--u)); background: #FFFFFF; }
.dx .dx-ph-bar svg.back { width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: none; stroke: #17181A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dx .dx-ph-bar b { display: block; font-size: calc(16 * var(--u)); font-weight: 600; }
.dx .dx-ph-bar small { display: block; font-size: calc(12 * var(--u)); font-weight: 400; color: #55565B; }
.dx .dx-ph-more { margin-left: auto; width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; background: #E2C55A; display: flex; align-items: center; justify-content: center; font-size: calc(18 * var(--u)); font-weight: 700; letter-spacing: 0.05em; color: #132E1B; }

.dx .dx-ph-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(14 * var(--u)); padding: calc(20 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); }
.dx .dx-ph-time { align-self: center; font-size: calc(12 * var(--u)); color: #6C6D72; }
.dx .dx-ph-me { align-self: flex-end; max-width: calc(280 * var(--u)); background: #143D22; color: #FFFFFF; border-radius: calc(20 * var(--u)) calc(20 * var(--u)) calc(6 * var(--u)) calc(20 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.4; font-weight: 500; }
.dx .dx-ph-search { align-self: flex-start; display: flex; align-items: center; gap: calc(10 * var(--u)); background: #6E6E6A; color: #FFFFFF; border-radius: calc(14 * var(--u)); padding: calc(9 * var(--u)) calc(13 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 500; }
.dx .dx-ph-search::before { content: ""; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; border: calc(2 * var(--u)) solid rgba(255,255,255,0.35); border-top-color: #FFFFFF; animation: dx-spin 1s linear infinite; }

@keyframes dx-spin { to { transform: rotate(360deg); } }

.dx .dx-ph-ans { align-self: flex-start; max-width: calc(300 * var(--u)); background: #FFFFFF; border-radius: calc(20 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)) calc(6 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.5; }
.dx .dx-ph-ans ol { margin: calc(10 * var(--u)) 0 0; padding: 0; list-style: none; counter-reset: dxn; }
.dx .dx-ph-ans li { counter-increment: dxn; display: grid; grid-template-columns: calc(22 * var(--u)) 1fr; padding: calc(3 * var(--u)) 0; color: #17181A; }
.dx .dx-ph-ans li::before { content: counter(dxn); font-weight: 600; color: #143D22; }
.dx .dx-ph-pill { display: inline-block; margin-top: calc(14 * var(--u)); padding: calc(9 * var(--u)) calc(14 * var(--u)); border-radius: 999px; border: calc(1.5 * var(--u)) solid #143D22; font-size: calc(13 * var(--u)); font-weight: 600; color: #143D22; }
.dx .dx-ph-by { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(12 * var(--u)); color: #55565B; }
.dx .dx-ph-by i { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; background: #143D22; display: flex; align-items: center; justify-content: center; }
.dx .dx-ph-by svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); fill: #E2C55A; }

.dx .dx-ph-input { margin: 0 calc(14 * var(--u)) calc(24 * var(--u)); height: calc(54 * var(--u)); border-radius: 999px; background: #FFFFFF; box-shadow: 0 0 0 calc(1 * var(--u)) #E8E6E1; display: flex; align-items: center; padding: 0 calc(5 * var(--u)) 0 calc(20 * var(--u)); font-size: calc(15 * var(--u)); color: #8A8A86; }

/* --- Responsive ------------------------------------------------- */

@media (max-width: 900px) {
  .dx .dx-step-copy,
  .dx .dx-step-stage,
  .dx .dx-step-flip .dx-step-copy,
  .dx .dx-step-flip .dx-step-stage { grid-column: 1 / -1; grid-row: auto; }
  .dx .dx-step { row-gap: var(--dx-gap-m); }
  .dx .dx-hook .dx-body { grid-column: 1 / -1; }
  .dx .dx-plan-list { grid-template-columns: 1fr; }
  .dx .dx-plan-list li { padding-right: 0; border-bottom: 1px solid var(--dx-ink-line); padding-bottom: 24px; }
  .dx .dx-hero-actions { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .dx .dx-app-bar span, .dx .dx-ph-search::before { animation: none; }
}

/* --- 6. Hero actions: one tidy row ------------------------------
   Ask bar and Book a demo sit side by side at the same 56px height,
   centred against the intro line. */

.dx .dx-hero-foot { align-items: center; }
.dx .dx-hero-cta { display: flex; align-items: center; gap: 12px; }
.dx .dx-hero-cta .de-ask-bar { flex: 1 1 auto; min-width: 0; height: 56px; box-sizing: border-box; }
.dx .dx-hero-demo { flex: none; height: 56px; padding: 0 28px; box-sizing: border-box; justify-content: center; }

@media (max-width: 600px) {
  .dx .dx-hero-cta { flex-wrap: wrap; }
  .dx .dx-hero-cta .de-ask-bar { flex-basis: 100%; }
  .dx .dx-hero-demo { width: 100%; }
}

/* --- 7. Floating questions ---------------------------------------
   A slow drift on the ghosted questions. Uses the separate translate
   property so each question keeps its own rotation. */

@keyframes dx-float {
  0%   { translate: 0 0; }
  25%  { translate: 6px -8px; }
  50%  { translate: -4px -14px; }
  75%  { translate: -8px -5px; }
  100% { translate: 0 0; }
}

.dx .dx-ghost { animation: dx-float 16s ease-in-out infinite; }
.dx .dx-ghost:nth-child(2n) { animation-duration: 19s; animation-direction: reverse; }
.dx .dx-ghost:nth-child(3n) { animation-duration: 22s; animation-delay: -7s; }
.dx .dx-ghost:nth-child(4n+1) { animation-delay: -3s; }
.dx .dx-ghost:nth-child(5n) { animation-duration: 25s; animation-delay: -12s; }

@media (prefers-reduced-motion: reduce) {
  .dx .dx-ghost { animation: none; }
}