/* Chia Laguna case study, season one (2026.10.21, Nick).
   Built from the Season One report (launch to 15 October 2026). Shows a
   selective slice of the real data and questions, and holds back the full
   report (operations and marketing moves) to drive demo requests.
   Scoped to main.dx-ch. Uses tokens from de-site.css. */

.dx-ch .dx-ch-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--dx-gap-l); }
.dx-ch .dx-ch-asof { margin-top: 14px; color: rgba(237, 228, 211, 0.55); }

/* Themes + real questions */
.dx-ch .dx-ch-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.dx-ch .dx-ch-bars { list-style: none; margin: 0; padding: 0; }
.dx-ch .dx-ch-bars li { display: grid; grid-template-columns: 11em minmax(0, 1fr) 3em; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid rgba(21, 48, 31, 0.12); font-family: var(--dx-sans); font-size: 15px; }
.dx-ch .dx-ch-bars li:last-child { border-bottom: 1px solid rgba(21, 48, 31, 0.12); }
.dx-ch .dx-ch-bars i { display: block; height: 10px; border-radius: 99px; background: var(--dx-green, #15301F); transform-origin: left center; }
.dx-ch .dx-ch-bars b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.dx-ch .dx-ch-bars .is-more { color: rgba(29, 42, 34, 0.55); }
.dx-ch .dx-ch-bars .is-more i { background: repeating-linear-gradient(90deg, rgba(21, 48, 31, 0.18) 0 6px, transparent 6px 10px); }
.dx-ch .dx-ch-sub { margin: 0 0 18px; color: var(--dx-green); }
.dx-ch .dx-ch-bubbles { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.dx-ch .dx-ch-bubbles p { margin: 0; padding: 12px 18px; border-radius: 20px 20px 20px 6px; font-family: var(--dx-sans); font-weight: 500; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.35; max-width: 34ch; color: #1A1416; }
.dx-ch .dx-ch-bubbles p:nth-child(5n+1) { background: var(--dx-lavender, #CBD0F7); }
.dx-ch .dx-ch-bubbles p:nth-child(5n+2) { background: var(--dx-mustard, #E3C860); margin-left: 8%; }
.dx-ch .dx-ch-bubbles p:nth-child(5n+3) { background: #BFD9E8; }
.dx-ch .dx-ch-bubbles p:nth-child(5n+4) { background: var(--dx-orange, #C9583A); color: #fff; margin-left: 12%; }
.dx-ch .dx-ch-bubbles p:nth-child(5n+5) { background: #E8DFCC; }
.dx-ch .dx-ch-bubbles small { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 400; opacity: 0.75; }

/* Digital Locals */
.dx-ch .dx-ch-locals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dx-ch .dx-ch-locals li { padding: 22px 22px 20px; border-radius: 18px; background: rgba(237, 228, 211, 0.08); border: 1px solid var(--dx-cream-line, rgba(237, 228, 211, 0.2)); overflow: hidden; }
.dx-ch .dx-ch-locals li:first-child { background: var(--dx-mustard, #E3C860); border-color: transparent; color: #1A1416; }
/* 2026-10-22: portrait for each Digital Local (Nick). An <img> with its sizing
   inline in the page, so it shows even if this file is cached. */
.dx-ch .dx-ch-locals .dx-ch-local-img { display: block; width: calc(100% + 44px); max-width: none; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; margin: -22px -22px 20px; background-color: rgba(237, 228, 211, 0.12); }
.dx-ch .dx-ch-locals b { display: block; font-family: var(--dx-wide); font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 700; font-size: clamp(28px, 3vw, 42px); line-height: 1; margin-bottom: 14px; }
.dx-ch .dx-ch-locals strong { display: block; font-family: var(--dx-wide); font-stretch: 125%; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.dx-ch .dx-ch-locals span { display: block; margin-top: 4px; font-family: var(--dx-sans); font-size: 14px; opacity: 0.75; }
.dx-ch .dx-ch-locals-cap { margin-top: 16px; color: rgba(237, 228, 211, 0.55); }

/* Deploy: online and on property (2026.10.22, Nick). Two social reels
   (9:16) beside two photos of the QR signs at the bar and front desk. */
.dx-ch .dx-ch-deploy .dx-cs-lead { max-width: 62ch; }
.dx-ch .dx-ch-deploy-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.9fr); grid-template-rows: auto auto; gap: 16px; margin-top: var(--dx-gap-l); }
.dx-ch .dx-ch-reel { grid-row: span 2; position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #1A1416; }
.dx-ch .dx-ch-reel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dx-ch .dx-ch-deploy-img { grid-column: 3; position: relative; margin: 0; border-radius: 18px; overflow: hidden; min-height: 0; background: #E8DFCC; }
.dx-ch .dx-ch-deploy-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dx-ch .dx-ch-deploy-img figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 99px; background: rgba(26, 20, 22, 0.72); color: #fff; font-family: var(--dx-sans); font-size: 13px; font-weight: 600; }
/* 2026-10-23: printed guest guide row (Nick). Two wide photos under the reels. */
.dx-ch .dx-ch-deploy-print { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.dx-ch .dx-ch-deploy-print .dx-ch-deploy-img { grid-column: auto; aspect-ratio: 16 / 9; }
.dx-ch .dx-ch-deploy-list { list-style: none; margin: var(--dx-gap-l) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.dx-ch .dx-ch-deploy-list li { padding-top: 16px; border-top: 1px solid rgba(21, 48, 31, 0.16); font-family: var(--dx-sans); font-size: 15px; line-height: 1.5; color: rgba(29, 42, 34, 0.8); }
.dx-ch .dx-ch-deploy-list strong { display: block; margin-bottom: 4px; color: var(--dx-green); font-weight: 600; }

/* Question to action */
.dx-ch .dx-ch-actions { list-style: none; margin: 0; padding: 0; }
.dx-ch .dx-ch-actions li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.7fr) minmax(0, 1.2fr); gap: 24px; padding: 24px 0; border-top: 1px solid rgba(21, 48, 31, 0.16); align-items: start; }
.dx-ch .dx-ch-actions li:last-child { border-bottom: 1px solid rgba(21, 48, 31, 0.16); }
.dx-ch .dx-ch-actions blockquote { margin: 0; font-family: var(--dx-sans); font-weight: 500; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.3; letter-spacing: -0.01em; }
.dx-ch .dx-ch-actions blockquote small { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; opacity: 0.6; letter-spacing: 0; }
.dx-ch .dx-ch-actions .dx-label { color: var(--dx-green); }
.dx-ch .dx-ch-actions .dx-label em { display: block; margin-top: 4px; font-style: normal; color: var(--dx-orange); }
.dx-ch .dx-ch-actions p { margin: 0; font-family: var(--dx-sans); font-size: 15px; line-height: 1.5; color: rgba(29, 42, 34, 0.8); }

/* Honest by design */
.dx-ch .dx-ch-honest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.dx-ch .dx-ch-chat { padding: 24px; border-radius: 22px; background: rgba(237, 228, 211, 0.06); border: 1px solid var(--dx-cream-line, rgba(237, 228, 211, 0.2)); display: flex; flex-direction: column; gap: 12px; }
.dx-ch .dx-ch-chat p { margin: 0; padding: 12px 16px; border-radius: 18px; font-family: var(--dx-sans); font-size: 16px; line-height: 1.4; max-width: 88%; }
.dx-ch .dx-ch-chat .me { align-self: flex-end; background: var(--dx-cream, #EDE4D3); color: #1A1416; border-radius: 18px 18px 6px 18px; }
.dx-ch .dx-ch-chat .bot { background: #fff; color: #1A1416; border-radius: 18px 18px 18px 6px; }
.dx-ch .dx-ch-chat small { display: block; margin-top: 4px; font-size: 12.5px; opacity: 0.6; }
.dx-ch .dx-ch-chat .pill { display: inline-block; margin-top: 10px; padding: 6px 12px; border-radius: 99px; background: var(--dx-burgundy, #3E0B19); color: #fff; font-size: 13px; font-weight: 600; }
.dx-ch .dx-ch-honest .dx-body { color: var(--dx-cream-70); font-size: var(--dx-t-lead); max-width: 40ch; }

/* The report: held back */
.dx-ch .dx-ch-locked { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dx-ch .dx-ch-locked li { position: relative; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid rgba(21, 48, 31, 0.12); overflow: hidden; min-height: 150px; }
.dx-ch .dx-ch-locked .dx-label { color: var(--dx-orange); margin-bottom: 10px; }
.dx-ch .dx-ch-locked h3 { margin: 0 0 12px; font-family: var(--dx-wide); font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 700; font-size: 17px; line-height: 1.15; text-transform: uppercase; }
.dx-ch .dx-ch-locked p { margin: 0; font-family: var(--dx-sans); font-size: 14px; line-height: 1.5; color: rgba(29, 42, 34, 0.8); filter: blur(5px); user-select: none; }
.dx-ch .dx-ch-locked li::after { content: ""; position: absolute; right: 18px; top: 20px; width: 14px; height: 12px; border-radius: 2px; background: var(--dx-burgundy, #3E0B19); box-shadow: 0 -7px 0 -2px transparent; }
.dx-ch .dx-ch-locked li::before { content: ""; position: absolute; right: 20px; top: 12px; width: 10px; height: 10px; border: 2px solid var(--dx-burgundy, #3E0B19); border-bottom: 0; border-radius: 6px 6px 0 0; }
.dx-ch .dx-ch-cta { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; margin-top: var(--dx-gap-l); padding-top: 24px; border-top: 1px solid rgba(21, 48, 31, 0.16); }
.dx-ch .dx-ch-cta p { margin: 0; font-family: var(--dx-sans); font-weight: 500; font-size: clamp(18px, 1.6vw, 22px); max-width: 46ch; }

@media (max-width: 900px) {
  .dx-ch .dx-ch-stats { grid-template-columns: 1fr 1fr; }
  .dx-ch .dx-ch-split, .dx-ch .dx-ch-honest { grid-template-columns: 1fr; }
  .dx-ch .dx-ch-locals { grid-template-columns: 1fr 1fr; }
  .dx-ch .dx-ch-actions li { grid-template-columns: 1fr; gap: 10px; }
  .dx-ch .dx-ch-locked { grid-template-columns: 1fr; }
  .dx-ch .dx-ch-deploy-grid { grid-template-columns: 1fr 1fr; }
  .dx-ch .dx-ch-reel { grid-row: auto; }
  .dx-ch .dx-ch-deploy-img { grid-column: auto; aspect-ratio: 3 / 2; }
  .dx-ch .dx-ch-deploy-list { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 560px) {
  .dx-ch .dx-ch-deploy-img { grid-column: span 2; }
  .dx-ch .dx-ch-deploy-print { grid-template-columns: 1fr; }
  .dx-ch .dx-ch-deploy-print .dx-ch-deploy-img { grid-column: auto; }
}
@media (max-width: 480px) {
  .dx-ch .dx-ch-bars li { grid-template-columns: 8.5em minmax(0, 1fr) 2.6em; font-size: 14px; }
  .dx-ch .dx-ch-locals { gap: 12px; }
}