/* ============================================================
   Digital Experts - home Learn screen: Insights tour (2026.10.08)
   The Insights screen steps through six tabs on a loop: Overview,
   Topic trends, Mood, Locations, Answer quality and Time saved.
   Built on the same design pixel unit as the screen, u(n), so it
   scales as one picture. de-insights.js switches the panes; with no
   script, or with reduced motion, the Overview stays put.
   ============================================================ */

.dx .dx-app-ins .dx-ins-tabs { margin-top: calc(20 * var(--u)); gap: calc(22 * var(--u)); }
.dx .dx-app-ins .dx-ins-tabs span { cursor: pointer; transition: color 0.3s ease, box-shadow 0.3s ease; }

.dx .dx-app-ins .dx-app-in { height: calc(652 * var(--u)); } /* room for the tab row */
.dx .dx-ins-panes { display: grid; }
.dx .dx-ins-pane { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(calc(8 * var(--u))); transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s; }
.dx .dx-ins-pane.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s; }
.dx .dx-ins-pane > .dx-app-card { margin-top: calc(22 * var(--u)); }
.dx .dx-ins-panes .dx-ins-grid { margin-top: calc(22 * var(--u)); }
.dx .dx-ins-panes .dx-ins-grid .dx-app-card { display: flex; flex-direction: column; }

.dx .dx-ins-head { display: flex; justify-content: space-between; align-items: baseline; gap: calc(16 * var(--u)); }
.dx .dx-ins-head .dx-ins-cap { margin-bottom: calc(10 * var(--u)); }
.dx .dx-ins-cap2 { margin-top: calc(22 * var(--u)); }
.dx .dx-ins-green { color: #1F9A6C; }
.dx .dx-ins-axis { display: flex; justify-content: space-between; margin-top: calc(8 * var(--u)); font-size: calc(9 * var(--u)); font-weight: 600; letter-spacing: 0.14em; color: #9A9994; }
.dx .dx-ins-quote { margin: calc(16 * var(--u)) 0 0; background: #F3F3F1; border-radius: calc(12 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.5; color: #3D3C38; }
.dx .dx-ins-panes .dx-ins-gap .dx-app-btn { margin-top: auto; }
.dx .dx-ins-panes .dx-ins-gap .dx-ins-quote { margin-bottom: calc(18 * var(--u)); }

/* Topic trends */
.dx .dx-ins-trend { position: relative; }
.dx .dx-ins-key { display: flex; gap: calc(16 * var(--u)); margin: 0; font-size: calc(11.5 * var(--u)); color: #55544F; }
.dx .dx-ins-key em { font-style: normal; display: inline-flex; align-items: center; gap: calc(7 * var(--u)); }
.dx .dx-ins-key em::before { content: ""; width: calc(14 * var(--u)); height: calc(3 * var(--u)); border-radius: 3px; background: currentColor; }
.dx .dx-ins-key .k1::before { background: #1C1B19; }
.dx .dx-ins-key .k2::before { background: #1F9A6C; }
.dx .dx-ins-key .k3::before { background: #E08A3C; }
.dx .dx-ins-trend svg { display: block; width: 100%; height: auto; margin-top: calc(8 * var(--u)); overflow: visible; }
.dx .dx-ins-gl path { stroke: #EFEEE9; stroke-width: 1.4; fill: none; }
.dx .dx-ins-ln { fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.dx .dx-ins-ln.l1 { stroke: #1C1B19; }
.dx .dx-ins-ln.l2 { stroke: #1F9A6C; }
.dx .dx-ins-ln.l3 { stroke: #E08A3C; }
.dx .dx-ins-spark { display: block; width: 100%; height: auto; overflow: visible; }
.dx .dx-ins-tip { position: absolute; left: 50%; top: calc(66 * var(--u)); width: calc(232 * var(--u)); margin: 0; background: #1C1B19; color: #FFFFFF; border-radius: calc(12 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); font-size: calc(12.5 * var(--u)); line-height: 1.45; box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.18); }
.dx .dx-ins-tip small, .dx .dx-ins-rec small { display: block; font-size: calc(9 * var(--u)); font-weight: 600; letter-spacing: 0.16em; color: #B9B8B2; margin-bottom: calc(5 * var(--u)); }

/* Mood */
.dx .dx-ins-mood { display: flex; height: calc(16 * var(--u)); border-radius: calc(16 * var(--u)); overflow: hidden; background: #EFEEE9; margin-top: calc(4 * var(--u)); }
.dx .dx-ins-mood i { display: block; height: 100%; }
.dx .dx-ins-mood .m1 { width: 71%; background: #1F9A6C; }
.dx .dx-ins-mood .m2 { width: 22%; background: #C9C7BF; }
.dx .dx-ins-mood .m3 { width: 7%; background: #E08A3C; }
.dx .dx-ins-stats { display: flex; gap: calc(30 * var(--u)); margin-top: calc(18 * var(--u)); }
.dx .dx-ins-stats span { font-size: calc(12 * var(--u)); color: #8B8A86; }
.dx .dx-ins-stats b { display: block; font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: calc(36 * var(--u)); line-height: 1.1; color: #1C1B19; }

/* Locations */
.dx .dx-ins-map svg { display: block; width: 100%; height: auto; margin-top: calc(4 * var(--u)); }
.dx .dx-ins-pins circle { fill: #E08A3C; stroke: rgba(224, 138, 60, 0.22); stroke-width: 9; transform-box: fill-box; transform-origin: center; }
.dx .dx-ins-plab text { font-family: "Inter", system-ui, sans-serif; font-size: 11.5px; font-weight: 600; fill: #1C1B19; }
.dx .dx-ins-map + .dx-app-card .dx-ins-row { grid-template-columns: calc(116 * var(--u)) minmax(0, 1fr); }

/* Answer quality */
.dx .dx-ins-q { display: grid; grid-template-columns: minmax(0, 1fr) calc(70 * var(--u)) calc(96 * var(--u)); align-items: center; height: calc(42 * var(--u)); padding: 0 calc(10 * var(--u)); border-top: calc(1 * var(--u)) solid #EBEAE6; border-radius: calc(10 * var(--u)); font-size: calc(13.5 * var(--u)); transition: background 0.4s ease 1s; }
.dx .dx-ins-q small { font-size: calc(12 * var(--u)); color: #8B8A86; }
.dx .dx-ins-q em { justify-self: end; font-style: normal; font-size: calc(10 * var(--u)); font-weight: 600; letter-spacing: 0.06em; padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: 99px; }
.dx .dx-ins-q .ok { background: #E4F1E9; color: #2B744D; }
.dx .dx-ins-q .lim { background: #F8EEDC; color: #9A6A1C; }
.dx .dx-ins-q .no { background: #F8E3DC; color: #A6492C; }
.dx .dx-ins-pane.is-on .dx-ins-q.is-flag { background: rgba(224, 138, 60, 0.1); }
.dx .dx-ins-rec { display: flex; align-items: center; gap: calc(14 * var(--u)); margin: calc(14 * var(--u)) 0 0; background: #1C1B19; color: #FFFFFF; border-radius: calc(12 * var(--u)); padding: calc(13 * var(--u)) calc(16 * var(--u)); font-size: calc(12.5 * var(--u)); line-height: 1.45; }
.dx .dx-ins-rec small { flex: none; margin: 0; }

/* Time saved */
.dx .dx-ins-even { grid-template-columns: 1fr 1fr; }
.dx .dx-ins-big { margin: calc(14 * var(--u)) 0 calc(8 * var(--u)); font-family: "Playfair Display", Georgia, serif; font-size: calc(28 * var(--u)); line-height: 1; }
.dx .dx-ins-big b { font-weight: 400; font-size: calc(64 * var(--u)); letter-spacing: -0.02em; }
.dx .dx-ins-time .dx-ins-stats { margin-top: auto; padding-top: calc(14 * var(--u)); border-top: calc(1 * var(--u)) solid #EBEAE6; justify-content: space-between; }
.dx .dx-ins-time .dx-ins-stats b { font-family: "Inter", system-ui, sans-serif; font-weight: 600; font-size: calc(17 * var(--u)); }
.dx .dx-ins-cols { display: flex; align-items: flex-end; gap: calc(16 * var(--u)); height: calc(176 * var(--u)); margin-top: calc(10 * var(--u)); border-bottom: calc(1 * var(--u)) solid #EBEAE6; }
.dx .dx-ins-cols i { flex: 1; display: block; background: #C9C7BF; border-radius: calc(6 * var(--u)) calc(6 * var(--u)) 0 0; transform-origin: bottom; }
.dx .dx-ins-cols i.on { background: #1C1B19; }

/* Motion: replays each time a pane comes on */
@keyframes dxInsGrowX { from { transform: scaleX(0); } }
@keyframes dxInsGrowY { from { transform: scaleY(0); } }
@keyframes dxInsDraw { from { stroke-dashoffset: 1; } }
@keyframes dxInsIn { from { opacity: 0; transform: translateY(calc(8 * var(--u))); } }
@keyframes dxInsWipe { from { clip-path: inset(0 100% 0 0); } }
@keyframes dxInsPop { from { opacity: 0; transform: scale(0); } }

.dx .dx-ins-row i { transform-origin: left; }
.dx .dx-ins-pane.is-on .dx-ins-row i { animation: dxInsGrowX 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.dx .dx-ins-pane.is-on .dx-ins-row:nth-of-type(2) i { animation-delay: 0.08s; }
.dx .dx-ins-pane.is-on .dx-ins-row:nth-of-type(3) i { animation-delay: 0.16s; }
.dx .dx-ins-pane.is-on .dx-ins-row:nth-of-type(4) i { animation-delay: 0.24s; }
.dx .dx-ins-pane.is-on .dx-ins-row:nth-of-type(5) i { animation-delay: 0.32s; }
.dx .dx-ins-pane.is-on .dx-ins-gap,
.dx .dx-ins-pane.is-on .dx-ins-work div { animation: dxInsIn 0.5s ease both 0.35s; }
.dx .dx-ins-pane.is-on .dx-ins-work div:nth-child(2) { animation-delay: 0.45s; }
.dx .dx-ins-pane.is-on .dx-ins-work div:nth-child(3) { animation-delay: 0.55s; }
.dx .dx-ins-pane.is-on .dx-ins-work div:nth-child(4) { animation-delay: 0.65s; }
.dx .dx-ins-pane.is-on .dx-ins-ln { animation: dxInsDraw 1.5s ease-in-out both 0.2s; }
.dx .dx-ins-pane.is-on .dx-ins-ln.l2 { animation-delay: 0.32s; }
.dx .dx-ins-pane.is-on .dx-ins-ln.l3 { animation-delay: 0.44s; }
.dx .dx-ins-pane.is-on .dx-ins-spark .dx-ins-ln { animation-delay: 0.6s; }
.dx .dx-ins-pane.is-on .dx-ins-tip { animation: dxInsIn 0.45s ease both 1.6s; }
.dx .dx-ins-pane.is-on .dx-ins-mood { animation: dxInsWipe 1s ease-out both 0.2s; }
.dx .dx-ins-pane.is-on .dx-ins-pins circle { animation: dxInsPop 0.4s cubic-bezier(0.3, 1.4, 0.5, 1) both 0.3s; }
.dx .dx-ins-pane.is-on .dx-ins-pins circle:nth-child(2) { animation-delay: 0.45s; }
.dx .dx-ins-pane.is-on .dx-ins-pins circle:nth-child(3) { animation-delay: 0.6s; }
.dx .dx-ins-pane.is-on .dx-ins-pins circle:nth-child(4) { animation-delay: 0.75s; }
.dx .dx-ins-pane.is-on .dx-ins-pins circle:nth-child(5) { animation-delay: 0.9s; }
.dx .dx-ins-pane.is-on .dx-ins-plab { animation: dxInsIn 0.5s ease both 0.9s; }
.dx .dx-ins-pane.is-on .dx-ins-quote { animation: dxInsIn 0.5s ease both 1.1s; }
.dx .dx-ins-pane.is-on .dx-ins-q { animation: dxInsIn 0.45s ease both 0.15s; }
.dx .dx-ins-pane.is-on .dx-ins-q:nth-of-type(2) { animation-delay: 0.23s; }
.dx .dx-ins-pane.is-on .dx-ins-q:nth-of-type(3) { animation-delay: 0.31s; }
.dx .dx-ins-pane.is-on .dx-ins-q:nth-of-type(4) { animation-delay: 0.39s; }
.dx .dx-ins-pane.is-on .dx-ins-q:nth-of-type(5) { animation-delay: 0.47s; }
.dx .dx-ins-pane.is-on .dx-ins-rec { animation: dxInsIn 0.45s ease both 1.3s; }
.dx .dx-ins-pane.is-on .dx-ins-cols i { animation: dxInsGrowY 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both 0.3s; }
.dx .dx-ins-pane.is-on .dx-ins-cols i:nth-child(2) { animation-delay: 0.42s; }
.dx .dx-ins-pane.is-on .dx-ins-cols i:nth-child(3) { animation-delay: 0.54s; }
.dx .dx-ins-pane.is-on .dx-ins-cols i:nth-child(4) { animation-delay: 0.66s; }

@media (prefers-reduced-motion: reduce) {
  .dx .dx-ins-pane, .dx .dx-ins-pane.is-on { transition: none; transform: none; }
  .dx .dx-ins-pane.is-on * { animation: none !important; }
}

/* ============================================================
   Home hook, Jye's layout (2026.10.08): the question in navy wide
   caps, set tight and centred, split by a square looping image,
   then the reply line in orange so it lands.
   ============================================================ */
.dx .dx-hook.dx-white { --dx-navy: #071F5B; min-height: 0; display: block; text-align: center; color: var(--dx-navy); }
.dx .dx-hook.dx-white .dx-inner { display: block; }
.dx .dx-hook.dx-white .dx-display { max-width: none; margin: 0 auto; font-size: clamp(28px, 4.2vw, 74px); line-height: 0.93; letter-spacing: -0.005em; color: var(--dx-navy); text-wrap: nowrap; }
.dx .dx-hook-line { display: block; }
.dx .dx-hook-img { display: block; width: clamp(220px, 22.5vw, 400px); aspect-ratio: 1; margin: clamp(16px, 1.3vw, 24px) auto clamp(18px, 1.5vw, 26px); overflow: hidden; background: var(--dx-navy); }
.dx .dx-hook-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dx .dx-hook .dx-hook-sub { grid-column: auto; margin: clamp(20px, 2vw, 32px) auto 0; max-width: none; font-size: clamp(19px, 1.7vw, 26px); font-weight: 500; color: var(--dx-orange); }