/* Mercury-style bento feature tiles with animated product mockups */

.bento-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bento {
  background: #F2F5F8;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 26px 24px;
  overflow: hidden;
}
.bento h3 { font-size: 19px; margin-top: 20px; }
.bento p { color: var(--ink-soft); font-size: 15px; margin-top: 6px; }
.bento-dark { background: linear-gradient(160deg, var(--navy-700), var(--navy)); border-color: var(--navy-700); }
.bento-dark h3 { color: #fff; }
.bento-dark p { color: #C2CFE3; }

.mock {
  position: relative;
  height: 210px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.mock-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(10, 29, 55, .10);
  padding: 16px 18px;
  width: min(340px, 92%);
}

/* Tile 1: advisor flow */
.mock-flow { background: radial-gradient(360px 200px at 70% 0%, rgba(37, 99, 235, .10), transparent 70%); }
.flow-node {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0;
}
.flow-node + .flow-node { border-top: 1px dashed var(--line); }
.flow-node b { display: block; font-size: 13.5px; color: var(--navy); font-family: var(--font-display); }
.flow-node small { color: var(--ink-soft); font-size: 12px; }
.flow-node > div { flex: 1; }
.flow-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); flex: none; }
.flow-done .flow-dot { background: var(--green); }
.flow-active .flow-dot { background: var(--blue); animation: pulse 1.6s ease-in-out infinite; }
.flow-check { color: var(--green); font-weight: 700; }
.flow-spin {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2.5px solid var(--sky); border-top-color: var(--blue);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.flow-node:last-child { opacity: .55; }

/* Tile 2: dark orbs (total visibility) */
.mock-orbs { background: transparent; }
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(34px); opacity: .55;
}
.orb-1 { width: 180px; height: 180px; left: 12%; top: -10%; background: #3B82F6; animation: drift 11s ease-in-out infinite alternate; }
.orb-2 { width: 150px; height: 150px; right: 8%; bottom: -18%; background: #7FB0FF; animation: drift 13s ease-in-out infinite alternate-reverse; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(26px, 14px) scale(1.12); } }
.orb-read { position: relative; text-align: center; }
.orb-read b {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 34px;
  color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.orb-read small { color: #A8C5F5; font-size: 13px; }

/* Tile 3: offer summary with flipping toggle */
.mock-offer { background: radial-gradient(360px 200px at 30% 100%, rgba(18, 183, 106, .10), transparent 70%); }
.offer-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; font-size: 13.5px; color: var(--ink-soft);
}
.offer-row + .offer-row { border-top: 1px solid var(--line); }
.offer-row b { color: var(--navy); font-family: var(--font-display); font-size: 14px; }
.mock-toggle {
  width: 38px; height: 22px; border-radius: 999px; background: var(--line);
  position: relative; display: inline-block; flex: none;
  animation: toggleBg 5s ease infinite;
}
.mock-knob {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(10, 29, 55, .3);
  animation: knob 5s ease infinite;
}
@keyframes toggleBg { 0%, 30% { background: var(--line); } 45%, 100% { background: var(--green); } }
@keyframes knob { 0%, 30% { left: 3px; } 45%, 100% { left: 19px; } }
.offer-save {
  margin-top: 10px; text-align: center;
  background: rgba(18, 183, 106, .12); color: #0E8A54;
  font-weight: 700; font-size: 13px; border-radius: 8px; padding: 7px;
  opacity: 0; transform: translateY(6px);
  animation: saveIn 5s ease infinite;
}
@keyframes saveIn { 0%, 50% { opacity: 0; transform: translateY(6px); } 62%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Tile 4: uploading pill */
.mock-upload { background: radial-gradient(360px 200px at 50% 120%, rgba(245, 185, 63, .14), transparent 70%); }
.upload-pill {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 14px 34px rgba(10, 29, 55, .10);
  padding: 14px 24px;
  font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--navy);
}
.upload-pill b { font-variant-numeric: tabular-nums; }
.upload-spin { width: 18px; height: 18px; }
.upload-done .upload-spin { border-color: var(--green); border-top-color: var(--green); animation: none; }

@media (max-width: 940px) {
  .bento-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-active .flow-dot, .flow-spin, .orb-1, .orb-2, .mock-toggle, .mock-knob, .offer-save { animation: none; }
  .offer-save { opacity: 1; transform: none; }
  .mock-toggle { background: var(--green); }
  .mock-knob { left: 19px; }
}