/* AIA-DELIGHT-V1-EXPORT 2026-08-25 — Cresta AI Agent page, "Delight customers" bento section
   Upload to: https://website-assets.cresta.com/ai-agent/delight/aia-delight.css
   Cache-Control: public, max-age=31536000, immutable — publish as aia-delight.v2.css etc when you change it.
   Class convention: aia-delight- prefix. JS-only hooks are data-aia-delight-* attributes, never
   used as style selectors here. */

.aia-delight-root { position: relative; font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; }
.aia-delight-inner { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px,5.6vw,80px); box-sizing: border-box; }
.aia-delight-section { padding: clamp(56px,9vw,120px) 0 clamp(64px,10vw,140px); }

.aia-delight-title { margin: 0 0 48px; text-align: center; font-size: 37px; font-weight: 500; line-height: 120%; letter-spacing: -1.11px; color: #24242A; text-wrap: pretty; }

/* ---- top row: two media cards ---- */
.aia-delight-bento2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.aia-delight-card { display: flex; flex-direction: column; padding: 24px; border: 1px solid #DEE5EB; border-radius: 16px; background: #FBFBFD; box-sizing: border-box; }
.aia-delight-card-media { aspect-ratio: 292 / 220; border-radius: 12px; overflow: hidden; background: #EBF0F5; }
.aia-delight-card-media video { display: block; width: 100%; height: 100%; object-fit: contain; }
.aia-delight-card-title { margin: 28px 0 12px; font-size: 24px; font-weight: 500; line-height: 120%; letter-spacing: -0.72px; color: #24242A; }
.aia-delight-card-body { margin: 0; font-size: 14px; font-weight: 400; line-height: 160%; color: #3C3C47; text-wrap: pretty; }

.aia-delight-more { display: inline-flex; align-items: center; gap: 4px; width: fit-content; margin-top: auto; padding-top: 20px; font-size: 14px; font-weight: 600; color: #24242A; border: none; text-decoration: none; }
.aia-delight-more:hover { color: #205AE3; }
.aia-delight-more svg { display: block; }

/* ---- bottom row: three tiles ---- */
.aia-delight-bento3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 24px; }
.aia-delight-tile { display: flex; flex-direction: column; min-height: 317px; box-sizing: border-box; border: 1px solid #DEE5EB; border-radius: 16px; background: #FBFBFD; }
.aia-delight-tile--cq { container-type: inline-size; }
.aia-delight-tile-media { height: 186px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0 16px; box-sizing: border-box; overflow: hidden; }
.aia-delight-tile-body { padding: 8px 32px 32px; display: flex; flex-direction: column; flex: 1; }
.aia-delight-tile-title { margin: 0 0 12px; font-size: 24px; font-weight: 500; line-height: 120%; letter-spacing: -0.72px; color: #24242A; }
.aia-delight-tile-title--solo { margin: 0; }

/* channel icons */
.aia-delight-chanrow { display: flex; align-items: center; gap: min(14px,2.4cqw); max-width: 100%; }
.aia-delight-chantile { display: flex; align-items: center; justify-content: center; width: min(73.7px,17cqw); height: min(73.7px,17cqw); flex: none; border: 0.5px solid #DEE5EB; border-radius: 13px; background: #FFFFFF; box-shadow: 0 4.46px 7.93px rgba(208,210,218,.15); cursor: pointer; transition: transform 200ms cubic-bezier(.2,.7,.2,1), box-shadow 200ms cubic-bezier(.2,.7,.2,1), border-color 200ms cubic-bezier(.2,.7,.2,1); }
.aia-delight-chantile:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(10,30,90,.14); border-color: #C4CACF; }
.aia-delight-chantile svg { width: 100%; height: 100%; display: block; }

/* language pills */
.aia-delight-langgrid { display: grid; grid-template-columns: repeat(3,minmax(0,min(96.4px,27cqw))); gap: 12.6px min(18.4px,4cqw); justify-content: center; width: 100%; }
.aia-delight-pill { display: flex; align-items: center; gap: min(12px,2.4cqw); width: 100%; min-width: 0; height: 47.3px; box-sizing: border-box; padding-left: min(12.78px,3cqw); border: 0.5px solid #DEE5EB; border-radius: 999px; background: #FFFFFF; box-shadow: 0 4.46px 7.93px rgba(208,210,218,.15); font-family: 'DM Sans', sans-serif; font-size: min(15px,3.6cqw); font-weight: 500; letter-spacing: -0.01em; color: #24242A; transition: opacity 220ms cubic-bezier(.2,.7,.2,1), transform 220ms cubic-bezier(.2,.7,.2,1); }
.aia-delight-pill[data-out="1"] { opacity: 0; transform: translateY(-6px); }
.aia-delight-flag { width: 26.5px; height: 26.5px; flex: none; border-radius: 50%; background-size: cover; background-position: center; background-repeat: no-repeat; }

/* brand-tuning sliders */
.aia-delight-sliders { height: 186px; flex: none; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 0 32px; box-sizing: border-box; }
.aia-delight-slider-row { display: flex; align-items: flex-start; gap: 12px; }
.aia-delight-slider-label { width: 66px; flex: none; font-family: 'Inter','DM Sans',sans-serif; font-size: 10px; font-weight: 500; line-height: 15.6px; letter-spacing: 0; text-transform: uppercase; color: #808080; }
.aia-delight-slider-track { flex: 1; min-width: 0; }
.aia-delight-slider-surface { position: relative; height: 15.6px; cursor: pointer; touch-action: none; }
.aia-delight-slider-rail { position: absolute; left: 0; right: 0; top: 3.94px; height: 7.73px; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 0.4px #DEE5EB; pointer-events: none; }
.aia-delight-slider-fill { position: absolute; left: 0; top: 3.94px; height: 7.73px; border-radius: 999px; pointer-events: none; }
.aia-delight-slider-thumb { position: absolute; top: 0; width: 15.58px; height: 15.58px; margin-left: -7.79px; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 0.4px #C1C9D2; pointer-events: none; }
.aia-delight-slider-ticks { display: flex; justify-content: space-between; align-items: flex-start; height: 8.83px; margin-top: 5.8px; padding-left: 7.11px; pointer-events: none; }
.aia-delight-tick { width: 0.74px; border-radius: 0.37px; background: #C1CACE; }
.aia-delight-tick--major { height: 8.83px; }
.aia-delight-tick--minor { height: 4.41px; }

@media (max-width: 980px) {
  .aia-delight-bento2, .aia-delight-bento3 { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 720px) {
  .aia-delight-title { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-delight-pill, .aia-delight-chantile { transition: none; }
}