/* ============================================================
   Digital Experts - platform page in the home design system
   2026.10.06. Scoped to main.dx.dx-pf. Uses the tokens and
   voices from de-home-jye.css (wide caps headlines, Epilogue for
   everything else, serif kept for the home hook only).
   ============================================================ */

.dx.dx-pf { --dx-pf-cream: #F2F0EA; --dx-pf-navy: #1B2A6B; }

.dx-pf .dx-pf-cream { background: var(--dx-pf-cream); color: var(--dx-forest); }

/* Statement heads read as one sans line in two colours. */
.dx-pf .dx-head .dx-statement { max-width: 22ch; }
.dx-pf .dx-pf-cream .dx-head .dx-label { color: var(--dx-green); }
.dx-pf .dx-pf-cream .dx-statement .dx-reply { color: var(--dx-green); }
.dx-pf .dx-burgundy .dx-head .dx-label { color: var(--dx-mustard); }
.dx-pf .dx-burgundy .dx-statement .dx-reply { color: var(--dx-mustard); }
.dx-pf .dx-meet .dx-statement .dx-reply { color: var(--dx-orange); }

/* Hero: photo instead of video */
.dx-pf .dx-pf-hero { background-size: cover; background-position: center; }
.dx-pf .dx-pf-hero::after { background: linear-gradient(180deg, rgba(14, 10, 8, 0.55) 0%, rgba(14, 10, 8, 0.35) 40%, rgba(14, 10, 8, 0.82) 100%); }

/* Problem: lead and the compare columns */
.dx-pf .dx-pf-lead {
  margin: 0 0 var(--dx-gap-l) calc((100% + 24px) / 12 * 4);
  max-width: 46ch;
  color: var(--dx-cream-70);
}

.dx-pf .dx-pf-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.dx-pf .dx-pf-col {
  border: 1px solid var(--dx-cream-line);
  border-radius: 24px;
  padding: 32px;
}

.dx-pf .dx-pf-col.is-de { background: var(--dx-cream); color: var(--dx-burgundy); border-color: var(--dx-cream); }
.dx-pf .dx-pf-col .dx-label { margin-bottom: 18px; color: var(--dx-cream-70); }
.dx-pf .dx-pf-col.is-de .dx-label { color: var(--dx-orange); }

.dx-pf .dx-pf-col ul { list-style: none; margin: 0; padding: 0; }

.dx-pf .dx-pf-col li {
  font-family: var(--dx-sans);
  font-size: var(--dx-t-body);
  line-height: 1.45;
  padding: 14px 0 14px 28px;
  border-top: 1px solid var(--dx-cream-line);
  position: relative;
}

.dx-pf .dx-pf-col.is-de li { border-top-color: var(--dx-ink-line); }
.dx-pf .dx-pf-col li::before { content: "\00D7"; position: absolute; left: 2px; top: 13px; color: var(--dx-cream-70); }
.dx-pf .dx-pf-col.is-de li::before { content: "\2713"; color: var(--dx-green); }

/* Numbered four-up grid (control and teams) */
.dx-pf .dx-pf-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.dx-pf .dx-pf-grid li { border-top: 1px solid currentColor; padding-top: 20px; }
.dx-pf .dx-pf-grid .dx-num { display: block; font-family: var(--dx-sans); font-weight: 600; font-size: var(--dx-t-label); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 14px; }
.dx-pf .dx-pf-grid h3 { font-family: var(--dx-sans); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 10px; }
.dx-pf .dx-pf-grid p { font-family: var(--dx-sans); font-size: var(--dx-t-body); line-height: 1.5; margin: 0; }

.dx-pf .dx-pf-control .dx-pf-grid .dx-num { color: var(--dx-orange); }
.dx-pf .dx-pf-control .dx-pf-grid p { color: rgba(29, 42, 34, 0.78); }
.dx-pf .dx-pf-teams .dx-pf-grid li { border-top-color: var(--dx-cream-line); }
.dx-pf .dx-pf-teams .dx-pf-grid .dx-num { color: var(--dx-mustard); }
.dx-pf .dx-pf-teams .dx-pf-grid p { color: var(--dx-cream-70); }

.dx-pf .dx-pf-foot { margin-top: var(--dx-gap-m); }
.dx-pf .dx-pf-teams .dx-link { color: var(--dx-cream); }

/* Know / Answer / Learn: product name, ticks and link */
.dx-pf .dx-pf-prod { color: var(--dx-green); margin-top: 6px; }
.dx-pf .dx-learn .dx-pf-prod { color: var(--dx-mustard); margin-top: 0; margin-bottom: 14px; }

.dx-pf .dx-pf-ticks { list-style: none; margin: 4px 0 0; padding: 0; }

.dx-pf .dx-pf-ticks li {
  font-family: var(--dx-sans);
  font-size: 15px;
  line-height: 1.45;
  padding: 6px 0 6px 24px;
  position: relative;
}

.dx-pf .dx-pf-ticks li::before { content: "\2713"; position: absolute; left: 0; top: 6px; color: var(--dx-orange); font-weight: 600; }
.dx-pf .dx-learn .dx-pf-ticks li { color: var(--dx-cream-70); }
.dx-pf .dx-learn .dx-pf-ticks li::before { color: var(--dx-mustard); }

.dx-pf .dx-pf-more { display: inline-block; margin-top: 14px; color: var(--dx-green); align-self: flex-start; }
.dx-pf .dx-learn .dx-pf-more { color: var(--dx-cream); }

.dx-pf .dx-learn-top > .dx-pf-learn-side { grid-column: 8 / -1; }
.dx-pf .dx-learn-top > .dx-pf-learn-side .dx-body { font-size: var(--dx-t-body); color: var(--dx-cream-70); max-width: 40ch; }

/* One conversation: chat and the four jobs */
.dx-pf .dx-pf-ex {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: var(--dx-gap-l);
  align-items: start;
}

.dx-pf .dx-pf-chat {
  grid-column: 1 / span 6;
  background: #FFFFFF;
  border-radius: 24px;
  padding: 22px 22px 26px;
  box-shadow: 0 24px 60px rgba(21, 48, 31, 0.10);
  font-family: var(--dx-sans);
}

.dx-pf .dx-pf-chat-bar {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(21, 48, 31, 0.1);
  color: var(--dx-forest);
  font-size: 14px;
}

.dx-pf .dx-pf-chat-bar small { color: rgba(29, 42, 34, 0.55); font-size: 12px; }
.dx-pf .dx-pf-chat-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dx-mustard); align-self: center; }

.dx-pf .dx-pf-me {
  margin: 0 0 12px auto;
  max-width: 78%;
  width: fit-content;
  background: var(--dx-forest);
  color: #FFFFFF;
  padding: 11px 15px;
  border-radius: 18px 18px 4px 18px;
  font-size: 15px;
  line-height: 1.4;
}

.dx-pf .dx-pf-bot {
  margin: 0 0 16px;
  max-width: 86%;
  background: var(--dx-pf-cream);
  color: var(--dx-forest);
  padding: 13px 15px 15px;
  border-radius: 18px 18px 18px 4px;
  font-size: 15px;
  line-height: 1.45;
}

.dx-pf .dx-pf-pill {
  display: table;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--dx-forest);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
}

.dx-pf .dx-pf-pill.is-ghost { background: transparent; color: var(--dx-forest); border: 1px solid var(--dx-forest); }

.dx-pf .dx-pf-jobs {
  grid-column: 8 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dx-pf .dx-pf-jobs li { padding: 18px 0; border-top: 1px solid rgba(21, 48, 31, 0.16); }
.dx-pf .dx-pf-jobs li:first-child { border-top-color: var(--dx-forest); padding-top: 0; border-top: 0; }
.dx-pf .dx-pf-jobs .dx-num { display: block; font-family: var(--dx-sans); font-weight: 600; font-size: var(--dx-t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dx-orange); margin-bottom: 6px; }
.dx-pf .dx-pf-jobs h3 { font-family: var(--dx-sans); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--dx-forest); }
.dx-pf .dx-pf-jobs p { font-family: var(--dx-sans); font-size: var(--dx-t-body); line-height: 1.5; margin: 0; color: rgba(29, 42, 34, 0.78); }

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

@media (max-width: 900px) {
  .dx-pf .dx-pf-lead { margin-left: 0; }
  .dx-pf .dx-pf-compare { grid-template-columns: 1fr; }
  .dx-pf .dx-pf-grid { grid-template-columns: 1fr 1fr; }
  .dx-pf .dx-pf-chat,
  .dx-pf .dx-pf-jobs,
  .dx-pf .dx-learn-top > .dx-pf-learn-side { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .dx-pf .dx-pf-grid { grid-template-columns: 1fr; }
  .dx-pf .dx-pf-col { padding: 24px; }
}

/* --- Brand Studio screen with the edit-area drawer (Know step) ---
   Rebuilt from the Design canvas (Brand Studio: choose a presentation,
   and the area of expertise side panel). Same 1100-unit scale as the
   other desktop screens. */

.dx-pf .dx-app-bs .dx-app-in { position: relative; }
.dx-pf .dx-app-bs .dx-app-main { padding: calc(36 * var(--u)) calc(40 * var(--u)); }
.dx-pf .dx-app-bs .dx-app-h1 { font-size: calc(34 * var(--u)); }

.dx-pf .dx-bs-pres { margin-top: calc(20 * var(--u)); padding: calc(20 * var(--u)) calc(22 * var(--u)); }
.dx-pf .dx-bs-pres .dx-app-h2 { font-size: calc(19 * var(--u)); }
.dx-pf .dx-bs-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(12 * var(--u)); margin-top: calc(16 * var(--u)); }

.dx-pf .dx-bs-mode {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  padding: calc(12 * var(--u));
  border-radius: calc(14 * var(--u));
  border: calc(2 * var(--u)) solid #EBE7E0;
  background: #FFFFFF;
}

.dx-pf .dx-bs-mode.on { border-color: #1C1B19; box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(28, 27, 25, 0.08); }
.dx-pf .dx-bs-mode b { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 600; }
.dx-pf .dx-bs-mode b em { font-style: normal; font-size: calc(8 * var(--u)); letter-spacing: 0.12em; padding: calc(3 * var(--u)) calc(6 * var(--u)); border-radius: 999px; background: #EEECE7; color: #4F4A42; }
.dx-pf .dx-bs-mode.on b em { background: #DFF0EE; color: #155E5B; }
.dx-pf .dx-bs-mode small { font-size: calc(11 * var(--u)); line-height: 1.45; color: #5F5A51; }

.dx-pf .dx-bs-thumb { height: calc(58 * var(--u)); border-radius: calc(9 * var(--u)); background: #F3F1EC; display: flex; align-items: center; justify-content: center; gap: calc(5 * var(--u)); }
.dx-pf .dx-bs-thumb i { display: block; }
.dx-pf .t-areas { display: grid; grid-template-columns: repeat(2, calc(46 * var(--u))); grid-auto-rows: calc(20 * var(--u)); align-content: center; justify-content: center; }
.dx-pf .t-areas i { border-radius: calc(4 * var(--u)); background: #D9E5E4; }
.dx-pf .t-areas i:nth-child(1) { background: center / cover url('https://claudecms.com/uploads/assets/16/7fd8419cbaedb3df.jpg'); }
.dx-pf .t-areas i:nth-child(4) { background: center / cover url('https://claudecms.com/uploads/assets/16/df37cc27bd9191a9.jpg'); }
.dx-pf .t-areas i:nth-child(3) { background: #E3DDD0; }
.dx-pf .t-sym i { width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(6 * var(--u)); background: #2B8A86; }
.dx-pf .t-chars i { width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; border: calc(2 * var(--u)) solid #FFFFFF; margin-left: calc(-9 * var(--u)); background: #CDBFA8; }
.dx-pf .t-chars i:nth-child(2) { background: #A9B9B0; }
.dx-pf .t-chars i:nth-child(3) { background: #8C7B6A; }

.dx-pf .dx-bs-list-h { display: flex; justify-content: space-between; align-items: flex-end; margin-top: calc(24 * var(--u)); }
.dx-pf .dx-bs-list-h .dx-app-h2 { font-size: calc(22 * var(--u)); }
.dx-pf .dx-bs-list-h .dx-app-btn { height: calc(38 * var(--u)); border-radius: 999px; font-size: calc(12 * var(--u)); }

.dx-pf .dx-bs-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(14 * var(--u)); margin-top: calc(14 * var(--u)); }

.dx-pf .dx-bs-area { background: #FFFFFF; border: calc(1 * var(--u)) solid #E8E5DF; border-radius: calc(16 * var(--u)); overflow: hidden; }
.dx-pf .dx-bs-area > i { display: block; height: calc(84 * var(--u)); background-size: cover; background-position: center; }
.dx-pf .dx-bs-area > i.empty { background: #F1EEE8; border-bottom: calc(1 * var(--u)) dashed #D6D1C7; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: calc(11 * var(--u)); color: #6B665D; }
.dx-pf .dx-bs-area div { padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); }
.dx-pf .dx-bs-area b { display: block; font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: calc(17 * var(--u)); }
.dx-pf .dx-bs-area small { display: block; font-size: calc(9 * var(--u)); letter-spacing: 0.12em; color: #7A756C; margin-top: calc(2 * var(--u)); }
.dx-pf .dx-bs-chips { display: flex; flex-wrap: wrap; gap: calc(5 * var(--u)); margin-top: calc(9 * var(--u)); }
.dx-pf .dx-bs-chips span { font-size: calc(10 * var(--u)); padding: calc(4 * var(--u)) calc(8 * var(--u)); border-radius: calc(7 * var(--u)); background: #F5F3EF; border: calc(1 * var(--u)) solid #EBE7E0; color: #3D3A35; }

.dx-pf .dx-bs-scrim { position: absolute; inset: 0; background: rgba(28, 27, 25, 0.28); }

.dx-pf .dx-bs-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(400 * var(--u));
  background: #FFFFFF;
  box-shadow: calc(-20 * var(--u)) 0 calc(50 * var(--u)) rgba(0, 0, 0, 0.18);
  padding: calc(28 * var(--u)) calc(28 * var(--u)) calc(24 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  overflow: hidden;
}

.dx-pf .dx-bs-cap { font-size: calc(10 * var(--u)); font-weight: 500; letter-spacing: 0.14em; color: #8B8A86; margin: 0; }
.dx-pf .dx-bs-drawer .dx-app-h2 { font-size: calc(24 * var(--u)); margin-top: calc(-6 * var(--u)); }
.dx-pf .dx-bs-field { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.dx-pf .dx-bs-field > span { font-size: calc(13 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: #F7F7F6; border: calc(1 * var(--u)) solid #EBEAE6; }

.dx-pf .dx-bs-pics { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(8 * var(--u)); }
.dx-pf .dx-bs-pics i { aspect-ratio: 1; border-radius: calc(10 * var(--u)); background-size: cover; background-position: center; background-color: #F3F3F1; }
.dx-pf .dx-bs-pics i.on { box-shadow: 0 0 0 calc(2 * var(--u)) #FFFFFF, 0 0 0 calc(4 * var(--u)) #1C1B19; }

.dx-pf .dx-bs-src { display: flex; flex-direction: column; border: calc(1 * var(--u)) solid #EBEAE6; border-radius: calc(12 * var(--u)); }
.dx-pf .dx-bs-src > span { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); border-top: calc(1 * var(--u)) solid #EBEAE6; font-size: calc(12 * var(--u)); }
.dx-pf .dx-bs-src > span:first-child { border-top: 0; }
.dx-pf .dx-bs-src em { font-style: normal; display: block; font-size: calc(10 * var(--u)); color: #8B8A86; }
.dx-pf .dx-bs-src > span::before { content: "\2713"; flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(4 * var(--u)); background: #1C1B19; color: #FFFFFF; font-size: calc(10 * var(--u)); display: flex; align-items: center; justify-content: center; }
.dx-pf .dx-bs-src > span.off::before { content: ""; background: #FFFFFF; box-shadow: inset 0 0 0 calc(1.5 * var(--u)) #CFCDC7; }

.dx-pf .dx-bs-toggle { display: flex; justify-content: space-between; align-items: center; gap: calc(12 * var(--u)); font-size: calc(12 * var(--u)); }
.dx-pf .dx-bs-toggle i { flex: none; width: calc(38 * var(--u)); height: calc(22 * var(--u)); border-radius: 999px; background: #1FB97A; position: relative; }
.dx-pf .dx-bs-toggle i::after { content: ""; position: absolute; top: calc(3 * var(--u)); right: calc(3 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; background: #FFFFFF; }

.dx-pf .dx-bs-actions { margin-top: auto; display: flex; justify-content: flex-end; gap: calc(8 * var(--u)); }
.dx-pf .dx-bs-actions span { height: calc(38 * var(--u)); padding: 0 calc(18 * var(--u)); border-radius: 999px; display: flex; align-items: center; font-size: calc(12 * var(--u)); font-weight: 600; border: calc(1 * var(--u)) solid #E3E0DA; }
.dx-pf .dx-bs-actions span:last-child { background: #1C1B19; border-color: #1C1B19; color: #FFFFFF; }