/* Responsive showcase primitives recomposed for FLOW DESK. */
.vxk-flow__inner { max-width: 1240px; margin: 0 auto; }
.vxk-flow__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
.vxk-flow__tile { position: relative; overflow: hidden; padding: 24px; border-radius: 28px; }
.vxk-flow__tile h3 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.vxk-flow__time { background: var(--vx-color-1); color: var(--vx-color-4); padding-bottom: 0; }
.vxk-flow__time strong { display: block; margin-top: 18px; font-size: clamp(52px, 6vw, 88px); line-height: 1.1; letter-spacing: -.02em; font-weight: 500; }
.vxk-dash__inner { max-width: 1240px; margin: 0 auto; }
.vxk-dash__frame { display: grid; gap: 12px; padding: clamp(10px, 1.4vw, 16px); border-radius: clamp(22px, 3vw, 36px); background: var(--vx-color-1); position: relative; margin-top: 58px; }
.vxk-dash__card { position: relative; overflow: hidden; padding: 18px 20px; border-radius: clamp(18px, 2vw, 26px); background: var(--vx-color-4); color: var(--vx-color-1); }
.vxk-dash__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vxk-metrics__inner { max-width: 1240px; margin: 0 auto; }
.vxk-metrics__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); gap: 16px; }
.vxk-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 22px; border-radius: 26px; color: var(--vx-color-4); min-width: 0; }
.vxk-tile--accent { background: var(--vx-color-2); }
.vxk-tile--second { background: var(--vx-color-3); }
.vxk-tile--light { background: var(--vx-color-1); }
.vxk-tile--dark { background: color-mix(in srgb, var(--vx-color-4) 88%, var(--vx-color-1)); color: var(--vx-color-1); }
.vxk-tile--wide { grid-column: span 2; }
.vxk-tile--tall { grid-row: span 2; }
.vxk-reach__inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; }
.vxk-reach__side { display: grid; gap: 16px; grid-template-rows: auto 1fr; }
.vxk-reach__tile { padding: clamp(22px, 2.6vw, 30px); border-radius: clamp(22px, 3vw, 34px); background: var(--vx-color-4); color: var(--vx-color-1); }
@media (max-width: 960px) {
  .vxk-flow__grid { grid-template-columns: 1fr; }
  .vxk-metrics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vxk-tile--tall { grid-row: auto; }
}
@media (max-width: 900px) {
  .vxk-dash__grid, .vxk-reach__inner { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .vxk-metrics__grid { grid-template-columns: 1fr; }
  .vxk-tile--wide { grid-column: auto; }
  .vxk-tile { min-height: 240px; }
}