/* v26: product cards. White cards, a stippled dust halo behind each view, one spectrum. The industry card is the illustration. */
.v20 .card.pc { background: #fff; }
.pc .stipple { position: absolute; z-index: -1; pointer-events: none; }
.pc .halo { left: -6%; width: 112%; bottom: -14%; height: 92%; }
.c-wide.pc, .c-narrow.pc { min-height: 620px; } .c-third.pc { min-height: 520px; }
.pc .appwin { top: 250px; }
.pc .sapgui { left: 18px; right: 18px; bottom: 22px; }
.pc-chart { position: absolute !important; left: 20px !important; right: 20px !important; bottom: 22px !important; }
.pc-chart .bars { height: 170px; }
.ind-card .ind { left: -4%; width: 108%; top: 17%; height: 66%; }
.ind-chip { position: absolute; left: 20px; right: 20px; bottom: 22px; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px -18px rgba(10, 25, 80, .4), 0 0 0 1px rgba(10, 37, 64, .05); font-size: 13.5px; }
.ind-chip.in { animation: icIn .5s cubic-bezier(.2, .8, .2, 1) .35s both; } @keyframes icIn { from { opacity: 0; transform: translateY(8px); } }
.ic-k { display: flex; align-items: center; gap: 8px; color: var(--ink); } .ic-k b { font-weight: 600; }
.ic-dot { width: 8px; height: 8px; border-radius: 50%; background: #2f6bff; } .ic-mod { margin-left: auto; padding: 2px 7px; border-radius: 6px; background: #eef2f8; font: 600 11px var(--mono); color: var(--slate); }
.ic-t { margin: 8px 0 10px; color: var(--ink); }
@media (max-width: 960px) { .pc .halo { display: none; } .ind-card { min-height: 520px; } .ind-card .ind { top: 18%; height: 56%; } .pc-chart { position: relative !important; inset: auto !important; margin-top: 20px; } }
.ind-card { overflow: hidden; }
.ind-card .ind { left: 0; width: 100%; top: 0; height: 100%; }
.arc-chip { position: absolute; left: 0; top: 0; z-index: 2; display: inline-flex; align-items: center; gap: 7px; margin: -36px 0 0 -40px; padding: 7px 11px; border-radius: 9px; white-space: nowrap;
  background: rgba(255,255,255,.95); box-shadow: 0 12px 26px -12px rgba(10,25,80,.45), 0 0 0 1px rgba(10,37,64,.05); font-size: 12.5px; font-weight: 500; color: var(--ink); opacity: 0; pointer-events: none; }
.arc-chip i { width: 14px; height: 14px; border-radius: 4px; }
.ind-card h3, .ind-card .more { position: relative; z-index: 3; } .ind-card .expand { z-index: 4; }
.ind-card .ind-chip { z-index: 3; }
.pc .appwin { top: 214px; }
.c-wide.pc, .c-narrow.pc { min-height: 580px; }
/* full-bleed river under the pricing steps */
.journey .j-river { position: absolute !important; left: 50% !important; width: 100vw !important; transform: translateX(-50%); bottom: -190px; height: 420px !important; opacity: .85;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.journey { overflow: hidden; padding-bottom: 200px; }
/* trust strip */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fbfcff; }
.trust-in { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 14px 24px; padding-top: 22px; padding-bottom: 22px; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.trust-in span { display: inline-flex; align-items: center; gap: 10px; } .trust-in i { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #22b8ff, #2f6bff, #7b5cff); box-shadow: inset 0 0 0 5px #fbfcff; }
@media (max-width: 960px) { .trust-in { grid-template-columns: 1fr 1fr; justify-content: start; } .journey .j-river { height: 260px !important; bottom: -110px; } .journey { padding-bottom: 130px; } }
.journey .fine { position: relative; z-index: 2; display: inline-block; margin-left: 48px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--slate); }
/* v28 audit fixes */
.pc-chart .bars { height: 118px; }
.c-third.pc { min-height: 540px; }
.decision { width: 360px; }
.d-row span { flex: none; }
.v20 .c-full { min-height: 720px; }
[data-stage="loop"] .ev-scene .sapgui.big { right: 120px; }
/* v30: the three small cards. Vibrant Chrome silk inside, behind the view; a pale haze outside, past the card edges. */
.bento { position: relative; isolation: isolate; }
.bento > .card { z-index: 1; }
.trio-river { position: absolute; z-index: 0; pointer-events: none; overflow: hidden; opacity: .34; filter: saturate(.9) brightness(1.08);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pc canvas.mirror { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 38%, #000 56%); mask-image: linear-gradient(180deg, transparent 38%, #000 56%); }
.pc canvas.mirror.no-gl { background: linear-gradient(115deg, #7ed6ff, #2f6bff 40%, #7b5cff 70%, #ff8fc4); clip-path: polygon(0 92%, 50% 74%, 100% 56%, 100% 100%, 0 100%); }
.trio-river #trioRiver { left: -30%; width: 160%; }   /* wider than the screen, so the river rises gently across it */
@media (max-width: 960px) { .trio-river, .pc canvas.mirror { display: none; } }
/* v31: industry card, a dust globe and the four names */
.ind-list { position: absolute; z-index: 3; left: 32px; right: 32px; bottom: 28px; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 12px 14px; }
.ind-list li { display: flex; align-items: center; gap: 9px; white-space: nowrap; font-size: 14.5px; font-weight: 500; color: var(--slate); transition: color .4s; }
.ind-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); opacity: .35; transition: opacity .4s, box-shadow .4s; }
.ind-list li.on { color: var(--ink); } .ind-list li.on::before { opacity: 1; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent); }
/* v32: Stripe-scale grid. Wider, taller cards; the industry card is a tall stage. */
@media (min-width: 961px) {
  .bento-sec .wrap { max-width: 1300px; }
  .bento { padding: 0; gap: 18px; }
  .v20 .c-wide { grid-column: span 7; min-height: 780px; } .v20 .c-narrow { grid-column: span 5; min-height: 780px; }
  .c-third.pc { min-height: 660px; }
  .v20 .c-full { min-height: 760px; }
  .pc-chart .bars { height: 150px; }
}
/* v45: the industry card's point clouds are drawn with WebGL (js/cloud.js); without it the canvas is hidden */
.ind.no-gl { display: none; }