/* ============================================================
   Digital Experts - live product panels (platform-build)
   Loaded after de-2026-components.css, which defines the shared
   .de-ui frame these two panels sit inside.

   Two recreations of the real product, animated:

     .de-studio   Brand Studio. Pick a colour, pick a typeface,
                  watch the guest-facing preview follow.
     .de-kb       Knowledge Base. A file lands, indexes, and turns
                  from Processing to Ready.

   ------------------------------------------------------------
   WHY THIS IS PURE CSS, ON AN INFINITE LOOP
   ------------------------------------------------------------
   Everything here runs on CSS animations with `infinite`. There
   is no script and no IntersectionObserver.

   That is a deliberate choice made twice on this site now. The
   home page collage was originally built to reveal on scroll and
   left a blank hole wherever the observer did not fire; it had to
   be rebuilt so its finished state was the default. The mobile
   launcher had the same defect for the same reason. An
   observer-gated entrance turns every failure mode into an
   invisible element.

   So: the 0% keyframe of every animation below is a complete,
   correct, sensible screen. If animations never advance - a
   throttled background tab, a browser that ignores them, a
   screenshot taken at t=0 - what remains is Brand Studio with a
   green brand colour and Classic Luxury selected, and a Knowledge
   Base with one file still processing. Both are exactly what the
   product looks like sitting still. Nothing is hidden waiting for
   a trigger that may never come.

   ------------------------------------------------------------
   HOW THE THREE-PHASE CYCLE WORKS
   ------------------------------------------------------------
   Brand Studio runs a 12s loop of three 4s phases. Rather than
   give each phase its own keyframes, one set of keyframes is
   shared and the three elements are offset with NEGATIVE
   animation-delay, which starts an animation part-way through
   instead of postponing it:

     phase 1   animation-delay: 0s     selected at t = 0-3.4s
     phase 2   animation-delay: -8s    selected at t = 4-7.4s
     phase 3   animation-delay: -4s    selected at t = 8-11.4s

   Because the colour swatch, the hex readout, the typography
   selection and the phone preview all share that one 12s clock,
   they change together, which is the whole point: the preview is
   downstream of the setting.

   Text cannot be animated in CSS, so anything whose WORDS change
   (the hex value, the preview's heading typeface) is three
   stacked elements cross-fading on those same three delays,
   rather than one element being rewritten.
   ============================================================ */

.de-studio, .de-kb { --de-st-cycle: 12s; }

/* The three brand colours the demo cycles through: the resort
   green, the Digital Experts navy, and a burgundy. */
@keyframes de-st-accent {
  0%,   28% { background-color: #2C6C60; }
  33%,  61% { background-color: #00205B; }
  66%,  94% { background-color: #6B2737; }
  100%      { background-color: #2C6C60; }
}

/* Cross-fade for text that changes between phases. Held opaque
   for its third, out for the rest. */
@keyframes de-st-swap {
  0%,   29% { opacity: 1; }
  34%,  95% { opacity: 0; }
  100%      { opacity: 1; }
}

/* The selected state of a settings card. */
@keyframes de-st-sel {
  0%,   28% { border-color: var(--de-green); background: var(--de-green-soft); }
  34%,  94% { border-color: rgba(21, 71, 52, 0.14); background: var(--de-white); }
  100%      { border-color: var(--de-green); background: var(--de-green-soft); }
}

@keyframes de-st-sel-text {
  0%,   28% { color: var(--de-green); }
  34%,  94% { color: var(--de-green-deep); }
  100%      { color: var(--de-green); }
}

/* ============================================================
   1. BRAND STUDIO
   ============================================================ */

.de-studio-body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 26px;
  padding: 26px;
  background: #FBFAF8;
  align-items: start;
}

.de-st-field {
  background: var(--de-white);
  border: 1px solid rgba(21, 71, 52, 0.14);
  border-radius: 14px;
  padding: 20px;
}

.de-st-field + .de-st-field { margin-top: 16px; }

/* The colour setting puts its label and its control on one line,
   the way the product does. */
.de-st-field.is-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.de-ui .de-st-lab {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}

.de-ui .de-st-help {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 5px 0 0;
}

/* --- Colour control ------------------------------------------ */

.de-st-colour {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

/* Fixed width so the three stacked hex values do not shift the
   swatch as they swap. */
.de-st-hex {
  position: relative;
  display: block;
  width: 88px;
  height: 28px;
}

.de-ui .de-st-hex i {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-body);
  background: #F4F2EE;
  border-radius: 7px;
  animation: de-st-swap var(--de-st-cycle) ease-in-out infinite;
}

.de-st-hex i.p2 { animation-delay: -8s; }
.de-st-hex i.p3 { animation-delay: -4s; }

.de-st-swatch {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(10, 25, 19, 0.12);
  background-color: #2C6C60;
  animation: de-st-accent var(--de-st-cycle) ease-in-out infinite;
}

/* --- Typography pairing -------------------------------------- */

.de-st-type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.de-st-card {
  display: block;
  padding: 13px 15px;
  border-radius: 10px;
  border: 1px solid rgba(21, 71, 52, 0.14);
  background: var(--de-white);
}

.de-st-card.p1, .de-st-card.p2, .de-st-card.p3 {
  animation: de-st-sel var(--de-st-cycle) ease-in-out infinite;
}

.de-st-card.p2 { animation-delay: -8s; }
.de-st-card.p3 { animation-delay: -4s; }

.de-ui .de-st-card b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--de-green-deep);
  line-height: 1.25;
}

.de-ui .de-st-card.p1 b, .de-ui .de-st-card.p2 b, .de-ui .de-st-card.p3 b {
  animation: de-st-sel-text var(--de-st-cycle) ease-in-out infinite;
}

.de-ui .de-st-card.p2 b { animation-delay: -8s; }
.de-ui .de-st-card.p3 b { animation-delay: -4s; }

.de-ui .de-st-card em {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* Each card previews the face it is named after. */
.de-ui .de-st-card.f-serif b { font-family: var(--font-display); font-weight: 500; }
.de-ui .de-st-card.f-italic b { font-family: var(--font-display); font-style: italic; font-weight: 500; }
.de-ui .de-st-card.f-bold b { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.de-ui .de-st-card.f-light b { font-weight: 400; }

/* --- The phone preview --------------------------------------- */

.de-studio-phone {
  border-radius: 26px;
  background: #0A0A0A;
  padding: 8px;
  box-shadow: 0 22px 50px rgba(10, 25, 19, 0.22);
}

.de-st-screen {
  background: var(--de-white);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 384px;
}

.de-st-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 2px;
}

.de-ui .de-st-bar span {
  font-size: 11px;
  font-weight: 600;
  color: var(--de-green-deep);
  margin: 0;
}

.de-st-batt { width: 20px; height: 10px; border-radius: 2px; background: var(--de-green-deep); }

.de-st-head { padding: 10px 16px 14px; text-align: center; border-bottom: 1px solid rgba(21, 71, 52, 0.08); }

/* Three stacked names, one per typography pairing, cross-fading
   on the shared clock. This is the payoff of the whole panel:
   the setting on the left is visibly driving the screen a guest
   would see. */
.de-st-name {
  position: relative;
  display: block;
  height: 42px;
}

.de-ui .de-st-name i {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 15px;
  line-height: 1.2;
  color: var(--de-green-deep);
  animation: de-st-swap var(--de-st-cycle) ease-in-out infinite;
}

.de-ui .de-st-name i.p1 { font-family: var(--font-display); font-weight: 500; }
.de-ui .de-st-name i.p2 { font-family: var(--font-body); font-weight: 600; animation-delay: -8s; }
.de-ui .de-st-name i.p3 { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 13px; animation-delay: -4s; }

.de-ui .de-st-sub {
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin: 4px 0 0;
}

.de-st-thread {
  flex: 1;
  padding: 16px 14px;
  background: #FAFAF8;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.de-ui .de-st-day {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 2px;
}

.de-ui .de-st-msg {
  max-width: 84%;
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 13px;
  border-radius: 14px;
  margin: 0;
}

.de-ui .de-st-msg.is-bot {
  align-self: flex-start;
  background: var(--de-white);
  color: var(--text-body);
  border: 1px solid rgba(21, 71, 52, 0.10);
  border-bottom-left-radius: 5px;
}

/* The guest's own bubble carries the brand colour, so it moves
   with the swatch. */
.de-ui .de-st-msg.is-user {
  align-self: flex-end;
  color: var(--de-cream);
  border-bottom-right-radius: 5px;
  background-color: #2C6C60;
  animation: de-st-accent var(--de-st-cycle) ease-in-out infinite;
}

.de-st-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(21, 71, 52, 0.08);
  background: var(--de-white);
}

.de-st-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  background: #F4F2EE;
  font-size: 11.5px;
  color: var(--text-muted);
}

.de-st-caret {
  width: 1px;
  height: 13px;
  background: var(--text-muted);
  animation: de-st-blink 1.1s steps(1) infinite;
}

@keyframes de-st-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

.de-st-send {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  background-color: #2C6C60;
  animation: de-st-accent var(--de-st-cycle) ease-in-out infinite;
}

.de-st-send::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -4px 0 0 -5px;
  border-top: 1.5px solid var(--de-cream);
  border-right: 1.5px solid var(--de-cream);
  transform: rotate(45deg);
}

/* ============================================================
   2. KNOWLEDGE BASE
   ------------------------------------------------------------
   A 9s loop on its own clock. One file is mid-ingest: its
   progress bar fills, then its pill turns from Processing to
   Ready and the indexed count ticks up. At 0% it is simply a
   file that has not finished yet, which is the honest resting
   state of a knowledge base.
   ============================================================ */

.de-kb { --de-kb-cycle: 9s; }

.de-kb-status {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(21, 71, 52, 0.16);
}

.de-ui .de-kb-status span {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}

.de-kb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2FA36B;
  flex: none;
  animation: de-kb-pulse 2.2s ease-out infinite;
}

@keyframes de-kb-pulse {
  0%        { box-shadow: 0 0 0 0 rgba(47, 163, 107, 0.5); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(47, 163, 107, 0); }
}

/* The count of indexed sources, two values swapping at the
   moment the fourth file finishes. */
/* The first digit stays in normal flow so the element keeps a
   real text baseline; the second is stacked on top of it. With
   both absolutely positioned the box had no baseline of its own
   and the number rode above the line it sits in. */
.de-ui .de-kb-count {
  position: relative;
  display: inline-block;
}

.de-ui .de-kb-count i {
  font-style: normal;
  font-weight: 600;
  color: var(--de-green-deep);
  animation: de-kb-a var(--de-kb-cycle) steps(1) infinite;
}

.de-ui .de-kb-count i.n2 {
  position: absolute;
  left: 0;
  top: 0;
  animation-name: de-kb-b;
}

@keyframes de-kb-a { 0%, 71% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes de-kb-b { 0%, 71% { opacity: 0; } 72%, 100% { opacity: 1; } }

/* The drop zone breathes, so the panel reads as live even before
   anything else has moved. */
.de-kb .de-ui-drop { animation: de-kb-drop var(--de-kb-cycle) ease-in-out infinite; }

@keyframes de-kb-drop {
  0%, 100% { border-color: rgba(21, 71, 52, 0.28); }
  50%      { border-color: rgba(21, 71, 52, 0.55); }
}

/* --- The row being ingested ---------------------------------- */

/* The bar is positioned against this cell rather than the row:
   position:relative on a <tr> is not a reliable containing block. */
.de-kb-row { position: relative; padding-bottom: 22px !important; }

.de-kb-bar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 10px;
  height: 2px;
  border-radius: 2px;
  background: rgba(21, 71, 52, 0.12);
  overflow: hidden;
  animation: de-kb-a var(--de-kb-cycle) steps(1) infinite;
}

.de-kb-bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 2px;
  background: var(--de-green-mid);
  transform-origin: left;
  transform: scaleX(0.34);
  animation: de-kb-fill var(--de-kb-cycle) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes de-kb-fill {
  0%   { transform: scaleX(0.34); }
  68%  { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}

/* Two pills in the same cell, swapping as the bar completes. */
.de-kb-pills { position: relative; display: inline-block; }

.de-kb-pills .de-ui-pill { animation: de-kb-a var(--de-kb-cycle) steps(1) infinite; }
.de-kb-pills .de-ui-pill.is-done { position: absolute; left: 0; top: 0; animation-name: de-kb-b; }

/* ============================================================
   Reduced motion
   ------------------------------------------------------------
   Everything stops on its first frame, which is the resting
   state described at the top of this file: a complete screen,
   not a blank one.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .de-studio *, .de-kb * { animation: none !important; }
  .de-ui .de-st-hex i.p2, .de-ui .de-st-hex i.p3,
  .de-ui .de-st-name i.p2, .de-ui .de-st-name i.p3,
  .de-kb-pills .de-ui-pill.is-done { opacity: 0; }
  .de-st-card.p1 { border-color: var(--de-green); background: var(--de-green-soft); }
  .de-ui .de-st-card.p1 b { color: var(--de-green); }
}

/* ============================================================
   Narrow screens
   ============================================================ */

@media (max-width: 860px) {
  .de-studio-body { grid-template-columns: 1fr; padding: 18px; gap: 20px; }
  .de-studio-phone { max-width: 290px; margin: 0 auto; }
  .de-st-type { grid-template-columns: 1fr; }
  .de-st-field.is-row { align-items: flex-start; }
  .de-kb-bar { left: 14px; right: 14px; }
}

/* ============================================================
   3. THE ROSTER AND THE EXPERT EDITOR
   ------------------------------------------------------------
   The panel that now leads the page. Setting up and controlling
   the experts is the thing this product is bought for, so it
   comes before the Knowledge Base rather than after it.

   Left: the roster of Digital Experts. Right: the editor open on
   one of them. A 15s loop of three 5s phases moves the editor
   from Luna to Nonna to Chef Marco, and the matching roster card
   lights up as it goes - the same trick as the Brand Studio
   panel above, three elements sharing one clock offset by
   negative animation-delay:

     phase 1   delay 0s      phase 2   delay -10s
     phase 3   delay -5s

   Only the parts that actually differ between experts are
   stacked and cross-faded: the name, the role, the bio, the
   specialty chips. The editor's chrome - step numbers, field
   labels, the Magic Draft strip, the footer - is written once
   and never moves, so the panel reads as one screen being
   edited rather than three screens flickering.

   As everywhere else in this file the 0% keyframe is the resting
   state: the editor open on Luna, her card selected. Nothing is
   hidden waiting for a trigger.

   The avatars are initials on tinted grounds, not photographs.
   This is a recreation in markup, and inventing faces for it
   would be the one part pretending to be a screenshot.
   ============================================================ */

.de-roster { --de-rs-cycle: 15s; }

@keyframes de-rs-swap {
  0%,  30% { opacity: 1; transform: none; }
  34%, 96% { opacity: 0; transform: translateY(5px); }
  100%     { opacity: 1; transform: none; }
}

@keyframes de-rs-sel {
  0%,  30% { border-color: var(--de-green); background: var(--de-green-soft); }
  34%, 96% { border-color: rgba(21, 71, 52, 0.14); background: var(--de-white); }
  100%     { border-color: var(--de-green); background: var(--de-green-soft); }
}

.de-roster-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 22px;
  padding: 24px;
  background: #FBFAF8;
  align-items: start;
}

/* --- The roster ---------------------------------------------- */

.de-rs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.de-rs-card {
  display: block;
  padding: 15px;
  border-radius: 12px;
  border: 1px solid rgba(21, 71, 52, 0.14);
  background: var(--de-white);
}

.de-rs-card.p1, .de-rs-card.p2, .de-rs-card.p3 {
  animation: de-rs-sel var(--de-rs-cycle) ease-in-out infinite;
}

.de-rs-card.p2 { animation-delay: -10s; }
.de-rs-card.p3 { animation-delay: -5s; }

.de-rs-face {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--de-green-deep);
  background: var(--de-green-soft);
  margin-bottom: 11px;
}

.de-rs-face.t-gold { background: var(--de-gold-light); }
.de-rs-face.t-sand { background: #EAE2D4; }
.de-rs-face.t-sky  { background: #DCE4EC; }

/* The online dot, same cue the product uses on every card. */
.de-rs-face::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2FA36B;
  border: 2px solid var(--de-white);
}

.de-ui .de-rs-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--de-green-deep);
  margin: 0;
  line-height: 1.2;
}

.de-ui .de-rs-role {
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin: 5px 0 0;
}

.de-rs-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }

.de-ui .de-rs-tags span {
  font-size: 9.5px;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: var(--text-muted);
  background: #F4F2EE;
  border-radius: 999px;
  padding: 4px 9px;
  margin: 0;
  white-space: nowrap;
}

/* The badge a card can carry, e.g. Luna's Concierge star. */
.de-ui .de-rs-badge {
  display: inline-block;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--de-cream);
  background: var(--de-green);
  border-radius: 999px;
  padding: 3px 8px;
  margin-left: 7px;
  vertical-align: 2px;
}

/* --- The editor ---------------------------------------------- */

.de-rs-editor {
  background: var(--de-white);
  border: 1px solid rgba(21, 71, 52, 0.16);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(10, 25, 19, 0.10);
  overflow: hidden;
}

.de-rs-ed-top { padding: 18px 20px 16px; border-bottom: 1px solid rgba(21, 71, 52, 0.10); }

.de-ui .de-rs-kicker {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 6px;
}

/* The three names, stacked. Fixed height so the panel below does
   not jump as they swap. */
.de-rs-title { position: relative; display: block; height: 30px; }

.de-ui .de-rs-title i {
  position: absolute;
  left: 0;
  top: 0;
  font-style: normal;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  color: var(--de-green-deep);
  animation: de-rs-swap var(--de-rs-cycle) ease-in-out infinite;
}

.de-ui .de-rs-title i.p2 { animation-delay: -10s; }
.de-ui .de-rs-title i.p3 { animation-delay: -5s; }

.de-rs-ed-body { padding: 18px 20px 20px; }

.de-rs-step { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }

.de-rs-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
  background: var(--de-green-deep);
  color: var(--de-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
}

.de-ui .de-rs-step p {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--de-green-deep);
  margin: 0;
}

.de-rs-step + .de-rs-step { margin-top: 20px; }

.de-ui .de-rs-flab {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 6px;
}

.de-rs-field {
  border: 1px solid rgba(21, 71, 52, 0.16);
  border-radius: 9px;
  background: #FBFAF8;
  padding: 10px 12px;
  position: relative;
  height: 38px;
}

.de-ui .de-rs-field i {
  position: absolute;
  left: 12px;
  top: 10px;
  right: 12px;
  font-style: normal;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: de-rs-swap var(--de-rs-cycle) ease-in-out infinite;
}

.de-ui .de-rs-field i.p2 { animation-delay: -10s; }
.de-ui .de-rs-field i.p3 { animation-delay: -5s; }

.de-rs-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }

/* The Magic Draft strip. Static chrome - it is a control, not a
   thing that changes per expert. */
.de-rs-magic {
  border-radius: 10px;
  background: linear-gradient(120deg, #EEF0FD, #F6F2FD);
  padding: 12px 13px;
  margin-top: 4px;
}

.de-ui .de-rs-magic-lab {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #4B3FBF;
  margin: 0 0 9px;
}

.de-rs-spark { width: 11px; height: 11px; border-radius: 3px; background: #6C5CE7; flex: none; }

.de-rs-magic-row { display: flex; gap: 8px; align-items: center; }

.de-ui .de-rs-magic-row span {
  flex: 1;
  font-size: 10.5px;
  color: var(--text-muted);
  background: var(--de-white);
  border-radius: 999px;
  padding: 7px 11px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.de-ui .de-rs-magic-row b {
  flex: none;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: #FFFFFF;
  background: #6C5CE7;
  border-radius: 999px;
  padding: 8px 12px;
}

/* The bio. Three of them, stacked in a box tall enough for the
   longest. */
.de-rs-bio {
  position: relative;
  height: 76px;
  border: 1px solid rgba(21, 71, 52, 0.16);
  border-radius: 9px;
  background: #FBFAF8;
  overflow: hidden;
}

.de-ui .de-rs-bio i {
  position: absolute;
  inset: 0;
  padding: 10px 12px;
  font-style: normal;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-body);
  animation: de-rs-swap var(--de-rs-cycle) ease-in-out infinite;
}

.de-ui .de-rs-bio i.p2 { animation-delay: -10s; }
.de-ui .de-rs-bio i.p3 { animation-delay: -5s; }

/* Specialty chips, three sets stacked. */
.de-rs-chips { position: relative; height: 56px; margin-top: 12px; }

.de-rs-chips span {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
  animation: de-rs-swap var(--de-rs-cycle) ease-in-out infinite;
}

.de-rs-chips span.p2 { animation-delay: -10s; }
.de-rs-chips span.p3 { animation-delay: -5s; }

.de-ui .de-rs-chips b {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--de-green-deep);
  background: var(--de-white);
  border: 1px solid rgba(21, 71, 52, 0.16);
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
}

.de-rs-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 13px 20px;
  border-top: 1px solid rgba(21, 71, 52, 0.10);
  background: #FBFAF8;
}

.de-ui .de-rs-foot span {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 0;
}

.de-ui .de-rs-foot b {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--de-cream);
  background: var(--de-green-deep);
  border-radius: 999px;
  padding: 10px 16px;
}

/* --- Reduced motion and narrow screens ----------------------- */

@media (prefers-reduced-motion: reduce) {
  .de-roster * { animation: none !important; }
  .de-ui .de-rs-title i.p2, .de-ui .de-rs-title i.p3,
  .de-ui .de-rs-field i.p2, .de-ui .de-rs-field i.p3,
  .de-ui .de-rs-bio i.p2, .de-ui .de-rs-bio i.p3,
  .de-rs-chips span.p2, .de-rs-chips span.p3 { opacity: 0; }
  .de-rs-card.p1 { border-color: var(--de-green); background: var(--de-green-soft); }
}

@media (max-width: 860px) {
  .de-roster-body { grid-template-columns: 1fr; padding: 16px; gap: 18px; }
  .de-rs-grid { grid-template-columns: 1fr; }
  .de-rs-two { grid-template-columns: 1fr; }
  .de-rs-bio { height: 92px; }
  .de-rs-chips { height: 62px; }
}

/* ============================================================
   4. ACTIONS AND INTEGRATIONS (platform-actions)
   ------------------------------------------------------------
   The Actions panel has three tabs in the real product, and the
   three of them tell one story: what the chat is ALLOWED to
   offer (Library), what a guest can reach without asking
   (Menus), and what it earned (Activity). Showing only the
   first, as this page did, shows the setup and never the payoff.

   So the tabs cycle: an 18s loop of three 6s phases, the active
   tab underline moving with the body beneath it. Same machinery
   as the panels above - one set of keyframes, three elements
   offset by negative animation-delay:

     Library  0s     Menus  -12s     Activity  -6s

   The three bodies are stacked in a fixed-height box so the
   panel never changes height as they swap, and 0% is Library:
   frozen at any moment this is the product sitting on its first
   tab, which is exactly where it opens.

   The Menus body carries its own miniature guest preview,
   because that tab's whole point is that toggling a row changes
   what a guest sees. Showing the toggles without the phone would
   be showing a cause with no effect.
   ============================================================ */

.de-acts { --de-ac-cycle: 18s; }

@keyframes de-ac-swap {
  0%,  31% { opacity: 1; }
  34%, 97% { opacity: 0; }
  100%     { opacity: 1; }
}

@keyframes de-ac-tab {
  0%,  31% { color: var(--de-green-deep); border-bottom-color: var(--de-green-deep); }
  34%, 97% { color: var(--text-muted); border-bottom-color: transparent; }
  100%     { color: var(--de-green-deep); border-bottom-color: var(--de-green-deep); }
}

.de-acts .de-ui-tabs span.t1,
.de-acts .de-ui-tabs span.t2,
.de-acts .de-ui-tabs span.t3 {
  animation: de-ac-tab var(--de-ac-cycle) steps(1) infinite;
}

.de-acts .de-ui-tabs span.t2 { animation-delay: -12s; }
.de-acts .de-ui-tabs span.t3 { animation-delay: -6s; }

/* --- The stacked bodies -------------------------------------- */

.de-ac-stack { position: relative; height: 348px; background: #FBFAF8; }

.de-ac-pane {
  position: absolute;
  inset: 0;
  padding: 20px 24px;
  overflow: hidden;
  animation: de-ac-swap var(--de-ac-cycle) ease-in-out infinite;
}

.de-ac-pane.t2 { animation-delay: -12s; }
.de-ac-pane.t3 { animation-delay: -6s; }

/* --- Menus pane ---------------------------------------------- */

.de-ac-menus { display: grid; grid-template-columns: 1fr 188px; gap: 22px; height: 100%; }

.de-ui .de-ac-lab {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 8px;
}

/* The hero slot. One per property, which is why the product
   spells the consequence out on the control itself. */
.de-ac-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(21, 71, 52, 0.16);
  border-radius: 10px;
  background: var(--de-white);
  padding: 11px 13px;
  margin-bottom: 18px;
}

.de-ac-hero-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--de-green-soft);
  flex: none;
}

.de-ui .de-ac-hero strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--de-green-deep);
}

.de-ui .de-ac-hero small { display: block; font-size: 10px; color: var(--text-muted); margin-top: 2px; }

.de-ac-rows { display: grid; gap: 8px; }

.de-ac-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--de-green);
  background: var(--de-green-soft);
  border-radius: 10px;
  padding: 10px 13px;
}

/* A row that is switched off drops back to plain white, the way
   the product shows a hidden menu item. */
.de-ac-row.is-off { border-color: rgba(21, 71, 52, 0.14); background: var(--de-white); }

.de-ui .de-ac-row strong { display: block; font-size: 12.5px; font-weight: 600; color: var(--de-green-deep); }
.de-ui .de-ac-row small { display: block; font-size: 10px; color: var(--text-muted); margin-top: 2px; }

.de-ac-tog {
  width: 34px;
  height: 19px;
  border-radius: 999px;
  background: #2FA36B;
  flex: none;
  position: relative;
}

.de-ac-row.is-off .de-ac-tog { background: rgba(21, 71, 52, 0.22); }

.de-ac-tog::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--de-white);
}

.de-ac-row.is-off .de-ac-tog::after { right: auto; left: 2px; }

/* --- The guest preview --------------------------------------- */

.de-ac-phone { border-radius: 18px; background: #0A0A0A; padding: 6px; align-self: start; }

.de-ac-screen { background: var(--de-white); border-radius: 13px; overflow: hidden; }

.de-ac-ph-top {
  height: 52px;
  background: linear-gradient(160deg, #C98A5E, #8E5A38);
  display: flex;
  align-items: flex-end;
  padding: 0 10px 6px;
}

.de-ui .de-ac-ph-top span {
  font-family: var(--font-display);
  font-size: 9.5px;
  color: #FFFFFF;
  margin: 0;
}

.de-ac-ph-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; }

.de-ac-ph-btn {
  border-radius: 8px;
  background: var(--de-white);
  box-shadow: 0 4px 12px rgba(10, 25, 19, 0.14);
  padding: 8px 4px;
  text-align: center;
}

.de-ac-ph-dot { width: 15px; height: 15px; border-radius: 50%; background: var(--de-green-deep); margin: 0 auto 5px; }

.de-ui .de-ac-ph-btn b {
  display: block;
  font-size: 6.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--de-green-deep);
}

.de-ui .de-ac-ph-btn i {
  display: block;
  font-style: normal;
  font-size: 5.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}

.de-ac-ph-list { padding: 0 8px 8px; display: grid; gap: 4px; }

.de-ui .de-ac-ph-list p {
  font-size: 7px;
  color: var(--text-body);
  background: #F6F4F0;
  border-radius: 5px;
  padding: 6px 7px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.de-ui .de-ac-ph-head {
  font-family: var(--font-display);
  font-size: 8.5px;
  color: var(--de-green-deep);
  margin: 2px 0 1px;
  padding: 0 1px;
}

/* --- Activity pane ------------------------------------------- */

.de-acts .de-ui-table td.num, .de-acts .de-ui-table th.num { text-align: right; }

.de-ui .de-ac-conv { font-weight: 600; color: var(--de-green); }

/* --- Connectors strip ---------------------------------------- */

.de-conn {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  flex-wrap: wrap;
  padding: 14px 24px;
  border-top: 1px solid rgba(21, 71, 52, 0.10);
  background: var(--de-white);
}

.de-ui .de-conn > p {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}

.de-conn-list { display: flex; flex-wrap: wrap; gap: 7px; }

.de-ui .de-conn-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid rgba(21, 71, 52, 0.16);
  border-radius: 999px;
  padding: 5px 11px;
  margin: 0;
}

.de-ui .de-conn-list span.is-on {
  color: var(--de-green-deep);
  border-color: var(--de-green);
  background: var(--de-green-soft);
}

/* Specificity has to beat `.de-ui .de-conn-list span`, which also
   matches this dot - it is a span nested inside the chip span -
   and would otherwise hand it the chip's own padding and border,
   turning a 6px dot into a green pill. */
.de-ui .de-conn-list span.de-conn-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #2FA36B;
  flex: none;
  animation: de-kb-pulse 2.2s ease-out infinite;
}

/* --- Reduced motion and narrow screens ----------------------- */

@media (prefers-reduced-motion: reduce) {
  .de-acts * { animation: none !important; }
  .de-ac-pane.t2, .de-ac-pane.t3 { opacity: 0; }
  .de-acts .de-ui-tabs span.t2, .de-acts .de-ui-tabs span.t3 { color: var(--text-muted); border-bottom-color: transparent; }
}

@media (max-width: 860px) {
  .de-ac-stack { height: 520px; }
  .de-ac-pane { padding: 16px 18px; }
  .de-ac-menus { grid-template-columns: 1fr; gap: 16px; }
  .de-ac-phone { max-width: 188px; margin: 0 auto; }
  .de-conn { padding: 12px 18px; }
}

/* ============================================================
   5. CONVERSATION INTELLIGENCE (platform-intelligence)
   ------------------------------------------------------------
   Two blocks, doing two different jobs.

   .de-intel  The dashboard, four tabs on a 24s loop of four 6s
              phases: Efficiency, Mood, Map, Topics. Same
              negative-delay machinery as the panels above,
              extended from three phases to four:

                t1  0s     t2  -18s     t3  -12s     t4  -6s

   .de-rep    The report the dashboard produces. This one does
              NOT animate, and that is deliberate. It is a dense,
              read-it-properly artefact - ranked demand, five
              moves, who is asking - and motion on a page of
              numbers is noise, not life. The dashboard moves so
              the report can sit still.

   As everywhere in this file, the 0% keyframe of every animation
   is a complete screen: frozen, the dashboard shows Efficiency,
   which is the tab it opens on.

   ------------------------------------------------------------
   A NOTE ON THE NUMBERS
   ------------------------------------------------------------
   Every figure in both blocks is invented sample data for a
   fictional organisation, and the panels carry the same
   "illustrative example" footer as the rest of the site.

   The external-research block is the one place where care was
   needed. The real report cross-references a named published
   travel survey. Inventing survey percentages and attributing
   them to "industry research" on a marketing page would be
   fabricating evidence, so that block names the three INPUTS
   that get combined and shows no invented external statistics.
   The percentages shown anywhere here are the organisation's
   own conversation data, which is what the product actually
   measures.
   ============================================================ */

.de-intel { --de-in-cycle: 24s; }

@keyframes de-in-swap {
  0%,  22% { opacity: 1; }
  25%, 97% { opacity: 0; }
  100%     { opacity: 1; }
}

@keyframes de-in-tab {
  0%,  22% { color: var(--de-green-deep); border-bottom-color: var(--de-green-deep); }
  25%, 97% { color: var(--text-muted); border-bottom-color: transparent; }
  100%     { color: var(--de-green-deep); border-bottom-color: var(--de-green-deep); }
}

.de-intel .de-ui-tabs span.i1,
.de-intel .de-ui-tabs span.i2,
.de-intel .de-ui-tabs span.i3,
.de-intel .de-ui-tabs span.i4 { animation: de-in-tab var(--de-in-cycle) steps(1) infinite; }

.de-intel .de-ui-tabs span.i2 { animation-delay: -18s; }
.de-intel .de-ui-tabs span.i3 { animation-delay: -12s; }
.de-intel .de-ui-tabs span.i4 { animation-delay: -6s; }

.de-in-stack { position: relative; height: 404px; background: #FBFAF8; }

.de-in-pane {
  position: absolute;
  inset: 0;
  padding: 22px 24px;
  overflow: hidden;
  animation: de-in-swap var(--de-in-cycle) ease-in-out infinite;
}

.de-in-pane.i2 { animation-delay: -18s; }
.de-in-pane.i3 { animation-delay: -12s; }
.de-in-pane.i4 { animation-delay: -6s; }

/* --- Shared small type --------------------------------------- */

.de-ui .de-in-lab {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 10px;
}

/* --- 1. Efficiency ------------------------------------------- */

.de-in-eff { display: grid; grid-template-columns: 232px 1fr; gap: 20px; height: 100%; }

/* The money tile. Green, because in the product this is the one
   number a manager screenshots for their own boss. */
.de-in-cost {
  background: linear-gradient(165deg, var(--de-green-mid), var(--de-green));
  border-radius: 14px;
  padding: 20px;
  color: var(--de-cream);
  display: flex;
  flex-direction: column;
}

.de-ui .de-in-cost .de-in-lab { color: rgba(238, 232, 222, 0.8); }

.de-ui .de-in-big {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.6vw, 46px);
  line-height: 1;
  color: var(--de-cream);
  margin: 6px 0 8px;
}

.de-ui .de-in-cost p.de-in-sub {
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(238, 232, 222, 0.75);
  margin: 0;
}

.de-in-cost-rows {
  display: grid;
  gap: 9px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(238, 232, 222, 0.24);
}

.de-in-crow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.de-ui .de-in-crow span {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(238, 232, 222, 0.78);
  margin: 0;
}

.de-ui .de-in-crow b { font-size: 15px; font-weight: 600; color: var(--de-cream); }

/* --- Gap cards ----------------------------------------------- */

.de-in-gaps { display: grid; gap: 12px; align-content: start; min-height: 0; }

.de-in-gap {
  border: 1px solid rgba(108, 92, 231, 0.30);
  background: linear-gradient(120deg, #FBFAFF, #FDFBFF);
  border-radius: 12px;
  padding: 15px 16px;
}

.de-ui .de-in-gap-tag {
  display: inline-block;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #4B3FBF;
  border: 1px solid rgba(108, 92, 231, 0.34);
  border-radius: 999px;
  padding: 4px 10px;
  margin: 0 0 10px;
}

.de-ui .de-in-gap p {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-body);
  margin: 0 0 13px;
}

/* --- 2. Mood chart ------------------------------------------- */

.de-in-chart { width: 100%; height: 250px; display: block; margin-top: 4px; }
.de-in-chart .g { stroke: rgba(21, 71, 52, 0.10); stroke-width: 1; stroke-dasharray: 3 4; }
.de-in-chart .ln { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.de-in-chart .ln.a { stroke: #8C9A93; }
.de-in-chart .ln.b { stroke: #2F6FE0; }
.de-in-chart .ln.c { stroke: #D6483B; }
.de-in-chart .ar { stroke: none; }
.de-in-chart .ar.a { fill: rgba(140, 154, 147, 0.16); }
.de-in-chart .ar.b { fill: rgba(47, 111, 224, 0.14); }
.de-in-chart .ar.c { fill: rgba(214, 72, 59, 0.12); }
.de-in-chart .dt { stroke: none; }
.de-in-chart .dt.a { fill: #8C9A93; }
.de-in-chart .dt.b { fill: #2F6FE0; }
.de-in-chart .dt.c { fill: #D6483B; }
.de-in-chart text { font-family: var(--font-body); font-size: 8px; fill: var(--text-muted); }

.de-in-key { display: flex; gap: 20px; justify-content: center; margin-top: 8px; }

.de-ui .de-in-key span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}

.de-in-key i { width: 8px; height: 8px; border-radius: 50%; }
.de-in-key i.a { background: #8C9A93; }
.de-in-key i.b { background: #2F6FE0; }
.de-in-key i.c { background: #D6483B; }

/* --- 3. Map -------------------------------------------------- */

/* Not a map tile: an abstract field with clusters placed on it.
   A real basemap would be a picture of someone else's product,
   and the point being made is "we can see where", not "here is
   Google Maps". */
.de-in-map { display: grid; grid-template-columns: 1fr 210px; gap: 20px; height: 100%; }

.de-in-globe {
  position: relative;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(47, 111, 224, 0.10), transparent 60%),
    #EDF1F5;
  background-image:
    radial-gradient(rgba(21, 71, 52, 0.16) 1px, transparent 1px);
  background-size: 13px 13px;
  overflow: hidden;
}

.de-in-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #2F6FE0;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 0 0 5px rgba(47, 111, 224, 0.18);
}

.de-in-pin.p1 { left: 34%; top: 40%; width: 38px; height: 38px; }
.de-in-pin.p2 { left: 58%; top: 28%; width: 30px; height: 30px; font-size: 10px; }
.de-in-pin.p3 { left: 48%; top: 66%; width: 26px; height: 26px; font-size: 9.5px; }
.de-in-pin.p4 { left: 72%; top: 58%; width: 22px; height: 22px; font-size: 9px; }

.de-in-places { display: grid; gap: 9px; align-content: start; }

.de-in-place {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(21, 71, 52, 0.14);
  background: var(--de-white);
  border-radius: 10px;
  padding: 10px 13px;
}

.de-ui .de-in-place strong { font-size: 12.5px; font-weight: 600; color: var(--de-green-deep); }
.de-ui .de-in-place small { display: block; font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.de-ui .de-in-place b { font-size: 14px; font-weight: 600; color: var(--de-green); }

/* --- 4. Topic drill-down ------------------------------------- */

.de-in-topics { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; height: 100%; }

.de-in-tlist { display: grid; gap: 11px; align-content: start; }

.de-in-trow { display: block; }

.de-ui .de-in-thead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--de-green-deep);
  margin: 0 0 5px;
}

.de-ui .de-in-thead b { font-weight: 600; }
.de-ui .de-in-thead em { font-style: normal; font-size: 10px; color: var(--text-muted); }

.de-in-bar { display: block; height: 5px; border-radius: 5px; background: rgba(21, 71, 52, 0.12); overflow: hidden; }
.de-in-bar i { display: block; height: 100%; border-radius: 5px; background: var(--de-green-mid); }
.de-in-bar i.is-top { background: var(--de-gold); }

/* A question the experts could only partly answer. The colour is
   the whole message of this view: green is covered, amber is a
   gap you can close today. */
.de-in-q {
  border-left: 3px solid var(--de-gold);
  background: var(--de-white);
  border: 1px solid rgba(21, 71, 52, 0.12);
  border-left: 3px solid var(--de-gold);
  border-radius: 8px;
  padding: 11px 13px;
  margin-bottom: 9px;
}

.de-in-q.is-ok { border-left-color: #2FA36B; }

.de-ui .de-in-q p {
  font-size: 12px;
  line-height: 1.5;
  font-style: italic;
  color: var(--text-body);
  margin: 0;
}

.de-in-q-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

.de-ui .de-in-flag {
  flex: none;
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #9A6B00;
  background: #FCF3DE;
  border-radius: 999px;
  padding: 4px 9px;
  margin: 0;
}

.de-ui .de-in-q.is-ok .de-in-flag { color: #1E7A50; background: #E3F3EB; }

/* ============================================================
   THE REPORT
   ------------------------------------------------------------
   Deliberately styled as a document rather than a UI: cream
   ground, generous rules, no chrome. It is the artefact a
   marketing lead forwards to their CEO, and it should look like
   something that was written, not something that was rendered.
   ============================================================ */

.de-rep {
  background: var(--de-cream-soft);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(21, 71, 52, 0.12);
}

.de-rep-top {
  background: var(--de-green-deep);
  color: var(--de-cream);
  padding: 30px 32px 26px;
}

.de-rep .de-rep-kick {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--de-gold-light);
  margin: 0 0 12px;
}

.de-rep .de-rep-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  color: var(--de-cream);
  margin: 0 0 8px;
}

.de-rep .de-rep-lede {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(238, 232, 222, 0.82);
  margin: 0;
  max-width: 54ch;
}

.de-rep-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 22px 32px;
  border-bottom: 1px solid rgba(21, 71, 52, 0.12);
  background: var(--de-white);
}

.de-rep .de-rep-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1;
  color: var(--de-green-deep);
}

.de-rep .de-rep-stat span {
  display: block;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 7px;
}

/* The headline finding, given its own band so it cannot be
   skimmed past. */
.de-rep-call {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  background: var(--de-green);
  color: var(--de-cream);
  padding: 22px 32px;
}

.de-rep .de-rep-call b {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1;
  flex: none;
}

.de-rep .de-rep-call p {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(238, 232, 222, 0.9);
  margin: 0;
  max-width: 52ch;
}

.de-rep-body { padding: 30px 32px 32px; }

.de-rep-sec + .de-rep-sec { margin-top: 36px; padding-top: 32px; border-top: 1px solid rgba(21, 71, 52, 0.14); }

.de-rep .de-rep-num {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--de-green);
  margin: 0 0 8px;
}

.de-rep .de-rep-h {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 27px);
  line-height: 1.2;
  color: var(--de-green-deep);
  margin: 0 0 6px;
}

.de-rep .de-rep-note { font-size: 12.5px; line-height: 1.6; color: var(--text-muted); margin: 0 0 22px; max-width: 62ch; }

/* --- Ranked demand ------------------------------------------- */

.de-rep-rank { display: grid; gap: 9px; }

.de-rep-row { display: grid; grid-template-columns: minmax(130px, 200px) 1fr 44px; align-items: center; gap: 14px; }

.de-rep .de-rep-row span { font-size: 12.5px; color: var(--de-green-deep); margin: 0; }
.de-rep .de-rep-row b { font-size: 12.5px; font-weight: 600; color: var(--de-green-deep); text-align: right; }

.de-rep-track { height: 9px; border-radius: 9px; background: rgba(21, 71, 52, 0.10); overflow: hidden; }
.de-rep-track i { display: block; height: 100%; border-radius: 9px; background: #1E9E63; }
.de-rep-track i.mid { background: var(--de-gold); }
.de-rep-track i.low { background: #CFC3AE; }

.de-rep-key { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.de-rep-key > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(21, 71, 52, 0.14);
  background: var(--de-white);
  border-radius: 10px;
  padding: 10px 14px;
}

.de-rep-key i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.de-rep-key i.hi { background: #1E9E63; }
.de-rep-key i.mid { background: var(--de-gold); }
.de-rep-key i.low { background: #CFC3AE; }

.de-rep .de-rep-key strong { display: block; font-size: 12px; font-weight: 600; color: var(--de-green-deep); }
.de-rep .de-rep-key small { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* --- The five moves ------------------------------------------ */

.de-rep-moves { display: grid; gap: 11px; }

.de-rep-move {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: start;
  gap: 16px;
  background: var(--de-white);
  border: 1px solid rgba(21, 71, 52, 0.12);
  border-radius: 12px;
  padding: 17px 20px;
}

.de-rep .de-rep-move > em {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 26px;
  line-height: 1;
  color: var(--de-gold);
}

.de-rep .de-rep-move h4 {
  font-size: 15px;
  font-weight: 600;
  font-style: normal;
  color: var(--de-green-deep);
  margin: 0 0 5px;
}

.de-rep .de-rep-move p { font-size: 12.5px; line-height: 1.6; color: var(--text-muted); margin: 0; }

.de-rep .de-rep-move > b {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  color: var(--de-green);
  white-space: nowrap;
}

/* --- Who is asking ------------------------------------------- */

.de-rep-who { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.de-rep-card {
  background: var(--de-white);
  border: 1px solid rgba(21, 71, 52, 0.12);
  border-radius: 12px;
  padding: 20px;
}

.de-rep .de-rep-card h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  color: var(--de-green-deep);
  margin: 0 0 12px;
}

.de-rep .de-rep-card p { font-size: 12.5px; line-height: 1.6; color: var(--text-muted); margin: 12px 0 0; }

/* The little block grids that make a proportion countable rather
   than just stated. */
.de-rep-blocks { display: flex; flex-wrap: wrap; gap: 5px; }
.de-rep-blocks i { width: 26px; height: 13px; border-radius: 3px; background: #1E9E63; }
.de-rep-blocks i.off { background: #D8D1C4; }
.de-rep-blocks i.bad { background: #D6483B; }

.de-rep-pair { display: flex; gap: 32px; margin-top: 4px; }

.de-rep .de-rep-pair b {
  display: block;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  color: var(--de-green-deep);
}

.de-rep .de-rep-pair span {
  display: block;
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 6px;
}

.de-rep-mini { display: grid; gap: 8px; }
.de-rep-mini-row { display: grid; grid-template-columns: 72px 1fr 34px; align-items: center; gap: 10px; }
.de-rep .de-rep-mini-row span { font-size: 12px; color: var(--de-green-deep); }
.de-rep .de-rep-mini-row b { font-size: 12px; font-weight: 600; color: var(--de-green-deep); text-align: right; }

/* --- The three inputs ---------------------------------------- */

.de-rep-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.de-rep-input {
  background: var(--de-white);
  border: 1px solid rgba(21, 71, 52, 0.12);
  border-radius: 12px;
  padding: 20px;
}

.de-rep-input-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--de-green-soft);
  margin-bottom: 14px;
}

.de-rep-input:nth-child(2) .de-rep-input-mark { background: var(--de-gold-light); }
.de-rep-input:nth-child(3) .de-rep-input-mark { background: #DCE4EC; }

.de-rep .de-rep-input h4 {
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  color: var(--de-green-deep);
  margin: 0 0 6px;
}

.de-rep .de-rep-input p { font-size: 12.5px; line-height: 1.6; color: var(--text-muted); margin: 0; }

.de-rep-out {
  margin-top: 14px;
  background: var(--de-green-soft);
  border: 1px solid rgba(21, 71, 52, 0.16);
  border-radius: 12px;
  padding: 18px 20px;
}

.de-rep .de-rep-out p { font-size: 13px; line-height: 1.65; color: var(--de-green-deep); margin: 0; }

.de-rep-foot {
  padding: 16px 32px 20px;
  border-top: 1px solid rgba(21, 71, 52, 0.14);
}

.de-rep .de-rep-foot p {
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}

/* --- Reduced motion and narrow screens ----------------------- */

@media (prefers-reduced-motion: reduce) {
  .de-intel * { animation: none !important; }
  .de-in-pane.i2, .de-in-pane.i3, .de-in-pane.i4 { opacity: 0; }
  .de-intel .de-ui-tabs span.i2,
  .de-intel .de-ui-tabs span.i3,
  .de-intel .de-ui-tabs span.i4 { color: var(--text-muted); border-bottom-color: transparent; }
}

@media (max-width: 860px) {
  .de-in-stack { height: 620px; }
  .de-in-pane { padding: 16px 18px; }
  .de-in-eff, .de-in-map, .de-in-topics { grid-template-columns: 1fr; gap: 16px; }
  .de-in-globe { min-height: 190px; }
  .de-in-chart { height: 200px; }

  .de-rep-top, .de-rep-call, .de-rep-body { padding-left: 20px; padding-right: 20px; }
  .de-rep-stats { grid-template-columns: 1fr 1fr; padding: 18px 20px; }
  .de-rep-foot { padding-left: 20px; padding-right: 20px; }
  .de-rep-row { grid-template-columns: 1fr 40px; }
  .de-rep-row .de-rep-track { grid-column: 1 / -1; }
  .de-rep-who, .de-rep-inputs { grid-template-columns: 1fr; }
  .de-rep-move { grid-template-columns: 26px 1fr; }
  .de-rep .de-rep-move > b { grid-column: 2; margin-top: 8px; }
}

/* ============================================================
   6. RESTING STATE FOR EVERY STACKED ELEMENT
   ------------------------------------------------------------
   A correction, and an important one.

   Every cross-fading group in this file stacks two or three or
   four elements in the same box and relies on a shared keyframe
   to show exactly one of them at a time. The keyframes were
   written so that at 0% the FIRST element is the visible one -
   which is correct, and is the principle applied throughout this
   stylesheet.

   What that missed: an element with `animation:` but no
   fill-mode shows its own normal style until the animation
   actually starts running. So in any situation where animations
   do not run - a throttled background tab, a browser that has
   them disabled, a screenshot taken before first paint - none of
   the panes were hidden and ALL of them rendered at once, on top
   of each other. The tabbed panels were the obvious casualty:
   four dashboard views printed over the top of one another.

   The fix is to put the resting state in the CSS rather than
   trusting the keyframe to establish it. Everything that is not
   the first phase starts at opacity 0. The animation still
   reveals each one in turn, because an animation in its active
   window beats a normal declaration regardless of specificity.

   The result is the behaviour intended all along: frozen at any
   moment, each panel shows its FIRST tab, complete and correct,
   and never a blank box or a pile-up.
   ============================================================ */

/* Brand Studio - hex readout and preview heading */
.de-ui .de-st-hex i.p2,
.de-ui .de-st-hex i.p3,
.de-ui .de-st-name i.p2,
.de-ui .de-st-name i.p3 { opacity: 0; }

/* Knowledge Base - the second counter value and the Ready pill */
.de-ui .de-kb-count i.n2,
.de-kb-pills .de-ui-pill.is-done { opacity: 0; }

/* The roster editor - name, fields, bio, specialty chips */
.de-ui .de-rs-title i.p2,
.de-ui .de-rs-title i.p3,
.de-ui .de-rs-field i.p2,
.de-ui .de-rs-field i.p3,
.de-ui .de-rs-bio i.p2,
.de-ui .de-rs-bio i.p3,
.de-rs-chips span.p2,
.de-rs-chips span.p3 { opacity: 0; }

/* Actions and the Overview tour - tab panes two and three */
.de-ac-pane.t2,
.de-ac-pane.t3 { opacity: 0; }

/* Conversation Intelligence - tab panes two, three and four */
.de-in-pane.i2,
.de-in-pane.i3,
.de-in-pane.i4 { opacity: 0; }

/* ============================================================
   7. HERO LEGIBILITY
   ------------------------------------------------------------
   The site header is transparent at every scroll position, with
   cream text and no scrolled state. Over a dark hero that is
   elegant. Over a light one the nav is invisible - which it was,
   on the solutions hub, the demo page and anything else whose
   hero photograph happens to be bright at the top.

   The fix is to darken the top of the PAGE HERO specifically.

   ------------------------------------------------------------
   TWO THINGS THIS MUST NOT DO, BOTH LEARNED THE HARD WAY
   ------------------------------------------------------------
   1. It must not touch ::after. The first version of this block
      put the gradient on .de-photo-section::after, which broke
      every framed section on the site: de-brand-2026.css draws
      the gold double rule on .de-framed::after precisely BECAUSE
      .de-photo-section already spends ::before on its tint. Its
      comment says so in as many words. This rule loaded later,
      won on equal specificity, and replaced the frame's inset
      rectangle with a full-width gradient band - the stray
      horizontal rules across the home page's "Your Opportunity"
      section. ::after belongs to the frame. Leave it alone.

   2. It must not apply to every photo section. A gradient that
      darkens the top 30% is correct behind a header and wrong
      in the middle of a page, where it reads as a tonal band
      across an otherwise even tint. So this is scoped to the
      hero: the first section of <main>, which is the only photo
      section that ever sits under the header. Mid-page photo
      sections keep the flat tint they always had.

   The gradient therefore lives on ::before, the layer that was
   already doing the tinting, which means each tint variant needs
   its own version - .de-photo-tint-* replaces that background
   wholesale, so a single base rule would vanish on exactly the
   pages that use a tint. Base first, tints after: they share
   specificity and the later one wins.
   ============================================================ */

main > .de-photo-section:first-child::before {
  background: linear-gradient(180deg,
    rgba(8, 6, 4, 0.68) 0%,
    rgba(10, 8, 5, 0.46) 30%,
    rgba(10, 8, 5, 0.46) 100%);
}

main > .de-photo-tint-green:first-child::before {
  background: linear-gradient(180deg,
    rgba(5, 20, 14, 0.80) 0%,
    rgba(14, 47, 35, 0.62) 30%,
    rgba(14, 47, 35, 0.62) 100%);
}

main > .de-photo-tint-navy:first-child::before {
  background: linear-gradient(180deg,
    rgba(0, 11, 32, 0.82) 0%,
    rgba(0, 20, 58, 0.68) 30%,
    rgba(0, 20, 58, 0.68) 100%);
}

main > .de-photo-tint-burgundy:first-child::before {
  background: linear-gradient(180deg,
    rgba(38, 13, 21, 0.80) 0%,
    rgba(67, 26, 39, 0.66) 30%,
    rgba(67, 26, 39, 0.66) 100%);
}

/* The home hero carries a video behind its own darkening layer
   and is already the darkest thing on the site, so it takes a
   lighter touch than the still photographs. */
main > .de-hero-section:first-child::before {
  background: linear-gradient(180deg,
    rgba(8, 6, 4, 0.52) 0%,
    rgba(10, 8, 5, 0.42) 26%,
    rgba(10, 8, 5, 0.42) 100%);
}

/* ============================================================
   8. THE COOL GROUND
   ------------------------------------------------------------
   The palette had exactly two page grounds, --de-cream and
   --de-cream-soft, and both are warm. On a long page that
   alternates between them - Conversation Intelligence being the
   worst case - the result is beige on beige: sections stop
   separating, and cards laid on the soft cream all but vanish
   into it.

   Rather than add a third warm tone, this adds a cool one. The
   navy is already in the brand (--de-navy, #00205B); this is
   simply that hue taken up to a page-ground tint, which gives
   the long analytical pages a second ground that reads as a
   different kind of space without introducing a new colour.

   Used sparingly and alternated with white, not with cream -
   the point is contrast, and sky against cream is two quiet
   tones arguing rather than one clear change.
   ============================================================ */

:root {
  --de-sky: #EEF3F8;
  --de-sky-soft: #E2EAF4;
  --de-sky-line: rgba(0, 32, 91, 0.13);
}

.de-section-sky { background: var(--de-sky); }

.de-section-sky h1,
.de-section-sky h2,
.de-section-sky h3,
.de-section-sky h4 { color: var(--de-green-deep); }

.de-section-sky p { color: var(--text-body); }
.de-section-sky .de-eyebrow { color: var(--de-navy); }

/* Cards need a ground of their own on both light sections. On
   cream they were the same warm tone one step darker, which is
   why they disappeared; a cool card on a light ground separates
   without needing a heavier border. */
.de-section-white .de-mini-card,
.de-section-sky .de-mini-card {
  background: var(--de-sky-soft);
  border: 1px solid var(--de-sky-line);
  border-radius: 12px;
}

.de-section-white .de-mini-card h4,
.de-section-sky .de-mini-card h4 { color: var(--de-navy); }

.de-section-white .de-mini-card p,
.de-section-sky .de-mini-card p { color: var(--text-body); }

/* ============================================================
   The report, recoloured
   ------------------------------------------------------------
   The document was cream-on-cream for the same reason as the
   rest of the page. It now sits white on the sky ground, which
   is the right way round: the artefact is the brightest thing
   in the section, the way a printed page is.
   ============================================================ */

.de-rep { background: var(--de-white); border-color: var(--de-sky-line); }

.de-rep-stats { background: #F6F9FC; border-bottom-color: var(--de-sky-line); }

.de-rep-card,
.de-rep-move,
.de-rep-input { background: #F7FAFD; border-color: var(--de-sky-line); }

.de-rep-sec + .de-rep-sec { border-top-color: var(--de-sky-line); }
.de-rep-foot { border-top-color: var(--de-sky-line); }

.de-rep-key > span { background: #F7FAFD; border-color: var(--de-sky-line); }

.de-rep-track { background: rgba(0, 32, 91, 0.10); }

/* The pulled-out finding keeps the brand green: it is the one
   thing on the page that should stop the eye. */
.de-rep-out { background: var(--de-green-soft); border-color: rgba(21, 71, 52, 0.18); }

/* ============================================================
   9. TEMPORAL INTELLIGENCE CARD
   ------------------------------------------------------------
   Replaces the old "satisfaction trend" card, which was three
   dots on a rule and a static list of percentages - a diagram of
   a trend rather than a trend.

   This is the product's actual Temporal Intelligence panel: a
   series chart with a User mood / Topic trends toggle, and the
   thing the old card could not show at all - movement. A 16s
   loop of two 8s phases swings the whole card between the two
   views: the toggle, the chart and the figures underneath all
   change together, because in the product they are one control
   and its consequences.

   Two datasets, cross-faded, rather than one morphing path.
   Morphing between polylines needs matching point counts and
   looks like an animation; cross-fading looks like a panel
   redrawing, which is what actually happens when you flip that
   switch.

   Phase two starts hidden in CSS rather than relying on the
   keyframe, for the reason set out in section 6: an animation
   that has not started yet leaves its element in its normal
   state, and two charts stacked on top of each other is worse
   than either one alone.
   ============================================================ */

.de-temp {
  --de-tp-cycle: 16s;
  background: var(--de-white);
  border: 1px solid var(--de-sky-line);
  border-radius: 16px;
  padding: 22px 24px 20px;
  box-shadow: 0 18px 44px rgba(10, 25, 19, 0.07);
}

@keyframes de-tp-swap {
  0%,  44% { opacity: 1; }
  50%, 94% { opacity: 0; }
  100%     { opacity: 1; }
}

@keyframes de-tp-seg {
  0%,  44% { background: var(--de-green-deep); color: var(--de-cream); }
  50%, 94% { background: transparent; color: var(--text-muted); }
  100%     { background: var(--de-green-deep); color: var(--de-cream); }
}

.de-temp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.de-temp .de-temp-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--de-green-deep);
  margin: 0;
}

.de-temp-seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--de-sky-line);
  border-radius: 999px;
  flex: none;
}

.de-temp .de-temp-seg span {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 999px;
  margin: 0;
  animation: de-tp-seg var(--de-tp-cycle) steps(1) infinite;
}

.de-temp .de-temp-seg span.s2 { animation-delay: -8s; }

.de-temp .de-temp-sub {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 4px;
}

/* --- The chart ----------------------------------------------- */

.de-temp-plot { position: relative; height: 200px; margin-top: 6px; }

.de-temp-plot svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: de-tp-swap var(--de-tp-cycle) ease-in-out infinite;
}

.de-temp-plot svg.v2 { animation-delay: -8s; opacity: 0; }

.de-temp-plot .g { stroke: rgba(0, 32, 91, 0.10); stroke-width: 1; stroke-dasharray: 3 4; }
.de-temp-plot .ln { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.de-temp-plot .ar { stroke: none; }
.de-temp-plot .dt { stroke: #FFFFFF; stroke-width: 1.5; }
.de-temp-plot text { font-family: var(--font-body); font-size: 8.5px; fill: var(--text-muted); }

.de-temp-plot .c1 { stroke: #2F6FE0; }
.de-temp-plot .c2 { stroke: #8C9A93; }
.de-temp-plot .c3 { stroke: #C4563F; }
.de-temp-plot .f1 { fill: rgba(47, 111, 224, 0.13); }
.de-temp-plot .f2 { fill: rgba(140, 154, 147, 0.14); }
.de-temp-plot .f3 { fill: rgba(196, 86, 63, 0.11); }
.de-temp-plot .d1 { fill: #2F6FE0; }
.de-temp-plot .d2 { fill: #8C9A93; }
.de-temp-plot .d3 { fill: #C4563F; }

/* --- The figures underneath ---------------------------------- */

.de-temp-read { position: relative; height: 128px; margin-top: 14px; }

.de-temp-set {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 0;
  align-content: start;
  animation: de-tp-swap var(--de-tp-cycle) ease-in-out infinite;
}

.de-temp-set.v2 { animation-delay: -8s; opacity: 0; }

.de-temp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--de-sky-line);
}

.de-temp .de-temp-row span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--de-green-deep);
  margin: 0;
}

.de-temp-row i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.de-temp-row i.k1 { background: #2F6FE0; }
.de-temp-row i.k2 { background: #8C9A93; }
.de-temp-row i.k3 { background: #C4563F; }

.de-temp .de-temp-row b { font-size: 14px; font-weight: 600; color: var(--de-green-deep); }
.de-temp .de-temp-row b.up { color: var(--de-green); }
.de-temp .de-temp-row b.down { color: #C4563F; }

.de-temp .de-temp-foot {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 14px 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .de-temp * { animation: none !important; }
  .de-temp-plot svg.v2, .de-temp-set.v2 { opacity: 0; }
  .de-temp .de-temp-seg span.s2 { background: transparent; color: var(--text-muted); }
}

@media (max-width: 860px) {
  .de-temp { padding: 18px 18px 16px; }
  .de-temp-plot { height: 170px; }
  .de-temp-read { height: 134px; }
}

/* ============================================================
   10. SPEED TO LEAD, AND THE COST OF WAITING
   ------------------------------------------------------------
   Two components for the /roi page.

   .de-sl is the speed-to-lead band: three external benchmarks,
   each with its source printed underneath. The attribution is
   not decoration and must not be styled away - these are the
   only numbers on the site that come from outside our own
   data, and they are worth having precisely because they can
   be checked. Anything here that loses its citation should be
   deleted rather than left standing.

   .de-roi is the calculator. It deliberately never asks what
   the platform costs and never quotes a price. It produces the
   figure the buyer is spending today, and the share of it that
   comes back, and lets them draw the line themselves. That is
   a stronger move than a payback claim, and it is the one the
   commercial proposal made.

   Figures are green and navy rather than gold: gold on white
   fails contrast, and every number in this section is meant to
   be read rather than admired.
   ============================================================ */

.de-sl {
  background: var(--de-green-deep);
  border-radius: 18px;
  padding: clamp(28px, 4vw, 46px);
}

.de-sl .de-sl-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--de-gold-light);
  margin: 0 0 26px;
}

.de-sl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.de-sl-item {
  padding: 0 clamp(18px, 2.6vw, 34px);
  border-left: 1px solid rgba(238, 232, 222, 0.18);
}

.de-sl-item:first-child { border-left: 0; padding-left: 0; }
.de-sl-item:last-child { padding-right: 0; }

.de-sl .de-sl-item .de-sl-fig {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 62px);
  font-weight: 400;
  line-height: 1;
  color: var(--de-gold);
  margin: 0 0 14px;
}

.de-sl .de-sl-item .de-sl-claim {
  font-size: 15px;
  line-height: 1.6;
  color: var(--de-cream);
  margin: 0 0 16px;
}

.de-sl .de-sl-item .de-sl-src {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.7;
  color: rgba(238, 232, 222, 0.58);
  margin: 0;
}

.de-sl .de-sl-item .de-sl-src a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.de-sl .de-sl-foot {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(238, 232, 222, 0.78);
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(238, 232, 222, 0.18);
}

@media (max-width: 860px) {
  .de-sl-grid { grid-template-columns: 1fr; }
  .de-sl-item {
    border-left: 0;
    border-top: 1px solid rgba(238, 232, 222, 0.18);
    padding: 26px 0 0;
    margin-top: 26px;
  }
  .de-sl-item:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
}

/* --- The calculator ------------------------------------------ */

.de-roi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 46px);
  align-items: start;
}

.de-roi-panel {
  background: var(--de-white);
  border: 1px solid var(--de-sky-line);
  border-radius: 16px;
  padding: clamp(22px, 2.6vw, 32px);
  box-shadow: 0 18px 44px rgba(10, 25, 19, 0.07);
}

.de-roi .de-roi-panel .de-roi-panel-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--de-green-deep);
  margin: 0 0 4px;
}

.de-roi .de-roi-panel .de-roi-panel-sub {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 24px;
}

.de-roi-field + .de-roi-field { margin-top: 20px; }

.de-roi .de-roi-field .de-roi-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--de-green-deep);
  margin: 0 0 6px;
}

.de-roi .de-roi-field .de-roi-label b {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--de-navy);
  flex: none;
}

.de-roi input[type="range"] {
  display: block;
  width: 100%;
  height: 20px;
  margin: 0;
  accent-color: var(--de-green);
  cursor: pointer;
}

.de-roi input[type="range"]:focus-visible {
  outline: 2px solid var(--de-navy);
  outline-offset: 3px;
}

.de-roi .de-roi-field .de-roi-hint {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 5px 0 0;
}

.de-roi-out + .de-roi-out {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--de-sky-line);
}

.de-roi .de-roi-out .de-roi-cap {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--de-navy);
  margin: 0 0 8px;
}

.de-roi .de-roi-out .de-roi-big {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.2vw, 42px);
  font-weight: 400;
  line-height: 1.05;
  color: var(--de-green-deep);
  margin: 0 0 6px;
}

.de-roi .de-roi-out .de-roi-say {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}

/* The last output is the one the argument turns on, so it gets
   the brand green ground the report's pulled-out finding uses. */
.de-roi-out.is-lead {
  background: var(--de-green-soft);
  border: 1px solid rgba(21, 71, 52, 0.18);
  border-radius: 12px;
  padding: 18px 20px;
  margin-top: 18px;
}

.de-roi-out.is-lead + .de-roi-out { border-top: 0; }

.de-roi .de-roi-out.is-lead .de-roi-big { color: var(--de-green); }

.de-roi .de-roi-foot {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 20px 0 0;
}

@media (max-width: 860px) {
  .de-roi { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .de-roi-panel { transition: none; }
}

/* ============================================================
   11. THE CALCULATOR AS THE PAGE
   ------------------------------------------------------------
   On the first build of /roi the calculator sat third, below a
   hero and a research band, which put two screens of reading in
   front of the only thing on the page a visitor can actually
   use. This lifts it to the top and lets it overlap the hero,
   so the tool is the first object on the page rather than its
   conclusion.

   The overlap is a negative margin on a wrapper rather than
   absolute positioning, so the card still takes part in the
   document flow and the section below it moves with it. The
   section that holds it needs padding-top:0 (set inline on the
   page) or the lift is cancelled by the section's own padding.

   The hero must carry enough bottom padding to have something
   left to overlap - around 150px. If the hero copy ever
   shortens, check this still reads as an overlap and not as a
   card crashing into a headline.
   ============================================================ */

.de-roi-lift {
  position: relative;
  z-index: 2;
  margin-top: clamp(-120px, -7vw, -72px);
}

/* The outputs are the point, so they get the wider column. */
.de-roi-lift .de-roi { grid-template-columns: 0.86fr 1fr; }

/* Lifted off a dark ground, the panels need a deeper shadow than
   they do sitting flat on the sky section. */
.de-roi-lift .de-roi-panel {
  box-shadow: 0 30px 70px rgba(10, 25, 19, 0.18);
}

.de-roi-lift .de-roi-out .de-roi-big {
  font-size: clamp(34px, 5vw, 50px);
}

.de-roi-lift .de-roi-out.is-lead { padding: 22px 24px; }

.de-roi-note {
  margin: 30px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

.de-roi-note a { color: var(--de-navy); }

@media (max-width: 860px) {
  .de-roi-lift { margin-top: -54px; }
  .de-roi-lift .de-roi { grid-template-columns: 1fr; }
  .de-roi-lift .de-roi-out .de-roi-big { font-size: clamp(30px, 8vw, 38px); }
}

/* ============================================================
   12. JC FEEDBACK PASS (16 Sep 2026)
   ------------------------------------------------------------
   Three additions from client feedback on the calculator:

   - .de-roi-subval: a small annualised-salary line under the
     hourly-cost field, so the number reads in whichever unit a
     visitor thinks in (people know their salary, not their
     fully-loaded hourly rate).

   - .de-roi-out.is-bright: a second highlighted output (gold,
     distinct from the green .is-lead "Returned in year one" at
     the bottom) for the new lead output, so the calculator
     argues both directions - what waiting costs, and what
     speed wins back - rather than only the cost side.
   ============================================================ */

.de-roi-subval {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: -2px 0 10px;
}

.de-roi-subval span { font-weight: 600; color: var(--de-navy); }

.de-roi-out.is-bright {
  background: linear-gradient(135deg, rgba(238,212,132,0.24), rgba(238,212,132,0.06));
  border: 1px solid rgba(218,170,0,0.3);
  border-radius: 12px;
  padding: 18px 20px;
}

/* This is the first output, so nothing above needs suppressing; this
   only cancels the border/margin the generic ".de-roi-out + .de-roi-out"
   rule would otherwise add to the plain output directly below it. */
.de-roi-out.is-bright + .de-roi-out {
  border-top: 0;
  margin-top: 18px;
  padding-top: 0;
}

.de-roi .de-roi-out.is-bright .de-roi-cap { color: var(--de-gold-deep); }
.de-roi .de-roi-out.is-bright .de-roi-big { color: var(--de-gold-deep); }